@import url('https://fonts.googleapis.com/css2?family=Silkscreen&display=swap');

:root {
    --color_1: #00ff7f;
    --shadow_1: rgba(0, 0, 0, 0.3);
    --space_B: 40px;
    --space_b: 32px;
    --space_m: 24px;
    --space_s: 16px;
    --space_S: 8px;
}

* {
    font-family: "Silkscreen", sans-serif;
    box-sizing: border-box;
    padding: 0;
    margin: 0;
    text-align: -webkit-center;
    color: white;
}

body {
    display: flex;
    min-height: 100vh;
    /* -webkit-fill-available; */
    background: linear-gradient(0deg,
            orange 0%,
            fuchsia 125%);
}

main {
    display: flex;
    flex-direction: column;
    border-radius: var(--space_m);
    padding: var(--space_s);
    row-gap: var(--space_s);

    width: min(750px, 96%);
    background-color: var(--shadow_1);
    margin: var(--space_s) auto auto auto;
}

main>* {
    display: flex;
    row-gap: var(--space_S);

    justify-content: center;
}

button {
    padding: var(--space_S);
    border-width: 0px;
}

.textHover:hover,
.textHover:hover * {
    cursor: pointer;
    color: var(--color_1) !important;
    letter-spacing: 0.1em;
    /* font-size: 105%; */
}

/* .zoomHover:hover {
} */

/* @media (max-width: 1100px) {
        main {
            height: 50vw;
        }
    }

    @media (max-width: 850px) {
        main {
            grid-template-rows: 20% auto 25% 10%;
            height: 60vw;
        }
    }

    @media (max-width: 750px) {
        main {
            grid-template-rows: 20% auto 30% 10%;
            height: 90vw;
        }
    }
*/