/****************************
 ** Basics
 */

html, body {
    margin: 0;
    padding: 0;
    font-family: system-ui, -apple-system, helvetica, sans-serif;
    font-size: 12px;
    line-height: 1.5;
}
@media (max-width: 650px) {
    html, body {
        font-size: 10px;
        line-height: 1.5;
    }
}
body {
    background-image: url("../images/background.svg");
    background-attachment: fixed;
    background-size: cover;
    color: #000;
}
h1, .h1 {
    margin: 2rem 0 0 0;
    font-size: 1.8rem;
    line-height: 1.5;
}
h2, .h2 {
    margin: 1.25rem 0 0.5rem 0;
    font-size: 1.3rem;
    line-height: 1.5;
}
h3, .h3 {
    margin: 1.25rem 0 0.5rem 0;
    font-size: 1rem;
    line-height: 1.5;
}
h1, h2, h3, .h1, .h2, .h3 {
    font-family: "Trebuchet MS", system-ui, -apple-system, helvetica, sans-serif;
    font-weight: bold;
    color: #000a;
}
hr {
    width: 100%;
    height: 1px;
    margin-top: 2rem;
    margin-bottom: 0.5rem;
    border-color: #eee;
    border-style: solid;
    border-width: 0 0 1px 0;
}
p {
    margin: 0 0 1em 0;
}
a {
    font-weight: bold;
    text-decoration: none;
    color: #642;
}
a:visited {
    color: #864;
}
a:hover,
a.hover {
    text-decoration: underline;
}
img {
    border: none;
    vertical-align: middle;
}
ul,
ol,
dl {
    margin: 1rem 0 1rem 0;
    padding: 0;
}
dt {
    margin: 9px 0 0 30px;
    padding: 0;
}
dd {
    margin: 4px 0 12px 30px;
    padding: 0;
    font-size: smaller;
}
li {
    margin: 6px 0 6px 30px;
    padding: 0;
}
blockquote {
    margin: 12px 40px 12px 40px;
}
blockquote cite {
    display: block;
    text-align: right;
    font-style: italic;
}
pre,
code {
    color: #367;
    font-family: monospace;
    font-weight: bold;
}
table {
    width: auto;
    margin: 0 0 15px 0;
    border: none;
    border-collapse: collapse;
    padding: 0;
    font-size: inherit;
    font-family: inherit;
}
tr {
    margin: 0;
    border: none;
    padding: 0;
}
th {
    margin: 0;
    border: none;
    padding: 0;
    vertical-align: top;
    text-align: left;
}
td {
    margin: 0;
    border: none;
    padding: 0;
    vertical-align: top;
}
iframe {
    border: none;
}
@media print {
    * {
        box-shadow: none !important;
        text-shadow: none !important;
    }
    body {
        background: #fff;
    }
    h1, h2, h3 {
        break-after: avoid;
        color: inherit !important;
    }
    a {
        font-weight: normal;
        color: inherit !important;
    }
    h1, h2, h3, p, li, table, th, td {
        break-inside: avoid;
    }
}


/****************************
 ** Pager
 */

nav ol {
    display: block;
    margin: 1.5rem 0 1.5rem 0;
    text-align: right;
    font-size: 1.1em;
    line-height: 1.5;
    font-weight: bold;
    color: #aaa;
}
nav ol li {
    display: inline-block;
    margin: 0 0.1em;
}
nav ol a,
nav ol a:visited {
    display: inline-block;
    min-width: 0.5em;
    border-radius: 0.25rem;
    padding: 0.2em 0.6em 0.1em 0.6em;
    color: #888;
    text-align: center;
}
nav ol a:hover {
    box-shadow: 1px 1px 2px #a84 inset;
    background: #c842;
    color: #642;
    text-decoration: none;
}
nav ol a.current:not(:hover) {
    box-shadow: 1px 1px 2px #0008 inset;
    background: #f8f8f8;
    color: #333;
}


/****************************
 ** Form elements
 */

