/* website expected to break at 220px viewportWidth */
*{
    font-family: 'Lexend Deca';
    font-size: 62.5%;
    margin: 0;
    padding: 0;
}

html{
    background-color: rgb(30, 35, 37);
}

body{
    width: 100vw;
    height: 100vh;
    display: grid;
    grid-template-columns: 1fr;
    height: auto;
}

h1{
    font-family: 'Days One', sans-serif;
    filter: drop-shadow(0 0 1vw rgba(255, 255, 255, 0.3));
}

h3{
    display: grid;
    font-size: 1.5vw;
    text-align: center;
    align-items: center;
}

/* footer */
footer{
    display: grid;
    justify-items: center;
    color: rgb(65, 65, 65);
    margin-top: 3vw;
    padding: 1vw;
    opacity: 0;
    animation: footer-fade-in-normal 1s 1s forwards;
}
footer > p{
    font-size: 1.2vw;
}

@keyframes footer-fade-in{
    0%{opacity: 0;}
    100%{opacity: 1;}
}
@keyframes footer-fade-in-normal{
    0%{opacity: 0;}
    100%{opacity: 1;}
}

/* page: index.html */
.main-index{
    display: grid;
    width: 100%;
    justify-items: center;
    margin-top: 1vw;
}

.index-brandname-section{
    color: aliceblue;
    font-size: 6vw;
    justify-items: center;
    display: grid;
    margin-top: 1vw;
    animation: fade-and-slide-brandname 3s;
    text-shadow: 0 0 1vw rgba(255, 255, 255, 0.1);
}


@keyframes fade-and-slide-brandname{
    0%{transform: translateY(5vw);}
    25%{transform: translateY(5vw);}
    100%{transform: translateY(0vw);}
    0%{opacity: 0;}
    25%{opacity: 0;}
    100%{opacity: 1;}
}
@keyframes fade-and-slide-brandname-normal{
    0%{transform: translateY(5vw);}
    25%{transform: translateY(5vw);}
    100%{transform: translateY(0vw);}
    0%{opacity: 0;}
    25%{opacity: 0;}
    100%{opacity: 1;}
}

.index-cards{
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    justify-items: center;
    margin-top: 2vw;
    animation: fade-and-slide-cards 3.5s;
}

.card-welcome{
    width: 22vw;
    background-color: aliceblue;
    box-shadow: 0 0 1vw rgba(255, 255, 255, 0.3);
    padding: 1vw;
    border-radius: 3vw;
    display: grid;
}

.card-events{
    width: 22vw;
    background-color: aliceblue;
    box-shadow: 0 0 1vw rgba(255, 255, 255, 0.3);
    padding: 1vw;
    border-radius: 3vw;
    display: grid;
}

.link-events{
    color: white;
    font-size: 1.2vw;
    padding: 0.75vw 0;
    border-radius: 1.5vw;
    text-align: center;
    text-decoration: none;
    font-weight: bold;
    background-color: rgb(0, 177, 94);
    box-shadow: 0 0 1vw rgb(0, 177, 94, 0.5);
}

.link-labelradar{
    color: white;
    font-size: 1.2vw;
    padding: 0.75vw 0;
    border-radius: 1.5vw;
    text-align: center;
    text-decoration: none;
    font-weight: bold;
    background-color: rgb(0, 177, 94);
    box-shadow: 0 0 1vw rgb(0, 177, 94, 0.5);
}

.link-labelradar:hover, .link-events:hover{
    background-color: rgb(0, 128, 68);
}

@keyframes fade-and-slide-cards{
    0%{transform: translateY(5vw);}
    40%{transform: translateY(5vw);}
    100%{transform: translateY(0vw);}
    0%{opacity: 0;}
    40%{opacity: 0;}
    100%{opacity: 1;}
}

.card-submit{
    width: 22vw;
    background-color: aliceblue;
    box-shadow: 0 0 1vw rgba(255, 255, 255, 0.3);
    padding: 1vw;
    border-radius: 3vw;
    display: grid;
    grid-template-columns: 5fr 1fr;
    gap: 1vw;
    position: relative;
}

