*,
*::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 #16263A;
    background-color: white;

    header {
        border-bottom: 1px solid #16263A;
        background-color: #0E1A2B;
        padding: 1rem;
    }
}

h1 {
    outline: none;

}

h2 {
    font-size: 1.6rem;
    color: #E0A800;
}

ul {
    list-style: none;
}

p {
    margin: 1rem;
}

a {
    text-decoration: none;

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

.grid {
    display: grid;
    gap: 1rem;

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

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

.pad1 {
    padding: 1rem;
}

.flex {
    display: flex;
    flex-wrap: wrap;
}