body{
    background-color: rgb(125, 125, 125);
    margin: 0;
}

@font-face {
  font-family: MonoCode;
  src: url(/CourierPrime.ttf);
}

@font-face {
  font-family: planet;
  src: url(/planet.ttf);
}

@font-face {
  font-family: Dings;
  src: url(Yarndings.ttf);
}

@font-face {
  font-family: Hel;
  src: url(Helvetica.ttf);
}

@font-face {
  font-family: Lexend;
  src: url(Lexend.ttf);
}

@font-face {
  font-family: Tanger;
  src: url(Tangerine.ttf);
}

.div7 {
    background-color: rgb(255, 255, 255);
    display: flex;
    justify-content:space-evenly;
    align-content: center;
    width: 100%;
    height: 10%;
}

.div7 span{
    width: 10%;
    height: auto !important;
    align-self: center;
    font-family: MonoCode;
    color: #000000;
    font-size: 150%;
    margin: 1%;
    text-align: center;
}

.div7 span:hover{
    background-color: rgb(0, 0, 0);
    color: #ffffff;
    cursor: pointer;
    font-style: italic;
}

.div1 {
    background-color: rgb(255, 255, 255);
    width: 45%;
    height: auto;
    margin: auto;
    margin-top: 2%;
    padding-top: 1%;
    padding-bottom: 1%;
}

img{
  image-rendering: pixelated;
}

p{
  text-align: center;
    font-family: MonoCode;
    margin: 1%;
    font-size: 98%;
    margin-top: 3%;
    color: rgb(0, 0, 0);
    margin-left: 2%;
    margin-right: 2%;
}

#comicText {
    text-align: center;
    font-family: MonoCode;
    margin: 1%;
    font-size: 98%;
    margin-top: 3%;
    color: rgb(0, 0, 0);
    margin-left: 2%;
    margin-right: 2%;
}

.div1 h1{
    text-align: center;
    font-family: MonoCode;
}

.div1 h2{
    text-align: center;
    font-family: MonoCode;
}

#comicCommand {
    text-align: left;
    font-family: MonoCode;
    font-size: 180%;
    margin-left: 5%;
    margin-top: 3%;
    color: #0000EE;
}

#chatlogDiv{
      border: 1%;
      border-style: groove;
      border-color: rgb(156, 156, 156);
      background-color:var(--chatlog);
        display: block;
        margin-bottom: 2%;
        padding-left: 1%;
        padding-right: 1%;
        padding-top: 1%;
        padding-bottom: 1%;
        margin: 2%;
    }

#codeBox{
  width: 100%;
}

#comicImg{
  width: 100%;
}

.div2{
  width: 100%;
  height: 30%;
  background-color: rgb(167, 167, 167);
}

.div3{
  width: 100%;
  background-color: rgb(167, 167, 167);
}

#difImg{
  height: 100%;
  display: block;
  margin: auto;
}

.rowOfThings{
    display: flex;
    justify-content:space-evenly;
    padding-top: 2%;
    padding-bottom: 2%;
}

.rowOfThings img{
    width: 80px;
    height: auto !important;
    align-self: center;
    border-radius: 15px;
    border-radius: 10%;
    border: 3%;
    border-color: rgb(0, 0, 0);
    border-style:solid;
}

.button{
  display:block;
  margin:auto;
  cursor: pointer;
  
}

.button:hover{
  filter: invert(100%);
}

.logThingy{
  color: #000000;
  text-align: center;
    font-family: MonoCode;
    margin: 1%;
    font-size: 98%;
    margin-top: 3%;
    margin-left: 2%;
    margin-right: 2%;
}

.logThingy a{
  color: #0000EE;
}

iframe{
  width: 100%;
  height: 706px;
  zoom: 83.48%;
}

.textChats{
      font-family: MonoCode;
      text-align:left;
    }

    @media screen and (orientation: portrait) {
      .div1{
        width: 100%;
      }
      .div7 span{
        font-size: 63%;
        margin: 3%;
      }
      .rowOfThings img{
    width: 60px;
}
    }

@keyframes necrolunar {
  from {color: rgb(205, 144, 224);}
  to {color: rgb(49, 255, 0);}
}

.NecroText{
      animation-duration: 1s;
      animation-name: necrolunar;
      animation-iteration-count: infinite;
      animation-direction: alternate;
      animation-timing-function: ease-in-out;
    }

.TIChats{
      color: rgb(105, 105, 105);
    }

    .TMChats{
      color: rgb(39, 0, 255);
    }

    .GVChats{
      color: rgb(0, 255, 0);
    }

    .CJChats{
      color: rgb(183, 151, 72);
    }

    .TCChats{
      color: rgb(255, 0, 0);
    }

    .KKChats{
      color: rgb(232, 145, 22);
    }

    .WVChats{
      color: rgb(255, 0, 225);
    }

    .EVChats{
      color: rgb(255, 0, 225);
      font-family: Tanger;
      font-size: x-large;
    }

    .WVRChats{
      color: rgb(0, 0, 0);
      font-family: Hel;
    }

    .WVPChats{
      color: rgb(255, 255, 255);
      font-family: Lexend; 
      text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
    }

    .CTChats{
      color: rgb(0, 163, 44);
    }

    .RCJChats{
      color: rgb(167, 0, 0);
    }

    .GGChats{
      color: rgb(255, 180, 99);
    }

    .GGRChats{
      color: rgb(255, 180, 99);
      font-family: Dings;
    }

    .PRChats{
      color: rgb(3, 154, 3);
    }

    .CMChats{
      color: rgb(60, 60, 60);
    }

    .TFChats{
      color: rgb(25, 207, 0);
    }

    .CWChats{
      color: rgb(237, 90, 90);
    }

    .ZEChats{
      color: rgb(4, 83, 168);
    }

    .LMChats{
      color: rgb(255, 213, 0);
    }

    .EBChats{
      color: rgb(0, 132, 255);
    }

    .CGChats{
      color: rgb(0, 255, 0);
    }

    .TTChats{
      color: rgb(255, 127, 39);
    }

    .PLChats{
      color: rgb(183, 0, 255);
    }
    .PAChats{
      color: rgb(69, 176, 69);
    }
    .PIChats{
      color: rgb(116, 208, 237);
    }
    .BRChats{
      color: rgb(242, 0, 255);
    }
    .TDChats{
      color: rgb(49, 255, 0);
    }