.card-submit-info-button{
    text-align: center;
    font-size: 1.2vw;
    padding: 0.75vw 0vw;
    border-radius: 1.5vw;
    border: 0;
    text-decoration: none;
    color: white;
    background-color: rgb(40, 113, 155);
    box-shadow: 0 0 1vw rgb(40, 113, 155, 0.5);
}

.card-submit-info-button:hover{
    cursor: pointer;
    background-color: rgb(30, 82, 112);
}


.card-submit-info{
    position: absolute;
    font-weight: normal;
    color: white;
    top: -12vw;
    padding: 1vw;
    border-radius: 1vw;
    font-size: 1.2vw;
    animation: fade-and-slide 1s;
    background-color: rgb(41, 121, 168);
}
.footer-index{
    animation: footer-fade-in 1s 3s forwards;
}

/* page: normal (non-index pages) */
.normal-brandname-section{
    color: aliceblue;
    font-size: 6vw;
    justify-items: center;
    display: grid;
    animation: smooth-fade-in 1s ease-out forwards;
    opacity: 0; 
    text-shadow: 0 0 1vw rgba(255, 255, 255, 0.1);
}

#page-content{
    display: grid;
    justify-items: center;
    grid-template-columns: 100%;
    width: 100%;
    background-color: rgba(240, 248, 255, 0);
}

.page-content-header{
    font-size: 3vw;
    margin: -0.5vw 0vw 0.5vw 0vw;
    animation: smooth-fade-in 1.4s ease-out 0.2s forwards;
    opacity: 0; 
    font-family: 'Lexend Deca';
    color: white;
    text-shadow: 0 0 1vw rgba(255, 255, 255, 0.4);
}

.article-general{
    display: grid;
    justify-items: center;
    font-size: 3vw;
    width: 80vw;
    border-radius: 3vw;
    animation: smooth-fade-in 1.7s ease-out 0.5s forwards;
    opacity: 0; 
    background-color: rgba(255, 255, 255, 0.9);
    box-shadow: inset 0 0 2vw rgba(255, 255, 255, 0.1), 0 0 1vw rgba(255, 255, 255, 0.1);
}

.section-events{
    display: grid;
    grid-template-columns: 1fr;
}

.article-events{
    grid-template-columns: 1fr;
}

.article-header{
    display: grid;
    justify-items: center;
    width: 96%;
    padding: 0.5vw 0vw;
    margin-top: 1.5vw;
    border-radius: 2vw;
    color: white;
    background-color: rgb(173, 191, 194);
    font-family: 'Lexend Deca';
    font-weight: normal;
}

@keyframes smooth-fade-in{
    0%  {transform: scale(0.92) translateY(5vw); opacity: 0;}
    100%{transform: scale(1.0) translateY(0vw); opacity: 1;}
}

@media (max-width: 120vmin){
    .article-general{
        width: clamp(80vw, calc(70vw + 100px), 96vw);
    }
}

/* page: Events */
.vol5{
    background-color: rgb(255, 169, 154);
}

/* page: About */
.text-block{
    display: grid;
    justify-items: center;
    width: 96%;
    padding: 0.5vw 0vw;
    margin-top: 1.5vw;
    margin-bottom: 1.5vw;
    border-radius: 2vw;
    color: white;
    font-family: 'Lexend Deca';
    font-weight: lighter;
}

.text-block-heading{
    display: grid;
    justify-items: center;
    font-size: 3.5vw;
    width: 96%;
    padding: 0.2vw 0vw;
    margin-top: 1vw;
    border-radius: 1vw;
    color: rgb(26, 28, 29);
    background-color: rgba(255, 255, 255, 0.8);
    font-family: 'Lexend Deca';
    font-weight: bold;
}

.text-block-paragraph{
    display: grid;
    justify-items: center;
    text-align: center;
    font-size: 2.2vw;
    width: 96%;
    padding: 0.5vw 0vw;
    margin-top: 1vw;
    border-radius: 2vw;
    color: rgb(255, 255, 255);
    font-family: 'Lexend Deca';
    font-weight: normal;
}

