body, html {
    margin: 0;
    padding: 0;
    height: 100%;
 }
 body {
    font-family: Rubik, Noto Sans, Verdana, Helvetica, sans-serif;
    font-size: calc(12pt + 0.15vw);
    line-height: 1.4;
    background-color:lightgray;
 }
 .content {
    position: relative;
    z-index: 1;
    text-align: center;
 }
 #master-container {
    display: flex;
    flex-direction: column;
    height:100%;
    background: url('images/background.png') 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;
    margin-bottom:20px;
 }
 #bottom-container {
    display:flex;
    justify-content: center;
    padding:10px 0;
    width: 100%;
 }
 #content-containerx {
    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;
    font-weight: bold;
    margin: auto;
    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;
 }
 @media(max-width:768px) {
    .home-image {
        width:67% !important;
        margin:20px auto !important;
    }
    .home-text {
        text-wrap:unset !important;
    }
 }
 @media (min-width:769px) {
    #top-container {
        min-heightx: 100px;
    }
 }
 @media (max-width:1240px) {
    #content-container {
        margin:2vw 2vw 0 !important;
    }
 }
 p span:first-child {
    font-weight: bold;
 }
 span.first {
    font-weight: bold;
    colorx: #200050;
 }
 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;
 }
 p.callout {
   text-align: center;
   margin: 30px auto !important;
   padding: 10px;
   border: 1px red solid;
   width: 60%;
   font-size: calc(14pt + 0.2vw);
   background-color: #fff7ca;
   text-wrap-style: balance;
 }
 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;
 }
 table {
    border-spacing: 5px;
    margin: 20px auto 30px;
    font-family: Arial, Helvetica, sans-serif;
    width:100%;
    font-size: calc(10pt + 0.15vw) !important;
 }
 .aside {
   text-align: left;
   font-style: italic;
   font-size: calc(10pt + 0.25vw) !important;
   background-color: #ddd;
   border:1px black solid;
   margin: 20px 8%;
   padding:20px;
 }
 .blogcontent table + p {
    margin-top: 20px !important;
 }
 .blogcontent ~ .home-button {
    margin-top: 0px !important;
 }
 table.chat td p {
    margin-bottom: 0 !important;
 }
 table.chat td {
    padding: 0.2vw !important;
}
 td, th {
    border: 1px black solid;
    vertical-align: top;
    background-color: white;
    border-radius: 10px;
 }
 th {
    background-color: lightgrey;
    vertical-align: middle;
    text-align: center;
    padding: 0.6vw;
    font-family: 'Rubik';
    font-size: 14pt;
 }
 td {
   padding: 1vw;
 }
 th p, td p:last-child {
   margin-bottom: 0 !important;
 }
 hr {
    width:20%;
    border:0;
    border-bottom: 1px black 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: red 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;
 }
 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;
 }
 #blogwrapper {
    max-width: 1200px;
    margin: 0 auto;
  }
  #blogwrapper, #content-container {
    overflow-y: scroll;
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none;  /* IE 10+ */
  }
  #blogwrapperx::-webkit-scrollbar, #content-container::-webkit-scrollbar {
    background: transparent; /* Chrome/Safari/Webkit */
    width: 0px;
  }
  #blogwrapper:has(.articlestub) {
      max-width: 800px !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;
  }
  .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;
    justify-content: space-between;
    cursor:pointer;
  }
  .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);
  }
  .article p {
    margin: 0 0 20px 0;
  }
  .bloginfo {
    display: flex;
    flex-direction: row;
    padding: 20px 10px;
    margin: 20px 0 0;
    border: 1px black solid;
    background-color: #ffe8e8c9;
    border-radius: 10px;
    flex-wrap: wrap;
    gap: 20px;
  }
  .bloglist {
    display: flex;
    flex-direction: column;
    margin-right: 20px;
  }
  .bloglist .blogtitle {
   text-align: left !important;
   margin-bottom: 10px;
  }
  .blogtitle, .productname, .productprice, .formtitle {
    font-size: calc(16pt + 0.5vw);
    line-height: 1.2;
    font-family: Rubik, Verdana, Helvetica, sans-serif;
    color: #200050;
  }
  .blogtitle {
    text-align: center;
  }
  .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:firebrick;
    margin: auto 0 0;
  }
  .blogthumbnail {
    border:1px black solid;
    border-radius: 12px;
    margin: 0;
    transition: all 0.25s;
    max-height: 200px;
    max-width: 100%;
  }
  .blogportrait {
   border:1px black solid;
   border-radius: 12px;
   margin: 0;
   transition: all 0.25s;
   max-height: 300px;
   min-height: 200px;
   max-width: 100%;
   min-width: 134px;
 }
  .blogimagex, .articlex img {
    background-color: white;
    border: 1px black solid;
    border-radius: 12px;
    float: right;
    margin: 0 auto;
    max-height: 280px;
    max-width: fit-content;
  }
  .blogcontent {
    padding-top: 20px;
  }
  .accuserinfo, .accuserinforight {
    display: flex;
    flex-direction: column;
    justify-content: start;
  }
  .accuserinfoleft {
      display: flex;
      justify-content: space-between;
      flex: 1;
      gap: 20px;
      text-wrap: nowrap;
  }
  .accuserinforight {
   flex:2;
  }
  .accusername, .accuseralias, .accuserlocation, .accuseraffiliation, .accuserlink {
    font-size: calc(11pt + 0.25vw);
    line-height: 1.2;
    font-family: Rubik, Verdana, Helvetica, sans-serif;
  }
  .accusername {
    font-size: calc(16pt + 0.25vw) !important;
    margin:0 0 10px;
  }
  .accuserlocation {
    color: grey;
  }
  .accuseralias {
   font-style: italic;
  }
  .accusersegment {
    margin:0 0 10px;
  }
  .accuserupdate {
   border: 3px black double;
   background-color: seashell;
   padding: 20px;
   text-align: center;
   text-wrap-style: balance;
   margin-top: 20px;
   font-weight: bold;
  }
 .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;
  }
 .home-section, .home-section-grid {
    display: flex;
    background-color: rgba(255, 255, 255, 0.35);
    border-radius: 20px;
    border: 1px black dashed;
    width: calc(100% - 2px);
    padding: 1vw;
    box-sizing: border-box;
  }
  .home-section {
    display: flex;
  }
  #home-container {
   display: flex;
   flex-direction: row;
   flex-wrap: wrap;
  }
  .home-column {
      display: flex;
      flex-direction: column;
      flex: 1;
  }
  .home-cell, .sitemessage {
      border: 3px black double;
      border-radius: 5px;
      padding: 20px;
      margin: 10px;
      background-color: seashell;
  }
  .sitemessage {
      text-align: center;
      font-size: calc(11pt + 0.25vw);
      line-height: 1.2;
      font-family: Rubik, Verdana, Helvetica, sans-serif;
      color: #200050;
      margin: 2vw auto !important;
      max-width: 500px;
      text-wrap: balance;
  }
  .home-cell ul, .home-cell ol {
      margin-left: 0;
      border-left: 0;
  }
  .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 {
   font-size: calc(15pt + 0.7vw);
   line-height: 1;
   font-weight: 600;
   border-bottom: 1px gray dotted;
   padding: 10px 10px 15px;
   margin-bottom: 10px;
   text-wrap: balance;
   text-align: center;
  }
  .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: 10px;
      cursor: pointer;
      border-radius: 12px;
      width: 150px;
      color: white;
      align-content: center;
      background-color: rgb(156 45 45);
      border: 1px black solid;
      margin: 15px auto 0;
  }
 .home-button:hover {
    background-color: rgba(255, 232, 232, 0.85);
    color:black;
  }
  .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 black dashed;
    border-radius: 10px;
    margin-right: 10px;
  }
  .exposition em {
    color: black;
  }
