html {
    font-size: 17px;
}

body {
    font-family: 'Nunito', sans-serif;
    background: #FBFAFF;
}

h1, h2, h3, h4, h5, h6 {
    font-family: 'Rubik', sans-serif;
}

.big-text {
    font-size: 30px;
}

.mid-text {
    font-size: 24px;
}

.small-text {
    font-size: 18px;
}

table td {
    vertical-align: middle !important;
    background: transparent !important;
}

.field > select {
    cursor: default;
}


.first img,
.second img,
.third img {
    display: block;
    margin: 0 auto;
}

.first img {
    height: 164px;
}

.second img,
.third img {
    height: 128px;
}

.bold {
    font-weight: bold;
}

main.responsive {
    max-width: 960px;
}

header nav {
    max-width: 960px;
    margin: 0 auto;
    padding-left: 0;
    padding-right: 1rem;
}

header nav .button {
    font-size: 1rem;
    font-weight: 700;
    padding-left: 0.5rem;
    padding-right: 0.5rem;
    color: #521FC1;
}

.nav-display-name {
    font-size: 1rem;
    font-weight: 700;
    color: #6941C6;
}

header nav i {
    color: #521FC1;
}

header nav .s.m.l {
    display: none;
}

@media (max-width: 840px) {
    header nav .nav-links {
        display: none;
    }
    header nav .s.m.l {
        display: inline-flex;
    }
    .nav-display-name {
        display: none;
    }
}

:root {
    --primary: #7F39FF;
    --on-primary: #fff;
}

button:not(.transparent):not(.circle),
.button:not(.transparent),
input[type="submit"] {
    background-color: #7F39FF !important;
    color: #fff !important;
    --text: #fff;
}

button:not(.transparent):not(.circle):hover,
.button:not(.transparent):hover,
input[type="submit"]:hover {
    background-color: #6941C6 !important;
    color: #fff !important;
}

.fill {
    background-color: #7F39FF !important;
    color: #fff !important;
}

.flash-message {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1rem 1.25rem;
    border-radius: 0.5rem;
    font-size: 1rem;
    font-weight: 600;
    margin-top: 1rem;
    margin-bottom: 1rem;
}

.flash-message i {
    font-size: 1.4rem;
}

.flash-notice {
    background-color: #F4EBFF;
    color: #521FC1;
    border-left: 4px solid #7F39FF;
}

.flash-notice i {
    color: #7F39FF;
}

.flash-alert {
    background-color: #f5e0d0;
    color: #7a3a1a;
    border-left: 4px solid #a0522d;
}

.flash-alert i {
    color: #a0522d;
}

.hackerman-img {
    height: 500px;
    width: auto;
    border-radius: 1rem;
    box-shadow: 0 4px 20px rgba(127, 57, 255, 0.25);
    border: 3px solid #E1D0FF;
}

.loader {
    height: 100px;
    aspect-ratio: 1;
    position: relative;
    clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
    filter: blur(12px);
    margin: 2rem auto;
}
.loader:before {
    content: "";
    position: absolute;
    inset: 0;
    background: conic-gradient(#0000 35%,#7F39FF,#0000 65%);
    animation: l7 2s linear infinite;
}
@keyframes l7 {
    to { rotate: 1turn }
}

.votes-highlight {
    animation: votes-pulse 0.5s ease-out;
}

@keyframes votes-pulse {
    0%   { color: #7F39FF; transform: scale(1.3); }
    50%  { color: #A277FF; transform: scale(1.1); }
    100% { color: inherit; transform: scale(1); }
}

a:not(.button):not(.row) {
    color: #7F39FF;
    text-decoration: underline;
}

a:not(.button):not(.row):hover {
    color: #521FC1;
}

menu li a:not(.button):not(.row) {
    text-decoration: none;
    font-weight: 700;
}

menu li:has(> span:empty) {
    display: none;
}

.reveal-animate {
    animation: revealIn 0.5s ease-out;
}

@keyframes revealIn {
    0%   { opacity: 0; transform: scale(0.8); }
    50%  { transform: scale(1.05); }
    100% { opacity: 1; transform: scale(1); }
}

/* Turbo loading progress bar */
.turbo-progress-bar {
    height: 3px !important;
    background-color: #521FC1 !important;
}