/**
 *     ▗▄▄▖▗▄▄▄▖▗▖  ▗▖▗▄▄▄▖▗▄▄▖  ▗▄▖ ▗▖        ▗▄▄▖▗▄▄▄▖▗▄▄▄▖▗▖ ▗▖▗▄▄▖ 
 *    ▐▌   ▐▌   ▐▛▚▖▐▌▐▌   ▐▌ ▐▌▐▌ ▐▌▐▌       ▐▌   ▐▌     █  ▐▌ ▐▌▐▌ ▐▌
 *    ▐▌▝▜▌▐▛▀▀▘▐▌ ▝▜▌▐▛▀▀▘▐▛▀▚▖▐▛▀▜▌▐▌        ▝▀▚▖▐▛▀▀▘  █  ▐▌ ▐▌▐▛▀▘ 
 *    ▝▚▄▞▘▐▙▄▄▖▐▌  ▐▌▐▙▄▄▖▐▌ ▐▌▐▌ ▐▌▐▙▄▄▖    ▗▄▄▞▘▐▙▄▄▖  █  ▝▚▄▞▘▐▌   
 *                                                                     
 *                                                                     
 *                                                                     
 */
:root {
    color-scheme: light dark;

    --text-color: #1414ff;
    --back-color: #efefef;
    --unhovered-link-color: rgb(177, 177, 177);

    --header-height: 6vw;
}

@media (prefers-color-scheme: dark) {
    :root {
        --text-color: #d2d2d2;
        --back-color: rgb(12, 12, 120);
        --unhovered-link-color: rgb(79, 79, 79);
    }
}

html {
    box-sizing: border-box;
    -ms-overflow-style: none;
    scrollbar-width: none;
    font-family: Arial, Helvetica, sans-serif;
    max-width: 1600px;
    margin: 0 auto;
}

html::-webkit-scrollbar {
    display: none;
}

body {
    background-color: var(--back-color);
    color: var(--text-color);
    min-height: 98vh;
    display: flex;
    flex-direction: column;
}

body::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;

  background-image: url('/images/grain.gif');

  opacity: 0.025;
  mix-blend-mode: overlay;
}

.content {
    width: 70vw;
    max-width: 100%;
    margin: 0 auto;
}

