:root {
    --light: #E7EFF9;
    --darkish: #656AFF;
    --transparent: #0c08240f;
    --dark: #13065a;
    --text: #0c0824;
    --accent: #DEFF23;
    --body-size: 1.1rem;
    --headerSize: 1.7rem;
    --contentWidth: min(80vw,1000px);
    --imageHeight: min(40vw,600px);
}

/* ----------------------------------------------------------------------------------------------- */

html, body, h1, h2, h3, h4, h5, h6, p, a, input {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Golos Text', sans serif; /*400 to 900*/
    font-weight: 300;
    scroll-behavior: smooth;
    transition: 0.5s ease;
}

html {
    background-color: var(--light);
    color: var(--text);
    overflow-x: hidden;
}

h1 {
    font-size: var(--headerSize);
    color: var(--light);
    line-height: var(--headerSize);
}

h2 {
    font-weight: 900;
    font-size: min(9.5vw,6rem);
    line-height: 90%;
    margin-top: 4rem;
    margin-bottom: 1rem;
    z-index: 5;
}

h3 {
    font-size: var(--headerSize);
    font-weight: 700;
    color: var(--darkish);
    margin: 0 0 4rem 0;
    max-width: 40ch;
    z-index: 5;
}

h4 {
    font-size: var(--headerSize);
    color: var(--darkish);
    margin-top: 4rem;
}

h5 {
    color: var(--light);
    margin: 0 0 .5rem 0;
    line-height: 100%;
    text-align: center;
    font-size: .8rem;
    text-transform: uppercase;
    font-weight: 600;
    letter-spacing: 2px;
}

p {
    font-size: var(--body-size);
    color: var(--text);
    margin: var(--body-size) 0 var(--body-size) 0;
    line-height: var(--headerSize);
    max-width: 70ch;
}

span {
    font-weight: 700;
    letter-spacing: .5px;
}

.title {
    font-size: calc(var(--headerSize) * 2);
    font-weight: 500;
    color: var(--accent) !important;
    margin: 0 0 3rem 0;
    letter-spacing: .3rem;
}

a {
    text-decoration: none;
    color: inherit;
} a:hover {
    color: var(--accent) !important;
}

img {
    display: block;
    width: 100%;
    max-width: 100%;
    height: auto;
}

/* ----------------------------------------------------------------------------------------------- */

.bigEq {
    font-size: min(2.1vw, var(--headerSize)) !important;
    color: var(--darkish);
}

.MathJax {
    scale: .9;
    padding: 0;
    margin: 0;
}

/* ----------------------------------------------------------------------------------------------- */

.error {
    display: none;
    position: fixed;
    width: 100vw;
    height: 100vh;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    padding: 2rem;
    background-color: var(--dark);
    box-sizing: border-box;
    z-index: 100000000000;
} .error p {
    font-size: var(--body-size);
    color: var(--accent);
}

.opener1, .opener2, .opener3, .opener4 { /* opening animation */
    position: fixed;
    z-index: 100000;
    background: url("images/og.svg");
    background-repeat: no-repeat;
    background-size: 100vw auto;
    background-color: var(--accent);
    background-attachment: fixed;
    top: 0;
    bottom: 0;
    animation-name: slideout;
    animation-duration: 2s;
    animation-timing-function: ease-in-outl;
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
} .opener1 {
    left: 0;
    right: 75vw;
    background-position: 0% 50%;
    animation-delay: 2s;
} .opener2 {
    left: 25vw;
    right: 50vw;
    background-position: 25% 50%;
    animation-delay: 2.3s;
} .opener3 {
    left: 50vw;
    right: 25vw;
    background-position: -50% 50%;
    animation-delay: 2.6s;
} .opener4 {
    left: 75vw;
    right: 0;
    background-position: -75% 50%;
    animation-delay: 2.9s;
}

.menu { /* sidebar navigation */
    position: fixed;
    background-color: var(--dark);
    color: var(--light);
    z-index: 10;
    height: 100%;
    left: 0;
    top: 0;
    bottom: 0;
    right: calc(100vw - 30rem);
    display: flex;
    flex-flow: column;
    justify-content: center;
    box-sizing: border-box;
    padding: 4rem;
    transition: .5s ease;
    background-image: none;
} .menu p {
    color: var(--darkish);
    margin: .5rem 0 0 0;
    line-height: 130%;
    max-width: 24ch;
} .full { /* fullscreen nav */
    left: 0;
    right: 0;
    padding-left: 40vw;
    background-image: url("images/");
} .hidden { /* collapsed nav */
    left: -28rem;
    right: calc(100vw - 2rem);
    transition: .5s ease;
}

.minimizer { /* square to interact with nav */
    position: absolute;
    top: 4rem;
    right: -4rem;
    height: 4rem;
    width: 4rem;
    background-color: var(--darkish);
    z-index: 0;
    display: flex;
    flex-flow: row nowrap;
    align-items: center;
    justify-content: right;
    overflow-x: hidden;
    transition: .5s ease;
    padding: 0;
} .minhover:hover {
    width: 10rem;
    right: -10rem;
    transition: .5s ease;
}

