:root {
    --nav-size: 360px;
    --x-offset: -100px
}

body {
    margin: 0;
    background-image: radial-gradient(rgb(12, 55, 90), 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 {
    box-sizing: border-box;
    position: relative;
    height: 100vh;
    width: 100vw;
    overflow: hidden;
}

header {
    width: 420px;
    position: fixed;
    top: 24px;
    left: -400px;
    transform: skewX(-30deg);
    padding: 10px 10px 12px 20px;
    background: #cfcbe61f;
    border-radius: 6px;
    z-index: 1;
    transition: .8s ease-out;
    cursor: pointer;
    h2 {
        font-size: 24px;
        font-weight: 100;
        text-wrap-mode: nowrap;
        transform: skewX(30deg);
    }
    p {
        max-width: 70%;
        margin-top: 6px;
        padding-left: 18px;
        transform: skewX(30deg);
    }
    #infobtn {
        position: absolute;
        top: 12px;
        right: 16px;
        width: 32px;
        border-radius: 50%;
        transform: skewX(30deg);
        transition: scale .3s ease-in-out;
        &:hover {
            transition: .15s ease-in-out;
            box-shadow: 0 0 16px white;
            transform: scale(110%)
                       skewX(30deg);
        }
    }
}

@media (max-width: 519px) {
    header {
        width: calc(100vw - 99px);
        left: calc(-1 * 76vw);
        h2 {
            font-size: 22px;
            text-wrap-mode: wrap;
        }
    }
}
@media (max-width: 476px) {
    header {
        width: calc(100vw - 103px);
        left: calc(-1 * 76vw);
        translate: 4px;
        h2 {
            max-width: 85%;
        }
    }
}


/* @media (max-width: 420px) {
    header {
        width: 280px;
        left: -270px;
        h2 {
            max-width: 88%;
        }
    }
} */

#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%;
        animation: spin 60s infinite linear;
        a {
            display: inline-block;
            animation: spin 60s infinite linear reverse;
        }
        img {
            width: 80px;
            transition: .3s ease-in-out;
        }
    }
}

#art { rotate: calc(360deg);
    transform-origin: var(--x-offset) 0;
    img {   rotate: calc(-360deg);
            border-radius: 50%;
            /* border: 8px solid rgb(215, 145, 0); */
            &:hover {
                box-shadow: 0 0 24px rgb(215, 145, 0); } } }

#cat { rotate: calc(60deg);
    transform-origin: var(--x-offset) 0;
    img {   rotate: calc(-60deg); 
            border-radius: 50%;
            /* border: 8px solid rgb(93, 170, 16); */
            &:hover {
                box-shadow: 0 0 24px rgb(93, 170, 16);  } } }

#contact { rotate: calc(120deg);
    transform-origin: var(--x-offset) 0;
    img{    rotate: calc(-120deg); 
            border-radius: 50%;
            /* border: 8px solid rgb(194, 21, 78); */
            &:hover {
                box-shadow: 0 0 24px rgb(248, 73, 132);  } } }

#house { rotate: calc(180deg);
    transform-origin: var(--x-offset) 0;
    img {   rotate: calc(-180deg);
            border-radius: 50%;
            /* border: 8px solid rgb(71, 7, 117); */
            &:hover {
                box-shadow: 0 0 24px rgb(147, 15, 241); } } }

#jazz { rotate: calc(240deg);
    transform-origin: var(--x-offset) 0;
    img {   rotate: calc(-240deg);
            border-radius: 50%;
            /* border: 8px solid rgb(184, 47, 22); */
            &:hover {
                box-shadow: 0 0 24px rgb(250, 41, 41); } } }

#tech { rotate: calc(300deg);
    transform-origin: var(--x-offset) 0;
    img {   rotate: calc(-300deg);
            border-radius: 50%;
            /* border: 8px solid rgb(48, 132, 201); */
            &:hover {
                box-shadow: 0 0 24px rgb(48, 132, 201); } } }

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

#ucsign {
    position: fixed;
    top: 120px;
    right: -30px;
    width: 300px;
    transform: rotate(50deg);
}

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