.music-label{
    background-color: rgb(130, 188, 255);
}

.bronnenlijst{
    background-color: rgb(255, 205, 98);
}

/* Page: Releases */
/* This page should seperate (some) items in 2 columns */
/* It happens when the article container gets over 800px in width */
/* This behaviour happens on window load*/
.article-releases{
    grid-auto-flow: row;
    row-gap: 1.5vw;
    padding-bottom: 1.5vw;
    justify-content: center;
}

.grid-column-2{
    grid-template-columns: repeat(2, 49%);
}
.grid-column-1{
    grid-template-columns: repeat(1, 96%);    
}
.grid-span-2{
    grid-column: span 2;
}

.release-block{
    display: grid;
    justify-items: center;
    width: 96%;
    max-width: 800px;
    padding: 0.5vw 0vw;
    border-radius: 2vw;
    color: white;
    font-family: 'Lexend Deca';
    font-weight: lighter;
    background-color: rgb(146, 155, 155);
}

.release-block-heading{
    display: grid;
    justify-items: center;
    font-size: 2vw;
    width: 92%;
    margin-top: 1vw;
    border-radius: 1vw;
    color: rgb(26, 28, 29);
    background-color: rgba(255, 255, 255, 0.8);
    font-family: 'Lexend Deca';
    font-weight: bold;
}

.release-block-paragraph{
    display: grid;
    justify-items: center;
    text-align: center;
    font-size: 2.2vw;
    width: 96%;
    margin-bottom: 1vw;
    border-radius: 2vw;
    color: rgb(255, 255, 255);
    font-family: 'Lexend Deca';
    font-weight: normal;
}

.spotify-frame{
    border-radius: 1vw;
    max-width: 800px;
    width: 96%;
    border: 0;
}

/* Page: artists */
.article-artist{
    grid-auto-flow: row;
    row-gap: 1.5vw;
    padding-bottom: 1.5vw;
}

.artist-block{
    display: grid;
    justify-items: center;
    width: 96%;
    padding: 0.5vw 0vw;
    border-radius: 2vw;
    color: white;
    font-family: 'Lexend Deca';
    font-weight: lighter;
    background-color: rgb(81, 145, 145);
}

.artist-block-heading{
    display: grid;
    justify-items: center;
    font-size: 2vw;
    width: 96%;
    margin-top: 1vw;
    border-radius: 1vw;
    color: rgb(26, 28, 29);
    background-color: rgba(255, 255, 255, 0.8);
    font-family: 'Lexend Deca';
    font-weight: bold;
}

.artist-block-paragraph{
    display: grid;
    justify-items: center;
    text-align: center;
    font-size: 2.2vw;
    width: 96%;
    margin: 1vw;
    border-radius: 2vw;
    color: rgb(255, 255, 255);
    font-family: 'Lexend Deca';
    font-weight: normal;
}

/* Page: Merchandise */
.article-merchandise{
    grid-auto-flow: row;
    row-gap: 1.5vw;
    padding-bottom: 1.5vw;
}

.merchandise-block{
    display: grid;
    grid-template-columns: 1fr 1fr;
    justify-items: center;
    width: 96%;
    padding: 0.5vw 0vw;
    border-radius: 2vw;
    color: white;
    font-family: 'Lexend Deca';
    font-weight: lighter;
    background-color: rgb(81, 145, 145);
    position: relative;
}

.merchandise-block-heading{
    display: grid;
    justify-items: center;
    font-size: 2vw;
    width: 96%;
    margin-top: 1vw;
    border-radius: 1vw;
    color: rgb(26, 28, 29);
    background-color: rgba(255, 255, 255, 0.8);
    font-family: 'Lexend Deca';
    font-weight: bold;
}

.merchandise-block-paragraph{
    display: grid;
    justify-items: center;
    text-align: center;
    font-size: 2.5vw;
    width: 96%;
    border-radius: 2vw;
    color: rgb(255, 255, 255);
    font-family: 'Lexend Deca';
    font-weight: normal;
}

.merchandise-block > figure{
    display: grid;
    justify-items: center;
    margin: 2vw;
}

