::-webkit-scrollbar {
    display: none;
}

html,
body {
    height: 100vh;
    width: 100vw;
    overflow: hidden;
    background-color: #F8F1F4;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0;
}

.whileLoading {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 1em;
}

.loader {
    width: 48px;
    height: 48px;
    background: #F566A5;
    animation: rotate 1s linear infinite;
}

.ldTxt {
    font-family: "Comic Sans MS", cursive, sans-serif;
    font-size: 20px;
    color: #F566A5;
    font-style: italic;
}

.mainContent {
    display: none;
    align-items: center;
    justify-content: center;
    width: 100vw;
    height: 100vh;
    grid-template-columns: auto;
    grid-template-rows: auto;
}

@keyframes rotate {
    0% {
        transform: rotate(0deg) scale(0.2);
        border-radius: 10%;
    }

    50% {
        transform: rotate(180deg) scale(1.5);
        border-radius: 50%;
    }

    100% {
        transform: rotate(360deg) scale(0.2);
        border-radius: 10%;
    }
}

.hero {
    display: grid;
    grid-template-rows: 100%;
    grid-template-columns: 100%;
    align-items: center;
    justify-content: center;

    * {
        grid-row: 1;
        grid-column: 1;
    }

    img {
        width: 100vw;
        aspect-ratio: 16 / 9;
        opacity: 0;
        transition: opacity 400ms ease;
        z-index: 0;
    }
}

.hero img.visible {
    opacity: 1;
}

#bgFilter {
    display: none;
}

.TitleCard {
    display: grid;
    grid-template-rows: 50% 45% 5%;
    grid-template-columns: 33% 33% 33%;
    background: #77477788;
    backdrop-filter: url(#glass) blur(3px) saturate(180%);
    box-shadow: inset 0 1px 0 #ffffff5c;
    z-index: 1;
    width: 40%;
    height: 40%;
    align-self: center;
    justify-self: center;
    justify-items: center;
    align-items: center;
    corner-shape: squircle;
    border-radius: 5%;
    padding: 2%;

    h1 {
        padding: 0;
        align-content: center;
        justify-content: stretch;
        grid-row: 1;
        grid-column-start: 1;
        grid-column-end: 4;
        font-family: "Comic Sans MS", cursive, sans-serif;
        font-size: 2.4dvw;
        color: #ffc6df;
    }

    p {
        grid-row: 2;
        grid-column: 2;
        font-family: "Comic Sans MS", cursive, sans-serif;
        font-size: 1.2dvw;
        color: #ffc6df;
    }

    a {
        text-decoration: none;
        min-width: 24%;
        text-align: center;
        text-justify: center;
        border-radius: 12%;
        corner-shape: squircle;
        border-style: none;
        padding: 5%;
        cursor: pointer;
        background: #9f6ea59c;
        font-family: "Comic Sans MS", cursive, sans-serif;
        font-size: 1.2dvw;
        color: #ffc6df;
        transition: all 0.3s ease;
    }

    a:hover {
        background: #ffc6df9c;
        color: #9f6ea5;
        scale: 120%;
    }

    #opt1 {
        grid-row: 2;
        grid-column: 1;
    }

    #opt2 {
        grid-row: 2;
        grid-column: 3;
    }

    .inlinea {
        border-radius: 6%;
        width: 10px;
        font-size: 0.8dvw;
        padding: 8px;
        margin: 4px;
    }

    .smallPrint {
        padding: 6px;
        font-size: 0.8dvw;
        grid-row: 3;
        grid-column-start: 1;
        grid-column-end: 4;
        align-content: center;
        justify-content: stretch;
        align-self: center;
        justify-self: stretch;
    }
}