/* 
  The style rules specify elements by type and by attributes such as class and ID
  Each section indicates an element or elements, then lists the style properties to apply
  See if you can cross-reference the rules in this file with the elements in index.html
*/

/* Our default values set as CSS variables */
* {
    border: 0;
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    background-color: #ffffff;
    color: #222222;
    font-family: monospace;
    line-height: 150%;
}

@media (min-aspect-ratio: 8/5) {
    html {
        font-size: 16px;
    }
}

@media (max-aspect-ratio: 8/5) {
    html {
        font-size: 12px;
    }
}

body {
    padding: 2rem;
}

table {
    border-collapse: collapse;
    border-spacing: 0;
}

table td + td {
    padding-left: 1rem;
}

ul, ol {
    list-style: inside;
}

li {
    margin-left: 2em;
}

#container img {
    max-width: 100%;
}

#container {
    margin: 0 auto;
    max-width: 60rem;
}

#container > #header {
    margin-bottom: 2em;
}

#container div + div {
    margin-top: 1rem;
}

#container div.aside {
    background-color: #444444;
    color: #eeeeee;
    font-size: 80%;
    padding: 1rem;
}

#container div.quotation {
    background-color: #dddddd;
    border-radius: 5px;
    font-style: italic;
    margin-left: 4rem;
    margin-right: 4rem;
    padding: 0.5em;
}

#container div.citation {
    margin-left: 4rem;
    margin-right: 4rem;
    margin-top: 0;
}

#container .emphasis {
    font-size: 110%;
    font-weight: bold;
}

#container > * {
    margin-left: 2rem;
    margin-right: 2rem;
}

#container > header {
    color: #000000;
    font-size: 150%;
    margin-bottom: 1em;
    margin-top: 2em;
    padding-left: 2rem;
    padding-right: 2rem;
    position: relative;
}

#container > header::before {
    background-color: #000000;
    bottom: 0;
    content: "";
    display: block;
    height: 100%;
    left: 0;
    position: absolute;
    width: 1rem;
}

#container code {
    background-color: #cccccc;
    display: inline;
    padding: 2px;
}

#container codeblock {
    background-color: #cccccc;
    display: block;
    margin: 2em 2rem;
    padding: 1rem;
    white-space: pre;
}

/* https://css-tricks.com/fluid-width-video/ */
#container .youtube-wrapper {
    height: 0;
    padding-bottom: 56.25%;
    position: relative;
}

#container .youtube-wrapper > iframe {
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%;
}

#container .image-with-commentary {
    background-color: #333333;
    color: #dddddd;
    display: inline-block;
    font-size: 75%;
    line-height: 130%;
    margin-left: 64px;
    margin-right: 64px;
    max-width: 90%;
    padding: 5px;
}

#container .image-with-commentary > img {
    display: block;
    padding-bottom: 5px;
}

#container .image-with-commentary a:link {
    color: #55f55f;
}

#container .image-with-commentary a:visited {
    color: #f5f5f5;
}

#container img.icon {
    vertical-align: middle;
    width: 1em;
}