body, html {
    margin: 0;
    padding: 0;
    height: 100%;
}
body {
    font-family: Noto Sans, Verdana, Helvetica, sans-serif;
    font-size: calc(10pt + 0.15vw);
    line-height: 1.4;
    background-color:lightgray;
}

.content {
    position: relative;
    z-index: 1;
    text-align: center;
}

.circle {
    width: 100px;
    height: 100px;
    background-color: black;
    border-radius: 50%;
    margin: 20px;
    display: inline-block;
    cursor: pointer;
    position: relative;
}

#nothingtip {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: white;
    font-size: 24px;
    display: none;
}

@keyframes suckEffect {
    0% {
        clip-path: circle(100%);
    }
    100% {
        clip-path: circle(0%);
    }
}

.suck-in {
    animation: suckEffect 2s forwards;
    background-color: black;
    color: transparent;
}

.shrink {
    opacity: 0;
}

#mask {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: black;
    clip-path: circle(0% at center);
    z-index: 10;
    pointer-events: none;
    transition: clip-path 2s ease;
}
#master-container {
    display: flex;
    flex-direction: column;
    height:100%;
    background: url('images/background-clouds.jpg') no-repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    transition: transform 2s ease, opacity 2s ease;
}
#top-container {
    text-align: center;
    vertical-align: middle;
    display: flex;
    flex-direction: column;
    margin-top:10px;
}
#bottom-container {
    display:flex;
    justify-content: center;
    padding:10px 0;
    width: 100%;
}
#content-container {
    flex:100%;
    display: grid;
    max-width: 1220px;
    margin: 2vw auto 0;
}
#wide-scroller {
    max-width: 1440px;
}
.stretch { 
    font-size: calc(8pt + 4vw);
    text-shadow: 0 0 3px black;
    text-shadow: -0.04vw -0.04vw 0 #777, 0.04vw -0.04vw 0 #777, -0.04vw 0.04vw 0 #777, 0.04vw 0.04vw 0 #777, 0 0 0.2vw #777 !important;
    font-weight: bold;
    margin: auto;
    letter-spacing: 0.4vw;
    color: aliceblue;
    font-family: Rubik, 'Trebuchet MS', Verdana, sans-serif;
    display: flex;
    align-items: center;
    white-space: pre;
    line-height:1;
    flex-wrap: wrap;
}
#home-subtitle {
    font-family: 'Signika';
    font-size: calc(14pt + 1.1vw);
    position: relative;
    top: -12px;
    font-style: italic;
    letter-spacing: .68vw;
    font-weight: 600;
    text-shadow: 0 0 0.3vw white;
    color: rgb(21 0 100);
}
.wrap {
    text-wrap: balance;
}
.logo {
    width: calc(8pt + 2.8vw);
    margin-right: 0.35vw;
    padding-bottom: 0.25vw;
    display: inline-block;
}
div.course-container {
    display: flex;
    height: 200px;
    flex: 1;
    justify-content: center;
    border-radius: 8px;
}
@media(min-width:1750px) {
    div.course-container {
        margin-left: calc((100vw - 1750px)/2);
        margin-right: calc((100vw - 1750px)/2);
    }
}
div.panel {
    flex-grow: 1;
    overflow-y: auto;
    border: 1px solid #ccc;
    box-sizing: border-box;
    position: relative;
    height: 100%;
    border-radius:inherit;
}
div.panel > div {
    margin-left:7%;
    margin-right:7%;
}
.left {
    text-align: left !important;
}
.row {
    margin-left: 0 !important;
    margin-right: 0 !important;
}
#TOC-header, #lesson-header, #notebook-header  {
    text-align: center;
    position: sticky;
    position: -webkit-sticky;
    top:0px;
    padding-top:10px;
    min-height: 89px;
    border-bottom: 1px pink dashed;
    z-index: 100;
    display: flex;
    justify-content: center;
    align-items: center;
}
#lesson-title, #TOC-title, #notebook-title {
    font-size: calc(11.5pt + 0.25vw);
    line-height: 1.2;
    font-family: Rubik, Verdana, Helvetica, sans-serif;
    margin-left: 20px;
    margin-right: 20px;
    max-width: 450px;
}
#TOC, #lesson, #notebook  {
    padding-bottom: 30px;
    width: 100%;
}
#notebook-content {
    /* overflow: auto; */
}
#notebookwrapper:hover #notebook-overlay {
    visibility: visible !important;
}
#notebook-overlay {
    position: absolute;
    top: 0px;
    width: 100%;
    height: 100%;
    background-color: rgba(255, 255, 255, 0.7);
    display: grid;
    align-content: center;
    justify-content: center;
    visibility: hidden;
    z-index: 500;
}
#notebook-overlay .continueprompt {
    background-color: white;
}
.side-scroller {
    height: 100%;
    overflow-x: auto;
}
@media(max-width:768px) {
    #TOC, #lesson, #notebook, #blogwrapper {
        max-width: none !important;
        border: 0px;
        border-radius: 0;
        transition: all 0.5s;
    }
    div.course-container {
        border-width: 1px 1px 0;
        border-style: inset;
        border-radius: 0 !important;
    }
    .roundleft, .roundright {
        border-radius: 0 !important;
    }
    .stretch {
        letter-spacing: 0.2vw !important;
    }
    .bullseye {
        margin-right:0 !important
    }
    .productstub .producttop {
        align-items: baseline;
    }
    #account {
        width:clamp(250px,400px,90vw) !important;
    }
    #title-part-1 {
        flex-basis: 100%;
        white-space: normal;
        position: relative;
        top: 10px;
    }
    .title-row {
        flex-basis: 100%;
    }
    #notebooktoggle {
        display: none !important;
    }
    #bottom-container {
        padding-bottom: 0;
    }
    .home-section, .home-section-grid {
        flex-flow: row wrap;
        justify-content: center;
        padding: 2vw !important;
    }
    .home-image {
        width:67% !important;
        margin:20px auto !important;
    }
    .home-blurb, .home-blurb-left, .home-blurb-right {
        width:90% !important;
        text-align:left !important;
    }
    .home-headline {
        text-align: center !important;
        margin-bottom:8px;
    }
    .home-text {
        text-wrap:unset !important;
    }
    .home-creator-info {
        margin-left:2vw !important;
    }
    #lesson-module-title {
        display: block !important;
    }
}
#TOC, #notebook, #TOC-header, #notebook-header  {
    background-color: #f2f2f2;
}
#lesson, #lesson-header {
    background-color: white;
}
.panel-header-background {
    position: absolute;
    left: -7%;
    width: 114%;
    top: 0px;
    z-index: -1;
    height: 100%;
    background-color: inherit;
}

