:root {
    --nav-size: 400px;
    --x-offset: -88px
}

body {
    margin: 0;
    background-image: radial-gradient(rgb(33, 5, 46), black 90%);
    background-size: cover;
    background-position: center;
    color: #cfcbe6;
    font-family: sans-serif;
    box-sizing: border-box;
}

h1, h2, p, a{
    margin: 0;
}

.container {
    position: relative;
    height: 100vh;
    width: 100vw;
    overflow: hidden;
    text-shadow: 1px 1px 3px rgb(121, 5, 150);
}

header {
    position: fixed;
    max-width: 200px;
    top: 24px;
    left: 32px;
    h1 {
        font-size: 32px;
        font-weight: 600;
    }
    h2 {
        font-size: 24px;
        font-weight: 100;
    }
    p {
        margin-top: 6px;
    }
}

#nav {
    top: 50%;
    left: 50%;
    translate: -50% -50%;
    width: var(--nav-size);
    height: var(--nav-size);
    position: relative;
    .navbtn {
        position: absolute;
        right: 0;
        top: 50%;
        transform-origin: var(--x-offset) 0;
        animation: spin 60s infinite linear;
        a {
            display: inline-block;
            width: 112px;
            animation: spin 60s infinite linear reverse;   
        }
        img {
            width: 100%;
            border-radius: 50%;
            transition: .3s ease-in-out;
            &:hover {
                box-shadow: inset 0 0 64px rgb(121, 5, 150),
                                  0 0 24px rgb(121, 5, 150); 
            }
        }
    }
}

/*
#art { rotate: calc(360deg);
    img {   rotate: calc(-360deg); } }
*/

#cat { rotate: calc(72deg);
    img {   rotate: calc(-72deg); } }

#contact { rotate: calc(144deg);
    img{    rotate: calc(-144deg); } }

#jazz { rotate: calc(216deg);
    img {   rotate: calc(-216deg); } }

#tech { rotate: calc(288deg);
    img {   rotate: calc(-288deg); } }

@keyframes spin {
    to { transform: rotate(1turn); }
}

footer {
    position: fixed;
    bottom: 0;
    right: 0;
    display: flex;
    flex-direction: column;
    align-items: start;
    p {
        rotate: 90deg;
        margin-bottom: 18px;
        font-weight: 100;
    }
    img {
        margin: 12px;
        height: 38px;
    }
}