.menuItem { /* menu section */
    margin-top: 3rem;
    transition: .5s ease;
    max-width: 18rem;
} .menuItem:hover {
    margin-left: 2rem;
    transition: .5s ease;
    cursor: pointer;
}

.label {
    transition: 0.5s ease;
}

/* ----------------------------------------------------------------------------------------------- */
/* SECTIONS */

.content { /* content = hidden */
    display: none;
    opacity: 0%;
    position: relative;
    transition: .5s ease;
    transition-delay: 5s;
    width: 100%;
    padding: 4rem 0 0 0;
} .selected { /* content = visible */
    display: block;
    opacity: 100%;
}

.accent { /* accent row */
    background-color: var(--text);
    color: var(--light);
    padding-bottom: 3.5rem;
} .accent p { color: var(--light); }

.margins { /* center content text blocks */
    margin: 0;
    padding: 2rem calc(calc(100vw - var(--contentWidth))/2) 2rem calc(calc(100vw - var(--contentWidth))/2);
}

.footer { /* footer */
    background-color: var(--accent);
    margin-top: 6rem;
    padding: 2rem 0 6rem;
} .footer p {
    font-size: 0.9rem;
    margin: 0;
}

/* ----------------------------------------------------------------------------------------------- */
/* SNAP SCROLLS */

.snapalt {
    display: none;
}

.snapscroll { /* snap scroll div */
    position: relative;
    display: block;
    width: var(--contentWidth);
    height: calc(var(--imageHeight) + 5vh);
    overflow-y: scroll;
    scroll-snap-type: y mandatory;
    -ms-overflow-style: none;
    scrollbar-width: none;
    background-size: var(--contentWidth) var(--imageHeight);
    background-repeat: no-repeat;
    background-position: top;
    padding: 0;
    margin: 0;
}
/* .snapscroll::-webkit-scrollbar { width: 40px; }
.snapscroll::-webkit-scrollbar-track { background: #656aff61; }
.snapscroll::-webkit-scrollbar-thumb { background: var(--darkish); }
.snapscroll::-webkit-scrollbar-thumb:hover { background: var(--dark); } */

.smallSection { /* snapscroll sections */
    height: var(--imageHeight);
    width: var(--contentWidth);
    scroll-snap-stop: always;
    scroll-snap-align: start;
}