.story-left {
   background-color: #f4cccc
} 
.story-right {
   background-color: white;;
}
.story-left-head {
   background-color: #ff9a9a;
   width:50%;
} 
.story-right-head {
   background-color: #c1c1c1;
   width:50%;
}
.story-solo {
   width:50%;
} 
.chat-sent,
.chat-received {
  margin-top: 0.0625em;
  margin-bottom: 0.0625em;
  padding: 0.5em 1em;
}
.chat-sent p,
.chat-received p {
  margin: 0;
  line-height: 1.5;
}
.email-name::before {
   content: "From: ";
   font-weight: bold;
}
.email-name {
   font-weight: bold;
}
.email-body {
   margin: 10px 0 10px 20px;
   line-height: 1.2;
}
.email-body br {
   display: block;
   content: "";
   margin-bottom: 10px;
}
.email-date{
   color:#6a6767;
}
.email::before {
   content: "<";
}
.email::after {
   content: ">";
}
.email-received {
   background-color: rgb(227, 227, 227);
}
.email-sent, .email-received {
   padding: 10px;
   font-size: 0.95em;
}

.chat-sent {
  float: right;
  color: white;
  background-color: dodgerblue;
  border-radius: 1em 0.25em 0.25em 1em;
}
.chat-sent:first-child {
  border-radius: 1em 1em 0.25em 1em;
}
.chat-sent:last-child {
  border-radius: 1em 0.25em 1em 1em;
}
.chat-sent:only-child {
  border-radius: 1em;
}
.chat-received {
  float: left;
  color: black;
  background-color: lightgray;
  border-radius: 0.25em 1em 1em 0.25em;
}
.chat-received:first-child {
  border-radius: 1em 1em 1em 0.25em;
}
.chat-received:last-child {
  border-radius: 0.25em 1em 1em 1em;
}
.chat-received:only-child {
  border-radius: 1em;
}
.chat {
   margin: 30px auto 20px;
   max-width: 40em;
   display: -webkit-flex;
   display: -ms-flexbox;
   display: flex;
   flex-direction: column;
   font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
   line-height: 1.4;
   color: #000408;
   border: 1px black solid;
   padding: 0 20px 20px;
   background-color: white;
   border-radius: 10px;
   overflow-y: scroll;
   max-height: 600px;
   position: relative;
   z-index: 10;
}
@media print {
    .chat, #blogwrapper, #content-container {
        max-height: 100%;
        overflow-y: visible;
    }
    .chat {
        line-height:normal;
        font-size: 11pt;
    }
    .chatscroll {
        display: none;
    }
}

