@import "var.css";

/* universal styling */
.page {
    background-color: var(--lightBlue)
}

.intro {
    display: flex;
    flex-direction: column;
    justify-content: center;
    border-radius: 15px;
    margin: 1em;
    background-color: var(--lighterBlue);
    box-shadow: var(--mainShadow);
    transition: var(--mainTransition);
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: break-word;
    hyphens: auto;

    h2 {
        text-align: center;
        margin: 1em 0 0;
        color: var(--darkerBlue);
    }

    ul {

        li{
            padding: 0.5em;
            ul {
                margin-top: 0.5em;
                padding-left: 1em;

                li {
                    padding: 0;
                    margin: 0;
                }
            }
        }
    }
}
.intro:hover {
  transform: scale(1.01);
}

.general {
    display: flex;
    flex-direction: column;
    justify-content: center;
    border-radius: 15px;
    margin: 1em;
    background-color: var(--lighterRed);
    box-shadow: var(--mainShadow);
    transition: var(--mainTransition);
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: break-word;
    hyphens: auto;

    h2 {
        color: var(--darkerRed);
        text-align: center;
    }

    h3 {
        color: var(--darkerRed);
        text-align: center;
        margin: 0;
    }

    .checklist {
        list-style: disc;
        padding-left: 1.5em;

        li {
            padding: 0.2em 0;
            margin: 0;
        }
    }
}

.general > div {
    padding: 0.5em;
}
.general > div:last-child {
    border: none;
}

.general:hover {
  transform: scale(1.01);
}


/* mobile styling */
@media screen and (max-width: 720px) {
    main {
        display: flex;
        flex-direction: column;
    }

    .general > div {
        border-bottom: 1px solid var(--mainRed);
    }
}

/* desktop styling */
@media screen and (min-width: 720px) {


    .general {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;

        h2 {
            grid-column: 1 / -1;
        }
    }
    .general > div {
        border-right: 1px solid var(--mainRed);
    }
    .sub-list {
        width: 100%;
        padding-left: 1.2em;
        list-style: circle;

        li {
            width: 100%;
            padding: 0;
        }
    }

}