.gradientTop { /* fade out */
    position: sticky;
    top: 0;
    width: 100%;
    height: 2vh;
    margin-bottom: -2vh;
    z-index: 1;
    background: linear-gradient(0deg, #e7eff900 0%, #E7EFF9 100%);
}

.gradientBottom { /* fade in */
    position: sticky;
    top: calc(var(--imageHeight) - 7vh);
    width: 100%;
    height: 12vh;
    margin-bottom: -12vh;
    z-index: 1;
    background: linear-gradient(180deg, #e7eff900 0%, #E7EFF9 58%);
}

.overlay { /* fixed snapscroll */
    position: sticky;
    top: 0;
    height: var(--imageHeight);
    width: var(--contentWidth);
    margin: 0 0 calc(-1*var(--imageHeight)) 0;
    scroll-snap-align: none;
}

.filler { /* extra div for bottom of snapscroll */
    height: 5vh;
    scroll-snap-align: none;
    scroll-snap-align: none;
}

/* ----------------------------------------------------------------------------------------------- */
/* DROPDOWN */

.dropdown { /* dropdown */
    width: 100%;
    height: auto;
    margin: 3rem 0 3rem 0;
    padding: 1rem;
    background-color: var(--transparent);
    transition: .5s ease;
}

.dropdown label { /* title */
    color: var(--text);
    transition: .5s ease;
    font-size: var(--body-size);
} .dropdown:hover label {
    color: var(--darkish);
    transition: .5s ease;
} .dropdown > input:checked~label {
    color: var(--darkish);
    transition: .5s ease;
}

.dropdown > input, .dropped { /* content */
    display: none;
    transition: .5s ease;
    padding: 1.2rem 0 0 1.2rem;
    transition: .5s ease;
} .dropdown > input:checked~.dropped {
    display: block;
    transition: .5s ease;
}

.next { /* next section button */
    background-color: var(--dark);
    margin: 3rem 0 -3rem auto;
    width: fit-content;
    padding: 1rem;
    transition: .5s ease;
} .next:hover {
    background-color: var(--darkish);
    transition: .5s ease;
} .next p {
    color: var(--light);
    margin: 0;
}

/* ----------------------------------------------------------------------------------------------- */
/* SUB-FORMATTING */

.box2 { /* 2 even columns */
    display: flex;
    flex-flow: row wrap;
    gap: 1rem;
    justify-content: space-between;
    align-items: center;
} .box2 > * { max-width: 45%; }

/* ----------------------------------------------------------------------------------------------- */
/* SCROLLBAR */
::-webkit-scrollbar { width: 10px; }
::-webkit-scrollbar-track { background: #656aff61; }
::-webkit-scrollbar-thumb { background: var(--darkish); }
::-webkit-scrollbar-thumb:hover { background: var(--dark); }

/* ----------------------------------------------------------------------------------------------- */
/* SCROLL DOTS */

.dotter { /* container */
    position: sticky;
    height: var(--imageHeight);
    margin: 0 0 calc(-1*var(--imageHeight)) calc(var(--contentWidth) - 3rem);
    top: 0;
    display: flex;
    flex-flow: column;
    justify-content: center;
    align-items: center;
    z-index: 6;
    gap: 2rem;
}

.dot { /* individual dots */
    width: 1rem;
    height: 1rem;
    background-color: var(--darkish);
    border-radius: 1rem;
    transition: 0.5s ease;
} .dot:hover {
    background-color: var(--dark);
    transition: 0.5s ease;
    cursor: pointer;
}

.circled { /* active */
    outline: 2px solid var(--darkish);
    outline-offset: 4px;
}

/* ----------------------------------------------------------------------------------------------- */
/* INTERACT 2D */

#canvas { /* the big canvas */
    display: inherit;
    opacity: inherit;
    position: fixed;
    top: 0;
    right: 0rem;
    bottom: 0;
    left: 0;
    z-index: -5;
    /* overflow: hidden; */
}

input[type=text] { /* text inputs */
    background-color: var(--dark);
    outline: none;
    box-shadow: none;
    border: none;
    padding: 4px;
    text-align: center;
    color: var(--light);
    width: 100%;
    max-width: 2.5rem;
    font-size: var(--body-size);
    margin: 0;
}

input[type=checkbox] { /* checkboxes */
    width:fit-content;
    margin-right:0.3rem;
    color: var(--dark);
    accent-color: var(--darkish);
}

input[type=range] { /* slider */
    width: 100%;
    max-width: 150%;
    accent-color: var(--darkish);
    outline: none;
    margin-top: .5rem;
}

.minimizer, .tips, #close, .dropdown label, .next, #col1, #col2, #varOrig, #varNew, #varInv, #varEigs :hover {
    cursor: pointer;
}

.values { /* flex container for the menus */
    position: absolute;
    right: 3rem;
    bottom: 3rem;
    display: flex;
    flex-flow: row nowrap;
    justify-content: flex-end;
    align-items: flex-end;
    gap: 2rem;
}

.grids { /* menus */
    background-color: rgba(16,17,63,.6);
    padding: 1.5rem;
    display: flex;
    flex-flow: column;
    justify-content: space-around;
    align-items: center;
    gap: .5rem;
    height: fit-content;
    backdrop-filter: blur(6px);
} .grids p {
    color: var(--light);
    font-size: .9rem;
    width: 70%;
    margin: 0;
    text-align: center;
} .grids .MathJax {
    padding: .5rem 0 0 0 !important;
    margin: 0 !important;
}

.line { /* menu divider */
    width: 100%;
    margin: 1rem 0 1rem 0;
    height: 2px;
    background-color: var(--light);
    opacity: 10%;
} .row { /* flex row */
    width: 100%;
    display: flex;
    flex-flow: row wrap;
    justify-content: space-between;
} .column { /* flex column */
    display: flex;
    flex-flow: column;
    gap: .2rem;
}

.popupbg {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: none;
    background-color: rgba(0,0,9,.97);
    transition: .5s ease;
}
.popup {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: none;
    flex-flow: column;
    gap: 4rem;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    transition: .5s ease;
} .popup p {
    color: var(--light);
}

.tips { /* help symbol */
    display: block;
    height: 2.5rem;
    width: 2.5rem;
    border: 2px solid var(--light);
    border-radius: 2rem;
    padding: none;
    text-align: center;
    font-size: 1.7rem;
    color:var(--light);
    line-height: 2.38rem;
    transition: .5s ease;
} .tips:hover {
    background-color: var(--darkish);
    transition: .5s ease;
} #layover { /* svg label layover */
    display: block;
    position: fixed;
    width: 55rem;
    height: auto;
    right:0;
    bottom:0;
}

#close {
    background-color: var(--darkish);
    padding: 1rem;
    transition: 0.5s ease;
    z-index: 100 !important;
} #close:hover {
    background-color: #656aff9c;
    transition: 0.5s ease;
}

@keyframes slideout {
    0% { top: 0; bottom: 0;}
    100% { top: 100vh; bottom: -100vh;}
}

@media only screen and (max-width: 850px) {
    img { margin: 0 auto 0 auto; }
    .snapscroll { display: none; }
    .snapalt { display: block; }
    .box2 { display: block; }
    .box2 > * { max-width: 100%; }
    .row { display: block; }
    .row > * { max-width: 100%; }
    .MathJax { scale: 1.7; }
    .label { display: none; }
}

@media only screen and (max-width: 700px){
    .error {
        display: flex;
        flex-flow: column;
        justify-content: center;
    }
}