:root {
    --primary-color: #137fec;
    --secondary-color: #9cb3e0;
    --primary-background-color: #dbeafe;
    --background-color: #ffffff;
    --background-color-alt: #f5f7fa;
    --background-color-dark: #d5dfeb;
    --text-color: #1d1d1d;
    --secondary-text-color: #4b5563;
    --hr: #e5e7eb;
    --dark-hr: #cbced4;

    /* Colores del container de los exámenes */
    --green-color: #22c55e;
    --green-color: #2ecc71;
    --red-color: #e74c3c;
    --bg-container: #ffffff;
    --bg-option: #f2f2f2;
    --bg-option-hover: #74a7dd;
    --bg-feedback: #d1e6fc;
}

.svg-header {
    height: 2rem;
    width: 2rem;
}

.svg-text {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .5em;

    svg {
        color: var(--primary-color);
    }
}

body>header {
    background-color: var(--background-color);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1em;
    border-bottom: 2px solid var(--hr);
    width: 100%;

    div>h1 {
        font-size: 1rem;
        font-weight: 700;
    }

    nav {
        display: flex;
        align-items: center;
        gap: .8em;

        a,
        span {
            padding: .5em;
            text-decoration: none;
            color: var(--text-color);
            font-weight: 500;
            font-size: .9rem;
            cursor: pointer;
            transition: .5s, color .10s;
            -webkit-transition: .5s, color .10s;
            -moz-transition: .5s, color .10s;
        }

        a:hover {
            color: var(--primary-color);
            transform: translatey(-5px);
            -webkit-transform: translatey(-5px);
            -moz-transform: translatey(-5px);
        }

        span {
            color: var(--secondary-color);
        }
    }
}

body>footer {
    background-color: var(--background-color-alt);
    color: var(--secondary-text-color);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1em;
    /* border-top: 2px solid var(--dark-hr); */
    width: 100%;
    box-shadow: 0 -5px 10px rgba(0, 0, 0, 0.12);
}

body>main{
    background-color: var(--primary-background-color);
}