body, html {
   margin: 0;
   padding: 0;
   height: 100%;
   --divider-color: #994799;
}
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;
}
.toc-link {
   text-decoration: none;
   color: inherit;
}
#master-container {
   display: flex;
   flex-direction: column;
   height: 100%;
   background: url('images/sbclouds.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;
      overflow-x: auto;
}
#top-container {
   text-align: center;
   vertical-align: middle;
   display: flex;
   flex-direction: column;
   margin-top:10px;
   min-height: fit-content;
}
.menubar {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: center;
padding: 10px 6vw 10px 4vw;
z-index: 1000;
font-family: 'Freeman';
font-size: calc(14pt + 0.3vw);
gap: 0 30px;
}
.logo {
   display: flex;
   flex-direction: row;
   align-items: center;
   font-size: calc(16pt + 2vw);
   text-shadow: -0.07vw -0.07vw 0 #FFF, 0.07vw -0.07vw 0 #FFF, -0.07vw 0.07vw 0 #FFF, 0.07vw 0.07vw 0 #FFF, 0 0 0.3vw lightpink;
   font-family: 'Freeman';
   font-weight: bold;
   white-space: pre;
}
.logo img {
   height: 40px;
}
.logo a {
   text-decoration: none;
   color:black
}
.bear {
   height: calc(16pt + 2vw);
   display: flex;
   align-items: center;
   margin-left: calc(5px + 0.3vw);
}
.bear-dark {
   display: none;
}
.menu {
   display: flex;
   list-style: none;
   text-transform: uppercase;
}
.menu, .submenu ul li {
   border: 0;
   padding: 0;
   margin: 0;
   text-align: left;
}
.menuitem a {
   text-decoration: none;
   color: white;
   padding: min(1.2vw, 15px);
   display: block;
}
.menuitem {
   transition: background-color 0.3s;
   z-index: 1000;
   position: relative;
   border-radius: 10px;
   margin-bottom: 0;
}
.submenu a {
   color: black;
   text-decoration: none;
   padding: 5px 5px 0;
   display: block;
   transition: background-color 0.3s;
   text-shadow:none
}
.submenuitem {
   white-space: nowrap;
}
.submenuitem:hover a {
   text-shadowx: -0.05vw -0.05vw 0 #3c13a3, 0.05vw -0.05vw 0 #215dd4, -0.05vw 0.05vw 0 #5a43ce, 0.05vw 0.05vw 0 #294bb9, 0 0 0.3vw lightpink;
   font-style: italic;
}
.menuitem:hover a {
   color: black;
   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;
}
.has-submenu {
   border-radius: 10px 10px 0 0 !important;
}
.submenu {
   position: absolute;
   display: flex;
   flex-direction: column;
   justify-content: flex-end;
   top: calc(100% - 20px);
   left: -20px;
   list-style: none;
   max-height: 0;
   overflow-y: hidden;
   transition: max-height 0.6s ease-in-out;
   padding: 20px;
   visibility: hidden;
   border-left:0 !important
}
.menu ul, .menuitem:hover {
   background-color: rgba(213, 167, 255, 0.865);
}
.menu ul {
   border-radius: 0 10px 10px 10px;
}
.has-submenu:hover .submenu {
   max-height: 400px;
   visibility: visible;
}
@media (min-width: 912px) {
   #notebooktoggle {
      display: none
   }
   #TOCwrapper {
   border-radius: 10px 0 0 10px !important;
   }
}
@media (max-width: 911px) {
   .shrinkwidth {
      max-width: 0 !important;
      padding: 0px !important;
      border-right: 0 !important;
      min-width: unset !important;
   }
   #notebooktoggle {
      display: flex
   }
}
@media (max-width: 168px) {
   .bear-dark {
      display: flex;
   }
   .bear-outline {
      display: none;
   }
}
#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;
}
.wrap {
   text-wrap: balance;
}
@media(max-width:768px) {
   .home-section, .home-section-grid {
      flex-flow: row wrap;
      justify-content: center;
      padding: calc(10px + 2vw) !important;
   }
   .home-image {
      width:67% !important;
      margin:20px auto !important;
   }
   .home-blurb, .home-blurb-left, .home-blurb-right {
      width:100% !important;
      text-align:left !important;
   }
   .home-headline {
      text-alignx: center !important;
      margin-bottom:8px;
   }
   .home-text {
      text-wrap:unset !important;
   }
   .home-creator-info {
      margin-left:2vw !important;
   }                       
}
@media (max-width:1240px) {
   #content-container {
      margin:2vw 2vw 0 !important;
   }
}
span.first, .blogcontent strong, .transcript span {
   font-weight: 600;
   color: #200050;
}
.transcript {
   text-align: left;
   padding: 0 20px;
}
.transcript-title {
   text-align: center;
   margin: 20px auto;
   font-size: calc(12pt + 0.5vw);
   line-height: 1.2;
   font-family: Rubik, Verdana, Helvetica, sans-serif;
   color: #200050;
}
p.section-title, p.bio-heading{
   font-size: calc(11.5pt + 0.3vw);
   font-family: Rubik, Verdana, Helvetica, sans-serif;
   font-style: normal;
   text-transform: uppercase;
}
p.section-title::before{
   content: "***";
   display: block;
   text-align: center;
   margin-bottom:10px;
   color: var(--divider-color);
}
.bloginfo + a + p.section-title::before, 
.bloginfo + p.section-title::before, 
.bloginfo + img + a + p.section-title::before, 
.bloginfo + img + p.section-title::before, 
.topnote p.section-title::before,
.topnote + p.section-title::before, 
.topnote + img + p.section-title::before, 
.topnote + a + p.section-title::before, 
.topnote + img + a + p.section-title::before {
   content: "";
   display: none;
}
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: var(--divider-color)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 {
   display:flow-root;
   text-align: center;
   font-style: italic;
   font-family: Nunito, Verdana, Helvetica, sans-serif;
   margin: 10px;
   border: 1px var(--divider-color) 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, ol.tagline, ul.tagline {
   display:flow-root;
   text-align: center;
   font-weight: bold;
   font-size: 1.1em;
   font-family: Rubik, Verdana, Helvetica, sans-serif;
   margin: 30px auto;
   /* border: 1px grey dashed; */
   border: 1px #8e8e8e solid;
   background-color: #d2daff;
   box-shadow: 0 0 5px 5px white, 0 0 5px 5px #8298ff;
   padding: 10px;
   width: fit-content;
   width: -webkit-fit-content;
   width: -moz-fit-content;
   /* border-radius: 15px; */
}
ol.tagline, ul.tagline {
   border-radius: 15px;
   margin: 5px auto !important;
   padding-left: 35px !important;
   text-align: left !important;
}
ol.tagline span, ul.tagline span {
   margin-bottom: 5px;
}
div.tagline p {
   padding: 0px;
   margin: 0px;
   line-height: 1.4;
}
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-colorx: lightgrey;
}
table th {
   background-color: lightgrey;
   vertical-align: middle;
   text-align: center;
}
hr {
   width:20%;
   border:0;
   border-bottom: 1px var(--divider-color) 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;
}
li:last-child {
   margin-bottom: 0 !important;
}
ol, ul {
   margin-left: 20px;
   margin-top: 20px;
   margin-bottom: 20px;
   border-left: var(--divider-color) 2px solid;
}
img {
   margin:20px 0
}
#endimage img {
   width:70%;
   border:1px black solid;
   margin-left: 15%;
}
.invisible {
   display: none !important;
}
#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;
}
.g-recaptcha {
   display: inline-flex;
   justify-content: center;
   opacity: 0.8;
}
select.form-input {
   width: 100% !important;
}
#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;
}
#blogcontainer{
   display: flex;
   flex-direction: row;
   overflow-y: scroll;
   justify-content: center;
}
#blogwrapper {
   max-width: 900px;
   border-top: 1px black dashed;
   margin: 0 auto;
}
#blogcontainer #blogwrapper {
   margin: 0 !important;
}
#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;
}
#TOCwrapper + #blogwrapper .article {
   border-radius: 0 10px 10px 10px;
   margin-left: 0 !important;
}
#TOCwrapper {
   max-width: 350px;
   min-width: 120px;
   border:1px black solid;
   border-radius: 0 0 0 10px;
   padding: 20px;
   max-height: fit-content;
   background-color: #d2daffc4;
   margin-left: 1px;
   margin-top: calc(1.1vw + 1px);
   margin-right:-1px;
   overflow-y: scroll;
}
#TOC {
   padding: 0 !important;
   border: 0 !important;
   list-style: none;
   margin: 0;
}
ul#TOC li:last-child {
   margin-bottom: 0 !important;
}
#TOC li {
margin-left: 20px;
text-indent: -20px;
}
.toc-link {
   cursor: pointer;
   text-decoration: none;
   color: rgb(109, 76, 126);
}
.toc-secondary {
   padding-left: 40px;
   font-style: italic;
   display: list-item;
   border-left: 3px double;
}
.toc-link:hover {
   color:black;
}
#TOCwrapper p {
   text-align: center;
   padding-bottom: 5px;
   padding-top: 5px;
   margin: 0 0 10px 0;
   font-family: rubik;
   font-size: calc(10pt + 0.3vw);
   background-color: white;
}