input {
    margin: 2px 5px;
    border: 1px solid #ccc;
    border-radius: 4px;
    padding: 4px 6px;
    vertical-align: middle;
    outline: none;
    background: #fdfdfd;
    font-family: ui-monospace, "Courier New", monospace;
    font-size: inherit;
    line-height: 1.5;
}
input:focus {
    border-color: #8cf;
    box-shadow: 0 0 3px #0af;
    background: #fff;
    outline: none;
}
input[type="search"] {
    border-radius: 2em;
    padding-left: 2em;
    background:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='0.75em' height='0.75em' viewBox='0 0 50 50'%3E%3Cpath d='M 21 3 C 11.601563 3 4 10.601563 4 20 C 4 29.398438 11.601563 37 21 37 C 24.355469 37 27.460938 36.015625 30.09375 34.34375 L 42.375 46.625 L 46.625 42.375 L 34.5 30.28125 C 36.679688 27.421875 38 23.878906 38 20 C 38 10.601563 30.398438 3 21 3 Z M 21 7 C 28.199219 7 34 12.800781 34 20 C 34 27.199219 28.199219 33 21 33 C 13.800781 33 8 27.199219 8 20 C 8 12.800781 13.800781 7 21 7 Z' opacity='0.3'/%3E%3C/svg%3E")
        no-repeat 0.5em 50%,
        #fff;
}
@media print {
    form, input {
        display: none !important;
    }
}


/****************************
 ** Page layout
 */