.merch{
    width: 70%;
    display: grid;
    justify-items: center;
    border-radius: 1vw;
}

.buy-button{
    border: none;
    font-weight: bold;
    border-radius: 2vw;
    width: 40%;
    height: 30%;
    margin: 2vw;
    font-size: 3vw;
    background-color: rgb(54, 197, 118);
    color: white;
    box-shadow: inset 0 0 4vw rgba(255, 255, 255, 0.3);
}

.buy-button:hover{
    border: none;
    font-weight: bold;
    border-radius: 2vw;
    padding: 2vw 5vw;
    font-size: 3vw;
    background-color: rgb(111, 255, 176);
    box-shadow: inset 0 0 4vw rgba(255, 255, 255);
}

.card-buy-notification{
    position: absolute;
    font-weight: normal;
    color: white;
    padding: 1vw;
    border-radius: 1vw;
    font-size: 1.2vw;
    animation: fade-and-slide 1s;
    background-color: rgb(40, 113, 155);
}

/* NORMAL-NAVIGATION */
/* NORMAL-NAVIGATION */
/* NORMAL-NAVIGATION */
.normal-navigation{
    display: grid;
    font-size: 10vw;
    padding: 0;
    margin: -1vw 0 -2vw;
    animation: smooth-fade-in 0.5s ease-out forwards;
    opacity: 0; 
    font-family: 'Days One', 'Sans Serif';
    background-color: rgba(255, 255, 255, 0);
}

.nav-list{
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    margin: 2vw 10vw;
    border-radius: 2vw;
    justify-items: center;
    padding: 0;
    list-style: none;
    background-color: rgba(255, 255, 255, 0.9);
    box-shadow: inset 0 0 2vw rgba(255, 255, 255), 0 0 1vw rgba(255, 255, 255, 0.3);
}

.nav-item{
    display: grid;
    justify-content: center;
    align-items: center;
    width: 5em;
    height: 1.5em;
    background-color: rgba(0, 255, 255, 0);
}

.nav-link{
    display: grid;
    justify-items: center;
    font-size: 2vw;
    padding: 0.3em 1em;
    width: 7em;
    border-radius: 2vw;
    font-weight: bold;
    font-style: normal;
    text-decoration: none;
    color: rgb(255, 255, 255);
    background-color: rgb(65, 83, 85);
    box-shadow: inset 0 0 2vw rgba(255, 255, 255, 0.3), 0 0 1vw rgba(255, 255, 255);
}


@media (max-width: 120vmin){
    .nav-list{
        margin: 2vw;
    }
    .nav-item{
        height: calc(7vw + 3rem);
    }
    .nav-link{
        padding: calc(0.6rem + 1vw) calc(0rem + 3vw - 0.3rem);
        font-size: calc(0.5rem + 1.6vw);
    }
}


/* FIGURE-NAVIGATION */
/* FIGURE-NAVIGATION */
/* FIGURE-NAVIGATION */
.figure-navigation{
    height: 30vw;
    position: relative;
    animation: fade-and-slide 3s;
}
@keyframes fade-and-slide{
    0%{transform: translateY(5vw);}
    100%{transform: translateY(0vw);}
    0%{opacity: 0;}
    100%{opacity: 1;}
}

.figure-navigation-placeholder{
    height: 100%;
}

.figure-navigation-placeholder-image{
    height: 100%;
    opacity: 0%;
}

/* figure navigation buttons */

.fig-nav-all{
    z-index: 2;
    background-color: rgba(0, 255, 170, 0);
    position: absolute;
    filter: drop-shadow(0 0 1vw rgba(255, 255, 255, 0.3));
}

.fig-nav-a{
    display: contents;
}

.fig-nav-about{
    height: 18%;
    top: 9vw;
    left: 2vw;
}

.fig-nav-releases{
    height: 18%;
    top: 1vw;
    left: 7vw;
}

.fig-nav-artists{
    height: 18%;
    top: 2vw;
    left: 15vw;
}

.fig-nav-merchandise{
    height: 18%;
    top: 8vw;
    left: 21vw;
}

