*,
*::before,
*::after {
    padding: 0px;
    margin: 0px;
    box-sizing: border-box;
    font-family: Verdana, Geneva, Tahoma, sans-serif;
}

html,
body {
    height: 100%;
}

html {
    font-size: 62.5%;
    min-width: 40rem;
}

body {
    font-size: 1.4rem;
}

section {
    border: 1px solid #D6DCE5;
    background-color: white;
    min-width: 35rem;
    padding: 1rem;

    header {
        border-bottom: 1px solid #D6DCE5;
        padding: 1rem;
    }
}

h1 {
    outline: none;

}

h2 {
    font-size: 1.6rem;
}

ul {
    list-style: none;
}

p {
    margin: 1rem;
}

a {
    text-decoration: none;

    &:hover {
        text-decoration: underline;
    }
}

.grid {
    display: grid;
    gap: 1rem;
    align-items: start;

    &.fit {
        grid-template-columns: repeat(auto-fit, minmax(35rem, 1fr));
    }

    &.fill {
        grid-template-columns: repeat(auto-fill, minmax(35rem, 1fr));
    }
}

.pad1 {
    padding: 1rem;
}

.flex {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;

    &.center {
        justify-content: center;
    }
}