.layout-root {
    width: calc(780px - 10rem);
    min-height: calc(100vh - 4rem);
    margin: 0 auto;
    padding: 2rem 5rem;
    background: #FFF;
    box-shadow: 0 0 10px #0008;
}
@media (max-width: 780px) {
    .layout-root {
        width: calc(100% - 4rem);
        padding: 1rem 2rem;
    }
}
.layout-header {
    position: relative;
    width: 100%;
    height: 18vh;
    min-height: 10rem;
    max-height: 18rem;
    border-radius: 1rem;
    background-image: url("../images/header.svg");
    background-size: cover;
    box-shadow: 0 0 0.75em #0006;
}
.layout-header .title {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 95%;
    transform: translate(-50%, -66%);
    font-family: "Trebuchet MS", system-ui, -apple-system, helvetica, sans-serif;
    font-size: 3.5rem;
    font-weight: bold;
    line-height: 1.3;
    color: white;
    text-align: center;
    text-shadow: 1px 1px 0.075em #000;
}
.layout-header .menu {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    border-radius: 0 0 1rem 1rem; /* Avoid overflow */
    padding: 0 0.75em;
    font-size: 1.2rem;
    line-height: 2.2;
    letter-spacing: 2px;
    background: #fff6;
}
@media (max-width: 650px) {
    .layout-header .title {
        font-size: 2rem;
        line-height: 1.3;
    }
    .layout-header .menu {
        font-size: 1rem;
        line-height: 2.2;
        letter-spacing: 1px;
    }
}
.layout-header .menu a {
    border-radius: 0.25rem;
    padding: 0.2em 0.5em;
    color: #fff;
    text-decoration: none !important;
}
.layout-header .menu a.selected {
    color: #333;
    background: linear-gradient(to bottom, #fffc, #fff8);
}
.layout-header .menu a:hover,
.layout-header .menu a.selected:hover {
    color: #fff;
    background: linear-gradient(to bottom, #0008, #000c);
}
.layout-content {
    margin-top: 2em;
}
.layout-content hr {
    width: 66%;
    margin-top: 1rem;
    margin-bottom: 1.5rem;
    border-width: 0 0 1px 0;
    border-color: #eee;
}
.layout-content table {
    margin: 1rem 0;
}
.layout-content th,
.layout-content td {
    padding: 0.25rem 1rem 0.25rem 0;
}
.layout-content table hr {
    width: 100%;
    margin: 0.25rem 0 0.75rem 0;
}
.layout-footer {
    font-size: smaller;
    color: #666;
}
@media print {
    .layout-header,
    .layout-footer {
        display: none !important;
    }
}


/* * * * * * * * * * * * * * * * * * * * * * * * * * * * *
 *
 *  Other Styles
 *
 */

/* Table of Content link */
a.toc {
    display: block;
    float: right;
    margin: 6px 0 10px -30px;
    border-radius: 3px;
    padding: 0 7px 1px 8px;
    font-size: 22px;
    color: #888;
}
a.toc:hover {
    box-shadow: 1px 1px 2px #6a3 inset;
    background: #f8fff0;
    color: #464;
    text-decoration: none;
}

/* Chevron list style */
ul.chevron {
    list-style: none;
}
ul.chevron li {
    margin-bottom: 12px;
}
ul.chevron li::before {
    display: block;
    float: left;
    width: 15px;
    margin-left: -15px;
    line-height: 16px;
    font-family: FontAwesome; /* stylelint-disable-line font-family-no-missing-generic-family-keyword */
    font-weight: normal;
    font-style: normal;
    text-decoration: inherit;
    -webkit-font-smoothing: antialiased;
    content: "\f054";
    speak: none;
    transition: all 1s ease;
}
ul.chevron li.hover::before {
    margin-left: -20px;
    margin-right: 5px;
    font-size: 15px;
    text-shadow: 2px 2px 4px #888;
}

/* Box style */
.box,
td.box {
    margin: 10px;
    border-radius: 6px 6px;
    padding: 4px 10px 6px 10px;
    border: 1px solid #ffc;
    background: #fffff8;
    background: linear-gradient(to bottom, #fff, #ffe);
}
.box h2 {
    margin-top: 10px;
}
.box p {
    margin-top: 3px;
    margin-bottom: 3px;
}
div.box img {
    margin: 6px;
}


/****************************
 ** Curriculum tags, etc.
 */

[class^="tag-"],
[class*=" tag-"] {
    display: inline-block;
    margin: 5px 2px 5px 0;
    border-width: 1px;
    border-style: solid;
    border-radius: 3px;
    padding: 1px 3px 1px 3px;
    box-shadow: 1px 1px 2px #0006;
    font-size: 10px;
    text-shadow: 0 1px 0 #fff;
}
.tag-grey {
    border-color: #ccc;
    background: linear-gradient(to bottom, #fdfdfd, #eee);
    color: #333;
}
.tag-red {
    border-color: #edb;
    background: linear-gradient(to bottom, #fffefd, #edc);
    color: #643;
}
.tag-green {
    border-color: #bdb;
    background: linear-gradient(to bottom, #fdfffd, #ded);
    color: #363;
}
.tag-blue {
    border-color: #bde;
    background: linear-gradient(to bottom, #fdfdff, #e8f8ff);
    color: #358;
}
.filtered {
    max-height: 3em;
    overflow-y: hidden;
    opacity: 0.3;
}


/* Target link style */
.target {
    cursor: pointer;
}

/* Float styles */
.float-left,
img.float-left {
    float: left;
    margin: 0 30px 20px 0;
}
.float-right,
img.float-right {
    float: right;
    margin: 0 0 20px 30px;
}

/* Center text align */
.center {
    text-align: center;
}

/* Shadow style */
.shadow,
.box.shadow {
    box-shadow: 0 2px 6px #0008;
}

/* Rounded corner style */
.rounded {
    border-radius: 5%;
}

/* Hidden style */
.hidden {
    display: none;
}

/* Avoid page breaks */
.break-avoid {
    break-inside: avoid;
}


/* Animation styles */
.animate-fast,
.animate-fast * {
    transition: all 0.4s ease;
}
.animate-medium,
.animate-medium * {
    transition: all 0.8s ease;
}
.animate-fast.hidden,
.animate-fast .hidden,
.animate-medium.hidden,
.animate-medium .hidden {
    display: block;
    overflow: hidden;
    max-height: 0;
    margin-top: 0;
    margin-bottom: 0;
    padding-top: 0;
    padding-bottom: 0;
    opacity: 0;
}


/****************************
 ** Animations
 */

.anim-book {
    position: relative;
    width: 20rem;
    height: 20.2rem;
    margin: -3rem 1rem 1rem 3rem;
    border-radius: 10%;
    box-shadow: 2px 2px 5px #888;
    font-size: 13.5rem;
    text-align: center;
    text-shadow: 1px 2px 0 #f8f8f8;
    background: linear-gradient(to bottom right, #fff, #ccc);
    color: #aaa;
    animation: box-bounce 6s ease-in-out infinite alternate;
}
@media (max-width: 650px) {
    .anim-book {
        width: 13rem;
        height: 13.2rem;
        font-size: 8.75rem;
    }
}
@keyframes box-bounce {
    0% {
        transform: rotate(7deg) scale(0.9) translateX(25px);
    }
    100% {
        transform: rotate(-5deg) scale(1.1) translateX(-25px);
    }
}
.anim-book i {
    position: absolute;
    top: 0;
    left: 0;
    animation: book-bounce 8s linear infinite;
}
@keyframes book-bounce {
    0% {
        transform: rotate(-25deg) translate(20%, 21%);
    }
    35% {
        transform: rotate(0deg) translate(77%, 25%);
    }
    47% {
        transform: rotate(-20deg) translate(20%, 51%);
    }
    75% {
        transform: rotate(0deg) translate(0, 25%);
    }
    100% {
        transform: rotate(-25deg) translate(20%, 21%);
    }
}
.anim-space-warp {
    position: relative;
    width: 20rem;
    height: 20rem;
    margin: -3rem 1rem 1rem 3rem;
    border-radius: 50%;
    box-shadow: 0 0 5px #000;
    background: radial-gradient(circle, #aaa, #557, #113, #000);
    font-size: 2.4rem;
    animation: space-warp 2.5s ease-in-out alternate infinite;
}
@media (max-width: 650px) {
    .anim-space-warp {
        width: 15rem;
        height: 15rem;
        font-size: 2rem;
    }
}
@keyframes space-warp {
    0% {
        border-radius: 30% 70%;
        transform: scale(0.9);
    }
    100% {
        border-radius: 55% 45%;
        transform: scale(1);
    }
}
.anim-space-warp i {
    position: absolute;
    top: calc(50% - 0.5em);
    left: calc(50% - 0.5em);
}
.anim-space-warp i.fa-sun {
    font-size: 1.75em;
    color: #fe8;
    animation: warp-sun 5s linear infinite;
}
@keyframes warp-sun {
    0% {
        transform: scale(0.8) rotate(0deg);
    }
    50% {
        transform: scale(1.3) rotate(22.5deg);
    }
    100% {
        transform: scale(0.8) rotate(45deg);
    }
}
.anim-space-warp .fa-plane {
    color: #0df;
    text-shadow: 5px 5px 1px #000;
    transform: translate(-1.1em, -1.1em) rotate(135deg);
    animation: warp-plane 15s linear infinite;
}
@keyframes warp-plane {
    0% {
        transform: rotate(0deg) translate(-1.1em, -1.1em) rotate(135deg);
    }
    100% {
        transform: rotate(-360deg) translate(-1.1em, -1.1em) rotate(135deg);
    }
}
.anim-space-warp .fa-rocket {
    color: #f66;
    text-shadow: -5px -10px 1px #000;
    transform: translate(-2em, -2em);
    animation: warp-rocket 9s linear infinite;
}
@keyframes warp-rocket {
    0% {
        transform: rotate(0deg) translate(-2em, -2em);
    }
    100% {
        transform: rotate(360deg) translate(-2em, -2em);
    }
}
.anim-colorflow {
    width: 20rem;
    height: 20rem;
    margin: 2rem 1rem 1rem 2rem;
    border-radius: 50%;
    box-shadow: 0.2rem 0.2rem 0.5rem #000a;
    font-size: 10rem;
    line-height: 2;
    text-align: center;
    background-image: linear-gradient(
        to bottom left,
        #fee, #ffe, #efe, #eff, #eef, #fef,
        #fee, #ffe, #efe, #eff, #eef, #fef,
        #fee
    );
    background-size: 200% 200%;
    background-position: 0% 100%;
    color: #0002;
    animation:
        breathe 4s ease-in-out infinite alternate,
        move-background 7s linear infinite;
}
@media (max-width: 650px) {
    .anim-colorflow {
        width: 12rem;
        height: 12rem;
        font-size: 6rem;
        line-height: 2;
    }
}
@keyframes breathe {
    0% {
        transform: scale(1) rotate(-5deg) translate(0, 0);
    }
    100% {
        transform: scale(0.9) rotate(10deg) translate(15px, -15px);
    }
}
@keyframes move-background {
    0% {
        background-position: 0% 100%;
    }
    100% {
        background-position: 100% 0%;
    }
}