/* Normalize
********************************** */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: inherit; }


/* General
********************************** */
html { scroll-behavior: smooth; }

body {
    background-color: #f4f5f6;
    background-image: url(https://jsohndata.github.io/magic-color-xxl/images/bg1.webp);
    background-position: center;
    background-attachment: fixed;

    height: 100vh;
    display: flex;
    flex-flow: column wrap;
    align-items: center;
    justify-content: center;
    transition-duration: 1.3s;
    transition-timing-function: cubic-bezier(.97,.15,.82,.75);
    transition-delay: 0.15s;
}

header, nav, main, footer { text-align: center;}


/* Font
********************************** */
h1 { font-family: 'Staatliches', cursive; }
p { font-family: 'Lato', sans-serif; }


/* Container
********************************** */
.container {
    width: 60vw;
    max-width: 400px;
    background-color: rgba(244, 245, 246, 0.76);
    padding: 30px;
    border-radius: 14px;
    position: relative;
    top: -20vh;
    filter: drop-shadow(0 0 2rem #140101f8);
    border: 5px solid rgba(255, 255, 255, 0.301)
}


/* Header
********************************** */
header > h1 { font-size: clamp(4rem, 6vh, 8rem); }


/* Nav / Main
********************************** */
nav > button {
    font-size: 1.3rem;
    font-weight: 600;
    background-color: rgba(236, 244, 244, 0.344);
    padding: 10px 40px;
    border-radius: 14px;
    border: 2px solid #f4f5f646
}

nav > button, 
main > p {
    cursor: pointer;
    transform: scale(1.0);
    transition: transform 0.31s ease-in-out;
}

main > p a { 
    color: #454545;
    text-decoration: none;
}

button:hover,
main > p:hover { 
    transform: scale(1.15);
    filter: drop-shadow(0 0 2rem #ab31fc95);
}


/* Main
********************************** */
main { margin-top: 2vh; }
.spotify { 
    width: 20px;
    position: relative;
    top: 4px;
 }


/* Footer
********************************** */
footer {
    position: relative;
    top: 2.5vh;
}

footer > p a:link,
footer > p a:visited { 
    color: rgba(103, 96, 96, 0.306);
    transition: 1.2s; 
}

footer > p a:hover { 
    color: rgba(24, 244, 244, 0.883);
    filter: drop-shadow(0 0 7px #043843f8);
 }