:root {
    --background: #1a1a1a;
    --background2: #121212;
    --foreground: #d6d6d6;
    --foreground2: white;
    --accent: #ec3232;
    --accent-trans: #ec323275;
    --accent2: #5a32ec;
    --accent3: #6cff96;
    --accent4: #ff00c1;

    --menu: #12121299;
}

html {
    scroll-behavior: smooth;
}

::selection {
    background: var(--accent-trans);
    color: white;
}

* {
    color: var(--foreground);
    background: none;
    margin: 0;
    padding: 0;
    transition: all 0.25s linear;
}

body {
    background: var(--background);
    display: flex;
    flex-direction: column;

    font-family: OpenSans-Regular, sans-serif;

    #menu {
        user-select: none;
        z-index: 1000;
        align-self: center;
        position: fixed;
        height: 2.75rem;
        padding: 1rem;
        width: calc(100% - 4rem);
        margin: 1rem;
        max-width: 80rem;
        background: var(--menu);
        animation: transformCorners 64s linear infinite;
        box-shadow: 0 0 0.3rem black;
        img {
            height: 100%;
            margin-left: 2rem;
        }

        img:hover {
            animation: transformRadial 32s linear infinite;
        }

        h3 {
            position: absolute;
            left: 7rem;
            top: 0.5rem;
            font-size: 2.5rem;
        }

        .links {
            position: absolute;
            right: 1.5rem;
            top: 1.675rem;
            height: 100%;

            a {
                position: relative;
                padding: 0.75rem 1.5rem;
                background: var(--background);
                text-decoration: none;
                border-radius: 2rem 1rem;
                border: 1px solid #232323;
                transition: all 0.25s linear;
            }

            a:hover {
                color: black;
                background: #ffc0c0;
                border: 1px solid #ffa1a1;
                animation: transformRadial 10s linear infinite;
            }
        }
    }

    .header {
        position: absolute;
        width: 100%;
        height: 100%;
        animation: transformRadial 120s linear infinite;
        z-index: 0;
    }

    .content {
        background: black;

        .footer {
            color: var(--foreground);
            display: flex;
            justify-content: center;
            align-items: center;
            text-align: center;
            padding: 2rem 0;

            opacity: 0.5;

            a {
                color: white;
                text-decoration: none;
            }

            a:hover {
                color: #ffc0c0;
                animation: transformRadial 10s linear infinite;
            }
        }

        .footer:hover {
            opacity: 1;
        }
    }


    .content-header {
        position: absolute;
        width: 100%;
        top: calc(100% + 5rem);
    }
}

@keyframes transformRadial {
    0% {
        filter: hue-rotate(0deg);
    }

    50% {
        filter: hue-rotate(360deg);
    }

    100% {
        filter: hue-rotate(0deg);
    }
}

@keyframes transformCorners {
    0% {
        border-radius: 4rem 1rem 4rem 1rem;
    }

    50% {
        border-radius: 1rem 4rem 1rem 4rem;
    }

    100% {
        border-radius: 4rem 1rem 4rem 1rem;
    }
}