@media (min-width:769px) {
    #top-container {
        min-height: 100px;
    }   
    #TOC {
        min-width: 300px;
    }
    #lesson, #blogwrapper {
        min-width: 470px;
    }
    #notebook {
        min-width: 450px;
        float:right;
        position: relative;
    }
    #TOCwrapper {
        width: 26%;
        max-width: 450px;
        z-index: 100;
    }
    #lessonwrapper {
        width: 37%;
        max-width: 650px;
        z-index: 150;
    }
    #notebookwrapper {
        width:37%;
        max-width: 650px;
        z-index: 100;
    }
    #paypanel {
        width: 400px;
    }
}
@media (min-width:769px) and (max-width:1220px) {
    #TOCwrapper.activepanel {
        min-width: 300px;
        box-shadow: 20px 0px 18px 0px rgba(120, 89, 94, 0.3);
        z-index: 200 !important;
    }
    #TOCwrapper.activepanel + div {
        box-shadow: 20px 0px 18px 0px rgba(120, 89, 94, 0.3);
    }
    #TOCwrapper.activepanel + div .panel {
        float: right;
    }
    #lessonwrapper.activepanel {
        min-width: 470px;
        box-shadow: 20px 0px 18px 0px rgba(120, 89, 94, 0.3), -20px 0px 18px 0px rgba(120, 89, 94, 0.3);
        z-index: 200 !important;
    }
    #lessonwrapper:has(+ .activepanel) {
        box-shadow: -20px 0px 18px 0px rgba(120, 89, 94, 0.3);
    }
    #notebookwrapper.activepanel {
        min-width: 450px;
        box-shadow: -20px 0px 18px 0px rgba(120, 89, 94, 0.3);
        z-index: 200 !important;
    }
}
@media (max-width:1240px) {
    #content-container {
        margin:2vw 2vw 0 !important;
    }
}
.sideways {
    transform: rotate(180deg);
    writing-mode: vertical-lr;
    margin: 5px 0;
}
#notebooktoggle {
    position: relative;
    height: fit-content;
    z-index: 500;
    top: 20px;
    display: flex;
    flex-flow: column wrap;
    align-content: flex-start;
    background: white;
    border-radius: 0 8px 8px 0;
    background-color: #f2f2f2;
    border: 1px solid #ccc;
    font-size: calc(11.5pt + 0.25vw);
    font-family: Rubik, Verdana, Helvetica, sans-serif;
    justify-content: space-evenly;
    cursor: pointer;
    color:darkgray;
    box-shadow: inset 5px 0 7px -7px rgba(0, 0, 0, 0.4);
    padding-right: 2px;
}
#notebooktoggle:hover span {
    color:black !important
}
#switchbar {
    display: flex;
    flex-flow: row wrap;
    border-left: 0.5px black solid;
    border-right: 0.5px black solid;
    border-bottom: 0.5px black solid;
    background-color: lightgray;
    z-index: 10;
    /* widthx: calc(100% - 2px); */
    overflow: hidden;
}
#switchbartop {
    width:100%;
    height:10px;
    margin-left:7%;
    margin-right:7%;
    border-top: 1px dashed pink;
}
.switchtab {
    font-family: 'Rubik';
    text-align: center;
    border-top: 0.5px black solid;
    padding: 5px 0;
    flex-grow: 1;
}
.infotab {
    border-right:0 !important
}
#lessontab {
    border-right:0.5px black solid;
    border-left:0.5px black solid;
}
@media(min-width:769px) {
    #switchbar, .switchtab {
        display: none;
    }
}
.notebookprompt  {
    color:rgb(82 72 141) !important;
    cursor: pointer;
}
.notebookprompt:hover {
    background-color:pink;
}
.panelwrapper {
    height: 100%;
    overflow-x: hidden;
    position: relative;
    transition: all 0.5s;
}
.shrinkwidth {
    width:0 !important;
}
.roundleft {
    border-radius: 8px 0 0 8px;
}
.roundright {
    border-radius: 0 8px 8px 0;
}
.next-button, .previous-button {
    height: 80%;
    position: absolute;
    font-size: 24pt;
    font-weight: bold;
    font-family: 'Rubik';
    color: darkgrey;
    display: flex;
    align-items: center;
}
.up-button {
    position: absolute;
    top:-5px;
    text-align: center;
}
.next-button:hover, .previous-button:hover, .letterbutton:hover {
    color:black;
    cursor:pointer;
}
.next-button {
    right: 0px;
    text-align:right
}
.previous-button {
    left: 0px;
    text-align:left
}
#TOC-list {
    list-style-type: none;
    margin-left:0px;
    padding-inline-start: 20px;
}
.TOCrow {
    font-size: calc(10pt + 0.3vw);
    padding: 6px;
    margin: 0;
    font-family: Rubik, Verdana, Helvetica, sans-serif;
    cursor: pointer;
    text-align: right;
    line-height: 1.1;
    border: 1px transparent dashed;
}
.TOCpart {
    font-size: calc(10pt + 0.3vw);
    font-family: Rubik, Verdana, Helvetica, sans-serif;
    line-height: 1.1;
    border: 1px grey dashed;
    text-align: center;
    background-color: white;
    padding: 10px 0;
    margin: 5px 0;
}
.TOCcourse {
    font-size: calc(12pt + 0.3vw) !important;
    border-bottom: 1px black dashed;
    margin-bottom: -10px;
    padding-bottom: 5px;
}
.TOCauthor {
    color: rgb(82 72 141);
}
.TOCstudent {
    color: hotpink;
}
.TOCrow:hover {
    background-color: pink;
    font-style: italic;
    border: 1px rgb(217 217 217) dashed;
}
#TOC-list li.selected {
    background-color: rgb(217 217 217);
    border: 1px pink dashed;
    font-style: italic;
}
#lesson a, #blogwrapper a, .home-creator-bio a {
    color: inherit;
    cursor: pointer;
    text-decoration: underline;
    text-decoration-color: pink;
}
#lesson a:hover, #blogwrapper a:hover {
    text-decoration-color: rgb(82 72 141);
}
#lesson.default, #lesson-header.default {
    background-color: white;
}
.exercise-color {
    background-color: #f7f7ff !important;
}
.overview-color {
    background-color: #fff7f7 !important;
}
#lesson-title .contemplation {
    color: black;
}
#lesson-module-title {
    font-family: 'Rubik';
    font-style: italic;
    color: #200050;
    display: none;
}
#lesson td {
    font-size: 11pt;
}
span.first {
    font-weight: 600;
    color: #200050;
}
.contemplation {
    color:rgb(82 72 141);
}
p.section-title{
    font-size: calc(11.5pt + 0.3vw);
    margin-top: 30px;
    padding-top: 15px;
    border-top: 1px black dashed;
    font-family: Rubik, Verdana, Helvetica, sans-serif;
}
p.step-stage {
    font-size: calc(10.5pt + 0.3vw);
    margin-top: 30px;
    margin-bottom: 20px;
    margin-left: 17px;
    font-family: Rubik, Verdana, Helvetica, sans-serif;
}
p.heading {
    font-size: calc(10.5pt + 0.3vw);
    margin-top: 30px;
    margin-bottom: 10px;
    font-family: Rubik, Verdana, Helvetica, sans-serif;
}
p.title, p.table-title {
    text-align: center;
    margin-bottom: -30px;
    margin-top: 30px;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 13pt;
}
div.indent {
    padding-left: 40px;
    margin-left: 20px;
    margin-bottom: 30px;
    border-left:pink 2px solid
}
div.indent2 {
    margin-left: 40px;
    margin-bottom: 20px;
}
div.quote-wrap {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    padding: 5px;
}
div.quote {
    text-align: center;
    font-style: italic;
    font-family: Nunito, Verdana, Helvetica, sans-serif;
    margin: 10px;
    border: 1px pink solid;
    background-color: beige;
    padding: 12px;
    width:fit-content;
    width:-webkit-fit-content;
    width:-moz-fit-content;
    border-radius: 15px;
}
div.quote p, td p {
    padding: 0px;
    margin: 0px;
    line-height: 1.2;
}
div.tagline {
    text-align: center;
    font-weight: bold;
    font-family: Rubik, Verdana, Helvetica, sans-serif;
    margin: 30px auto;
    border: 1px grey dashed;
    background-color:#ddd;
    padding: 10px;
    width:fit-content;
    width:-webkit-fit-content;
    width:-moz-fit-content;
    border-radius: 15px;
}
div.tagline p {
    padding: 0px;
    margin: 0px;
    line-height: 1.4;
}
div.continueprompt, div.theend {
    text-align: center;
    font-weight: bold;
    font-family: Rubik, Verdana, Helvetica, sans-serif;
    margin: 30px auto;
    border: 1px pink dashed;
    color:rgb(82 72 141);
    padding: 10px;
    width:fit-content;
    width:-webkit-fit-content;
    width:-moz-fit-content;
    border-radius: 15px;
    box-shadow: 0 0 1px 6px white, 0 0 6px 6px blueviolet;
}
div.continueprompt, div.goprompt {
    cursor: pointer;
}
#coursebuttons {
    display: flex;
    width: 360px; 
    margin: 30px auto;
}
#course-blurb, #course-description {
    white-space: pre-wrap;
    margin-top: 20px;
}
#course-blurb {
    font-style: italic;
    font-size: calc(10pt + 0.25vw);
}
div.goprompt {
    margin-top: 0px !important;
    margin-bottom: 0px !important;
    text-wrap: balance;
    width: 120px;
    text-transform: uppercase;
}
div.continueprompt p {
    padding: 0px;
    margin: 0px;
}
.continueprompt:hover {
    background-color:pink !important;
}
table {
    border-collapse: collapse;
    margin: 40px auto;
    font-family: Arial, Helvetica, sans-serif;
    width:100%
}
td, th {
    border: 1px black solid;
    vertical-align: top;
    padding: 0.3vw;
    background-color: white;
}
table tr:first-child td {
    background-color: lightgrey;
    vertical-align: middle;
    text-align: center;
}
hr {
    width:20%;
    border:0;
    border-bottom: 1px pink dashed;
    background-color: beige;
    margin: 30px auto;
}
td hr {
    margin: 5px auto;
    width: 70%;
    border: 0;
    border-bottom: 1px dashed #ddd;
    background: #999;
}
ol p {
    margin: 0 0 8px 0;
}
ol hr {
    margin: 10px 0;
    width: 80%;
    border-bottom: 1px lightgrey dashed;
}
p.center, div.center {
    text-align: center;
}
p.right, div.right {
    text-align: right;
}
ol li, ul li {
    margin-bottom: 10px;
}
ol, ul {
    margin-left: 20px;
    margin-top: 20px;
    margin-bottom: 20px;
    border-left: pink 2px solid;
}
#TOC-list ul {
    margin: 0;
    border:none;
}
img {
    margin:20px 0
}
#endimage img {
    width:70%;
    border:1px black solid;
    margin-left: 15%;
}
#courseimage img {
    width:90%;
    border:1px black solid;
    margin-left: 5%;
    margin-bottom: 0px !important;
}
.material-symbols-rounded {
    font-family: 'Material Symbols Rounded';
    font-weight: normal;
    font-style: normal;
    font-size: 22pt;
    display: inline-block;
    line-height: 1;
    text-transform: none;
    letter-spacing: normal;
    word-wrap: normal;
    white-space: nowrap;
    direction: ltr;
    color: darkgrey;
    cursor: pointer;
}
.big-symbol {
    font-size: 32pt !important;
}
.static_symbol {
    color: black !important;
    cursor: default !important;
}
.form_symbol {
    width:30px;
    margin-right: 10px;
}
.material-symbols-rounded:hover {
    color:black;
}
#bottom-container .material-symbols-rounded:hover {
    color:white;
}
.audioicon {
    font-size: calc(12pt + 0.3vw) !important;
    position: relative;
    top: 3px;
    margin-right: 2px;
    color: hotpink !important;
}
.note {
    background-color: rgb(217 217 217);
    border: 1px gray dashed;
    min-height: 80px;
    padding: 10px;
    font-family: Nunito, Verdana, Helvetica, sans-serif;
    position: relative;
    z-index: 10;
    -webkit-transition: background-color 0.5s ease-out;
    -moz-transition: background-color 0.5s ease-out;
    -o-transition: background-color 0.5s ease-out;
    transition: background-color 0.5s ease-out;
}
.overview-note {
    padding: 5px;
    font-family: Nunito, Verdana, Helvetica, sans-serif;
}
.overview-wrapper {
    margin-bottom: 10px;
    border: 1px #ccc solid;
    padding: 5px;
    background-color: #e1e1e1;
}
.overview-end {
    text-align: center;
    color: midnightblue;
    font-style: italic;
    margin: 20px 0;
}
.overview-module-title, .overview-lesson-title {
    cursor: pointer;
    padding: 10px 0;
    font-weight: 600;
    font-family: 'Rubik';
}
.overview-module-title {
    text-align: center;
    background-color: pink;
    position: sticky;
    top: 100px;
    height: 40px;
    box-sizing: border-box;
    z-index: 10;
}
.overview-lesson-title {
    color: midnightblue;
    background-color: #f2f2f2;
    margin: 0 0 10px;
    border-top: 1px midnightblue dashed;
    border-bottom: 1px midnightblue dashed;
    position: sticky;
    top: 140px;
    z-index: 9;
}
#note0 {
    display: none;
}
.notewrapper:hover .navigable, .notewrapper:hover .notehighlight {
    width: calc(100% - 56px);
}
.note:focus {
    outline: none !important;
    border: 1px black dashed;
    background-color:white;
}
p.question, .overview-question {
    margin-left: 8px;
    margin-bottom: 8px;
    line-height: 1.1;
    color: #5b3496;
    font-family: Rubik, Verdana, Helvetica, sans-serif;
}
.overview-question {
    border-bottom: 1px black dashed;
    padding: 5px 0 10px !important;
    margin: 0 5px 5px !important;
}
.invisible {
    display: none !important;
}
div.noteblock {
    margin-top: 10px;
    transition: all ease 0.5s;
}
div.notewrapper {
    position: relative;
}
div.notesnav {
    position: absolute;
    z-index: 0;
    right: 0px;
    width: 30px;
    height: 60px;
    text-align: right;
}
#addnote {
    margin-top: 10px;
    text-align: center;
}
.vertical {
    /* Abs positioning makes it not take up vert space */
    position: absolute;
    bottom: 0;
    left: 0;

    /* Rotate from top left corner (not default) */
    transform-origin: 0 0;
    transform: rotate(270deg);
}
td.legend {
    text-align: right;
    background-color: #f2f2f2;
    position: relative;
}
td.open {
    font-family: Nunito, Arial, Helvetica, sans-serif;
    color: black;
    background-color: rgb(234 234 234);
    -webkit-transition: background-color 0.25s ease-out;
    -moz-transition: background-color 0.25s ease-out;
    -o-transition: background-color 0.25s ease-out;
    transition: background-color 0.25s ease-out;
}
td.open:focus {
    outline: none !important;
    border: 1px black dashed;
    background-color:white !important;
}
td.fixed {
    background-color: lightgrey;
    color: black;
}
table.questiongrid tr td.green {
    background-color: #b6d7a8;
}
table.questiongrid tr td.red {
    background-color: #ea9999;
}
table.questiongrid {
    margin:20px 0 0;
    overflow-x: scroll;
    line-height: 1.1;
    color: #5b3496;
    font-family: Rubik, Verdana, Helvetica, sans-serif;
    border-collapse: separate;
    border-spacing: 0;
    width: 100%;
}
table.questiongrid tbody {
    border: 0.5px black solid;
}
table.questiongrid td {
    border: 0.5px black solid;
}
table.questiongrid th.question, table.questiongrid th.legendhead {
    position: sticky;
    top: 100px;
    z-index: 10;
}
.overview-head {
    position: static !important;
    z-index: 8 !important;
}
.overview-grid {
    margin:0 !important;
}
table.questiongrid th.question {
    background-color: lightgrey;
    vertical-align: bottom;
    text-align: left;
    border-left: 0.5px black solid;
    border-right: 0.5px black solid;
    border-bottom: 1px black solid;
}
table.questiongrid th.legendhead {
    background-color: #f2f2f2;
    border-width: 0 1px 1px 0;
}
table.questiongrid td.expandgrid {
    text-align: center;
    background: none;
    padding-bottom: 0;
    border: 0;
}
div.deleterow {
    position: absolute;
    left: 0px;
    top: 1px;
    width: 100%;
    text-align: center;
    height: 98%;
    background-color: #f2f2f2;
    visibility: hidden;
}
td.legend:hover .deleterow {
    visibility: visible;
}
.highlight, .notehighlight {
    background-color: rgb(254, 216, 255);
    -webkit-transition: background-color 0.25s ease-out;
    -moz-transition: background-color 0.25s ease-out;
    -o-transition: background-color 0.25s ease-out;
    transition: background-color 0.25s ease-out;
}
.highlight {
    padding: 0.5px;
}
.notehighlight {
    padding:10px;
    margin-bottom: 0 !important;
    border-width: 1px 1px 0 1px;
    border-style: dashed;
    border-color: pink;
    line-height: 1.1;
    font-family: Rubik, Verdana, Helvetica, sans-serif;
    position: relative;
    z-index: 10;
    color: #5b3496;
}
.overview-highlight {
    border-width: 1px !important;
    z-index: 8 !important;
}
.highlightnote {
    min-height: 0 !important;
}
#account {
    display: flex;
    flex-flow: column;
    width: 450px;
    box-sizing: border-box;
    background-color: rgba(255, 255, 255, 0.85);
    border: 1px black solid;
    border-radius: 10px;
    margin: 20px auto 0;
    padding: 35px;
    transition: all ease 0.5s;
}
#you-container {
    display: flex;
    margin: 40px auto auto;
    flex-flow: row wrap;
    padding: 0 5px;
    max-width: 450px;
    font-size: calc(11pt + 0.25vw);
    line-height: 1.2;
    font-family: Rubik, Verdana, Helvetica, sans-serif;
    text-align: center;
}
#formChange {
    cursor: pointer;
}
.form {
    display: flex;
    flex-flow: column;
    width: 100%;
}
.form.openform {
    flex-flow: row wrap !important
}
.formrowdivider {
    width: 20px;
}
.form .form-input {
    background-color: rgb(217 217 217);
    border: 1px gray dashed;
    padding: 10px;
    width: 100%;
    font-family: Nunito, Verdana, Helvetica, sans-serif;
    font-size: 16px;
    position: relative;
    -webkit-transition: 0.5s ease-out;
    -moz-transition: 0.5s ease-out;
    -o-transition: 0.5s ease-out;
    transition: 0.5s ease-out;
    display: block;
}
textarea.form-input {
    height: 5em;
}
.form-input.long {
    height: 15em !important;
}
.form .form-group {
    display: flex;
    position: relative;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    margin-top: 10px;
}
.form .form-input::placeholder {
    color: #98a0a8;
}
.form .form-link {
    color: #2a77eb;
    cursor: pointer;
}
.form .form-link:hover {
    color: #135ac5;
}
.formfullrow {
    flex:100%;
}
.formhalfrow {
    flex:45%;
}
.formfullrow, .formhalfrow {
    margin:10px 0 5px;
    display: grid;
}
.formfullrow .productbutton {
    margin: auto;
}
.formfullrow .form-input, .formhalfrow .form-input {
    width: calc(100% - 20px);
    margin-top: 5px;
}
.formcheckrow {
    margin: 10px auto;
    border: 1px gray dashed;
    padding: 10px;
    background-color: rgb(217, 217, 217);
}
.formtitle {
    width:100%;
    text-align: center;
}
.formtext {
    margin: 10px 0;
    font-style: italic;
    color: firebrick;
}
select.form-input {
    width: 100% !important;
}
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    border: 0;
    background: #5b3496;
    color: #FFFFFF;
    padding: 0 14px;
    font-weight: 600;
    border-radius: 4px;
    height: 38px;
    margin: 10px 0;
  }
