html {
    box-sizing: border-box;
}
*, *::before, *::after{
    box-sizing: inherit;
}

@font-face {
    font-family: "Metaphor";
    src:url("../woff2/Metaphor.woff2") format(woff2);
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

body {
    color:var(--text-color);
    background-image: url(/img/site__bg.jpg);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center; 
    font-family: "Metaphor", serif;
    font-weight: 400;
    display: flex;
    flex-direction: column;
    min-height: 100vh; 
    margin: 0
}

:root {
    --text-color: #ffffff;
}

.body__header {
    margin: 20px 0;
}

.header__artist__container {
    padding: 10px 0;
    width: 100%;
}

.artist__container__name {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    width: 100%;
    height: 100%;
    font-size: clamp(32px, 8vw, 64px);
}

.header__release__container {
    width: 100%;
    padding: 10px 0;
}

.container__release__ID {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    width: 100%;
    height: 100%;
    font-size: clamp(16px, 4vw, 32px);
}
.body__main {
    flex:1;

    
    
}
.body__footer {
    width: 100%;
    min-height: 300px;
    background-image: url(/img/water__footer__links__bg.png);
    background-size: cover;  
    background-position: center;  
    width: 100%;
    margin-top: auto;
    background-repeat: no-repeat;
    display: flex;
    justify-content: center;
    align-items:center;
}

.footer__section__link_container {
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    width: 100%;
}



.nav__a__link {
    font-size: clamp(8px, 4vw, 32px);
    margin: 0 clamp(0.5px, 0.35vw, 30px);
    flex-shrink: 0; 
    text-decoration: none;
    color:var(--text-color);
    transition: cubic-bezier(0.25, 1, 0.5, 1) 100ms;
}

.nav__a__link:hover {
    font-size: clamp(14px, 4vw, 38px);
}


.android-device .nav__ul__link {
    transition: none;
}

.android-device .nav__ul__link:hover {
    font-size: clamp(8px, 4vw, 32px);
}