style.css

:root {
    --background: rainbowBackground 30s infinite;
    --text: #ffffff;
    --card: rainbowCard 30s infinite;
    --shadow: #00000080;
    --democracy: #ff2923;
    --horizontality: #ff6400;
    --autonomy: #93952f;
    --property: #22546a;
    --hierarchy: #4f2578;
    --command: #c10061;
    --red: #ff002f;
    --orange: #ff4200;
    --yellow: #ffb900;
    --green: #008339;
    --blue: #2a2f78;
    --purple: #780078;
    --redDark: #ff002f80;
    --orangeDark: #ff420080;
    --yellowDark: #ffb90080;
    --greenDark: #00833980;
    --blueDark: #2a2f7880;
    --purpleDark: #78007880;
    --redDarker: #ff002f40;
    --orangeDarker: #ff420040;
    --yellowDarker: #ffb90040;
    --greenDarker: #00833940;
    --blueDarker: #2a2f7840;
    --purpleDarker: #78007840;
}

@font-face {
    font-family: valorant;
    src: url(./valorant.ttf);
}

@font-face {
    font-family: futura;
    src: url(./futura.ttf);
}

html {
    font-family: futura;
    display: grid;
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to right, #303030 0%, #202020 20%, #202020 80%, #303030 100%);
    scroll-behavior: smooth;
    scrollbar-width: thin;
    animation: rainbowScroll 30s infinite;
}

a,
a:visited,
a:hover,
a:focus,
a:active {
    color: var(--text) !important;
    text-decoration: none;
}

body {
    color: var(--text) !important;
    animation: var(--background);
    text-align: center;
    margin: 0;
    padding: 2vw;
    width: 100% - 2vw;
    height: 100% - 2vw;
}

h1 {
    display: inline-block;
    font-family: valorant;
    font-size: 6vw;
    margin: 0;
    animation: rainbowText 30s infinite;
    text-shadow: 0 0 1vw var(--shadow);
    cursor: pointer;
    transition: 0.2s linear;
    transform: scale(0.95);
}

h1:hover {
    transform: scale(1);
}

h2 {
    font-size: 3vw;
    margin: 2vh;
    text-shadow: 0 0 0.5vw var(--shadow);
}

p {
    font-size: 1.5vw;
    text-shadow: 0 0 0.25vw var(--shadow);
}

li {
    text-align: left;
    font-size: 1vw;
    text-shadow: 0 0 0.25vw var(--shadow);
}

.capitalLetter {
    font-size: 8vw;
}

.explanation {
    animation: var(--card);
    padding: 3vw;
    width: 60vw;
    margin: 1vh auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    grid-gap: 2vw;
    clip-path: polygon(4vw 0, 100% 0, 100% calc(100% - 4vw), calc(100% - 4vw) 100%, 0 100%, 0 4vw);
    align-items: center;
}

.explanationQuadrant {
    filter: drop-shadow(0 0 1vw var(--shadow));
}

#hexagon {
    cursor: pointer;
    transition: 0.2s linear;
}

#hexagon:hover {
    transform: scale(1.05);
}

.corner {
    font-family: futura;
    font-size: 1.5vw;
    margin: 2vh auto;
    width: 60%;
    padding: 1vw;
    clip-path: polygon(1.5vw 0, 100% 0, 100% calc(100% - 1.5vw), calc(100% - 1.5vw) 100%, 0 100%, 0 1.5vw);
    cursor: pointer;
    transition: 0.2s linear;
}

.corner:hover {
    transform: scale(1.05);
    filter: brightness(1.25);
}

.socialsicon {
    height: 4vw;
    width: 4vw;
    margin: 0 1vw;
    display: inline-block;
    cursor: pointer;
    border-radius: 100%;
    transition: 0.1s ease-in-out;
}

.socialsicon:hover {
    scale: 1.1;
}

#question {
    background-color: #202020;
    font-size: 2vw;
    padding: 3vw;
    width: 60vw;
    min-height: 20vh;
    display: grid;
    align-items: center;
    margin: 1vh auto;
    clip-path: polygon(2vw 0, 100% 0, 100% calc(100% - 2vw), calc(100% - 2vw) 100%, 0 100%, 0 2vw);
}

.button {
    color: var(--text);
    display: block;
    text-align: center;
    font-family: futura;
    font-size: 2vw;
    padding: 0.75vw;
    width: 35vw;
    margin: 1vh auto;
    animation: var(--card);
    border-style: none;
    cursor: pointer;
    clip-path: polygon(0 0, 100% 0, 100% calc(100% - 1.75vw), calc(100% - 1.75vw) 100%, 0 100%, 0 0);
    transition: 0.2s linear;
}

.button:hover {
    transform: scale(1.025) translate(0.75vw);
    filter: brightness(1.25);
}

.backButton {
    color: var(--text);
    display: block;
    text-align: center;
    font-family: futura;
    font-size: 1.5vw;
    padding: 0.5vw;
    width: 15vw;
    margin: 1vh auto;
    background-color: #202020;
    border-style: none;
    cursor: pointer;
    clip-path: polygon(0 0, 100% 0, 100% 100%, 100% 100%, 1vw 100%, 0 calc(100% - 1vw));
    transition: 0.2s linear;
}

.backButton:hover {
    transform: scale(1.05) translate(-0.25vw);
    filter: brightness(1.25);
}

