:root {
  --color-purpz: rgb(59,45,59);
  --color-purpz-alt: black;
  --color-sky: rgb(222,235,247);
  --color-sky-alt: mintcream;
}
body {
  background-color: black;
  color: var(--color-purpz, --color-purpz-alt);
  font-family: tahoma, sans-serif;
  font-size: 14px;
  overflow-x: hidden;
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
}
* {
  margin: 0;
  padding: 0;
}
h1 {
  color: var(--color-sky, --color-sky-alt);
  font-family: tahoma, sans-serif;
}
p {
  color: var(--color-purpz, --color-sky-alt);
  font-family: tahoma, sans-serif;
}

  #content {
    transition-duration: 0.4s; 
  }
  #content.lightmode {
    background-color: white;
    color:            var(--color-purpz, --color-purpz-alt);
  }
  #content.darkmode {
    background-color: black;
    color:            var(--color-sky, --color-sky-alt);
  }
  #leftbar
  {
    line-height:            32px;
    background-color:       #000000;
    height:                 100vh;
    width:                  10%;
    float:                  left;
    position:               fixed;
    left:                   0px;
    top:                    0px;
    padding:                0%;
    margin:                 0px;
    font-family:            "Century Gothic", "Arial", Sans-serif;
    font-weight:            bold;
    text-shadow:            0.666px 0.666px #000000;
  }
  
  #rightbar
  {
    line-height:            32px;
    background-color:       #000000;
    height:                 100vh;
    width:                  10%;
    float:                  right;
    position:               fixed;
    right:                  0px;
    top:                    0px;
    padding:                0%;
    margin:                 0px;
    font-family:            "Century Gothic", "Arial", Sans-serif;
    font-weight:            bold;
    text-shadow:            0.666px 0.666px #000000;
  }
  #topbar
  {
    background-color:       #000000;
    height:                 50px;
    width:                  80%;
    position:               -webkit-sticky;
    position:               sticky;
    top:                    0px;
    left:                   10%;
    z-index:                100;
  }
  .barfrg {
    background-color:       #000000;
    height:                 100%;
    width:                  23%;
    position:               relative;
    float:                  left;
  }
  .barfrg:hover {
    background-color:       rgba(255,255,255,0.3);
  }
  .barfrg p { 
    margin:                 0;
    position:               absolute;
    top:                    50%;
    left:                   50%;
    transform:              translate(-50%, -50%);
    text-align:             center;
    font-size:              17px;
    font-weight:            bold;
    color:                  var(--color-sky, --color-sky-alt);
  }
  .bardark {
    background-color:       #000000;
    height:                 100%;
    width:                  6%;
    position:               relative;
    float:                  right;
  }
  .bardark img {
    max-width:            50%;
    max-height:           50%;
    object-fit:           contain;
    transition-duration:  0.4s; 
    position:             absolute;
    top:                  50%;
    left:                 50%;
    transform:            translate(-50%, -50%);
  }
  a.nav
  {
    text-decoration:  none;
    color:      #11bbee;
  }
  .topbanner {
    background-color:       #000000;
    height:                 150px;
    width:                  100vw;
    top:                    0px;
    position:               static;
  }
  .fillbox img {
    width:                  100vw;
    height:                 150px;
    object-fit:             cover;
  }
  #topinfo {
    position:     relative;
    left:         10%;
    width:        80%;
    height:       60px;
  }
  #topinfo p {
    margin:                 0;
    font-family:            "Century Gothic", "Tahoma", "Arial", Serif;
    font-size:              24px;
    text-align:             center;
    position:               absolute;
    white-space:            normal;
    font-weight:            bold;
    top:                    80%;
    left:                   50%;
    transform:              translate(-50%, -50%);
    transition-duration: 0.4s; 
  }
  #topinfo.lightmode p {
    color: var(--color-purpz, --color-purpz-alt);
  }
  #topinfo.darkmode p {
    color: var(--color-sky, --color-sky-alt);
  }
  #subinfo {
    position:     relative;
    left:         15vw;
    width:        70vw;
    height:       6vh;
  }
  #subinfo p {
    margin:                 0;
    font-family:            "Century Gothic", "Tahoma", "Arial", Serif;
    font-size:              16px;
    text-align:             center;
    position:               absolute;
    white-space:            normal;
    top:                    30%;
    left:                   50%;
    transform:              translate(-50%, -50%);
  }
  #anim {
    font-family:  "tahoma", "arial", serif;
    font-size:    14px;
    position:     relative;
    width:        70%;
    left:         15%;
    white-space:  normal;
    transition-duration: 0.4s;
  }
  #anim .lightmode {
    background-color: white;
    color:            var(--color-purpz, --color-purpz-alt);
  }
  #anim .darkmode {
    background-color: black;
    color:            var(--color-sky, --color-sky-alt);
  }
  #anim button {
    background-color: inherit;
    color:            inherit;
    font-family:      tahoma, sans-serif;
    font-size:        16px;
    font-weight:      bold;
    width:            60px;
    height:           30px;
    border:           none;
    margin:           0px;
    transition-duration: 0.4s;
  }
  .lightmode #anim button:hover {
    background-color: var(--color-purpz, --color-purpz-alt);
    color: white;
  }
  .darkmode #anim button:hover {
    background-color: var(--color-sky, --color-sky-alt);
    color: black;
  }
  #anim img {
    max-height:       90vh;
    max-width:        100%;
    object-fit:       contain;
  }
  #anim #image {
    position: relative;
  }
  #anim #iframe {
    left:     0px;
    position: absolute;
  }
  #addr {
    position:         relative;
    left:             10%;
    width:            80%;
    z-index:          99;
    transition-duration: 0.4s;
  }
  .lightmode #addr {
    background-color: black;
  }
  .darkmode #addr {
    background-color: var(--color-purpz, --color-purpz-alt);
  }
  #addr p {
    font-family:  "Tahoma", "Arial", Serif;
    text-align:   justify;
    font-size:    12px;
    color:        var(--color-sky, --color-sky-alt);
    white-space:  normal;
    margin-left:  5%;
    margin-right: 5%;
  }
  #footgrad {
    width:            100vw;
    position:         relative;
    transition-duration: 0.4s;
  }
  #footgrad .relief {
    height: 1px;
  }
  #footgrad .divot {
    height: 1px;
  }
  .lightmode #footgrad .relief {
    transition-duration: 0.4s;
    background-color: black;
  }
  .lightmode #footgrad .divot {
    transition-duration: 0.4s;
    background-color: white;
  }
  .darkmode #footgrad .relief {
    transition-duration: 0.4s;
    background-color: var(--color-purpz,--color-purpz-alt);
  }
  .darkmode #footgrad .divot {
    transition-duration: 0.4s;
    background-color: black;
  }
  #testo {
    object-position: 100% 0%;
  }