:root {
    --brighter5: color-mix(in srgb, var(--rootColor) 5%, white 95%);
    --brighter12: color-mix(in srgb, var(--rootColor) 12%, white 88%);
    --brighter25: color-mix(in srgb, var(--rootColor) 25%, white 75%);
    --brighter35: color-mix(in srgb, var(--rootColor) 35%, white 65%);
    --brighter50: color-mix(in srgb, var(--rootColor) 50%, white 50%);
    --brighter65: color-mix(in srgb, var(--rootColor) 65%, white 35%);
    --brighter75: color-mix(in srgb, var(--rootColor) 75%, white 25%);
    --brighter88: color-mix(in srgb, var(--rootColor) 88%, white 12%);
    --brighter95: color-mix(in srgb, var(--rootColor) 95%, white 5%);
    --transparent5: color-mix(in srgb, var(--rootColor) 5%, transparent 95%);
    --transparent12: color-mix(in srgb, var(--rootColor) 12%, transparent 88%);
    --transparent25: color-mix(in srgb, var(--rootColor) 25%, transparent 75%);
    --transparent35: color-mix(in srgb, var(--rootColor) 35%, transparent 65%);
    --transparent50: color-mix(in srgb, var(--rootColor) 50%, transparent 50%);
    --transparent65: color-mix(in srgb, var(--rootColor) 65%, transparent 35%);
    --transparent75: color-mix(in srgb, var(--rootColor) 75%, transparent 25%);
    --transparent88: color-mix(in srgb, var(--rootColor) 88%, transparent 12%);
    --transparent95: color-mix(in srgb, var(--rootColor) 95%, transparent 5%);
}

* {
    font-family: "Montserrat", sans-serif;
    font-optical-sizing: auto;
}

html {
    color-scheme: dark;
}

