*{
    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;
    justify-items: center;
}

.article{
    left: calc(50vw - 47vmin);
    width: 100%;
    padding: 2vmin;
    max-width: 94vmin;
    font-size: 1.5vmin;
    border-radius: 2vmin;
    border-top: 0.1vmin solid  #FFFFFF11;
    border-bottom: 0.1vmin solid  #FFFFFF11;
    background-color: #fff3;
    box-shadow: 0 0 1vmin 0.1vmin #ffffff1c;
    color: #ddd;
    text-align: center;
}

.article-with-image{
    left: calc(50vw - 47vmin);
    width: 100%;
    padding: 2vmin;
    max-width: 94vmin;
    font-size: 1.5vmin;
    border-radius: 2vmin;
    display: grid;
    grid-template-columns: 70% 6% 24%;
    border-top: 0.1vmin solid  #FFFFFF11;
    border-bottom: 0.1vmin solid  #FFFFFF11;
    background-color: #fff3;
    box-shadow: 0 0 1vmin 0.1vmin #ffffff1c;
    color: #ddd;
}

.article-with-video{
    left: calc(50vw - 47vmin);
    width: 100%;
    padding: 2vmin;
    max-width: 94vmin;
    font-size: 1.5vmin;
    border-radius: 2vmin;
    display: grid;
    grid-template-columns: 40% 6% 54%;
    border-top: 0.1vmin solid  #FFFFFF11;
    border-bottom: 0.1vmin solid  #FFFFFF11;
    background-color: #fff3;
    box-shadow: 0 0 1vmin 0.1vmin #ffffff1c;
    color: #ddd;
}

.article-with-media{
    left: calc(50vw - 47vmin);
    width: 100%;
    padding: 2vmin;
    max-width: 94vmin;
    font-size: 1.5vmin;
    border-radius: 2vmin;
    display: grid;
    grid-template-columns: 40% 6% 54%;
    border-top: 0.1vmin solid  #FFFFFF11;
    border-bottom: 0.1vmin solid  #FFFFFF11;
    background-color: #fff3;
    box-shadow: 0 0 1vmin 0.1vmin #ffffff1c;
    color: #ddd;
}

.platform-content{
    height: 26vmin;
    width: 46vmin;
    border-radius: 1vmin;
    position: relative;
}

.content-play-button{
    position: relative;
    top: calc(-50% - 3vmin);
    left: calc(50% - 3vmin);
    z-index: 1;
    height: 6vmin;
    width: 6vmin;
}

.platform-content-image{
    height: 26vmin;
    width: 46vmin;
    border-radius: 1vmin;
}

iframe{
    height: 26vmin;
    width: 46vmin;
    border-radius: 1vmin;

}

h2{
    color: #999;
    font-size: 2vmin;
}

.article-image{
    height: 20vmin;
    max-height: 20vmin;
    border-radius: 1vmin;
}

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

.soundcloud:hover{
    color: #fff;
    background-color: rgb(255, 105, 0);
    box-shadow: 0 0 1.3vmin -0.3vmin rgb(255, 105, 0);
}

.spotify:hover{
    color: #fff;
    background-color: rgb(0, 235, 118);
    box-shadow: 0 0 1.3vmin -0.3vmin rgb(0, 235, 100);
}

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

.amuse:hover{
    color: white;
}

.article-time{
    left: calc(50vw - 47vmin);
    width: 100%;
    padding: 1vmin;
    max-width: 94vmin;
    font-size: 1.5vmin;
    border-radius: 2vmin;
    border-top: 0.1vmin solid  #FFFFFF11;
    border-bottom: 0.1vmin solid  #FFFFFF11;
    background-color: #8883;
    box-shadow: 0 0 1vmin 0.1vmin #aaa1;
    color: #ddd;
    text-align: center;
}