.footnote {
   position: relative;
   text-decoration: underline;
   cursor: pointer;
   font-weight: normal;
   vertical-align: super;
   font-size: .7em;
}

.footnote::before {
   content: "[";
}

.footnote::after {
   content: "]";
}

#footnote-preview {
   display: none;
   position: absolute;
   background: #f2f4ff;
   border: 1px solid #ccc;
   padding: 15px;
   box-shadow: 0 0 5px 0px rgba(0, 0, 0, 0.5);
   z-index: 1000;
   color: #3f3f3f;
   max-width: 450px;
}

#reference-section {
   margin: 30px;
   color: #3f3f3f;
}

.reference u {
   text-decoration: none;
}

.brainstorm td {
   font-family: 'Courier New', Courier, monospace;
}
.brainstorm td p {
   margin: 0 0 5px 7px;
   text-indent: -7px;
}

.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;
}
.sideways {
   transform: rotate(180deg);
   writing-mode: vertical-lr;
   margin: 5px 0;
}

#notebooktoggle {
   position: relative;
   height: fit-content;
   z-index: 500;
   top: calc(1.1vw + 1px);
   flex-flow: column wrap;
   align-content: flex-start;
   border-radius: 8px 0 0 8px;
   background-color: #d2daffc4;
   border: 1px solid black;
   font-size: calc(11.5pt + 0.25vw);
   font-family: Rubik, Verdana, Helvetica, sans-serif;
   justify-content: space-evenly;
   cursor: pointer;
   padding: 2px;
   left: 2px;
   color: darkgrey;
}

