*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

/* ONLY USE THE FOLLOWING FOR SIZING:
 * 4px
 * 8px
 * 12px
 * 16px
 * 24px
 * 32px
 * 48px
 * 64px
 * 96px
 * 128px
 * 192px
 * 256px
 * 384px
 * 512px
 * 640px
 * 768px
 * 1024px
 * 1280px
 * */

/* ONLY USE THE FOLLOWING FOR FONT-SIZES:
 * 12px
 * 14px
 * 16px
 * 18px
 * 20px
 * 24px
 * 30px
 * 36px
 * 48px
 * 60px
 * 72px
 * */

/* ONLY USE THE FOLLOWING FOR FONT-WEIGHTS:
 * 400
 * 700
 * */

:root {
    --text: #ffffff;

    --neutral-100: hsl(0 7% 98%);
    --neutral-200: hsl(0 5% 86%);
    --neutral-300: hsl(0 4% 74%);
    --neutral-400: hsl(0 3% 62%);
    --neutral-500: hsl(0 2% 50%);
    --neutral-600: hsl(0 3% 38%);
    --neutral-650: hsl(0 3% 32%);
    --neutral-700: hsl(0 4% 26%);
    --neutral-750: hsl(0 4% 20%);
    --neutral-800: hsl(0 5% 14%);
    --neutral-850: hsl(0 5% 8%);
    --neutral-900: hsl(0 7% 2%);
    --neutral-950: hsl(0 7% 0.5%);

    --primary-100: hsl(220 2% 97%);
    --primary-200: hsl(220 3% 82%);
    --primary-300: hsl(220 4% 67%);
    --primary-400: hsl(220 20% 58%);
    --primary-500: hsl(220 25% 50%);
    --primary-600: hsl(220 35% 30%); /* card gradient start */
    --primary-700: hsl(220 42% 17%); 
    --primary-800: hsl(220 44% 8%); /* card gradient end */
    --primary-900: hsl(220 50% 3%);

    --accent-500: hsl(0 80% 70%);

    --fade-width: 64px;
    --button-outline-size: 3px;
    --button-half-height: 20px;
}

.hidden {
    display: none;
}

.content-box {
    background:
        linear-gradient(90deg, #00000000,
        hsl(from var(--neutral-950) h s l / 0.7) calc(50% - 384px) calc(50% + 384px),
        #00000000);
    padding: 0 calc(24px + var(--fade-width));
}

.content-box-content {
    width: 100%;
    padding: 16px 0;
    background: 
        linear-gradient(#00000000 1px,
        hsl(from var(--neutral-950) h s l / 0.7) 1px 2px);
    background-size: 2px 2px;
    background-repeat: repeat;
    display: flex; 
    flex-direction: column;
    align-items: center;
}

.copy-heading {
    font-size: 36px;
    text-align: center;
}

.glowing {
    text-shadow:
        0 0 10px var(--accent-500),
        0 0 20px var(--accent-500),
        0 0 30px var(--accent-500),
        0 0 40px var(--accent-500);
}

.underlined {
    text-decoration: underline;
}

.button-wrapper {
    min-width: 200px;
    height: calc(var(--button-half-height) + var(--button-half-height)
        + var(--button-outline-size) + var(--button-outline-size));
    background: var(--primary-300);
    transition: all 0.3s ease;

    clip-path: polygon(
        calc(var(--button-half-height) + var(--button-outline-size)) 0%,
        calc(100% - var(--button-half-height) - var(--button-outline-size)) 0%,
        100% 50%,
        calc(100% - var(--button-half-height) - var(--button-outline-size)) 100%,
        calc(var(--button-half-height) + var(--button-outline-size)) 100%,
        0% 50%
    );
}

button {
    margin: var(--button-outline-size) calc(var(--button-outline-size) * 1.414); /* approx root(2) */
    min-width: 200px;
    height: calc(var(--button-half-height) + var(--button-half-height));
    background: linear-gradient(150deg, var(--primary-600), var(--primary-500));

    color: white;
    font-size: 24px;
    font-weight: bold;
    text-transform: uppercase;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;

    /* Hexagon shape - pointed left & right */
    clip-path: polygon(
        var(--button-half-height) 0%,
        calc(100% - var(--button-half-height)) 0%,
        100% 50%,
        calc(100% - var(--button-half-height)) 100%,
        var(--button-half-height) 100%,
        0% 50%
    );

    overflow: hidden;
}

button:hover {
    background: var(--primary-100);
    color: var(--neutral-950);
}

body {
    font-family: "Courier", serif;
    background: url("./images/bg-blue.png");
    background-repeat: no-repeat;
    background-position-y: top;
    background-position-x: center;
    color: var(--text);
    min-height: 100vh;
}

.bg-lines-container {
    max-width: 100%;
    height: 100%;
    min-height: 100vh;
    margin: auto;
    background: url("./images/bg-lines.png");
    background-repeat: no-repeat;
    background-position-y: top;
    background-position-x: center;
}

.bg-container {
    max-width: 100%;
    height: 100%;
    min-height: 100vh;
    margin: auto;
    background: url("./images/bg-neutral.png");
    background-repeat: no-repeat;
    background-position-y: top;
    background-position-x: center;
}

.content-container {
    max-width: calc(768px + var(--fade-width) + var(--fade-width));
    margin: auto;
}


#LogoSection {
    display: flex;
    justify-content: center;
    padding: 48px 0;
}

#LogoSection img {
    max-width: 400px;
}

#TopSection .copy-heading {
    margin-top: 24px;
    margin-bottom: 24px;
}

#TopSection .button-wrapper {
    margin: 32px 0 24px;
}