#results {
    background-color: #202020;
    margin: 0 auto;
    clip-path: polygon(4vw 0, 100% 0, 100% calc(100% - 4vw), calc(100% - 4vw) 100%, 0 100%, 0 4vw);
}

@keyframes rainbowText {
    0% {
        text-shadow: 0.375vw 0 var(--red);
    }

    16.67% {
        text-shadow: 0.375vw 0 var(--orange);
    }

    33.33% {
        text-shadow: 0.375vw 0 var(--yellow);
    }

    50% {
        text-shadow: 0.375vw 0 var(--green);
    }

    66.67% {
        text-shadow: 0.375vw 0 var(--blue);
    }

    83.33% {
        text-shadow: 0.375vw 0 var(--purple);
    }

    100% {
        text-shadow: 0.375vw 0 var(--red);
    }
}

@keyframes rainbowScroll {
    0% {
        scrollbar-color: var(--red) #000000;
    }

    16.67% {
        scrollbar-color: var(--orange) #000000;
    }

    33.33% {
        scrollbar-color: var(--yellow) #000000;
    }

    50% {
        scrollbar-color: var(--green) #000000;
    }

    66.67% {
        scrollbar-color: var(--blue) #000000;
    }

    83.33% {
        scrollbar-color: var(--purple) #000000;
    }

    100% {
        scrollbar-color: var(--red) #000000;
    }
}

@keyframes rainbowCard {
    0% {
        background-color: var(--redDark);
    }

    16.67% {
        background-color: var(--orangeDark);
    }

    33.33% {
        background-color: var(--orangeDark);
    }

    50% {
        background-color: var(--greenDark);
    }

    66.67% {
        background-color: var(--blueDark);
    }

    83.33% {
        background-color: var(--purpleDark);
    }

    100% {
        background-color: var(--redDark);
    }
}

@keyframes rainbowBackground {
    0% {
        background: var(--redDarker);
    }

    16.67% {
        background: var(--orangeDarker);
    }

    33.33% {
        background: var(--yellowDarker);
    }

    50% {
        background: var(--greenDarker);
    }

    66.67% {
        background: var(--blueDarker);
    }

    83.33% {
        background: var(--purpleDarker);
    }

    100% {
        background: var(--redDarker);
    }
}

/*Github Corner*/
.github-corner {
    fill: #000000;
}

.github-corner .octo-arm,
.github-corner .octo-body {
    fill: #ffffff;
}

.github-corner:hover .octo-arm {
    animation: octocat-wave 0.5s linear;
}

@keyframes octocat-wave {

    0%,
    100% {
        transform: rotate(0);
    }

    20%,
    60% {
        transform: rotate(-25deg);
    }

    40%,
    80% {
        transform: rotate(10deg);
    }
}

@media only screen and (max-width: 480px) {
    h1 {
        font-size: 12vw;
        text-shadow: 0 0 8vw var(--shadow);
    }

    h2 {
        font-size: 4vw;
        margin: 2vh;
        text-shadow: 0 0 1vw var(--shadow);
    }

    p {
        margin: 1vw;
        font-size: 2.5vw;
        text-shadow: 0 0 0.5vw var(--shadow);
    }

    li {
        margin: 0;
        text-align: left;
        font-size: 2vw;
        text-shadow: 0 0 0.5vw var(--shadow);
    }

    .capitalLetter {
        font-size: 14vw;
    }

    .explanation {
        animation: var(--card);
        padding: 3vw;
        width: 80vw;
        margin: 1vh auto;
        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-template-rows: 1fr 1fr;
        grid-gap: 2vw;
        clip-path: polygon(4vw 0, 100% 0, 100% calc(100% - 4vw), calc(100% - 4vw) 100%, 0 100%, 0 4vw);
        align-items: center;
    }

    .explanationQuadrant {
        filter: drop-shadow(0 0 2vw var(--shadow));
    }

    #hexagon {
        width: 100%;
    }

    .corner {
        font-size: 3vw;
        margin: 1vh auto;
        width: 80%;
        padding: 2vw;
        clip-path: polygon(2vw 0, 100% 0, 100% calc(100% - 2vw), calc(100% - 2vw) 100%, 0 100%, 0 2vw);
    }

    .button {
        font-size: 5vw;
        padding: 5vw;
        width: 70vw;
        margin: 2vh auto;
        clip-path: polygon(0 0, 100% 0, 100% calc(100% - 4vw), calc(100% - 4vw) 100%, 0 100%, 0 0);
    }

    .socialsicon {
        height: 12vw;
        width: 12vw;
        margin: 0 2vw;
    }

    .socialsicon:hover {
        scale: 1.1;
    }

    .footer {
        font-size: 6vw;
        margin: 6vw;
    }

    #question {
        font-size: 6vw;
        padding: 6vw;
        width: 80vw;
        min-height: 16vh;
        margin: 1vh auto;
        clip-path: polygon(6vw 0, 100% 0, 100% calc(100% - 6vw), calc(100% - 6vw) 100%, 0 100%, 0 6vw);
    }

    #questionNumber {
        font-size: 8vw;
    }

    .backButton {
        font-size: 6vw;
        padding: 3vw;
        width: 40vw;
        margin: 1vh auto;
        clip-path: polygon(0 0, 100% 0, 100% 100%, 100% 100%, 3vw 100%, 0 calc(100% - 3vw));
    }

    #results {
        width: 80vw;
        clip-path: polygon(8vw 0, 100% 0, 100% calc(100% - 8vw), calc(100% - 8vw) 100%, 0 100%, 0 8vw);
    }
}