: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;

  --d-html-bg-color: var(--black-a);
  --d-body-bg-color: var(--black-c);
  --d-body-fg-color: var(--white);

  --d-head-bg-color:      var(--black-c);
  --d-head-fg-color:      var(--white);
  --d-nav-bg-color:       var(--black-c);
  --d-nav-hover-color:    var(--pink);
  --d-nav-active-color:   var(--mauve);
  --d-nav-inactive-color: var(--black-c);

  --d-item-bg-color:       var(--black-c);
  --d-item-hover-bg-color: var(--black-d);

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

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

}

.head{
  background-color: var(--d-head-bg-color);
}

.body {
  font-family: Arial, Helvetica, sans-serif;
  width: 90%;
  margin-right: auto;
  margin-bottom: auto;
  margin-left: auto;
  background-color: var(--d-html-bg-color);
  color: #FFFFFF;
}
@media (max-width: 200px), screen and (orientation: portrait) {
  .body {
    font-family: Arial, Helvetica, sans-serif;
    width: 100%;
    margin-right: auto;
    margin-bottom: auto;
    margin-left: auto;
    background-color: var(--d-html-bg-color);
    color: #FFFFFF;
  }
}

.nav{
  overflow: hidden;
  background-color: var(--d-nav-bg-color);
}
.nav a{
  float: left;
  text-align: center;
  padding: 14px;
  font-size: 16px;
  text-decoration: none;
  color: var(--d-nav-fg-color);
}
.nav a:hover {
  transition: color .2s;
  color: var(--d-nav-hover-color);
}
.nav a.active {
  background-color: var(--d-nav-active-color);
}
.nav_dropdn {
  float: left;
  overflow: hidden;
}
.nav_dropdn .nav_dropbtn {
  font-size: 16px;
  border: none;
  outline: none;
  padding: 14px;
  background-color: inherit;
  font-family: inherit;
  margin: 0;
  color: var(--d-nav-fg-color);
}
.nav_dropbtn:hover {
  font-size: 16px;
  border: none;
  outline: none;
  color: var(--d-nav-hover-color);
  padding: 14px;
  background-color: var(--d-nav-bg-color);
  font-family: inherit;
  margin: 0;
}
.nav_dropdn-content {
  display: none;
  position: absolute;
  background-color: var(--d-nav-bg-color);
  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(--d-nav-hover-color);
}
.nav_dropdn-content a.active {
  background-color: var(--d-nav-bg-color);
}
.nav_dropdn:hover .nav_dropdn-content {
  display: block;
}

.content {
  background-color: var(--d-body-bg-color);
  color: var(--d-body-fg-color);
  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);
}