@import url("https://cdn.jsdelivr.net/npm/@mdi/font@7.2.96/css/materialdesignicons.min.css");

:root {
    --bg: #2e2e2e;
    --text: #d6d6d6;
    --red: #b05279;
    --green: #b4d273;
}

html {
    scroll-snap-type: y mandatory;
}

body {
    font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
    font-weight: 300;
    margin: 0;
    padding: 0;
    background-color: var(--bg);
    color: var(--text);
}

p {
    margin: 0;
    padding: 0;
}

.group {
    /*
    height: 100vh;
    scroll-snap-align: start;
    scroll-snap-stop: always;
    */
    text-align: center;
    padding-top: 1em;
}

.group:not(:first-of-type) {
    padding-top: 3em;
}

.group h2 {
    margin: 0;
    padding: 0;
    font-size: 2em;
}

.sub .mdi {
    font-size: 2.5em;
}

.sub {
    padding-top: 1em;
}

.sub p:nth-child(2) {
    font-size: 1.5em;
    font-weight: bold;
}


.red {
    color: var(--red);
}

.green {
    color: var(--green);
}

@media only screen and (min-width: 750px) {
    .group {
        display: grid;
        grid-template-rows: 2fr 3fr;
    }

    .sub-holder-three {
        display: grid;
        grid-template-columns: auto auto auto;
        grid-template-rows: auto;
    }
}