:root {
    --font-size: 16px;
    --bg-color: rgb(21, 21, 21);
    --fg-color: rgb(234, 234, 234);
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    width: 100dvw;
    height: 100dvh;
    overflow: hidden;
}

header {
    position: absolute;
    top: 0;

    padding: 0 16px;

    width: 100%;
    height: 48px;

    display: flex;
    align-items: center;
    justify-content: space-between;

    background-color: var(--bg-color);

    color: var(--fg-color);
    font-family: Arial, Helvetica, sans-serif;
    font-size: calc(var(--font-size)*2);
    font-weight: 900;
    letter-spacing: 2px;
}

header .headerImg {
    position: relative;

    width: 42px;
    
    display: flex;
    align-items: center;
    justify-content: center;

    pointer-events: none;
}

header .headerImg img {
    position: absolute;

    animation: rotation 20s linear infinite;
}
header .headerImg img:nth-child(1) {
    width: 32px;
    
    animation-direction: reverse;
}
header .headerImg img:nth-child(2) {
    width: 38px;
}

@keyframes rotation {
    from {transform: rotate(0deg);}
    to {transform: rotate(360deg);}
}

main {
    position: absolute;
    top: 48px;

    width: 100%;
    height: calc(100dvh - 112px);
    overflow-y: scroll;

    background-color: var(--bg-color);
}

nav {
    position: absolute;
    bottom: 0;

    width: 100%;
    height: 64px;

    display: flex;
    align-items: center;
    justify-content: space-around;

    background-color: var(--bg-color);
}

nav .navlink {
    width: 60px;
    height: 100%;

    display: flex;
    flex-flow: column;
    align-items: center;
    justify-content: center;

    border-top: 1px solid var(--bg-color);

    color: var(--fg-color);
    font-family: Arial, Helvetica, sans-serif;
    font-size: calc(var(--font-size)*0.7);
    font-weight: 100;
    letter-spacing: 1px;
    text-decoration: none;
}
nav .navlink.active {border-top: 1px solid var(--fg-color);}

nav .navlink img {
    width: 32px;
    aspect-ratio: 1 / 1;
}

/* Medium devices (landscape tablets, 768px and up) */
@media only screen and (min-width: 768px) {
    :root {
        --font-size: 20px;
    }

    header .headerImg img:nth-child(1) {
        width: 36px;
        
        animation-direction: reverse;
    }
    header .headerImg img:nth-child(2) {
        width: 42px;
    }
}