/* === Reset & Variables === */
html, body, p, footer,
h1, h2, h3, h4, h5, h6, button, input[type=submit] {
    margin: 0;
    padding: 0;
}

button {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

html {
    --light-background: #fefdf6;
    background-color: var(--light-background);
    --test-color: #ffd858;
    --accent-one: #5970ff;
    --test-color-shadow: #a3834b;
    --neutral-color: #3a3b2c;
    --max-width: 700px;
    color: var(--neutral-color);
    font-family: Arial, Helvetica, sans-serif;
}

@media (max-width: 850px) {
    html { --max-width: 90vw; }
}

@media (min-width: 850px) {
    html { --max-width: 800px; }
}

body {
    margin: 0;
    padding: 0;
}

/* === Layout Utilities === */
.sm-space  { margin-block: 0.5rem; }
.med-space { margin-block: 1rem; }
.lg-space  { margin-block: 2rem; }

.center-content {
    max-width: var(--max-width);
    margin: 0 auto;
}

.line-break {
    max-width: var(--max-width);
    margin-block: 2rem;
}

/* === Button Shine === */
.button-shine {
    position: relative;
}

.button-shine a {
    text-decoration: none;
    color: white;
    display: inline-block;
    padding-block: 0.75em;
}

.button-shine:hover {
    -webkit-mask-image: linear-gradient(
        -75deg,
        rgba(0,0,0,0.6) 10%,
        #000 15%,
        #000 85%,
        rgba(0,0,0,0.6) 90%
    );
    -webkit-mask-size: 200%;
    animation: shine 2s linear infinite;
}

@keyframes shine {
    from { -webkit-mask-position:  45%; }
    60%  { -webkit-mask-position: -150%; }
    to   { -webkit-mask-position: -150%; }
}

/* === Navigation === */
.simple-nav {
    text-align: center;
    margin-block: 0.25rem;
    color: black;
}

.simple-nav a { color: black; }

.top li { transition: transform 50ms; }

.top li a {
    background: linear-gradient(#eee, var(--test-color));
    border: 2px solid white;
    border-radius: 5px;
    margin-inline: 0.25rem;
    padding: 0.75rem 1rem;
    transition: background-color 50ms;
}

.top li > a:visited { color: black; }
.top li a:hover  { box-shadow: 2px 2px 8px var(--test-color-shadow); }
.top li a:active { box-shadow: 2px 2px 8px var(--test-color-shadow) inset; }

/* === Video Player === */
.clickable-video {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    background-size: cover;
    background-repeat: no-repeat;
    width: 100%;
    aspect-ratio: 16 / 9;
    cursor: pointer;
}

.clickable-video::after {
    content: '';
    box-sizing: border-box;
    border-left: 48px solid white;
    border-top: 28px solid transparent;
    border-bottom: 28px solid transparent;
    width: 0;
    height: 0;
    position: absolute;
}

iframe {
    width: 100%;
    aspect-ratio: 16 / 9;
}

/* === Footer === */
footer {
    background-color: var(--test-color);
    padding-block: 1rem;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
}

footer a { text-decoration: none; }