: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 ul {
    display: flex;
    flex-direction: column;
    margin-left: 5%;
}

.content li {
    font-size: 1.5em;
}

.content li a,
.content li a:link {
    font-size: inherit;
    text-decoration: none;
    color: var(--color-sec);
}

.content li a:hover {
    color: var(--color-hover);
}

.content li a:active {
    color: var(--color-active)
}

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