:root {
  --black-a: #161320;
  --black-b: #1A1826;
  --black-c: #1E1E2E;
  --black-d: #302D41;
  --black-e: #575268;
  --gray-a:  #6E6C7E;
  --gray-b:  #988BA2;
  --gray-c:  #C3BAC6;
  --white:   #D9E0EE;

  --lavender:  #C9CBFF;
  --rosewater: #F5E0DC;

  --flamingo: #F2CDCD;
  --mauve:    #DDB6F2;
  --pink:     #F5C2E7;
  --maroon:   #E8A2AF;
  --red:      #F28FAD;
  --peach:    #F8BD96;
  --yellow:   #FAE3B0;
  --green:    #ABE9B3;
  --teal:     #B5E8E0;
  --blue:     #96CDFB;
  --sky:      #89DCEB;

  --page-background: #111120;
  --page-foreground: #9aa5ce;

  --container-background: #1a1b30;
  --container-foreground: #9aa5ce;

  --item-background:      #414868;
  --item-foreground:      #9aa5ce;

  --link-foreground:         #7aa2f7;
  --link-foreground-visited: #bb9af7;

  --d-item-fg-color-a: var(--pink);
  --d-item-fg-color-b: var(--mauve);
  --d-item-fg-color-c: var(--blue);

  
  --nav-active-color: #527092;
  --nav-hover-color: #527092;
  --body-text-color: #141319;
  --item-bg-color: #2F2D39;
  --site-first-color: #527092;
  --site-second-color: #7C97B6;
  --site-third-color: #7D97B5;

}

body {
  width: 90%;
  margin-right: auto;
  margin-bottom: auto;
  margin-left: auto;
  background-color: var(--page-background);
  color: var(--page-foreground);
}
@media (max-width: 200px), screen and (orientation: portrait) {
  body {
    width: 100%;
    margin-right: auto;
    margin-bottom: auto;
    margin-left: auto;
    background-color: var(--page-background);
    color: var(--page-foreground);
  }
}

.nav{
  overflow: hidden;
  background-color: var(--container-background);
  color: var(--container-foreground);
}
.nav a{
  float: left;
  text-align: center;
  padding: 14px;
  font-size: 16px;
  text-decoration: none;
  color: var(--item-foreground);
}
.nav a:hover a.active:hover{
  transition: color .2s;
  color: var(--item-foreground);
}
.nav a.active {
  background-color: var(--item-background);
}
.nav_dropdn {
  float: left;
  overflow: hidden;
}
.nav_dropdn .nav_dropbtn {
  font-size: 16px;
  border: none;
  outline: none;
  padding: 14px;
  background-color: var(--container-background);
  color: var(--item-foreground);
  margin: 0;
}
.nav_dropbtn:hover {
  font-size: 16px;
  border: none;
  outline: none;
  padding: 14px;
  background-color: var(--container-background);
  margin: 0;
}
.nav_dropdn-content {
  display: none;
  position: absolute;
  background-color: var(--container-background);
  min-width: 160px;
  z-index: 1;
}
.nav_dropdn-content a {
  float: none;
  padding: 12px;
  text-decoration: none;
  display: block;
  text-align: left;
}
.nav_dropdn-content a:hover {
  color: var(--link-foreground);
}
.nav_dropdn-content a.active {
  background-color: var(--item-background);
}
.nav_dropdn:hover .nav_dropdn-content {
  display: block;
}

.content {
  background-color: var(--container-background);
  color: var(--container-foreground);
  margin-top: 8px;
}

.button {
  min-height: 16px;
  border-style: none;
  text-decoration: none;
  font-size: 16px;
  padding-top: 4px;
  padding-bottom: 4px;
  padding-left: 8px;
  padding-right: 8px;
}
.p1 {
  color: var(--d-item-fg-color-a);
  background-color: var(--item-bg-color);
}
.p2 {
  color: var(--d-item-fg-color-b);
  background-color: var(--item-bg-color);
}
.p3 {
  color: var(--d-item-fg-color-c);
  background-color: var(--item-bg-color);
}