:root {
    /* colores: */
    /* https://coolors.co/fafafa-deeded-6bb4b8-197b8f-303841-fceee8-ff5722 */
    --white-smoke: #fafafa;
    --azure-mist: #DEEDED;
    --tropical-teal: #6BB4B8;
    --pacific-cyan: #197B8F;
    --jet-black: #303841ff;
    --tiger-flame: #ff5722ff;
    --soft-blush: #FCEEE8;
}

.body {
    font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
    color: var(--jet-black);
    padding: 0px;
    margin: 0px;
}

.header {
    background-color: var(--pacific-cyan);
    color: white;
    text-align: center;
    padding: 48px 32px;
    margin-bottom: 64px;
}

.menu__list {
    display: flex;
    flex-direction: row;
    justify-content: center;
    gap: 16px;

    list-style: none;
    font-weight: bold;
    margin: 0px;
}

.menu__li>a {
    color: var(--azure-mist);
    text-decoration: none;
    font-size: 1.3rem;
    letter-spacing: 0.1rem;

    padding: 8px 16px;
    border-radius: 8px;
}

.menu__li>a:hover {
    color: var(--tiger-flame);
    background-color: var(--white-smoke);
}

.title {
    font-weight: bold;
    font-size: 2.4rem;
    margin-top: 0px;
    margin-bottom: 24px;
}

.main {
    font-family: monospace;
    width: calc(100vw - 32px);
    max-width: 50rem;
    height: 100vh;

    margin: auto;
}

.section {
    padding-bottom: 24px;
    margin-bottom: 48px;
}

.section:not(:last-child) {
    border-bottom-width: 2px;
    border-bottom-style: solid;
    border-bottom-color: var(--tiger-flame);
}

.section__title {
    font-size: 1.4rem;
}

.exercises-list {
    font-size: 16px;
    list-style: none;
    padding: 0px;
}

.exercises-list__li {
    padding: 12px 16px;
}

.exercises-list__li:not(:last-child) {
    border-bottom: 1px solid var(--azure-mist);
}

.exercises-list__li:nth-child(odd) {
    background-color: var(--white-smoke);
}

.exercises-list__li:hover {
    background-color: var(--azure-mist);
}

.link {
    text-decoration: none;
    color: var(--pacific-cyan);
    border-bottom: 1px solid var(--pacific-cyan);
}

.link:hover {
    border-bottom: 2px solid var(--pacific-cyan);
    font-weight: bold;
}

.fa-circle-arrow-up {
    color: var(--tiger-flame);
    font-size: 3rem;
    position: fixed;
    right: 20vw;
    bottom: 5vh;
}