@import url('https://fonts.googleapis.com/css2?family=Faustina:ital,wght@0,300..800;1,300..800&display=swap');
         
body {
      font-family: "Faustina", serif;
}
#headerouter{
   display: flex;
   justify-content: center;
}
#header{
   display: flex;
   margin: 3%
}
#headerinner{
   display: flex;
   align-items: center;
}
#headerinner2 *{
   margin: auto;
   margin-left: 30px
}
#header img{
   height: 10em;
}
#main{
   display:flex;
   margin-left: 4%;
   margin-right: 4%
}
@media (max-width: 640px) {
    #sidebar{
        flex-flow: row !important;
        width: 100% !important;
        justify-content: center;
    }
    #main{
        flex-flow:column !important;
        
    }
    #headerinner2{
        h1{
            font-size:6vw;
        }
        h2{
            font-size:4vw;
        }
    }
    #body{
        padding-top: 4%;
    }
}
#sidebar{
   display:flex;
   flex-flow: column;
   width: min-content;
   margin-right: 4%;
}
#sidebar p{
   padding-top: 10;
   padding-bottom: 10;
   text-align: center;
   border-bottom: solid 1px;
   margin-top: 0;
   margin-bottom: 0;
   padding-left: 2em;
   padding-right: 2em;
}
#sidebar a{
    text-decoration: none;
    color: black;
}
#sidebar a:hover{
    text-decoration: underline;
}
@keyframes fontweightanim1 {
    from {
      font-weight: 300;
    }
    to {
      font-weight: 800;
    }
  }
@keyframes fontweightanim1 {
from {
    font-weight: 800;
}
to {
    font-weight: 800;
}
}
#body p { 
   text-indent: 30px;
}
#body p.noindent { 
    text-indent: 0px;
 }
.textcenter{
   text-align: center;
}
#body{
    width: 100%;
}
#nopediv {
    text-align: center;
}
#consentdiv{
    border: red solid 1px;
    padding: 3%;
}
.throbber{
    text-align: center;
    width: 100%;
}
.throbber-over{
    position:absolute;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    z-index: -1;
    background: linear-gradient(180deg, #ffffff, #000000, #ffffff, #000000);
    background-size: 600% 600%;
    opacity: 0.8;
    -webkit-animation: throbber-gradient 3s infinite linear forwards;
    -moz-animation: throbber-gradient 3s infinite linear forwards;
    animation: throbber-gradient 3s infinite linear forwards;
}

.throbber-cont img {
  display: block;  
}
.throbber-cont {
    position: relative;
    display: inline-block;
}


@-webkit-keyframes throbber-gradient {
    0%{background-position:50% 0%}
    100%{background-position:50% 80%}
}
@-moz-keyframes throbber-gradient {
    0%{background-position:50% 0%}
    100%{background-position:50% 80%}
}
@keyframes throbber-gradient {
    0%{background-position:50% 0%}
    100%{background-position:50% 80%}
}

#chatcont{
    overflow-y: scroll;
    height: 60vh;
    width: 0px;
    min-width: 100%;
}
#chatcont * {
    overflow-anchor: none;
}
#chatanchor {
    overflow-anchor: auto;
    height: 1px;
}
#textbardiv{
    width: 100%;
    display:flex;
}
#textbar{
    width:100%;
}
.servermessage{
    background-color:#000000;
    color:#ffffff;
    margin: 0;
    overflow-wrap: break-word;
    width: 0px;
    min-width: 100%;
}
.errormessage{
    background-color: rgb(121, 0, 0);
    color:#ffffff;
    margin: 0;
    overflow-wrap: break-word;
    width: 0px;
    min-width: 100%;
}
.usermessage{
    margin: 0;
    overflow-wrap: break-word;
    width: 0px;
    min-width: 100%;
}
#chatcont p:last-of-type{
    margin-bottom: 16px;
}