/** GENERAL STUFF **/
:root { line-height: 130%; }
        
main { margin-bottom: 3rem; }

@media screen and (max-width: 500px) {
    :root { font-size: 15px; }
}


/** MAIN TEXTBOX **/
.textbox-container { max-width: 750px; margin: auto; }
.textbox {
    background-color: var(--textbox-color-light);
    padding: 2rem 3rem;
}
.textbox img {
    display: block;
    max-width: 80%;
    margin: auto;
}
@media screen and (max-width: 650px) {
    .textbox { padding: 1.5rem 2.5rem; }
}
@media screen and (max-width: 450px) {
    .textbox { padding: 1rem 1.5rem; }
    body { padding: 0.5rem; }
    ul, ol { padding-left: 1.5rem;}
    .textbox img { max-width: 100%; }
}


/** TITLE HEADINGS **/
h1 {
    text-align: center;
    font-family: Pangolin;
    font-size: 3rem;
    color: var(--textbox-color-light);
}
h1.date { font-size: 2rem; }
@media screen and (max-width: 700px){
    h1 {line-height: 100%;}
    h1.date {margin-top: 3rem;}
}


/** OTHER TEXT STYLINGS **/
.psa {
    font-size: 1rem;
    color: #8b8685;
    text-align: center;
}

h2, h3 { font-family: Pangolin;}

h2 { 
    text-align: center;
    color: var(--page-hightlight);
    font-size: 2.4rem;
}
h3 { font-size: 1.4rem; }
        
i { color: var(--page-hightlight); }

ul {
    list-style-image: url("../img/seedling-solid-full.svg");
}
li { margin-bottom: 1rem; }

a:link, a:visited {
    color: var(--page-hightlight);
}
a:hover, a:active {
    color: var(--page-highlight-2);
    text-decoration: underline;
}


/** RETURN BUTTON **/
.buttonback {
    z-index: 10;
    width: 175px;
    position: absolute;
    top: 1rem;
    left: 1rem;
    filter: drop-shadow(2px 3px 8px #58647ea8);
}
.buttonback a {
    font-family: RetroByte;
    display: block;
    background-color: var(--textbox-color-light);
    text-align: center;
    font-size: 1.1rem;
    padding: 0.5em;
}
.buttonback a:link, .buttonback a:visited {
    color:var(--page-hightlight);
    text-decoration: none;
}
.buttonback a:hover, .buttonback a:active {
    text-decoration: underline;
    color:var(--page-highlight-2);
}
@media screen and (max-width: 700px) {
    .buttonback {
        left: calc(50% - 88px);
    }
}