.btn:hover {
    background: #7a50ba;;
}
#formTitle {
    margin:0 auto 10px;
    font-size: calc(16pt + 0.3vw);
    font-family: Rubik, Verdana, Helvetica, sans-serif;
}
input, button {
    font-family: Nunito, Verdana, Helvetica, sans-serif;
    font-size: 16px;
}

input:focus, textarea:focus, select:focus {
    outline: none !important;
    border: 1px black dashed;
    background-color:white !important;
}
input:-webkit-autofill {
    -webkit-box-shadow: 0 0 0px 40rem #d9d9d9 inset;
}
input:-webkit-autofill:focus {
    -webkit-box-shadow: 0 0 0px 40rem #ffffff inset;
}

#formName0, #formEmail0, #formPassword0, #formConfirm0, #formForgot0 {
    display: none;
}
#formMessage {
    margin: 10px 0;
}
.transcript {
    max-height: 0;
    overflow: hidden;
    position: relative;
    transition: all 1s;
    background-color: rgb(250, 245, 246);
    text-align: left;
    padding: 0 20px;
}
.transcript-title {
    padding: 3px 0 7px;
    cursor: pointer;
}
.transcript-wrapper {
    position: relative;
    background-color: pink;
    text-align: center;
    border-radius: 0 0 5px 5px;
    top:-5px;
}
.bullseye {
    position: relative;
    display: flex;
    justify-content: center;
    z-index: 250;
    width: calc(8pt + 2.8vw);
    height: calc(8pt + 2.8vw);
    margin: 10px 0.35vw 10px 0;
    padding-bottom: 0.25vw;
    top:-2px;
    font-weight: normal;
    text-shadow: none;
    cursor: pointer;
    min-width: 36pt;
    min-height: 36pt;
  }
  .ring {
    border-radius: 49.9%;
    border: max(calc(0.5px + 0.08vw), 1px) black dashed;
    position: absolute;
    width: 100%;
    height: 100%;
    top:0;
    display: flex;
    transition: all ease 0.5s;
  }
  .blackhole {
    z-index:1000 !important;
    border-color:black !important;
    transform: scale(50) !important;
    transition: all ease 1s !important;
  }
  .blackhole.hover {
    border-color:black !important;
    background-color: black !important;
  }
  .blackness {
    color:black !important;
    transition: all ease 1s !important;
  }
  #nothingtipx {
    position: relative;
    top: 50%;
    margin: auto;
    z-index: 1100;
    font-size: calc(11pt + 0.25vw);
    line-height: 1.2;
    font-family: Rubik, Verdana, Helvetica, sans-serif;
    text-align: center;
    color:white;
  }
  #nothing {
    background-color: white;
    z-index:260;
  }
  #nothing2 {
    background-color: lavender;
    /* background-colorx: pink;
    background-colorx: #E8E8E8; */
    opacity: 0;
    z-index:259;
    top: -2px;
  }
  #nothing3 {
    background-color: violet;
    /* background-colorx: lightblue;
    background-colorx: #D0D0D0; */
    opacity: 0;
    z-index:258;
    top: -4px;
  }
  #nothing4 {
    background-color: blueviolet;
    /* background-colorx: lightyellow;
    background-colorx: #B8B8B8; */
    opacity: 0;
    z-index:257;
    top:-6px;
    box-shadow: 0 0 6px 2px white;
  }
  #nothing5 {
    background-color: indigo;
    /* background-colorx: lightyellow;
    background-colorx: #B8B8B8; */
    opacity: 0;
    z-index:256;
    top:-6px;
    box-shadow: 0 0 6px 2px white;
  }
  .bullseye:hover #nothing, body:has(#bottom-container:hover) #nothing {
    background-color:black;
    border-color:lightgray;
  }
  .bullseye:hover #nothing2, body:has(#bottom-container:hover) #nothing2, #nothing2.open {
    width:150%;
    height:150%;
    opacity:100%;
  }
  .bullseye:hover #nothing3, body:has(#bottom-container:hover) #nothing3, #nothing3.open {
    width:200%;
    height:200%;
    opacity:100%;
  }
  .bullseye:hover #nothing4, body:has(#bottom-container:hover) #nothing4, #nothing4.open {
    width:250%;
    height:250%;
    opacity:100%;
  }
  .bullseye:hover #nothing5, body:has(#bottom-container:hover) #nothing5, #nothing5.open {
    width:300%;
    height:300%;
    opacity:100%;
  }
  #nothing2:hover, #nothing3:hover, #nothing4:hover, #nothing5:hover {
    background-color: white !important;
  }
  .title-part {
    z-index: 270;
  }
  .title-row {
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .menuitem {
    white-space: pre;
  }
  .menucenter {
    color:white;
    font-size:22pt;
    letter-spacing:5pt;
    margin:auto;
  }
  #nothing2 tspan {
    font-size:16pt;
    letter-spacing:3pt;
  }
  #nothing3 tspan {
    font-size:14pt;
    letter-spacing: 2.5pt;
  }
  #nothing4 tspan {
    font-size:12pt;
    letter-spacing:2pt;
  }
  #nothing5 tspan {
    font-size:12pt;
    letter-spacing:2pt;
  }
  #blogwrapper {
    max-width: 768px;
    flex:2;
    border-top: 1px pink dashed;
    border-bottom: 1px pink dashed;
    margin: 0 auto;
  }
  #blogwrapper, #content-container {
    overflow-y: scroll;
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none;  /* IE 10+ */
  }
  #blogwrapper::-webkit-scrollbar, #content-container::-webkit-scrollbar {
    background: transparent; /* Chrome/Safari/Webkit */
    width: 0px;
  }
  .articlestub, .productstub, .product {
    padding: 20px;
    background: rgba(255, 255, 255, 0.65);
    border: 1px black solid;
    border-radius: 10px;
    margin: 1.1vw;
  }
  .articlestub {
    cursor:pointer;
  }
  .productstub {
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: all ease 0.5s;
  }
  .product {
    background: rgba(255, 255, 255, 0.85) !important;
    cursor:default !important;
  }
  .articlestub {
    display: flex;
  }
  .article {
    padding: 30px;
    background: rgba(255, 255, 255, 0.85);
    border: 1px black solid;
    border-radius: 10px;
    margin: 1.1vw;
  }
  .articlestub:hover, .productstub:hover {
    background-color: rgba(255, 255, 255, 0.85);
  }
  .articlestub:hover .blogthumbnail {
    width:40%
  }
  .article p {
    margin: 0 0 20px 0;
  }
  .bloginfo {
    display: flex;
    flex-direction: column;
  }
  .blogtitle, .productname, .productprice, .formtitle {
    font-size: calc(15pt + 0.25vw);
    line-height: 1.2;
    font-family: Rubik, Verdana, Helvetica, sans-serif;
    color: #200050;
  }
  .blogblurb {
    margin-bottom: 10px;
  }
  .blogauthor {
    font-size: calc(11.5pt + 0.25vw);
    line-height: 1.2;
    font-family: Rubik, Verdana, Helvetica, sans-serif;
    margin: 5px 0 15px;
    color: blueviolet;
  }
  .blogprompt {
    color:hotpink;
    margin: auto 0 0 auto;
  }
  .blogthumbnail {
    width:35%;
    border:1px black solid;
    border-radius: 12px;
    margin: 0 0 auto 20px;
    transition: all 0.25s;
  }
  .blogimage, .article img {
    background-color: white;
    width:50%;
    border:1px black solid;
    border-radius: 12px;
    float: right;
    margin: 0 0 20px 20px;
  }
  .blogcontent {
    border-top: 1px pink dashed;
    padding-top: 20px;
  }
  #paypanel {
    margin: 0 auto;
  }
  #paypal-button-container {
    display: flex;
    flex-direction: column-reverse;
  }
  .productimage {
    width:30%;
    border:1px black solid;
    float: left;
    margin: 0 20px 10px 0;
  }
  .producttop {
    margin-bottom:20px;
    display: flex;
  }
  .producttitle {
    flex:2;
    padding-right: 10px;
  }
  .productsubtitle, .productbutton, .coursebutton, .home-button, .productmessage, #formsubmitresponse {
    font-size: calc(11pt + 0.25vw);
    line-height: 1.2;
    font-family: Rubik, Verdana, Helvetica, sans-serif;
    color: #200050;
  }
  .buttonsubtext {
    font-style: italic;
    color: firebrick;
    margin-top: 5px;
    padding-top: 5px;
    border-top: firebrick 1px dashed;
  }
  .productprice {
    text-align: center;
    padding:10px;
    border:1px black solid;
    display: grid;
    align-items: center;
    background-color:aliceblue;
    border-radius:5px;
  }
  .productbottom {
    margin-top:20px;
  }
  .productbutton {
    text-align: center;
    border:1px black solid;
    padding:10px;
    background-color:aliceblue;
    cursor:pointer;
    border-radius:5px;
  }
  #failmessage .productbutton {
    margin-top: 10px;
  }
  .coursebutton, #formsubmitresponse {
    text-align: center;
    border:1px black dashed;
    padding:10px;
    margin-bottom: 10px;
    background-color:rgba(240, 248, 255, 0.65);
    cursor:pointer;
    border-radius:5px;
    display: flex;
    flex-flow: column;
    justify-content: space-between;
    flex: 25%;
  }
  #formsubmitresponse {
    width: 300px;
    text-wrap: balance;
    align-self: center;
  }
  .coursebutton:hover {
    background-color:rgba(240, 248, 255, 1.0);
  }
  #you-courses {
    border-top:1px black dashed;
    margin-top:20px;
    padding:10px;
  }
  .productbuttons {
    display: grid;
    align-items: center;
  }
  .productbutton:hover, .productbutton.nolink {
    background-color:pink
  }
  .productblurb {
    padding-bottom: 20px;
  }
  .productdivider {
    margin-bottom: 20px;
    border-bottom: 1px black dashed;
  }
  #youlink {
    position: relative;
    top:10px;
    right:10px;
    width:50px;
    border:1px pink dashed;
    background-color: aliceblue;
    opacity: 0.85;
  }
  .home-section, .home-section-grid {
    display: flex;
    background-color: rgba(255, 255, 255, 0.35);
    border-radius: 20px;
    border: 1px pink dashed;
    width: calc(100% - 2px);
    padding: 1vw;
    box-sizing: border-box;
  }
  .home-section {
    display: flex;
  }
  .home-section-grid {
    display: grid;
    grid-gap: 2vw;
  }
  .home-blurb, .home-blurb-right, .home-blurb-left {
    display: flex;
    flex-flow: column wrap;
    font-family: 'Rubik';
  }
  .home-blurb-left {
    width: 37%;
    text-align: right;
    margin-right: 1vw;
  }
  .home-blurb-right {
    width: 37%;
    margin-left: 1vw;
  }
  .home-blurb {
    width: 46%;
    margin: 0 1vw;
  }
  .home-headline, .home-creator-name {
    font-size: calc(15pt + 0.7vw);
    line-height: 1;
    font-style: italic;
    font-weight: 600;
    text-wrap: balance;
    font-family: Signika;
    padding: 0 0.5vw;
    color: #000000;
    text-shadow: -0.05vw -0.05vw 0 #FFF, 0.05vw -0.05vw 0 #FFF, -0.05vw 0.05vw 0 #FFF, 0.05vw 0.05vw 0 #FFF, 0 0 0.3vw lightpink;
    /* text-shadow: -0.05vw -0.05vw 0 pink, 0.05vw -0.05vw 0 pink, -0.05vw 0.05vw 0 pink, 0.05vw 0.05vw 0 pink; */
  }
  .home-blurb .home-headline {
    text-align: center;
  }
  .home-blurb .home-text {
    text-wrap: balance;
  }
  .home-blurb-right .home-text, .home-blurb-left .home-text {
    text-wrap: pretty;
  }
  .home-text, .home-creator-bio {
    padding: 0.5vw;
    line-height: 1.4;
    font-size: calc(10pt + 0.3vw);
  }
  .home-creator-bio {
    font-family: 'Rubik';
  }
  .home-image {
    width: 26%;
    margin: auto 0;
    line-height: 0;
  }
  .home-image img, .home-creator-image img {
    width: 100%;
    border-radius: 20px;
    /* border: max(3px, 0.3vw) black double; */
    margin: 0;
    box-shadow: 0 0 6px 2px blueviolet;
  }
  .home-button {
    font-weight: bold;
    font-family: 'Nunito';
    font-size: calc(9pt + 0.25vw);
    text-wrap: balance;
    text-align: center;
    text-transform: uppercase;
    padding: 5px;
    /*background-color: rgba(240, 248, 255, 0.65);*/
    cursor: pointer;
    border-radius: 12px;
    width: 150px;
    display: grid;
    align-content: center;
    background-color: rgb(231 202 255 / 80%);
    box-shadow: 0 0 3px 0px black, 0 0 6px 2px white;
    text-shadow: 0 0 2px white;
  }
  .home-button-letting-go, .home-button-tuc {
    background-size: cover;
    height: 150px;
    width: min(230px,50vw);
    color: white;
    text-shadow: 0 0 3px black;
    align-content: end !important;
  }
  .home-button-letting-go:hover, .home-button-tuc:hover {
    box-shadow: 0 0 6px 3px white !important;
    color: pink;
  }
  .home-button-letting-go {
    background-image: url(images/course-letting-go.png);
  }
  .home-button-tuc {
    background-image: url(images/course-tuc.png);
  }
  .home-button:hover {
    background-color: rgba(255, 255, 255, 0.85);
  }
  .home-buttons {
    display: flex;
    flex-flow: row wrap;
    width: 380px;
    margin: 20px auto;
    padding: 20px 0px;
    box-shadow: #ffffff85 0 0 20px 10px;
    border-radius: 10px;
    justify-content: space-evenly;
  }
  .home-button-heading {
    font-size: calc(9pt + 0.6vw);
    padding: 0 20px 20px;
    line-height: 1;
    text-align: center;
    font-family: 'Rubik';
    font-style: italic;
    text-shadow: white 0 0 3px;
    text-wrap: pretty;
  }
  .home-creator {
    display: flex;
  }
  .home-creator-image {
    width:20%;
    line-height: 0;
  }
  .home-creator-info {
    width:70%;
    display: flex;
    flex-direction: column;
    margin-left:1vw;
  }
  .home-section-heading {
    font-size: calc(12pt + 1.1vw);
    border-radius: 12px;
    padding: 20px;
    line-height: 1;
    text-align: center;
    font-family: 'Rubik';
    background-color: rgb(167 61 170 / 17%);
    box-shadow: 0 0 6px 2px #f5d7ee73;
    font-style: italic;
    letter-spacing: .5vw;
    font-weight: 600;
    text-shadow: 0 0 0.3vw white;
    color: rgb(21 0 100);
  }
  .exposition {
    font-style: italic;
    white-space: pre-wrap;
    background-color: rgba(0, 0, 0, 0.05);
    padding: 15px;
    border: 1px pink dashed;
    border-radius: 10px;
    margin-right: 10px;
  }
  .exposition em {
    color: black;
  }