:root {
    --easy: rgb(45, 173, 81);
    --medium: #fab803;
    --hard: #d43535;

    --primary: #1574b7;
    --primary-dark: rgb(0, 36, 57);
    --font-family-primary: "IBM Plex Mono", monospace;

    --rainbow-gradient: linear-gradient(
        90deg,
        rgba(255, 0, 0, 1) 0%,
        rgba(255, 154, 0, 1) 10%,
        rgba(208, 222, 33, 1) 20%,
        rgba(79, 220, 74, 1) 30%,
        rgba(63, 218, 216, 1) 40%,
        rgba(47, 201, 226, 1) 50%,
        rgba(28, 127, 238, 1) 60%,
        rgba(95, 21, 242, 1) 70%,
        rgba(186, 12, 248, 1) 80%,
        rgba(251, 7, 217, 1) 90%,
        rgba(255, 0, 0, 1) 100%
    );
}

* {
    box-sizing: border-box;
    font-family: var(--font-family-primary);
}

body {
    padding: 0.5rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

a {
    text-decoration: none;
    color: rgb(45, 173, 81);
}

hr {
    margin: 1rem 0;
}

label {
    font-weight: bold;
}

.not-supported {
    padding: 1rem;
    background-color: red;
    color: white;
    margin: 1rem;
    border-radius: 10px;
    height: min-content;
    margin-top: auto;
}

.container {
    box-shadow: 5px 0px 20px 0px rgba(0, 0, 0, 0.15);
    border-radius: 10px;

    --padding: 1rem;
    padding: 0 var(--padding);
    padding-bottom: var(--padding);
}

.rainbow {
    background: var(--rainbow-gradient);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

hr {
    border-radius: 10px;
}

.super-mario {
    position: relative;
    width: fit-content;
}

.super-mario span {
    width: fit-content;
    z-index: 100;
    color: rgb(204, 44, 29);
}

.super-mario img {
    width: 3rem;

    position: absolute;

    left: -30%;

    top: -50%;

    transform: scaleX(-1);
}

.image-small {
    width: min(calc(75vw - 4rem), 300px);
    margin: auto;
    border-radius: 15px;
}

.rubber-duck {
    width: 2ch;
    transform: translateY(25%);
}

.signature {
    display: flex;
    justify-content: center;

    align-items: center;
    padding: 1rem;
    font-style: italic;
    color: black !important;
}

.ncsu {
    width: 4rem;

    margin: 0 1rem;
}

img {
}

.center {
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: 100%;
    gap: 4rem;
}

.captioned-image {
    width: min-content;
    margin: auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    gap: 0.5rem;
}

.image-large {
    width: min(calc(100vw - 4rem), 650px);
    border-radius: 10px;

    box-shadow: 5px 0px 20px 0px rgba(0, 0, 0, 0.15);

    object-fit: cover;
    aspect-ratio: 1/ 1;

    transition: transform ease 0.5s;
}

.image-large:hover {
    transform: translate(0, -10px);
}

.subtitle {
    color: gray;
}