/*
    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 {
    width: 90%;
    font-size: 18px;
}

.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;
}

.description_text_left {
    color: rgba(0,0,0,.55);
    writing-mode: vertical-lr;
    text-orientation: upright;
    float: left;
    text-align: left;
}

.description_text_right {
    color: rgba(0,0,0,.55);
    writing-mode: vertical-lr;
    text-orientation: upright;
    float: right;
    text-align: left;
}

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

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

.homepage_div_image_right {
    display: block;
    justify-content: left;
}

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

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

.homepage_image_left {
    max-width: 325px;
    width: 100%;
    float: right;
}

.homepage_image_right {
    max-width: 325px;
    width: 100%;
    float: left;
}

.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;
}


/* 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: 1134px) {
    .description_text_left, .description_text_right {
        float: none;
        text-align: center;
        text-decoration: none !important;
        writing-mode: horizontal-tb;
        padding-left: 0%;
        padding-right: 0%;
    }

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

@media (max-width: 1258px) {
    #body {
        width: 100%;
    }
}