body {
    padding: 0;
    margin: 0;

    width: 100%;
    min-height: 100vh;

    overflow: hidden;
    overflow-y: auto;

    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

header {
    width: 90%;
    height: 20rem;
    max-height: 20rem;
    padding: 0 5%;
    gap: 1rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

@media only screen and (max-width: 1000px) {
    header {
        max-height: 25rem;
        height: 25rem;
        padding: 1rem 5%;
    }
}

main {
    flex: 1 0 auto;
    width: 90%;
    max-width: 1200px;
    display: flex;
    flex-direction: column;
    font-size: 1rem;
    margin: 1rem auto;
}

footer {
    width: 100%;
    display: flex;
    gap: 0.5rem;
    flex-direction: column;
    justify-content: center;
    font-size: 0.75rem;
    margin-top: auto;
}

hr {
    border: none;
    border-top: 1px solid var(--brighter75);
    width: 95%;
}

a:not(.button):not(footer a):not(header a) {
    color: color-mix(in srgb, var(--highlight) 50%, white 50%) !important;
    text-decoration: none;
    transition: color 0.1s ease;
}

a[href]:not(.button):not(footer a):not(header a):focus,
a[href]:not(.button):not(footer a):not(header a):hover {
    color: var(--highlight) !important;
}

.row {
    display: flex;
    flex-direction: row;
}

.column {
    display: flex;
    flex-direction: column;
}

.spacer {
    flex: 1;
}

.button {
    color: var(--brighter5) !important;
    background-color: var(--rootColor) !important;
    padding: 0.5rem 1rem;
    font-size: 15px;
    border-radius: 0.5rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: row;
    text-decoration: none;
    text-align: center;
    font-weight: 500;

    transition: color 0.1s ease;
    transition: background-color 0.1s ease;

    border: none;
}

.button:focus,
.button:hover {
    color: var(--brighter12) !important;
    background-color: var(--brighter88) !important;
}

.button.highlight {
    background-color: var(--highlight) !important;
}

.button.highlight:focus,
.button.highlight:hover {
    background-color: color-mix(in srgb, var(--highlight) 85%, white 15%) !important;
}

.button.material-symbols-outlined {
    font-size: 1.25rem;
    padding: 0.35rem;
}

.imgcont {
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden; /* Ensures no part of the image spills out */

    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.imgcont img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.select {
    display: inline-block;
    position: relative;
    width: 200px;

    border: 1px solid var(--brighter88);
    border-radius: 0.25rem;
    background-color: var(--brighter88);

    padding: 0.25rem;
}

.select select {
    padding: 0;
    width: 100%;
    z-index: 100;
    font-size: 14px;
    border: 0;
    background-color: transparent;
    color: var(--brighter25);
    appearance: none;
    -webkit-appearance: none; /* For Safari */
    -moz-appearance: none; /* For Firefox */
    cursor: pointer;
    transition: all 0.1s ease;
}

.select select option {
    color: var(--rootColor);
}

.select select option:hover {
    background-color: var(--transparent25);
}

.select select:hover,
.select select:focus {
    color: var(--brighter12);
}

.select select::-ms-expand {
    display: none;
}

.select .select-icon {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none;
    color: #666;
}

.nomargin {
    margin: 0;
    padding: 0;
}

.notpublished,
.notpublished:focus,
.notpublished:hover {
    cursor: default !important;
    background-color: var(--danger) !important;
    font-size: 12px !important;
    font-weight: 500 !important;
    color: white !important;
}

.iframe,
.iframe iframe,
.iframe .overlay {
    border-radius: 1rem;
}

.iframe {
    overflow: hidden;
    border: 1px solid var(--brighter50);
}

a.iframe {
    cursor: pointer;
    text-decoration: none !important;
}

.iframe.scale {
    transform: scale(0.98) !important;
    transition: all 0.1s ease !important;
}

.iframe.scale:focus,
.iframe.scale:hover {
    transform: scale(1) !important;
}

.iframe iframe {
    display: block;
    position: relative;
    top: 0;
    left: 0;
    width: 100%;
    border: none;
    margin: 0px;
    padding: 0px;
    z-index: 0;
    height: 100%;
    opacity: 0.25;
    transition: all 0.1s ease;
}

.iframe:focus iframe,
.iframe:hover iframe {
    opacity: 0.5;
}

.iframe .overlay {
    position: relative;
    top: -100%;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
}

a.iframe .overlay {
    color: white !important;
}

/* header */
header .logo {
    width: auto;
    height: auto;

    max-height: 65%;
    filter: drop-shadow(0 0 0.5rem var(--rootColor));
    transform: scale(0.85);
    transition: all 0.1s ease;
}

header .logo:hover {
    transform: scale(1.0) rotate(5deg);
}

header .row {
    gap: 0.5rem;
    display: flex;
    justify-content: center;
    align-items: center;
}

@media only screen and (max-width: 1000px) {
    header .row {
        flex-direction: unset;
        flex-wrap: wrap;
    }
}

header .row a {
    font-weight: 700;
    color: var(--rootColor);
    padding: 0.25rem;
    text-decoration: none !important;
    cursor: pointer;
    background-color: var(--brighter95);
    border: 1px solid var(--brighter75);
    filter: drop-shadow(0 0 0.5rem var(--rootColor));

    width: var(--header_buttonSize);
    height: var(--header_buttonSize);
    border-radius: var(--header_buttonSize);

    transform: scale(0.90);
    transition: all 0.1s ease;
}

header .row a:focus,
header .row a:hover {
    transform: scale(1.05);
}

header .row a .imgcont {
    border-radius: var(--header_buttonSize);
}

header .row a .imgcont img {
    border-radius: var(--header_buttonSize);
}

header .row a .material-symbols-outlined {
    width: var(--header_buttonSize);
    height: var(--header_buttonSize);

    color: var(--brighter5) !important;
    border-radius: var(--header_buttonSize);

    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 1.8rem;
}

/* footer */

footer .row {
    padding-left: 5%;
    padding-right: 5%;
}

footer a {
    color: var(--brighter12) !important;
    text-decoration: none !important;
    font-weight: 500;
    padding: 0.5rem;
    display: flex;
    transition: color 0.1s ease;
}

footer a:focus,
footer a:hover {
    color: var(--brighter25) !important;
}

footer .center {
    flex: 1;
}

/* page content */
.parsedown,
.parsedown * {
    max-width: 100%;
    overflow: hidden;
    white-space: normal;
    word-break: normal;
}

.parsedown iframe,
.parsedown img {
    border-radius: 1rem;
}

/* custom background stuff */
.purple-gradient {
    background: #6863e5 linear-gradient(260deg,#ad35dc -30%,#6863e5 60%,#452789 110%);
}