:root {
    --box-margin: 0.5em;
    --border-r: 4px;
}

/* Paragraphs
*****************************************************/
main p {
    margin-block-end: 1em;
    font-size: 100%;
}

main q {
    quotes: "\0022" "\0022";

    &::before {
        content: open-quote;
    }
    
    &::after {
        content: close-quote;
    }
}

/* Environment
*****************************************************/
.definition, .lemma, .theorem, .proposition, .corollary, .proof,
.example, .exercise, .remark, .problem, .solution {
    margin-inline: calc(-1 * var(--box-margin));
    margin-block: 1em;
    box-shadow: 1px 2px 10px hsl(0, 20%, 90%);
    background-color: white;
    border-width: 1px;
    border-style: solid;
    border-radius: var(--border-r);

    &::before {
        font-weight: bold;
        display: block;
        margin-block-end: 0.5em;
        padding-block: 0.5em;
        padding-inline: var(--box-margin);
        border-radius: var(--border-r) var(--border-r) 0 0;
    }

    p {
        margin-inline: var(--box-margin);
    }

    & > :is(ul, ol):first-child {
        margin-block-start: var(--box-margin);
    }
}

.definition {
    border-color: hsl(45, 50%, 50%);

    p:first-child {
        margin-block-start: 1ex;
    }
}

.lemma, .theorem, .proposition, .corollary {
    border-color: hsl(160, 50%, 50%);

    &::before {
        background-color: hsl(130, 100%, 90%);
    }

    & + .proof {
        margin-block-start: -1ex;
    }
}

.theorem::before {
    content: "Teorema " attr(data-title);
}
 
.lemma::before {
    content: "Lema " attr(data-title);
}

.proposition::before {
    content: "Proposición " attr(data-title);
}

.corollary::before {
    content: "Corolario " attr(data-title);
}

.proof {
    border-color: hsl(160, 50%, 60%);

    &::before {
        content: "Proba " attr(data-title);
        background-color: hsl(130, 100%, 97%);
    }
}

.remark, .example, .exercise {
    border-color: hsl(0, 0%, 40%);
    
    &::before {
        background-color: hsl(0, 0%, 90%);
    }
}

.example::before {
    content: "Exemplo " attr(data-title);
}

.exercise::before {
    content: "Exercicio " attr(data-title);
}

.remark::before {
    content: "Observación " attr(data-title);
}

.problem {
    border-color: hsl(200, 50%, 60%);

    &::before {
        content: "Problema " attr(data-title);
        background-color: hsl(200, 100%, 90%);
    }
}

.solution {
    border-color: hsl(200, 50%, 60%);
    border-block-start-width: 0;

    &::before {
        content: "Solución " attr(data-title);
        background-color: hsl(200, 100%, 95%);
    }
}

/* Heading
*****************************************************/
h1, h2, h3, h4, h5 {
    text-align: left;
    font-weight: bold;
    margin-block-start: 2em;
    margin-block-end: 0.5em;
    scroll-margin-block: 2em 0;
}

h1 {
    font-size: 250%;
}

h2 {
    font-size: 150%;
}

h3 {
    font-size: 125%;
}

h4 {
    font-size: 110%;
}

h5 {
	font-size: 105%;
}


/* List-like
*****************************************************/
main :is(ol, ul) {
    margin-block: -1ex 1em;
    margin-inline: 2em var(--box-margin);
}

main ul {
    list-style-type: square;
}

main :is(ol, ul) li :is(ol, ul) {
    margin-block-start: 0;
    margin-inline-end: 0;
}


/* Latex
*****************************************************/
.latex-only {
    display: none;
}