*{
    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: #5d5d69;
    background-image: linear-gradient(135deg, #484b4d 0%, #17171f 100%);
    background-attachment: fixed;
    min-height: 200vw;}

/* 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: #ffffff44;
    box-shadow: 0 0 1vmin 0.1vmin #ffffff1c;
    animation: fade-in-full 2.8s;
    position: fixed;
    z-index: 1;}
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 #888, 0 0 0.3vmin #fff;
    margin-top: 0;
    transition: 0.2s all;
    filter: contrast(1) brightness(0.6) saturate(0);
    color: #666;}
 

@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 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;}}
/* main-layout */
.main-content{
    grid-template-columns: repeat(1, 1fr);
    display: grid;
    position: absolute;
    transition: 0.5s all;
    top: 21vmin;
    left: max(50vw - min(90vw, 120vmin) / 2, 5vw);
    gap: min(5vw, 5vmin);
    width: min(90vw, 120vmin);
    animation: fade-in-full 2s;
    padding-bottom: 5vmin;}
@media (min-width: 63vh){
    .main-content{
        grid-template-columns: repeat(2, 1fr);
    }}
@media (min-width: 100vh){
    .main-content{
        grid-template-columns: repeat(3, 1fr);
    }}


/* Cards */
.song-card{
    color: #eeeeee;
    height: 100%;
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 80% 30%;
    text-shadow: 0 0 1vw rgba(255, 255, 255, 0.5);
    border-radius: min(3vh, 8vw);
    background-color: #ffffff21;
    box-shadow: 0 0 2vmin inset rgb(255, 255, 255, 0.08);
    transition: 0.18s all;
    padding-bottom: 6.5%;}
.song-image{
    width: 72%;
    height: 87%;
    margin: 10% 0 0 10%;
    border-radius: min(1.5vh, 4vw);
transition: 0.1s all;}

.song-details{
    margin: 10% 0 0 0;
    height: 87%;
    width: 90%;
    position: relative;
    color: #ddd;
    left: -9%;
    overflow: hidden;
    font-size: min(3.3vw, 4.1vmin);}
.song-title{
    color: #fff;
    font-size: min(4.6vw, 5vmin);}
.song-artist{
    color: #fff;
    font-size: min(4.1vw, 4.6vmin);}

@media (min-width: 63vh){
.song-details{
    font-size: min(1.7vw, 2.3vmin);
}
.song-title{
    font-size: min(2.2vw, 2.7vmin);
}
.song-artist{
    font-size: min(1.95vw, 2.5vmin);
}}

@media (min-width: 100vh){
.song-details{
    font-size: min(1.1vw, 1.4vmin);
}
.song-title{
    font-size: min(1.5vw, 2.0vmin);
}
.song-artist{
    font-size: min(1.35vw, 1.95vmin);
}}

.song-links{
    grid-column: span 2;
}

.song-icons{
    list-style: none;
    display: grid;
    height: 100%;
    grid-template-columns: repeat(5, 1fr);
    width: 90%;
    margin-left: 5%;
}

.icon{
    background-color: #ffffff99;
    border-radius: 100%;
    margin-left: 20%;
    box-shadow: 0 0 2.5vmin -0.9vmin #ccc, 0 0 4vmin inset #bbb;
    font-size: 1vmin;
    width: 55%;
    height: 64%;
    position: relative;
    top: 20%;
    transition: 0.18s all;
    color: #00000000;}

.icon:hover{
    box-shadow: 0 0 2.5vmin -0.9vmin #ddd, 0 0 4vmin inset #fff;
    transform: scale(1.1);
}

.song-card:hover{
    transform: scale(1.01);
}

.song-image:hover{
    transform: scale(1.02);
}

.article-link{
    text-decoration: none;
    color: #222;
    background-color: #ccc;
    padding: 0.3vmin 1.3vmin;
    border-radius: 3vmin;
    font-size: 1.7vmin;
    transition: 0.18s all;
}

.amuse{
    background-color: rgb(255, 227, 67);
    padding: 0.9vmin 2vmin;
    border-radius: 0.6vmin;
    font-weight: bold;
    box-shadow: 0 0 1.3vmin -0.3vmin rgb(255, 227, 67);
}

.amuse:hover{
    color: white;
}


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