:root {
    --color-main: #ffffff;
    --color-dark: #30435A;
    --color-sec: #425C7C;
    --color-btn: #668EC0;
    --color-hover: #6a97cf;
    --color-active: #425C7C;
    --color-caption: #c5c3be;
    --color--darkest: #1f2d3d;
}

.content {
    display: flex;
    flex-direction: column;
    gap: 2.5em;
    padding-block: 4em;
    color: var(--color--darkest);
}

@media (max-width: 768px) {
    .content {
        padding-block: 2em;
    }
}

.content h1 {
    font-size: 2.5em;
}

.content h2 {
    font-size: 1.25em;
}

.content p {
    font-size: 1.1em;
}

.content section .container {
    display: flex;
    flex-direction: column;
    gap: 0.35em;
}

.content ul {
    display: flex;
    flex-direction: column;
    gap: 0.75em;
    list-style-type: square;
    margin-left: 1.5em;
}

.content li {
    max-width: 80%;
}

.content li span {
    font-weight: 600;
}

p a {
    text-decoration: none;
    color: var(--color-active);
    font-size: 1em;
    font-weight: 900;
}

p a:hover {
    color: var(--color-btn);
}