html {
    font-size: 62.5%; /* 1rem = 10px */
}

body {
    font-family: 'outfit', Arial, sans-serif;
    text-rendering: optimizelegibility;
    font-size: 1.8rem;
    color: var(--dark-green);
    background-color: var(--background-grey);

    &.bg-transparent {
        background-color: transparent;
    }
}

main {
    position: relative;
    z-index: 2;
}

section {
    margin: 1rem;
    padding: 1rem;
    background-color: var(--white);
    border-radius: 1rem;

    &.bg-transparent {
        background-color: transparent;
    }
}

div {
    border-radius: 3rem;
}

a {
    text-decoration: none;
    color: var(--dark-green);
    width: fit-content;
}

h2 {
    font-size: 6rem;
}

h3 {
    font-size: 3rem;
}

svg {
    margin-right: 0.5rem;
}

.flash {
    margin: 1rem;
    padding: 2rem;
    color: var(--white);

    &.success {
        background-color: var(--green-success);
    }

    &.error {
        background-color: var(--red-error);
    }
}

.rotate-180 {
    transform: rotate(180deg);
}

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