*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Lexend Deca';}

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

@keyframes appear {0% {opacity: 0;}}

/* Html */
html{
    height: 100%;
    width: 100%;
}

/* Body */
body{
    background-color: #111111;
}

/* Main */
main{
    position: absolute;
    z-index: -1;
    min-height: 200vw;
    width: 100vw;
    background-color: #111111;
    overflow-x: hidden;
}

/* Navigation */
nav{
    left: calc(50vw - 47vmin);
    width: 94vmin;
    height: 9vmin;
    font-size: 3.8vmin;
    margin-top: 6vmin;
    border-radius: 4.5vmin;
    border-top: 0.1vmin solid  #FFFFFF11;
    border-bottom: 0.1vmin solid  #FFFFFF11;
    -webkit-backdrop-filter: blur(4vmin) contrast(120%) brightness(80%);
    backdrop-filter: blur(4vmin) contrast(120%) brightness(80%);
    background-color: #ffffff22;
    box-shadow: 0 0 1vmin 0.1vmin #ffffff1c;
    animation: fade-in-full 3s;
    position: fixed;}
nav > ul{
    width: 94vmin;
    height: 9vmin;
    left: -0.5vmin;
    border-radius: 4.5vmin;
    grid-template-columns: repeat(4, 1fr);
    position: relative;
    gap: 1vmin;
    background-color: #9fa0a300;
    display: grid;}
nav > ul > a{
    width: 23vmin;
    border-radius: 4.2vmin;
    text-shadow: 0 0 1vmin rgba(255, 255, 255, 0.6);
    transition: 0.15s all;
    display: flex;
    color: #dddddd;
    font-weight: bold;
    transition: 0.2s all;
    background-color: #9fa0a300;
    text-decoration: none;
    list-style: none;
    justify-content: center;
    align-items: center;}
nav > ul > a:hover{
    margin-top: -0.5vmin;
    margin-bottom: -0.5vmin;
    box-shadow: 0 0 2.5vmin -1vmin rgba(255, 255, 255, 0.5), 0 0 4vmin inset #ffffff00;
    text-shadow: 0 0 1.5vmin rgba(255, 255, 255, 0.5);
    background-color: #eeeeee;
    color: #ffffff;
    filter: contrast(1);
    transition: 0.2s;
    animation: nav-button-hover 0.8s infinite ease-out;}