#notebooktoggle:hover span {
   color:black !important
}
.stub {
   overflow: hidden;
   display: flex;
   flex-direction: column;
   transition: all ease 0.5s;
   padding: 20px;
   background: rgba(255, 255, 255, 0.65);
   border: 1px black solid;
   border-radius: 10px;
   margin: 1.1vw;
}
.stub:hover {
   background-color: rgba(255, 255, 255, 0.85);
}
.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;
   display: flex;
   flex-direction: column;
}
.article-end {
   border-radius: 10px;
   padding: 30px;
}
.articlestub:hover, .productstub:hover {
   background-color: rgba(255, 255, 255, 0.85);
   box-shadow: 0 0 0 5px white, 0 0 0 6px black;
}
.articlestub:hover .blogthumbnail {
   widthx:40%
}
.article p {
   margin: 0 0 20px 0;
}
.bloginfo {
   position: relative;
   width: 100%;
}
.bloginfo strong {
   font-weight: normal !important;
}
.blogtitle, .productname, .productprice, .formtitle {
   font-size: calc(15pt + 0.5vw);
   line-height: 1.2;
   font-family: Rubik, Verdana, Helvetica, sans-serif;
   color: #200050;
}
.blogblurb {
   margin-bottom: 30px;
}
.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;
}
.blogdate {
   float: right;
   padding-left: 20px;
}
.blogprompt {
   color:hotpink;
   top: 100%;
   position: absolute;
   top: calc(100% - 20px);
}
.blogthumbnail {
   width:35%;
   border:1px black solid;
   border-radius: 12px;
   margin: 0 0 0 1vw;
   transition: all 0.25s;
   float: right
}
.blogthumbnailvideo {
   width:35%;
   border:1px black solid;
   border-radius: 12px;
   margin: 0 0 0 1vw;
   transition: all 0.25s;
   float: right
}
.blogimage {
   background-color: white;
   width:50%;
   max-width: 330px;
   border:1px black solid;
   border-radius: 12px;
   float: right;
   margin: 0 0 20px 20px;
}
.blogimage:has(+ .topnote) {
   display: none;
}
.blogcontent {
   border-top: 1px black dotted;
   padding-top: 20px;
}
.blogcontent p:last-child {
   margin-bottom: 0 !important;
}
.blogcontent a {
   text-decoration: none;
   color: mediumpurple;
}
.attribution {
margin-bottom: 15px;
font-style: italic;
color: #896390;
}
.attribution a {
color: inherit;
font-weight: bold;
}
.topnote {
   border: 1px grey solid;
   padding: 20px;
   border-radius: 10px;
   background-color: #d2daff8c;
   font-style: italic;
   text-align: justify;
   margin-bottom:30px;
}
.topnote .section-title {
   margin-top: 0 !important;
   border: 0 !important;
   padding-top:0 !important
}
#missingvideo {
   margin: 0 auto;
   width: fit-content;
   margin-top: -20px;
   background-color: rebeccapurple;
   padding: 10px 20px;
   border-radius: 0 0 10px 10px;
   color: aliceblue;
   border-top: 0.5px dashed aliceblue;
   font-family: 'Rubik';
}
.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;
}
.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;
   margin: 0px !important
}

