@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Space+Grotesk:wght@300..700&display=swap');

:root {
    --color-cyan: #169fae;
    --color-hot-pink: #d92fab;
    --color-dark-pink: #993397;
    --color-pink: #d685d5;
    --color-white: #faf0fa;
    --color-black: #000c29;
    overscroll-behavior: none;
}

body {
    background-image: linear-gradient(36deg, rgba(177, 177, 177, 0.03) 0%, rgba(177, 177, 177, 0.03) 16.667%,rgba(95, 95, 95, 0.03) 16.667%, rgba(95, 95, 95, 0.03) 33.334%,rgba(237, 237, 237, 0.03) 33.334%, rgba(237, 237, 237, 0.03) 50.001000000000005%,rgba(28, 28, 28, 0.03) 50.001%, rgba(28, 28, 28, 0.03) 66.668%,rgba(174, 174, 174, 0.03) 66.668%, rgba(174, 174, 174, 0.03) 83.33500000000001%,rgba(51, 51, 51, 0.03) 83.335%, rgba(51, 51, 51, 0.03) 100.002%),linear-gradient(195deg, rgba(11, 11, 11, 0.02) 0%, rgba(11, 11, 11, 0.02) 25%,rgba(107, 107, 107, 0.02) 25%, rgba(107, 107, 107, 0.02) 50%,rgba(228, 228, 228, 0.02) 50%, rgba(228, 228, 228, 0.02) 75%,rgba(155, 155, 155, 0.02) 75%, rgba(155, 155, 155, 0.02) 100%),linear-gradient(262deg, rgba(234, 234, 234, 0.03) 0%, rgba(234, 234, 234, 0.03) 16.667%,rgba(191, 191, 191, 0.03) 16.667%, rgba(191, 191, 191, 0.03) 33.334%,rgba(236, 236, 236, 0.03) 33.334%, rgba(236, 236, 236, 0.03) 50.001000000000005%,rgba(85, 85, 85, 0.03) 50.001%, rgba(85, 85, 85, 0.03) 66.668%,rgba(222, 222, 222, 0.03) 66.668%, rgba(222, 222, 222, 0.03) 83.33500000000001%,rgba(38, 38, 38, 0.03) 83.335%, rgba(38, 38, 38, 0.03) 100.002%),linear-gradient(34deg, rgba(192, 192, 192, 0.03) 0%, rgba(192, 192, 192, 0.03) 16.667%,rgba(200, 200, 200, 0.03) 16.667%, rgba(200, 200, 200, 0.03) 33.334%,rgba(23, 23, 23, 0.03) 33.334%, rgba(23, 23, 23, 0.03) 50.001000000000005%,rgba(224, 224, 224, 0.03) 50.001%, rgba(224, 224, 224, 0.03) 66.668%,rgba(181, 181, 181, 0.03) 66.668%, rgba(181, 181, 181, 0.03) 83.33500000000001%,rgba(34, 34, 34, 0.03) 83.335%, rgba(34, 34, 34, 0.03) 100.002%),linear-gradient(281deg, rgba(11, 11, 11, 0.03) 0%, rgba(11, 11, 11, 0.03) 20%,rgba(29, 29, 29, 0.03) 20%, rgba(29, 29, 29, 0.03) 40%,rgba(91, 91, 91, 0.03) 40%, rgba(91, 91, 91, 0.03) 60%,rgba(239, 239, 239, 0.03) 60%, rgba(239, 239, 239, 0.03) 80%,rgba(19, 19, 19, 0.03) 80%, rgba(19, 19, 19, 0.03) 100%),linear-gradient(268deg, rgba(211, 211, 211, 0.02) 0%, rgba(211, 211, 211, 0.02) 25%,rgba(137, 137, 137, 0.02) 25%, rgba(137, 137, 137, 0.02) 50%,rgba(14, 14, 14, 0.02) 50%, rgba(14, 14, 14, 0.02) 75%,rgba(220, 220, 220, 0.02) 75%, rgba(220, 220, 220, 0.02) 100%),linear-gradient(139deg, rgba(248, 248, 248, 0.03) 0%, rgba(248, 248, 248, 0.03) 12.5%,rgba(185, 185, 185, 0.03) 12.5%, rgba(185, 185, 185, 0.03) 25%,rgba(243, 243, 243, 0.03) 25%, rgba(243, 243, 243, 0.03) 37.5%,rgba(13, 13, 13, 0.03) 37.5%, rgba(13, 13, 13, 0.03) 50%,rgba(99, 99, 99, 0.03) 50%, rgba(99, 99, 99, 0.03) 62.5%,rgba(193, 193, 193, 0.03) 62.5%, rgba(193, 193, 193, 0.03) 75%,rgba(241, 241, 241, 0.03) 75%, rgba(241, 241, 241, 0.03) 87.5%,rgba(38, 38, 38, 0.03) 87.5%, rgba(38, 38, 38, 0.03) 100%),linear-gradient(52deg, rgba(171, 171, 171, 0.02) 0%, rgba(171, 171, 171, 0.02) 20%,rgba(118, 118, 118, 0.02) 20%, rgba(118, 118, 118, 0.02) 40%,rgba(7, 7, 7, 0.02) 40%, rgba(7, 7, 7, 0.02) 60%,rgba(235, 235, 235, 0.02) 60%, rgba(235, 235, 235, 0.02) 80%,rgba(190, 190, 190, 0.02) 80%, rgba(190, 190, 190, 0.02) 100%),linear-gradient(90deg, rgb(74, 60, 136),rgb(212, 142, 246));
    min-height: 100vh;
    font-family: "Inter", sans-serif;
    font-optical-sizing: auto;
    font-weight: normal;
    font-style: normal;
    color: #333;
    margin: 0;
}

main {
    background: var(--color-white);
    display: block;
    padding: 3rem;
    margin: 3rem auto;
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.2);
    max-width: 800px;
    font-size: 14px;
}

main p {
    line-height: 140%;
    margin-top: 0.5rem;
}

main ol { padding-left: 1rem; }
main ol li { margin-bottom: 0.5rem; }

h1, h2, h3 {
    font-family: "Space Grotesk", sans-serif;
    font-optical-sizing: auto;
    font-weight: 600;
    font-style: normal;
    color: var(--color-black);
}

h2 {
    margin: 3rem 0 0 0;
    color: var(--color-dark-pink);
}

h1.title {
    color: var(--color-dark-pink);
    text-shadow: 0 0 5px 0 var(--color-dark-pink);
    font-size: 60px;
    font-weight: 800;
    margin-bottom: 2rem;
    text-align: center;
}

h3.tagline {
    font-size: 22px;
    margin-top: 0.25rem;
    text-align: center;
}

a {
    color: var(--color-cyan);
}

.date {
    color: var(--color-cyan);
}


img.logo {
    width: 240px;
    display: block;
    margin: 2rem auto;
}

div.info {
    color: var(--color-black);
    font-weight: 500;
    text-align: center;
    margin: 0 auto;
    font-size: 16px;
}

a.btn {
    background-color: var(--color-cyan);
    display: inline-block;
    height: 3rem;
    margin: 1rem auto;
    padding: 0 3rem;
    color: var(--color-white);
    font-size: 16px;
    font-weight: bold;
    text-align: center;
    line-height: 3rem;
    text-decoration: none;
    border-radius: 1.5rem;
}

.vid {
    margin: 0.5rem;
}

@media screen and (width < 900px) {
    main { 
        margin: 0;
        border-radius: 0;
        box-shadow: none;
        padding: 1rem;
    }
}

@media screen and (width < 400px) {
    h1.title {
        font-size: 40px;
    }
}