:root{
    /* font */
  --color-pearl:#FCFAF7;
  --color-tealeaf:#5F7D6B;
  --color-tea-charcoal:#1F2522;
  --color-sage-mist:#C9D1CB;
  --color-plum:#4A2A44;
  --color-muted: #B9B9B9;

  /* font */
  --font-title: "Monsieur La Doulaise", "Brush Script MT", "Segoe Script", cursive;
  --font-body: "Oranienbaum", Georgia, "Times New Roman", Times, serif;
  --font-description: "Saira Semi Condensed", ui-sans-serif, system-ui, -apple-system,
                "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;

/* descriptoin weight */
  --description-thin:100;
  --description-light:300;
  --description-regular:400;
  --description-mid:500;
  --description-semib:600;
  --description-bold:700;
}

.site-nav{
  position: sticky;
  top:0;
  background: var(--color-pearl);
  border-bottom: 1px solid rgba(0,0,0,.06);
  z-index: 1000;
  
}
.nav .logo{
  width: 30px;
  background-color: var(--color-tealeaf);
  border-radius: 100px;
}
.nav .logo a{
  color: transparent;
}
#top-nav{
  display:flex;
  gap:24px;
  align-items:center;
  list-style:none;
  padding:12px 24px;
}
.nav li:hover{
  color: var(--color-tealeaf);
}
.nav-btn{
  background:transparent;
  border:none;
  font: 500 14px/1.2 "Oranienbaum", serif;
  color: var(--color-tea-charcoal);
  padding:10px 8px;
  cursor:pointer;
}
.nav-btn:focus-visible{
  outline:3px solid var(--color-tealeaf);
  outline-offset:2px;
  border-radius:6px;
}
.dropdown_menu{
  position:absolute;
  top:48px;
  min-width:240px;
  background: var(--color-pearl);
  border:1px solid rgba(0,0,0,.08);
  border-radius:12px;
  box-shadow: 0 12px 24px rgba(0,0,0,.08);
  padding:12px;
  opacity: 0;
  transform: translateY(4px);
  transition: opacity .15s ease, transform .15s ease, visibility 0s linear .15s;
  z-index: 1100;
  pointer-events: none;
}
.dropdown_menu#menu1{
  left: 50px;
}
.dropdown_menu#menu2{
  left: 120px;
}
.dropdown_menu#menu3{
  left: 250px;
}
.dropdown_menu#menu4{
  left: 355px;
}
.dropdown_menu#menu5{
  left: 460px;
}
.show{
  transform: translateY(0);
  transition-delay: 0s;
  opacity: 1;
  pointer-events: auto;
}
.dropdown_list{
  list-style:none;
  display:grid;
  gap:6px;
}
.dropdown_list a{
  display:block;
  padding:8px 10px;
  border-radius:8px;
  font: 400 14px/1.3 "Oranienbaum", serif;
  color: var(--color-tea-charcoal);
  text-decoration:none;
}
.dropdown_list a:hover,
.dropdown_list a:focus{
  background: var(--color-sage-mist);
  color: var(--color-tea-charcoal);
}

.hamburger-menu {
  display: block; /* display:none starts to show up with responsive */
  cursor: pointer;
}
.hamburger-menu {
  display: none;
}
@media (max-width: 900px){
.hamburger-menu{
  display: block;
}
.nav#top-nav{
  display: none;
}
.nav-right{
  align-items: center;
  display: flex;
  justify-content: flex-end;
  margin-right: 45px;
  height: 50px;
}
.nav-right .fa-solid{
  font-size: 20px;
}
}

.side-menu-content .fa-xmark{
    font-size: 15px;
    text-align: right;
    color: var(--color-tea-charcoal);
    width: 100%;
}
.side-menu-content .fa-xmark:hover{
  color: var(--color-tealeaf);
}
.side-menu-position {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 1500;
  width: 200px;
}
.side-menu-design{
  background-color: var(--color-pearl);
  background-size: 1300px 700px;
  background-repeat: repeat;
  transform: translateX(100%);
  cursor: pointer;
  opacity: 0;
  transition: 0.4s ease-in-out;
  height: 100%;
  box-shadow: 2px 11px 8px #0000007d;
}
.side-menu-content {
  color: #fff;
  font-size: 24px; /* could use ems here too */
  margin: 25px;
  padding-left: 0;
}
.side-menu-content li {
  list-style: none;
  margin-bottom: 25px;
}
.side-menu-content li:hover{
  background: var(--color-sage-mist);
  color: var(--color-tea-charcoal);
  border-radius: 5px;
}
.side-menu-workspace {
  margin-bottom: 8px;
  text-align: center;
}

.side-menu-download {
  background-color: #fff;
  color: #611f69;
  padding: 15px 0;
  text-align: center;
  width: 100%;
}
.show-menu {
  opacity: 1;
  transform: translateX(0%);
}