.home-section, .home-section-grid {
display: flex;
background-color: rgba(255, 255, 255, 0.65);
border-radius: 15px;
border: 1px #994899 solid;
padding: 2vw;
box-sizing: border-box;
margin-bottom: 1.5vw;
max-width: 900px;
justify-content: space-between;
height: fit-content;
backdrop-filter: blur(5px);
}
.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 {
   widthx: 37%;
   text-alignx: right;
   margin-rightx: 1vw;
   text-wrap-style: balance;
}
.home-blurb-right {
   width: 37%;
   margin-left: 1vw;
}
.home-blurb {
   width: 46%;
   margin: 0 1vw;
}
.interchange-weekend-text {
   text-wrap: pretty;
   padding: 1vw 0;
   line-height: 1.4;
   font-size: calc(10pt + 0.3vw);
}
.interchange-weekend-review {
   float: right;
   margin: 0 0 10px 20px;
}
.interchange-weekend-review img {
   max-width: 200px;
   margin: 0;
   border: 1px #994999 solid;
   border-radius: 5px;
}
.spacer {
   height:10px;
}
#home-container {
   display: flex;
   flex-direction: column;
   gap: 1.5vw;
   margin-bottom: 1.5vw;
}
.home-column {
   displayx: flex;
   flex-directionx: column;
}
.home-row {
   display: flex;
   flex-flow: row wrap;
   gap: 1.5vw
}
.home-cell {
   display: flex;
   flex-basis: max(450px, calc(50% - .75vw));
   flex-direction: column;
   background-color: rgba(255, 255, 255, 0.65);
   border-radius: 15px;
   border: 1px #994899 solid;
   padding: max(2vw, 20px);
   box-sizing: border-box;
   max-width: 900px;
   justify-content: space-between;
   height: fit-content;
   backdrop-filter: blur(5px);
   gap:max(1.5vw, 20px);
}
.home-cell-wide {
   max-width: unset !important;
   flex-basis: unset !important;
}
.home-cell .headline-decoration {
   object-fit: cover;
   object-position: unset;
}
.home-cell ol, .home-cell ul {
   line-height: 1.3;
   margin: 0;
   border: none;
}

.home-cell .tagline {
   border-radius: 15px;
   margin: 0 auto !important;
   padding: 15px;
}

.home-cell .home-headline {
   text-transform: uppercase;
   font-size: calc(18pt + 0.7vw) !important;
}

.home-cell p {
   margin: 0;
}

.home-headline, .home-creator-name {
   display: flex;
   align-items: center;
   overflow: hidden;
   width: 100%;
   gap: 1vw;
   font-size: calc(15pt + 0.7vw);
   line-height: 1.1;
   text-wrap: balance;
   font-family: Freeman;
   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;
}
.headline-emoji {
   text-shadow: 0 0;
}
.headline {
   grow: 1;
}
.home-title {
   margin: 0 auto -2vw;
   position: sticky;
   top: 0;
}

.column-title {
   width: max-content;
   margin: 0 auto;
}

.home-title, .column-title {
   opacity: 0.8;
   text-align: center;
   font-size: calc(19pt + 1vw);
   line-height: 1;
   text-wrap: balance;
   font-family: freeman;
   text-transform: uppercase;
   padding: 0 0.5vw 1vw;
   color: white;
   text-shadow: -0.05vw -0.05vw 0 #000, 0.05vw -0.05vw 0 #000, -0.05vw 0.05vw 0 #000, 0.05vw 0.05vw 0 #000, 0 0 0.2vw #000;
}

