:root {
    --primary_colour: rgb(46, 83, 110);
    --secondary_colour: rgb(230, 230, 230);
    --link_colour: rgb(188, 55, 84);
    --box_shadow_colour: rgba(0, 0, 0, 0.25);
    --transition_length: 0.5s;
}

*, *:hover {
    transition: all var(--transition_length);
}

html {
    overflow-y: scroll;
    overflow: auto;
    overscroll-behavior: none;
    background: linear-gradient(90deg, rgb(200, 200, 200), var(--secondary_colour), rgb(200, 200, 200));
    background-size: 200% 200%;
    animation: background_gradient 30s ease infinite;
}

body {
    color: var(--primary_colour);
    font-family: sans-serif;
    margin: 24px 0;
    letter-spacing: 1px;
    overflow: auto;
    overscroll-behavior: none;
    background: transparent;
}

@keyframes background_gradient {
    0% {background-position: 0% 50%}
    50% {background-position: 100% 50%}
    100% {background-position: 0% 50%}
}

h1.title {
    text-align: center;
    font-size: 48px;
    width: 50%;
    margin: 0 auto 16px auto;
    border-bottom: 3px solid var(--primary_colour);
    padding-bottom: 24px;
}

a {
    color: var(--link_colour);
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

.tab {
    text-align: center;
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-bottom: 16px;
}

.tab-button {
    color: var(--primary_colour);
    padding: 8px 16px;
    background: var(--secondary_colour);
    border: 1px solid rgb(200, 200, 200);
    border-radius: 8px;
    cursor: pointer;
    letter-spacing: 1px;
    box-shadow: 0 0 8px var(--box_shadow_colour);
}

.main-tab-button {
    font-size: 24px;
    font-weight: bold;
}

.sub-tab-button {
    font-size: 20px;
}

.tab-button:hover {
    color: var(--link_colour);
    text-decoration: underline;
    box-shadow: 0 0 24px var(--box_shadow_colour);
}

.tab-button.active {
    color: var(--secondary_colour);
    background: var(--link_colour);
    text-decoration: none;
    animation: pulseShadow 10s ease infinite;
}

@keyframes pulseShadow {
    0% {box-shadow: 0 0 8px var(--box_shadow_colour);}
    50% {box-shadow: 0 0 24px var(--box_shadow_colour);}
    100% {box-shadow: 0 0 8px var(--box_shadow_colour);}
}

.sub-tab-content {
    background: var(--secondary_colour);
    border: 1px solid rgb(200, 200, 200);
    border-radius: 8px;
    width: 50%;
    margin: 0 auto 0;
    padding: 24px;
    font-size: 16px;
    animation:
        fadeEffect var(--transition_length) ease forwards,
        pulseShadow 10s ease infinite;
}

@keyframes fadeEffect {
    from {opacity: 0;}
    to {opacity: 1;}
}

.sub-tab-content h1 {
    border-bottom: 2px solid var(--primary_colour);
    padding-bottom: 8px;
}

.sub-tab-content h2 {
    border-bottom: 1px solid var(--primary_colour);
    padding-bottom: 4px;
}

.sub-tab-content img {
    display: block;
    margin: auto;
    max-width: 75%;
}

.sub-tab-content embed {
    display: block;
    margin: auto;
    width: 75%;
    height: 1125px;
}