/*
    Style mailto links differently
    REF: https://stackoverflow.com/questions/10632468/styling-email-link-href-mailto-with-css
*/


/* General */

a:link {
    text-decoration: none !important;
}

details summary > * {
    display: inline;
    vertical-align: middle;
    margin-left: 5px;
}

h1, .center {
    text-align: center;
}

img {
    max-height: 100%;
    max-width: 100%;
}

#body {
    font-size: 18px;
}

.page-width {
    width: 80% !important;
    margin-left: auto;
    margin-right: auto;
}

.avenir-font {
    font-family: 'Avenir', sans-serif;
}

.applemusic {
    width: 100%;
    height: 450px;
}

.bandcamp-album {
    border: 0;
    width: 100%;
    height: 700px;
}

.bandcamp-single {
    border: 0;
    width: 100%;
    height: 592px;
}

/* Songs are part of albums but no playlist */
.bandcamp-song {
    border: 0;
    width: 100%;
    height: 592px;
}

.fixed-width {
    max-width: 500px;
}

.vertical_text {
    color: rgba(0,0,0,.55);
    /* writing-mode: vertical-lr; */
    /* text-orientation: upright; */
    text-decoration: none !important;
    text-align: left;
}

.footer {
    bottom: 0;
    width: 100%;
}

.homepage_div_image {
    display: block;
    justify-content: right;
}

.homepage_div_image:hover img {
    -webkit-filter: grayscale(1) invert(1);
    filter: grayscale(1) invert(1);
}

.homepage_image {
    max-width: 325px;
    width: 100%;
}

.homepage_link {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.homepage_link:hover > * {
    color: black;
}

.image_title {
    text-align: center;
    margin: auto;
    width: 50%;
}

.layout_email[href^="mailto:"], .color-gray { 
    color: rgba(0,0,0,.55);
}

.layout_email[href^="mailto:"]:hover, .to-top:hover { 
    color: black;
}

.nav-item {
    font-size: 20px;
}

.sm-image {
    display: block;
    margin: auto;
    max-height: 500px;
}

.soundcloud-album {
    width: 100%;
    height: 427px;
}

.soundcloud-single {
    width: 100%;
    height: 333px;
}

.local-video {
  width: 100%;
  height: auto;
  display: block;
}

.youtube-solo-video {
    width: 75%;
    aspect-ratio: 16 / 9;
}

.youtube-video {
    width: 100%;
    aspect-ratio: 16 / 9;
}


/* Headerlinks */
::after, ::before {
    box-sizing: border-box;
}

a.headerlink {
    font-size: .8em;
    visibility: hidden;
}

a.headerlink::before {
    content: "\00a0#";  /* Unicode character for NO-BREAK SPACE */
}

h3:hover > a.headerlink {
    visibility: visible;
}

.headerlink:hover {
    text-decoration: none;
}

section {
    scroll-margin-top: 6em;
}

/* Keep nav-bar buttons clustered next to the logo instead of pushed to the far edge, but only when they sit side by side (matches the flex-md-row breakpoint below) */
@media (min-width: 768px) {
    .navbar > .page-width {
        justify-content: flex-start !important;
    }
}

/* Render YouTube widget differently in mobile devices */
@media (max-width: 991px) {
    .logo {
        max-width: 256px;
    }

    .sm-center img {
        display: block;
        margin: auto;
        max-height: 550px;
    }

    .youtube-solo-video {
        width: 100%;
    }
}
@media (max-width: 767px) {
    .vertical_text {
        float: left;
        text-align: center;
        text-decoration: none !important;
        text-orientation: upright;
        writing-mode: vertical-lr;
        padding-left: 0%;
        padding-right: 0%;
        margin-left: 0%;
        margin-right: 0%;
    }

    .homepage_div_image {
        display: flex;
        align-items: center;
        justify-content: center;
        margin-bottom: 10px;
    }

    .homepage_link {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
        gap: 15px;
    }

    .homepage_image {
        width: auto;
        max-width: 275px;
    }
}

@media (min-width:1546px) {
    .text-line-break {
        display: block;
    }
}

@media (max-width: 1545px) {
    .page-width {
        width: 80% !important;
    }

    .text-line-break {
        display: inline;
    }

    .text-line-break::before {
        content: " ";
    }
}

@media (max-width: 1258px) {
    .page-width {
        width: 90% !important;
    }
}