:root {
    --hatcherblue: #6290C0;
    --babyblue: #89CFF0;
    --fadedbabyblue: #89CFF040;
}

/* TODO: On mobile, link colors do not work. Fix this */
p {
    font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
}

.exercise-container {
    display: flex;
    flex-direction: column;
}

.exercise-title {
    align-self: left;

    color: var(--hatcherblue);
    font-weight: bold;

    margin: 0px 0px 0px 0px;
}

.exercise-statement {
    display: flexbox;
    flex-direction: column;

    font-size: larger;

    /* top right bottom left */
    padding: 2px 5px 4px 10px;

    border-style: solid;
    border-width: 0px 0px 0px 5px;
    border-color: var(--babyblue);

    margin: 0px 0px 0px 0px;

    background-color: var(--fadedbabyblue);
}

.exercise-statement p {
    padding: 0;
    margin: 0;
}


.solution-container {
    display: flex;
    flex-direction: column;
    justify-content: space-between;

    overflow-wrap: break-word;
    font-size: large;

    border-style: solid;
    border-width: 0px 0px 0px 5px;
    border-color: gray;

    margin-top: 0px;
    padding: 0em 0.5em 0em 0.5em;
    background-color: #80808010;
}


.hint-container {
    display: none;
}

.hint-container.active {
    display: flex;
    flex-direction: column;
}

details.hint-details {
    margin-top: 5px;
    padding: 5px;
    border: 2px solid var(--babyblue);
    border-radius: 5px;
    padding: 0.5em 0.5em 0;
}


details.hint-details summary {
    list-style-type: '? ';
    font-size: large;
    font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
    color: gray;
    margin: -0.5em -0.5em 0;
    padding: 0.5em;
}


details.hint-details summary::after {
    content: attr(summary-closed);
    color: var(--hatcherblue);
}


details.hint-details[open] summary {
    list-style-type: '\BF\20';
    /* unicode for '¿ ' */
    border-bottom: 1px solid var(--babyblue);
    margin-bottom: 0.5em;
}


details.hint-details[open] summary::after {
    content: attr(summary-open);
}


details.solution-details {
    margin-top: 5px;
    padding: 5px;
}


details.solution-details summary {
    font-size: large;
    font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
    list-style-type: '+ ';

}


details.solution-details summary::after {
    content: attr(summary-closed);
}


details.solution-details[open] summary {
    list-style-type: '- ';
}


details.solution-details[open] summary::after {
    content: attr(summary-open);
}


.img-container {
    align-self: center;
}


.img-container img {
    display: block;
    align-self: center;
    width: 100%;
    max-width: 100%;
    height: auto;
    border-radius: 8px;
}

iframe {
    display: block;
    align-self: center;
    width: 60%;
    max-width: 100%;
    aspect-ratio: 16/9;
    border: none;
    border-radius: 8px;
}