.fig-nav-index{
    height: 40%;
    top: 14.8vw;
    left: 9.4vw;
}
.fig-nav-null{
    height: 100%;
    z-index: 1;
    top: 0;
}

/* figure-navigation-star */
.star{
    height: 100%;
    animation: spin cubic-bezier(0.65, 0, 0.35, 1) 6s infinite;
}
@keyframes spin{
    0%{transform: rotate(0deg);}
    40%{transform: rotate(60deg);}
    50%{transform: rotate(60deg);}
    90%{transform: rotate(0deg);}
    100%{transform: rotate(0deg);}
}


/* figure-navigation-fire */
.fire-all{
    height: 100%;
    transition-duration: 1s;
    clip-path: polygon(64% 87%, 50% 100%, 38% 88%, 32% 73%, 30% 57%, 32% 39%, 39% 20%, 51% 0, 64% 22%, 70% 42%, 71% 59%, 69% 75%);
    animation: animate-clip-path linear 4s infinite;
}


.fire-1{animation-delay: 0.5s;transform: scale(0.8);}
.fire-2{animation-delay: 1.5s;}
.fire-3{animation-delay: 0s;transform: scale(0.85);}
.fire-4{animation-delay: 1s;transform: scale(0.91);}
.fire-big{height: 100%;}

/* animation-fire */
@keyframes animate-clip-path{
    0%{clip-path: polygon(64% 87%, 50% 100%, 38% 88%, 32% 73%, 30% 57%, 32% 39%, 39% 20%, 51% 0, 64% 22%, 70% 42%, 71% 59%, 69% 75%);}
    17%{clip-path: polygon(61% 91%, 50% 100%, 37% 90%, 31% 73%, 29% 56%, 31% 37%, 39% 20%, 51% 0, 63% 23%, 69% 43%, 70% 60%, 68% 76%);}
    33%{clip-path: polygon(61% 94%, 50% 100%, 36% 91%, 28% 76%, 26% 58%, 27% 38%, 34% 22%, 48% 3%, 60% 27%, 65% 47%, 67% 64%, 66% 82%);}
    50%{clip-path: polygon(63% 95%, 50% 100%, 41% 95%, 33% 84%, 29% 65%, 29% 46%, 34% 26%, 46% 6%, 60% 29%, 70% 48%, 70% 65%, 68% 83%);}
    67%{clip-path: polygon(64% 93%, 50% 100%, 41% 93%, 35% 79%, 30% 63%, 31% 42%, 35% 23%, 48% 3%, 61% 22%, 70% 43%, 70% 63%, 70% 80%);}
    83%{clip-path: polygon(64% 93%, 50% 100%, 39% 92%, 33% 79%, 30% 60%, 31% 40%, 36% 21%, 52% 0, 62% 19%, 71% 38%, 73% 57%, 70% 80%);}
    0%{clip-path: polygon(64% 87%, 50% 100%, 38% 88%, 32% 73%, 30% 57%, 32% 39%, 39% 20%, 51% 0, 64% 22%, 70% 42%, 71% 59%, 69% 75%);}
}


.touch-me{
    position: absolute;
    z-index: -1;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    border-radius: 100%;
    background-color: rgb(255, 255, 255);
    animation: touch-me 10s infinite;
    opacity: 0;
}

.animation-delay-3100ms{animation-delay: 3100ms;}
.animation-delay-3200ms{animation-delay: 3200ms;}
.animation-delay-3300ms{animation-delay: 3300ms;}
.animation-delay-3400ms{animation-delay: 3400ms;}

.touch-me-star{
    position: absolute;
    z-index: -1;
    top: 0;
    left: -7.5%;
    height: 100%;
    width: 115%;
    border-radius: 100%;
    background-color: rgb(162, 185, 185);
    animation: touch-me-star-short 3s, touch-me-star 10s infinite 3s;
    opacity: 0;
}

@keyframes touch-me{
    0%{opacity: 1; transform: scale(0);}
    20%{opacity: 0; transform: scale(1.2);}
    100%{opacity: 0; transform: scale(1.2);}
}