.chat-email {
   gap: 20px;
   padding-top: 20px;
}
.chatscroll {
   visibility: hidden;
   background: dodgerblue;
   color: whitesmoke;
   text-align: center;
   height: 0px;
   padding: 14px 0 0;
   margin: -30px auto 20px;
   position: relative;
   border-radius: 0 0 10px 10px;
   z-index: revert-layer;
   border: 1px black solid;
   font-size: calc(10pt + 0.1vw);
 }
 .emailscroll {
   background-color: rgb(227, 227, 227) !important;
   color: black !important;
 }
 .chatscroll.has-overflow {
   visibility: visible !important;
   height: 26px;
 }
.chat-sent,
.chat-received {
  clear: both;
}
.chat-sent-column {
   margin-left: calc(8.33333333% + 0.08333333em) !important;
}
.chat-received-column {
   margin-right: calc(8.33333333% + 0.08333333em) !important;
}
.chat-sent-column,
.chat-received-column {
   width: calc(91.66666667% - 0.08235677em);
}
.chat-sent-column::before {
   margin-right: 1em;
   float: right;
}
.chat-received-column::before {
   margin-left: 1em;
   float: left;
}
.chat-sent-column::before,
.chat-received-column::before {
   font-size: 0.75em;
   color: gray;
}
.chat-time {
   margin: 10px auto 0;
   font-size: 0.75em;
   color: gray;
   text-align: center;
}
.menubar {
   display: flex;
   justify-content: space-between;
   align-items: center;
   background-color: #eb6459cc;
   padding: 0.4vw 0.8vw;
   font-family: 'Unbounded', Verdana, sans-serif;
   border-top: 1px black solid;
   border-bottom: 1px black solid;
}
.logo {
   font-size: calc(9pt + 1.2vw);
   margin-right: 1.3vw;
   text-shadow: 0 0 3px #ffffff;
   font-weight: bold;
   font-family: 'Unbounded', Verdana, sans-serif;
}
.logo a {
   color: black;
   text-decoration: none;
}
.logo img {
   height: 40px; /* Adjust as needed */
}
.menu {
   list-style: none;
   display: flex;
   margin: 0;
   padding: 0;
   border:0;
}
.menu li {
   position: relative;
   margin-bottom:0 !important;
}
.menu li a {
   color: black;
   text-decoration: none;
   padding: 0 1.3vw;
   display: block;
   transition: color 0.1s ease;
   font-size: calc(9pt + 0.65vw);
   text-transform: uppercase;
   text-shadow: 0 0 3px #ffffff;
}
.menu li a:hover {
   color: white;
   text-shadow: 0 0 3px #000000;
}
.submenu {
   display: none;
   position: absolute;
   top: 100%;
   left: 0;
   background-color: #eb595947;
   list-style: none;
   padding: 0;
   margin: 0;
   min-width: 150px;
   animation: fadeIn 0.1s ease-in-out;
   border:0;
}
.submenu li a {
   padding: 10px;
   color: black;
   text-decoration: none;
   display: block;
   transition: background-color 0.1s ease;
}
.submenu li a:hover {
   background-color: #555;
}
@keyframes fadeIn {
   from {
       opacity: 0;
       transform: translateY(-10px);
   }
   to {
       opacity: 1;
       transform: translateY(0);
   }
}
.dropdown:hover .submenu {
   display: block;
}