* {
 font-family: "Quantico", serif;
}
.enterbtn {
  background-image: url("/ui/enteridle.png");
  width: 337px;
  height: 114px;
}

.enterbtn:hover {
  background-image: url("/ui/enteractive.png");
  width: 337px;
  height: 114px;
}

.landing-page {
  display: flex;
  flex-direction: row;
  justify-content: center;
  height: 75vh;
  align-items: center;
    
}

body {
   background-image: url("/bg.gif"); 
   background-repeat: repeat;
   color: #ffffff;
   display: flex;
   flex-direction: row;
   justify-content: center;
   padding: 5vh;
}

ul {
  list-style-type: none;
  text-decoration: none;
}

.main {
 z-index: 1;
 width: 80vw; 
 display: flex;
 flex-direction: row;
 justify-content: space-around;
}

.sidenav {
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  filter: drop-shadow(4px 4px 4px #ffffff59);
  z-index: 2;
  padding: 0px;
  padding-top: -1em;
  width: 42vh;
  height: 42vh;
  /*background-image: url("/sidenavbg.png");*/
  border-radius: 10%;
  position: fixed;
  left: -21vh;
  top: 30vh;
  overflow: hidden;
}



.navbuttons {
 display: flex;
 flex-direction: column;
 text-align: center;
 margin-left: 18vh;
 margin-top: -2vh;
}
.navbuttons img {
  max-width: 7.6vw;
  max-height: 5.4vh;
}


.goggles {
  position: fixed;
  transform: rotate(-45deg);
  z-index: 3;
  top: 6vh;
  left: 7vw;
  width: 213px; 
  height: 76px;
  
}
.goggles img {
  max-width: 215px; 
  width: 213px; 
  height: 76px;
  
}

.scarf {
  position: fixed;
  z-index: 3;
  top: -10px;
  right: -15px;
  width: 20vw; 
  height: 20vh;
  filter: None;
}

.contentmain {
  border: 1px solid #ffffff;
  border-radius: 5px;
  width: 75%;
  height: 85vh;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  filter: drop-shadow(4px 4px 4px #ffffff59);
  overflow-x: scroll;
  
}

.contenttext { 
 padding: 5vh; 
}
.profile {
  border: 1px solid #ffffff;
  border-radius: 5px;
  width: 23%;
  height: 85vh;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  filter: drop-shadow(4px 4px 4px #ffffff59);
  
  display: flex;
  flex-direction: column;
  overflow-y: scroll;
  overflow-x: hidden;
  
}

.profile img {
 text-align: center; 
 align-self: center;
 margin: 1vw;
}


/* fonts, scrollbars, and things associated with javascript elements. */

.quantico-regular {
  font-family: "Quantico", serif;
  font-weight: 400;
  font-style: normal;
}

.quantico-bold {
  font-family: "Quantico", serif;
  font-weight: 700;
  font-style: normal;
}

.quantico-regular-italic {
  font-family: "Quantico", serif;
  font-weight: 400;
  font-style: italic;
}

.quantico-bold-italic {
  font-family: "Quantico", serif;
  font-weight: 700;
  font-style: italic;
}

a {
  text-decoration: none;
}
/* unvisited link */
a:link {
  color: #FFFFFF;
}

/* visited link */
a:visited {
  color: #FFFFFF;
}

/* mouse over link */
a:hover {
  color: #FFFFFF;
}

/* selected link */
a:active {
  color: #ff0000;
}




.chatbox {
  width: 300px;
  height: 500px;
  margin: 1em;
} 

/* status cafe */

#statuscafe {
    padding: .5em;
    background-color: #3e3e3e;
    border: 1px solid #ffffff;
    width: 300px;
    margin: 1em;
}
#statuscafe-username {
    margin-bottom: .5em;
}
#statuscafe-content {
    margin: 0 1em 0.5em 1em;
}

/* ===== Scrollbar CSS ===== */
  /* Firefox */
  * {
    scrollbar-width: auto;
    scrollbar-color: #ffffff #000000;
    font-family: "Quantico"
  }

  /* Chrome, Edge, and Safari */
  *::-webkit-scrollbar {
    width: 16px;
  }

  *::-webkit-scrollbar-track {
    background: #000000;
  }

  *::-webkit-scrollbar-thumb {
    background-color: #ffffff;
    border-radius: 55px;
    border: 2px solid #ffffff;
  }