@keyframes touch-me-star{
    0%{opacity: 1; transform: scale(0);}
    20%{opacity: 0; transform: scale(1);}
    100%{opacity: 0; transform: scale(1);}
}

@keyframes touch-me-star-short{
    0%{opacity: 1; transform: scale(0);}
    100%{opacity: 0; transform: scale(1);}
}

.show-page-indicator{
    color: white;
    font-size: 1.3vw;
    font-family: 'Days One', sans-serif;
    position: absolute;
    opacity: 0;
    animation: opacity-breathe 10s cubic-bezier(.22,0,.59,1) infinite;
    text-shadow: 0 0 1vw rgba(255, 255, 255, 0.5);
    transition: 0.3s;
}

.focus{
    animation: null;
    opacity: 1;
    transform: translateY(0vw);
}
.unfocus{
    animation: null;
    opacity: 0.3;
    transform: translateY(0vw);
}

@keyframes opacity-breathe{
    0%{opacity: 0; transform: translateY(0.3vw);}
    20%{opacity: 0; transform: translateY(0.3vw);}
    32%{opacity: 0.8; transform: translateY(0vw);}
    38%{opacity: 0.8; transform: translateY(0vw);}
    70%{opacity: 0.35; transform: translateY(0vw);}
    100%{opacity: 0; transform: translateY(0vw);}
}

.show-page-indicator-about{top: 40%;left: -100%; animation-delay: 100ms;}
.show-page-indicator-releases{top: 40%;left: -150%; animation-delay: 200ms;}
.show-page-indicator-artists{top: 40%;left: 100%; animation-delay: 300ms;}
.show-page-indicator-merchandise{top: 40%;left: 100%; animation-delay: 400ms;}

/* change index page to mobile view */
/* when: width smaller than (120% * height) */
@media (max-width: 120vmin){

/* :root{
    --resizeFactor: 2;
    --viewportHalfed: 50vw + 400px;
} */
.index-cards{
    grid-template-columns: repeat(1, 1fr);
    gap: 2vw;
    zoom: calc(1.2 * clamp(1, 2, 3));
}
.main-index{
    margin-top: 4vw;
    zoom: calc(1.15 * clamp(1, 2, 3));
}
.show-page-indicator{
    font-size: 1vw;
}
.index-brandname-section{
    margin-top: clamp(1vw, 300px, 2vw);
    zoom: calc(1.1 * clamp(1, 2, 3));
}
footer{
    zoom: calc(0.9 * clamp(1, 2, 3));
}
.card-submit-info{
    top: -14.5vw;
    height: 220%;
}
}

/* change normal sections to mobile view */
/* when: width smaller (120% * height) */
@media (max-width: 120vmin){
    .normal-brandname-section{
        font-size: calc(5vw + 2em);
    }
    footer > p{
        font-size: calc(1vw + 0.5em);
    }
    footer{
        animation: footer-fade-in-normal 1s 1s forwards;
    }
}

/* scrollbar */
::-webkit-scrollbar {
    width: 0;
}

.hidden{
    display: none;
}

/* background */
#background{
    position: fixed;
    z-index: -2;
    mix-blend-mode: overlay;
    filter:contrast(1) brightness(1) saturate(0);
}
.background-normal{
    animation: background-onload-normal 2s forwards;
    transform: scale(1.3);
}
.background-index{
    animation: background-onload 5s forwards;
    transform: scale(1.7);
}
@keyframes background-onload{
    0%{transform: scale(1.7); filter: contrast(1) brightness(1) saturate(0);}
    100%{transform: scale(1.0); filter: contrast(0.55) brightness(1.3) saturate(2.3);}
}
@keyframes background-onload-normal{
    0%{transform: scale(1.3); filter: contrast(1) brightness(1) saturate(0);}
    100%{transform: scale(1.0); filter: contrast(0.55) brightness(1.3) saturate(2.3);}
}
@media (min-aspect-ratio: 16/9){
    #background{
    width: 100%;
    height: auto;
    }
}
@media (max-aspect-ratio: 16/9){
    #background{
    height: 100%;
    width: auto;
    }
}