nav > ul > .current-page{
    margin-bottom: 0;
    text-shadow: 0 0 1.5vmin #ffffffaa, 0 0 0.1vmin #ffffff88;
    margin-top: 0;
    transition: 0.2s all;
    filter: contrast(1) brightness(0.6) saturate(0);
    color: #999;}
 

.evora-billboard{
    font-family: 'Krona One';
    white-space: nowrap;
    position: absolute;
    overflow: none;
    display: inline;
    color: #ffffff99;
    text-shadow: 0 0 1vmin #FFFFFF99;
    animation: wiggle 4s infinite, fade-and-slide-brandname 2.3s;
    font-size: 14.8vmin;
    left: max(6vw, 50vw - 88vmin / 2);
    top: 38vmin;
}

.lazer{
    position: absolute;
    filter: blur(1vmin);
    font-size: 19vmin;
    font-weight: 900;
    height: 2.5vmin;
    width: max(calc(20vw - 30vmin) , 50vmin);
    left: calc(50vw - 43vmin);
    color: rgba(0,0,0,0);
    border-radius: 20% 80% 80% 20% / 50% 50% 50% 50%;
    mix-blend-mode: overlay;
    opacity: 0;
    animation: lazer 1s infinite, fade-in 2s;
}

.red{
    box-shadow: 0 0 5vmin max(6vmin, calc(2vw + 4vmin)) red, 0 0 1vmin inset red;
    position: absolute;
    top: 45.5vmin;
    background-color: red;}
.blue{
    animation-delay: 295ms;
    box-shadow: 0 0 5vmin max(3.5vmin, calc(1vw + 2.5vmin)) rgb(0, 255, 220), 0 0 1vmin inset rgb(0, 255, 220);
    position: absolute;
    top: 47vmin;
    background-color: rgb(0, 255, 220);}
.purple{
    animation-delay: 625ms;
    box-shadow: 0 0 5vmin max(3.5vmin, calc(1vw + 2.5vmin)) rgb(89, 0, 255), 0 0 1vmin inset rgb(89, 0, 255);
    position: absolute;
    top: 44.5vmin;
    background-color: rgb(89, 0, 255);}
.purple2{
    animation-delay: 650ms;
    box-shadow: 0 0 5vmin 3.5vmin rgb(172, 127, 255), 0 0 1vmin inset rgb(89, 0, 255);
    background-color: rgb(255, 255, 255);
    top: 10vmin;
    position: fixed;}

@keyframes nav-button-hover {
    0% {
        border-radius: 4.3vmin;
        background-color: #9fa0a3;
        text-shadow: 0 0 1.5vmin rgba(255, 255, 255);
        box-shadow: 0 0 2.5vmin -1vmin rgba(255, 255, 255, 0.8), 0 0 4vmin inset #ffffff99;}
    85% {
        border-radius: 5.3vmin;
        background-color: #8d8e91;
        text-shadow: 0 0 2vmin rgba(255, 255, 255, 0);
        box-shadow: 0 0 2.5vmin -1vmin #ffffff33, 0 0 4vmin inset #ffffff33;}
    90% {
        text-shadow: 0 0 2vmin rgba(255, 255, 255, 1);
        border-radius: 5.3vmin;}
    100% {
        border-radius: 4.3vmin;
        background-color: #9fa0a3;
        text-shadow: 0 0 1.5vmin rgba(255, 255, 255);
        box-shadow: 0 0 2.5vmin -1vmin #ffffff22, 0 0 4vmin inset #ffffff77;}}
@keyframes nav-button-current-page {
    0% {
        border-radius: 4.3vmin;
        background-color: #92939688;
        text-shadow: 0 0 1.5vmin rgba(255, 255, 255, 0.4);
        box-shadow: 0 0 2.5vmin -1vmin rgba(255, 255, 255, 0.25), 0 0 4vmin inset #ffffff34;}
    80% {
        border-radius: 5.3vmin;
        background-color: #363738;
        text-shadow: 0 0 2vmin rgba(255, 255, 255, 0);
        box-shadow: 0 0 2.5vmin -1vmin #ffffff60, 0 0 4vmin inset #ffffff33;}
    90% {
        text-shadow: 0 0 2vmin rgba(255, 255, 255, 0.5);
        border-radius: 5.3vmin;}
    100% {
        border-radius: 4.3vmin;
        background-color: #92939688;
        text-shadow: 0 0 1.5vmin rgba(255, 255, 255, 0.4);
        box-shadow: 0 0 2.5vmin -1vmin #ffffff22, 0 0 4vmin inset #ffffff34;}}
@keyframes lazer {
    0%{
        opacity: 0;
        transform: translateX(max(calc(20vw - 100vmin) , 150vmin));}
    14%{
        opacity: 0;}
    34%{
        opacity: 1;}
    39%{
        opacity: 0;}
    100%{
        opacity: 0;
        transform: translateX(min(calc(-40vw + 120vmin) , -120vmin));}}    
@keyframes wiggle {
    0%{
        transform: translate(0vmin, -0.06vmin);
    }
    25%{
        transform: translate(0.06vmin, 0.06vmin);
    }
    40%{
        transform: translate(0vmin, 0.02vmin);
    }
    65%{
        transform: translate(-0.06vmin, -0.04vmin);
    }
    80%{
        transform: translate(0.06vmin, 0.02vmin);
    }
    100%{
        transform: translate(0vmin, -0.04vmin);
    }}
@keyframes fade-in{
    0%{opacity: 0;}
    90%{opacity: 0;}
    100%{opacity: 1;}}
@keyframes fade-in-full{
    0%{transform: translateY(4vmin);}
    100%{transform: translateY(0vmin);}
    0%{opacity: 0;}
    20%{opacity: 0;}
    100%{opacity: 1;}}
@keyframes fade-and-slide-brandname{
    0%{transform: translateY(5vmin);}
    10%{transform: translateY(5vmin);}
    100%{transform: translateY(0vmin);}
    0%{opacity: 0;}
    10%{opacity: 0;}
    100%{opacity: 1;}}
@keyframes icon-red-burst {
    0%{box-shadow: 0 0 2.5vmin -0.9vmin #ffffff, 0 0 4vmin inset #ffffff;}
    5%{box-shadow: 0 0 2.5vmin -0.9vmin #ff5555, 0 0 4vmin inset #ff5555;}
    25%{box-shadow: 0 0 2.5vmin -0.9vmin #ffbbbb, 0 0 4vmin inset #ffbbbb;}
    70%{box-shadow: 0 0 2.5vmin -0.9vmin #ffffff, 0 0 4vmin inset #ffffff;}
    100%{box-shadow: 0 0 2.5vmin -0.9vmin #ffffff, 0 0 4vmin inset #ffffff;}}
@keyframes icon-green-burst {
    0%{box-shadow: 0 0 2.5vmin -0.9vmin #ffffff, 0 0 4vmin inset #ffffff;}
    5%{box-shadow: 0 0 2.5vmin -0.9vmin #00ffdd, 0 0 4vmin inset #00ffdd;}
    25%{box-shadow: 0 0 2.5vmin -0.9vmin #bbfff6, 0 0 4vmin inset #bbfff6;}
    70%{box-shadow: 0 0 2.5vmin -0.9vmin #ffffff, 0 0 4vmin inset #ffffff;}
    100%{box-shadow: 0 0 2.5vmin -0.9vmin #ffffff, 0 0 4vmin inset #ffffff;}}
@keyframes icon-purple-burst {
    0%{box-shadow: 0 0 2.5vmin -0.9vmin #ffffff, 0 0 4vmin inset #ffffff;}
    5%{box-shadow: 0 0 2.5vmin -0.9vmin #5f1bff, 0 0 4vmin inset #5f1bff;}
    25%{box-shadow: 0 0 2.5vmin -0.9vmin #ccb0ff, 0 0 4vmin inset #ccb0ff;}
    70%{box-shadow: 0 0 2.5vmin -0.9vmin #ffffff, 0 0 4vmin inset #ffffff;}
    100%{box-shadow: 0 0 2.5vmin -0.9vmin #ffffff, 0 0 4vmin inset #ffffff;}}
@keyframes icon-orange-burst {
    0%{box-shadow: 0 0 2.5vmin -0.9vmin #ffffff, 0 0 4vmin inset #ffffff;}
    5%{box-shadow: 0 0 2.5vmin -0.9vmin #ff8800, 0 0 4vmin inset #ff8800;}
    25%{box-shadow: 0 0 2.5vmin -0.9vmin #ffd7aa, 0 0 4vmin inset #ffd7aa;}
    70%{box-shadow: 0 0 2.5vmin -0.9vmin #ffffff, 0 0 4vmin inset #ffffff;}
    100%{box-shadow: 0 0 2.5vmin -0.9vmin #ffffff, 0 0 4vmin inset #ffffff;}}
@keyframes icon-blue-burst {
    0%{box-shadow: 0 0 2.5vmin -0.9vmin #ffffff, 0 0 4vmin inset #ffffff;}
    5%{box-shadow: 0 0 2.5vmin -0.9vmin #003fff, 0 0 4vmin inset #003fff;}
    25%{box-shadow: 0 0 2.5vmin -0.9vmin #aec3ff, 0 0 4vmin inset #aec3ff;}
    70%{box-shadow: 0 0 2.5vmin -0.9vmin #ffffff, 0 0 4vmin inset #ffffff;}
    100%{box-shadow: 0 0 2.5vmin -0.9vmin #ffffff, 0 0 4vmin inset #ffffff;}}
@keyframes icon-skyblue-burst {
    0%{box-shadow: 0 0 2.5vmin -0.9vmin #ffffff, 0 0 4vmin inset #ffffff;}
    5%{box-shadow: 0 0 2.5vmin -0.9vmin #00a2ff, 0 0 4vmin inset #00a2ff;}
    25%{box-shadow: 0 0 2.5vmin -0.9vmin #b6e4ff, 0 0 4vmin inset #afe2ff;}
    70%{box-shadow: 0 0 2.5vmin -0.9vmin #ffffff, 0 0 4vmin inset #ffffff;}
    100%{box-shadow: 0 0 2.5vmin -0.9vmin #ffffff, 0 0 4vmin inset #ffffff;}}
            
.home-icons{
    /* HORIZONTAAL */
    justify-items: center;
    /* VERTICAAL */
    align-items: center; 
    list-style: none;
    position: absolute;
    display: grid;
    grid-template-rows: repeat(5, 1fr);
    animation: fade-in-full 2s 0.8s forwards;
    opacity: 0;
    height: 10vmin;
    width: 50vmin;
    left: max(25vw, calc(49vw - 25vh));
    top: 80vmin;
    gap: min(10vh, 8vw);
}

.icon{
    position: relative;
    display: inline-block;
    background-color: #ffffff99;
    border-radius: 100%;
    box-shadow: 0 0 2.5vmin -0.9vmin #ffffff, 0 0 4vmin inset #ffffff;
    font-size: 1vmin;
    height: 12vmin;
    width: 12vmin;
    color: #00000000;}

@media (min-width: 65vh){.home-icons{
    grid-template-rows: none;
    grid-template-columns: repeat(3, 1fr);
    left: min(20vw, );}
.icon{
    left: -1vw;
}}
    
@media (min-width: 125vh){.home-icons{
    grid-template-rows: none;
    grid-template-columns: repeat(5, 1fr);
    left: max(25vw, calc(50vw - 25vh));}}

@media (min-width: 125vh){
.icon{
    left: -25vh;
}}

.youtube{animation: icon-red-burst 1.6s 0.2s infinite;transition: 0.25s;}
.spotify{animation: icon-green-burst 1.7s 0.2s infinite;transition: 0.25s;}
.soundcloud{animation: icon-orange-burst 1.8s 0.2s infinite;transition: 0.25s;}
.applemusic{animation: icon-purple-burst 1.9s 0.2s infinite;transition: 0.25s;}
.facebook{animation: icon-blue-burst 2s 0.2s infinite;transition: 0.25s;}
.bandcamp{animation: icon-skyblue-burst 2.1s 0.2s infinite;transition: 0.25s;}

.youtube:hover{animation: none; box-shadow: 0 0 2.5vmin -0.9vmin #ff5555, 0 0 4vmin inset #ff5555; transform: scale(1.05); background-color: #ff8080;}
.spotify:hover{animation: none; box-shadow: 0 0 2.5vmin -0.9vmin #00ffdd, 0 0 4vmin inset #00ffdd; transform: scale(1.05); background-color: #82ffee;}
.soundcloud:hover{animation: none; box-shadow: 0 0 2.5vmin -0.9vmin #ff8800, 0 0 4vmin inset #ff8800; transform: scale(1.05); background-color: #ffc685;}
.applemusic:hover{animation: none; box-shadow: 0 0 2.5vmin -0.9vmin #5f1bff, 0 0 4vmin inset #5f1bff; transform: scale(1.05); background-color: #bc9fff;}
.facebook:hover{animation: none; box-shadow: 0 0 2.5vmin -0.9vmin #003fff, 0 0 4vmin inset #003fff; transform: scale(1.05); background-color: #92adff;}
.bandcamp:hover{animation: none; box-shadow: 0 0 2.5vmin -0.9vmin #00b7ff, 0 0 4vmin inset #00b7ff; transform: scale(1.05); background-color: #7bcfff;}