.content-track {
    width: 50vw;
    max-width: 100%;
    margin: 0 auto;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.hero {
    width: 90vw;
    max-width: 100%;
    height: calc(100vh - var(--header-height));
    margin: 0 auto;
    display: grid;
    grid-template-rows: auto 1fr auto;
}

.quote {
    align-self: center;
    justify-self: center;
    text-align: center;
    font-style: italic;
}

.sel-works {
    align-self: end;

}

.twee-paneel {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
}

.twee-paneel-photo {
    width: 90%;
    height: 90%;
    overflow: hidden;
    justify-self: end;
}

.twee-paneel-photo img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.about-index {
    width: 70vw;
    margin: 0 auto;
    display: flex;
    align-items: flex-start;
    flex-direction: row;
    gap: 1em;
}

.about-item {
    flex: 1;

}

.highlight {
    width: 98vw;
    max-width: 100%;
    margin: 0 auto;
    /* display: grid; */

    min-height: 0;

}

.highlight-item-pic {
    width: 100%;
    aspect-ratio: 1 / 1;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.highlight-item {
    margin: 2em;
}

.highlight-item-pic img {
    max-width: 80%;
    max-height: 80%;
    width: auto;
    height: auto;
    object-fit: contain;
}

.section {
    margin: 2em;
}


/**
 *    ▗▄▄▄▖▗▖  ▗▖▗▄▄▖  ▗▄▖  ▗▄▄▖▗▄▄▖  ▗▄▖ ▗▄▄▖ ▗▖ ▗▖▗▖  ▗▖
 *      █   ▝▚▞▘ ▐▌ ▐▌▐▌ ▐▌▐▌   ▐▌ ▐▌▐▌ ▐▌▐▌ ▐▌▐▌ ▐▌ ▝▚▞▘ 
 *      █    ▐▌  ▐▛▀▘ ▐▌ ▐▌▐▌▝▜▌▐▛▀▚▖▐▛▀▜▌▐▛▀▘ ▐▛▀▜▌  ▐▌  
 *      █    ▐▌  ▐▌   ▝▚▄▞▘▝▚▄▞▘▐▌ ▐▌▐▌ ▐▌▐▌   ▐▌ ▐▌  ▐▌  
 *                                                        
 *                                                        
 *                                                        
 */

p{
    padding: 0.1em;
}

/**
 *    ▗▄▄▄▖▗▖  ▗▖ ▗▄▖  ▗▄▄▖▗▄▄▄▖ ▗▄▄▖
 *      █  ▐▛▚▞▜▌▐▌ ▐▌▐▌   ▐▌   ▐▌   
 *      █  ▐▌  ▐▌▐▛▀▜▌▐▌▝▜▌▐▛▀▀▘ ▝▀▚▖
 *    ▗▄█▄▖▐▌  ▐▌▐▌ ▐▌▝▚▄▞▘▐▙▄▄▖▗▄▄▞▘
 *                                   
 *                                   
 *                                   
 */

.photo-dual {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
}

.photo-dual-item {
    position: relative;
}

.photo-one {
    display: block;
    width: 100%;
    height: auto;
    transition: opacity 0.3s ease;
}

.photo-two {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.photo-dual-item:hover .photo-one {
    opacity: 1;
}

.photo-dual-item:hover .photo-two {
    opacity: 1;
}

.pasfoto {
    display: block;
    padding: 1rem;
}

.pasfoto img {
    display: block;
    width: 100%;
    height: 100%;
}

/**
 *    ▗▖   ▗▄▄▄▖▗▖  ▗▖▗▖ ▗▖ ▗▄▄▖
 *    ▐▌     █  ▐▛▚▖▐▌▐▌▗▞▘▐▌   
 *    ▐▌     █  ▐▌ ▝▜▌▐▛▚▖  ▝▀▚▖
 *    ▐▙▄▄▖▗▄█▄▖▐▌  ▐▌▐▌ ▐▌▗▄▄▞▘
 *                              
 *                              
 *                              
 */

a {
    color: var(--text-color);
}

a:hover {
    text-decoration: none;
    color: var(--text-color);

}

.track-list a {
    color: var(--text-color);
    transition: color 0.1s ease, transform 0.1s ease, font-size 0.1s ease;
    display: inline-block;
}

.track-list:hover a {
    color: var(--unhovered-link-color);
}

.track-list a:hover {
    color: var(--text-color);
    transform: scale(1.005);
}

.track-list:hover .track-credits {
    color: var(--unhovered-link-color);
}

.track-list-item:hover .track-credits {
    color: grey;
}

/* hidden links */
.hidden-link {
    text-decoration: none;
}

.hidden-link:hover {
    color: var(--text-color);
    transform: skewX(-8deg);
    display: inline-block;
}

.hidden-link2 {
    text-decoration: none;
}

.hidden-link2:hover {
    font-style: italic;
    color: var(--text-color);
}

.hidden-link3 {
    text-decoration: none;
}

.hidden-link3:hover {
    font-style: italic;
    text-decoration: none;
    color: var(--text-color);
}

iframe {
    max-width: 100%;
    margin-top: 5vw;
}

/**
 *     ▗▄▄▖▗▄▄▖ ▗▄▄▄▖▗▄▄▄ ▗▄▄▄▖▗▄▄▄▖    ▗▄▄▖ ▗▖ ▗▖▗▄▄▖ 
 *    ▐▌   ▐▌ ▐▌▐▌   ▐▌  █  █    █      ▐▌ ▐▌▐▌ ▐▌▐▌ ▐▌
 *    ▐▌   ▐▛▀▚▖▐▛▀▀▘▐▌  █  █    █      ▐▛▀▘ ▐▛▀▜▌▐▛▀▘ 
 *    ▝▚▄▄▖▐▌ ▐▌▐▙▄▄▖▐▙▄▄▀▗▄█▄▖  █      ▐▌   ▐▌ ▐▌▐▌   
 *                                                     
 *                                                     
 *                                                     
 */

.credits-filter {
    margin-left: 66.66%;
    margin-bottom: 1em;
}

.track-list-item a {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    width: 100%;
    gap: 1vw;
}

.track-list-item {
    width: 100%;
    text-decoration: none;
    padding: 0.1vw;
    border-bottom: 0.05vw solid grey;
    color: var(--text-color);
}

.track-credits {
    font-size: 0.9em;
    color: grey;
}

.track-list-item a {
    text-decoration: none;
}

.track-title {
    font-style: italic;
}

/* .track-artist {} */


/**
 *    ▗▄▄▄▖▗▄▄▖  ▗▄▖  ▗▄▄▖▗▖ ▗▖    ▗▄▄▄▖▗▖  ▗▖▗▄▄▄▖ ▗▄▖     ▗▄▄▖ ▗▖ ▗▖▗▄▄▖ 
 *      █  ▐▌ ▐▌▐▌ ▐▌▐▌   ▐▌▗▞▘      █  ▐▛▚▖▐▌▐▌   ▐▌ ▐▌    ▐▌ ▐▌▐▌ ▐▌▐▌ ▐▌
 *      █  ▐▛▀▚▖▐▛▀▜▌▐▌   ▐▛▚▖       █  ▐▌ ▝▜▌▐▛▀▀▘▐▌ ▐▌    ▐▛▀▘ ▐▛▀▜▌▐▛▀▘ 
 *      █  ▐▌ ▐▌▐▌ ▐▌▝▚▄▄▖▐▌ ▐▌    ▗▄█▄▖▐▌  ▐▌▐▌   ▝▚▄▞▘    ▐▌   ▐▌ ▐▌▐▌   
 *                                                                         
 *                                                                         
 *                                                                         
 */

/* .info-desc {} */
/* .info-title {} */

.info-credits {
    text-align: right;
}

.info-title {
    font-style: italic;
}

.line {
    width: 100%;
    max-width: 100%;
    border-top: 0.05vw solid grey;
    ;
}

/**
 *    ▗▖ ▗▖▗▄▄▄▖ ▗▄▖ ▗▄▄▄ ▗▄▄▄▖▗▄▄▖ 
 *    ▐▌ ▐▌▐▌   ▐▌ ▐▌▐▌  █▐▌   ▐▌ ▐▌
 *    ▐▛▀▜▌▐▛▀▀▘▐▛▀▜▌▐▌  █▐▛▀▀▘▐▛▀▚▖
 *    ▐▌ ▐▌▐▙▄▄▖▐▌ ▐▌▐▙▄▄▀▐▙▄▄▖▐▌ ▐▌
 *                                  
 *                                  
 *                                  
 */

header {
    height: var(--header-height);
    position: relative;
}

.nav-bar {
    display: flex;
    flex-direction: row;
    justify-content: space-around;

    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 100%;
}

header a {
    text-decoration: none;
    color: unset;
}

header a:hover {
    color: var(--text-color);
}

/**
 *    ▗▄▄▄▖ ▗▄▖  ▗▄▖▗▄▄▄▖▗▄▄▄▖▗▄▄▖ 
 *    ▐▌   ▐▌ ▐▌▐▌ ▐▌ █  ▐▌   ▐▌ ▐▌
 *    ▐▛▀▀▘▐▌ ▐▌▐▌ ▐▌ █  ▐▛▀▀▘▐▛▀▚▖
 *    ▐▌   ▝▚▄▞▘▝▚▄▞▘ █  ▐▙▄▄▖▐▌ ▐▌
 *                                 
 *                                 
 *                                 
 */

footer {
    margin-top: auto;
    display: flex;
    flex-direction: row;
    justify-content: space-around;
}

.footer-item {
    justify-self: flex-start;
    align-self: center;
}

/**
 *    ▗▄▄▖ ▗▄▄▄▖ ▗▄▄▖▗▄▄▖  ▗▄▖ ▗▖  ▗▖ ▗▄▄▖▗▄▄▄▖▗▖  ▗▖▗▄▄▄▖
 *    ▐▌ ▐▌▐▌   ▐▌   ▐▌ ▐▌▐▌ ▐▌▐▛▚▖▐▌▐▌     █  ▐▌  ▐▌▐▌   
 *    ▐▛▀▚▖▐▛▀▀▘ ▝▀▚▖▐▛▀▘ ▐▌ ▐▌▐▌ ▝▜▌ ▝▀▚▖  █  ▐▌  ▐▌▐▛▀▀▘
 *    ▐▌ ▐▌▐▙▄▄▖▗▄▄▞▘▐▌   ▝▚▄▞▘▐▌  ▐▌▗▄▄▞▘▗▄█▄▖ ▝▚▞▘ ▐▙▄▄▖
 *                                                        
 *                                                        
 *                                     F                   
 */

/* phones  */
@media (max-width: 600px) {

    :root {
        --header-height: 16vw;
        --navbar-margin: 0vw;
    }

    .photo-dual {
        grid-template-columns: 1fr;
    }

    .about-index {
        width: 90vw;
        flex-direction: column;
    }

    .content {
        width: 90vw;
    }

    .content-track {
        width: 90vw;
    }

    .highlight {
        width: 98vw;
    }

    .section {
        height: auto;
        min-height: 0;
        margin-bottom: 3rem;
    }

    .twee-paneel {
        display: grid;
        grid-template-columns: 1fr;

    }

    .twee-paneel-photo {
        grid-column: 1;
        grid-row: 1;
        width: 100%;
        height: auto;
        justify-self: center;
        overflow: hidden;
    }

    .twee-paneel-photo img {
        display: block;
        width: 100%;
        height: auto;
        object-fit: contain;
    }

    .twee-paneel article {
        grid-column: 1;
        grid-row: 2;
        width: 100%;
        padding: 1rem 0;
        border-bottom: 0.05vw solid var(--text-color);
    }
}

/* tablet */
@media(min-width: 601px) and (max-width: 1024px) {
    :root {
        --header-height: 7vw;
        --navbar-margin: 0vw;
    }

    .hero {
        width: 80vw;
    }

    * .photo-dual {
        grid-template-columns: repeat(1, 1fr);
    }

    .about-index {
        width: 85vw;
        display: grid;
        grid-template-columns: repeat(2, 1fr);
    }

    .highlight {
        grid-template-columns: repeat(1, 1fr);
    }

    .content {
        width: 85vw;
    }

    .content-track {
        width: 85vw;
    }
}