.home-blurb .home-headline {
   text-align: center;
}
img.headline-decoration {
   flex-grow: 1;
   height: calc(11pt + 0.6vw);
   object-fit: none;
   object-position: right top;
   width: 20px;
   min-width: 0;
   overflow: hidden;
   margin: 0 !important;
   border-radius: 0.4vw;
   border: 1px #994899 solid;
}
.home-blurb .home-text {
   text-wrap: balance;
}
.home-blurb-right .home-text, .home-blurb-left .home-text {
   text-wrap: pretty;
   display: flex;
   gap: calc(5px + 1vw);
}
.home-text, .home-creator-bio {
   padding: 1vw 0;
   line-height: 1.4;
   font-size: calc(10pt + 0.3vw);
}
.home-text p {
   margin: 0.5em 0;
}
.home-creator-bio {
   font-family: 'Rubik';
}
.home-keywords {
    margin-top: -15px;
    margin-bottom: 25px;
    padding: 0.5vw;
    font-style: italic;
    background-color: #ad788538;
    color: #994799;
    font-family: nunito;
}
.home-image {
   widthx: 26%;
   max-width: 200px;
}
.title-image {
   display: flex;
   justify-content: center;
}
.title-image img {
   margin: 0;
   max-width: min(400px, 80%);
}
.home-image img, .home-creator-image img {
   width: 100%;
   border-radius: 20px;
   border:1px black solid;
   /* border: max(3px, 0.3vw) black double; */
   margin: 0;
   box-shadowx: 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: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 var(--divider-color) dashed;
   border-radius: 10px;
   margin-right: 10px;
}
.exposition em {
   color: black;
}
.home-action  {
   border-top: 1px var(--divider-color) dashed;
   padding-top: 20px;
}
.home-action-midtext  {
   border-bottom: 1px var(--divider-color) dashed;
   padding-bottom: 20px;
}
.action-button {
   margin: 0 auto;
   display: block;
}
.pushable {
   position: relative;
   border: none;
   background: transparent;
   padding: 0;
   cursor: pointer;
   outline-offset: 4px;
   transition: filter 250ms;
}
.button-shadow {
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   border-radius: 10px;
   background: hsl(0deg 0% 0% / 0.25);
   will-change: transform;
   transform: translateY(2px);
   transition: transform 600ms cubic-bezier(0.3, 0.7, 0.4, 1);
}
.button-edge {
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   border-radius: 10px;
   background: linear-gradient(to left, hsl(291.26deg 38.56% 30.42%) 0%, hsl(295.14deg 44.09% 65.7%) 8%, hsl(282.76deg 40.79% 58.5%) 92%, hsl(287.28deg 42.97% 26.15%) 100%);
}
.button-front {
   display: block;
   font-family: 'Rubik';
   font-weight: bold;
   position: relative;
   padding: 12px 42px;
   border-radius: 10px;
   font-size: 1.25rem;
   border: 1px #994799 solid;
   background: hsl(318.74deg 75.11% 88.17%);
   will-change: transform;
   transform: translateY(-3px);
   transition: transform 600ms cubic-bezier(0.3, 0.7, 0.4, 1);
}
.pushable:hover {
   filter: brightness(110%);
}
.pushable:hover .button-front {
   transform: translateY(-6px);
   transition: transform 250ms cubic-bezier(0.3, 0.7, 0.4, 1.5);
}
.pushable:active .button-front {
   transform: translateY(-2px);
   transition: transform 34ms;
}
.pushable:hover .button-shadow {
   transform: translateY(3px);
   transition: transform 250ms cubic-bezier(0.3, 0.7, 0.4, 1.5);
}
.pushable:active .button-shadow {
   transform: translateY(1px);
   transition: transform 34ms;
}
.pushable:focus:not(:focus-visible) {
   outline: none;
}

.author-bio-section {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  padding: 1.5rem;
  border-top: 1px solid #e0e0e0;
  margin-top: 2rem;
  max-width: 600px;
  background-color: #f9f9f9; /* Subtle off-white background */
  border-radius: 8px;
}

.author-headshot {
  max-width: 200px;
  border-radius: 10px;
  border: 1px black solid;
  float: left;
  margin: 0 30px 10px 0;
}

.bio-content {
  flex: 1;
}

.author-name {
  margin: 0 0 0.5rem 0;
  font-size: 1.1rem;
  font-weight: 600;
  color: #333;
}

.bio-text {
   font-style: italic;
   margin-bottom: 0 !important
}

.bio-action {
   margin:20px auto 0;
}