@import url(/css/base/reset.css);
@import url(/css/base/fonts.css);
@import url(/css/base/variables.css);
@import url(/css/components/header.css);
@import url(/css/components/footer.css);
@import url(/css/components/animations.css);

main {
    margin-bottom: 6.5rem;
    padding: var(--space-symmetric) 0;
}

.boxed-section {
    max-width: var(--width-max-content);
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--space-symmetric);
    padding-right: var(--space-symmetric);
}

/* ----------- CARD ----------- */
.card {
    padding: var(--space-symmetric);
    display: grid;
    gap: var(--space-small-symmetric);
    border-radius: var(--border-radius);
    transition: all .4s ease;
    cursor: default;
}

.card:hover {background-color: var(--clr-dark-blue-gray);}

.card:hover strong {
    filter: hue-rotate(110deg);
}

.card h2 {
    font-size: 1.5rem;
    color: var(--clr-lavander);
}

.card h2 > span,
.card > span {
    font-family: var(--font-mono);
    font-size: 1.3rem;
    font-weight: normal;
    letter-spacing: var(--space-between-tight-font);
    color: var(--clr-gold);
}

.card {color: var(--clr-light-green);}