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

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

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

/* Moet dit geen main zijn */
.content {
    width: 70vw;
    max-width: 100%;
    margin: 0 auto;
    /* border: white 5px solid; */
}

table {
    /* border: magenta 5px solid; */
    width: 100%;
}

.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;
    justify-self: start;
    margin-left: 9rem;
}

.twee-paneel {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 2em;
    width: 77%;
    height: auto;
    margin: 3em auto
}

.twee-paneel-photo {
    width: 100%;
    justify-self: stretch;
    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;
    min-height: 0;
}

.section {
    margin: 2em;
}

.article-page {
    width: 72vw;
    align-self: center;
}

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

figcaption {
    color: var(--text-grey);
    font-size: 0.9em;
    margin-top: .25rem;
    font-size: .9em;
    line-height: 1.2;
}

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

.twee-paneel-photo figure {
    position: relative;
    margin: 0;
    width: 100%;
}

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

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

/* Chromium: Chrome, Edge, Opera, Samsung Internet, Brave, etc. */
audio::-webkit-media-controls-playback-rate-button {
    display: none !important;
}

/* WebKit: Safari */
audio::-webkit-media-controls-playback-rate-button {
    display: none !important;
}


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

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: 5em;
    display: flex;
    flex-direction: row;
    justify-content: space-around;
}

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

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

.waveform-player {
    display: block;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
    margin-top: 2em;

    font-family: inherit;
    color: inherit;
    line-height: var(--waveform-line-height, 1.4);

    --wfp-accent: #71717a;
}

.waveform-player * {
    box-sizing: border-box;
}

/* Body */
.waveform-body {
    display: flex;
    flex-direction: column;
    gap: var(--waveform-body-gap, 8px);
}

/* Track */
.waveform-track {
    display: flex;
    align-items: center;
    gap: var(--waveform-track-gap, 12px);
    position: relative;
}

/* Buttons */
.waveform-btn {
    width: var(--wfp-btn-size, 36px);
    height: var(--wfp-btn-size, 36px);
    min-width: var(--wfp-btn-size, 36px);
    border-radius: var(--wfp-btn-radius, 50%);
    border: 2px solid currentColor;
    background: transparent;
    color: var(--text-color, inherit);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    padding: 0;
    opacity: 0.9;
    flex-shrink: 0;
}

.waveform-btn:hover:not(:disabled) {
    opacity: 1;
    transform: scale(1.05);
}

.waveform-btn:disabled {
    cursor: not-allowed;
    opacity: 0.3;
}

.waveform-btn>* {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
}

.waveform-btn svg {
    width: calc(var(--wfp-btn-size, 36px) * 0.45);
    height: calc(var(--wfp-btn-size, 36px) * 0.45);
    fill: currentColor;
    display: block;
}

.waveform-icon-play svg {
    margin-left: 1px;
}

/* Waveform */
.waveform-container {
    flex: 1;
    position: relative;
    cursor: pointer;
    min-width: 0;
    width: 100%;
}

.waveform-container:focus-visible {
    outline: 2px solid currentColor;
}

.waveform-container canvas {
    display: block;
    width: 100%;
    height: 100%;
    max-width: 100%;
    transition: opacity 0.3s ease;
    position: relative;
    z-index: 1;
}

/* Titel  */
.waveform-info {
    display: flex;
    align-items: center;
    gap: 8px;
    /* font-size: 16px; */
    min-height: 20px;
}

.waveform-text {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.waveform-title {
    color: var(--text-color);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-weight: bold;

}

.waveform-artist {
    color: var(--text-color);
    /* font-size: 11px; */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.waveform-time {
    color: var(--text-color);
    /* font-size: 11px; */
    white-space: nowrap;
    flex-shrink: 0;
}

.waveform-bpm {
    color: var(--text-color);
    /* font-size: 11px; */
    white-space: nowrap;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

/* Loading and errors */
.waveform-loading {
    position: absolute;
    inset: 0;
    background: #0000001a;
    z-index: 10;
}

.waveform-error {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #0003;
    z-index: 10;
}

.waveform-error-text {
    font-size: 12px;
    opacity: 0.7;
    text-align: center;
    padding: 0 20px;
}

/* Keyboard focus */
.waveform-btn:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 2px;
}

.waveform-marker:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 1px;
    width: 4px;
}

/* Player focus */
.waveform-player.waveform-focused {
    outline: none;
}

.waveform-player:focus {
    outline: none;
}

.waveform-player:focus-visible {
    outline: 1px solid var(--wfp-accent);
    outline-offset: 1px;
}

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

.version-switch {
    display: flex;
    gap: 8px;
    margin-top: 8px;
}

.version-btn {
    background: transparent;
    border: 1px solid #aaa;
    border-radius: 4px;
    padding: 5px 12px;
    font-size: 12px;
    cursor: pointer;
    opacity: 0.6;
}

.version-btn.active {
    /* background: #222; */
    color: var(--text-color);
    border-color: var(--text-color);
    opacity: 1;
}

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

/* Mobile */
@media (max-width: 480px) {
    .waveform-btn {
        width: var(--wfp-btn-size, 32px);
        height: var(--wfp-btn-size, 32px);
        min-width: var(--wfp-btn-size, 32px);
    }

    .waveform-container {
        min-height: 50px;
    }

    .waveform-info {
        font-size: 12px;
    }

    .waveform-artist,
    .waveform-time,
    .waveform-bpm {
        font-size: 10px;
    }
}

/* Reduced motion accessibility */
@media (prefers-reduced-motion: reduce) {

    .waveform-player *,
    .waveform-player *::before,
    .waveform-player *::after {
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
    }
}


/* Fix waveform player overflowing on mobile */
@media (max-width: 600px) {

    .content table {
        width: 100%;
        table-layout: fixed;
    }

    .content td {
        width: 100%;
        min-width: 0;
        overflow: hidden;
    }

    .waveform-player {
        width: 100%;
        max-width: 100%;
        min-width: 0;
    }

    .waveform-track {
        min-width: 0;
    }

    .waveform-container {
        min-width: 0;
        flex: 1 1 0%;
    }
}

/**
 *    ▗▄▄▖ ▗▄▄▄▖ ▗▄▄▖▗▄▄▖  ▗▄▖ ▗▖  ▗▖ ▗▄▄▖▗▄▄▄▖▗▖  ▗▖▗▄▄▄▖
 *    ▐▌ ▐▌▐▌   ▐▌   ▐▌ ▐▌▐▌ ▐▌▐▛▚▖▐▌▐▌     █  ▐▌  ▐▌▐▌   
 *    ▐▛▀▚▖▐▛▀▀▘ ▝▀▚▖▐▛▀▘ ▐▌ ▐▌▐▌ ▝▜▌ ▝▀▚▖  █  ▐▌  ▐▌▐▛▀▀▘
 *    ▐▌ ▐▌▐▙▄▄▖▗▄▄▞▘▐▌   ▝▚▄▞▘▐▌  ▐▌▗▄▄▞▘▗▄█▄▖ ▝▚▞▘ ▐▙▄▄▖
 *                                                        
 *                                                        
 *                                     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: 100%;
    }

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

    .sel-works {
        margin-left: 0;
    }

    .twee-paneel {
        width: 100%;
        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 article> :first-child {
        margin-top: 0;
    }

    .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: 0.2rem 0;
    }
}

/* 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;
    }

    .sel-works {
        margin-left: 0;
    }

    .twee-paneel {
        display: grid;
        grid-template-columns: 1fr;
        width: 85vw;
    }

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

    .twee-paneel article> :first-child {
        margin-top: 0;
    }

    .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: 0.2rem 0;
    }
}