html {
  scrollbar-gutter: stable;
  overflow-x: hidden;
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;

}

body {
  font-family: "Comic Sans MS", Comic Sans, Geneva, Arial, Helvetica, sans-serif;
  color: #000;
  background-image: url('/images/bkg1.jpg');
  background-repeat: no-repeat;
  background-size: 100% auto;
  background-position: top;
  overflow-x: hidden;

}

.page {
  width: 900px;
  margin: 0 auto;
}

.topbar {
  background-color: #7C9BED;
  border: #7184D3 solid 2px;
}

.topbar-text {
  color: #fff;
  font-weight:bold;
}

.topbar-inner {
  background: #7C9BED;
  display: flex;
  justify-content: space-between;
  padding: 2px 2px;
}

#bannerholder {
  position: relative;
  width: 900px;
  height: 235px;
}

.bannerstuff {


  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;

  -webkit-mask-size: cover;
  mask-size: cover;
  -webkit-mask-position: left;
  mask-position: left;
}

.bannerstuff:nth-child(1) {
  z-index: 2;
}

.bannerstuff:nth-child(3) {
  z-index: 1;
  -webkit-mask-image: url('images/bannerIMGmask.png');
  mask-image: url('images/bannerIMGmask.png');
  mask-position: left 0px bottom -2px;
  -webkit-mask-position: left 0px bottom -0px;
}

.content {
  display: flex;
}

.sidebar {
  width: 250px;
  padding: 5px;
}

.box {
  padding: 8px;
  margin-bottom: 10px;
  background-color: #fff
}

.boxprofile {
  border: 5px solid #95a0cc;
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px;
  padding: 8px;
  margin-bottom: 10px;
  text-align: center;
  background-color: #fff
}

.boxprofile a {
  font-weight: bold;
}

.boxfriends {
  background-color: #fff;
  padding: 8px;
  margin-bottom: 10px;
  border: 5px solid #95a0cc;
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px;
  text-align: center;
}

.boxfriends p {
  font-size: 18px;
  font-weight: bold;
}

.profile h2 {
  font-size: 22px;
}

.alerts {
  list-style: none;
}

.alerts li {
  display: flex;
  justify-content: center;
  gap: 6px;
  margin: 5px 0;
  padding-bottom: 5px
}

.main {
  width: 650px;
  padding: 5px;
  background-color: #fff;
  border: 5px solid #95a0cc;
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px;
  margin: 10px;
  position: relative;
  top: -5px;
  padding-left: 20px;
}

.hero {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}

.herotext {
  position: absolute;
  text-align: center;
  top: 120px;
  left: 55px;
}

.feature {
  display: flex;
  gap: 10px;
  margin-bottom: 16px;
}

.feature p {
  width: 70%
}

.feature h3 {
  margin-bottom: 4px;
  font-size: 110%
}

.portrait {
  width: 250px;
  position: relative;
  top: -60px;
  left: -45px;
  margin-bottom: -50px
}

#playworld {
  position: relative;
  top: -90px;
  left: 30px
}

#scenes {
  position: relative;
  top: -58px;
  left: 46px;

}

.feature img {
  /* because this stupid ass image stretches */
  height: 75%
}

.friend {
  display: flex;
  background: #00cc33;
  width: 192px;
  padding: 2px;
  font-family: "Comic Sans MS", Comic Sans, Geneva, Arial, Helvetica, sans-serif;
  color: #000;
  gap: 8px;
}

.image {
  flex-direction: column;
  align-items: center;
  width: 40px;
  flex-shrink: 0;
  padding-right: 45px;
}

.image img {
  display: block;
}

.time {
  font-size: 10px;
  margin-top: 4px;
  text-align: center;
}

.info {
  flex-grow: 1;
  background: #ccffcc;
  padding: 4px 8px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.name {
  font-weight: bold;
  color: #000;
  text-decoration: none;
}

.name:hover {
  text-decoration: underline;
}

.status {
  display: flex;
  align-items: center;
  background: #fff;
  margin-top: 4px;
  padding: 2px 6px;
  gap: 6px;
  font-size: 10px;
}

.status img {
  display: block;
}

.status span {
  font-style: italic;
}

.more {
  font-size: 75%
}

#robadges {
  font-weight: bold;
}

#current-date {
  font-weight: bold;
}

.loginbox {
  font-family: Verdana, "Geneva", Tahoma, sans-serif;
  background-color: #c4c4c4;
  border: 2px solid #706e6e;
  font-style: italic;
  padding-top: 20px;
}

.loginbox input[type="text"],
.loginbox input[type="password"] {
  width: 90%;
  margin-bottom: 8px;
  padding: 4px;
  border: 3px dashed #706e6e;
}

.loginbox input[type="submit"] {
  padding: 4px;
  font-family: Verdana;
  font-style: italic;
  margin-bottom: 5px
}

/* 
    GAMES PAGE
  */

.cotw {
  position: relative;
  align-items: center;
  justify-content: center;
  width: 650px;
  height: 350px;
  padding: 5px;
  background-image: url('/images/thumb.png');
  background-color: hsla(0, 0%, 100%, 0.5);
  background-size: cover;
  background-blend-mode: lighten;
  border: 5px solid #5c6380;
  border-radius: 40px;
  margin: 0 auto 50px;
  margin-bottom: 20px;
}

.cotw img {
  position: relative;
  z-index: 2;
  width: 300px;
  left: -50px;
}


.cotwbox {
  position: relative;
  z-index: 1;
  color: black;
  background-color: #fff;
  height: 200px;
  border: 5px solid black;
  padding: 0 20px;
  width: 55%;
  margin-left: 100px;
  border-radius: 20px;
  left: 165px;
  top: -300px;
  text-wrap: pretty;
}

#commentsource {
  position: absolute;
  bottom: 0;
  right: 15px;
}

#twsc {
  position: absolute;
  right: 20px;
}

.gamesarea {
  width: 100%;
  padding: 5px;
  background-color: #fff;
  border: 5px solid #95a0cc;
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px;
  position: relative;
  top: -5px;
  padding-left: 20px;
  margin: 0 auto;
  margin-top: 50px;
}

#gamesholder {
  margin-top: 20px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
}

.game {
  margin-top: 10px;
  max-width: fit-content;
  padding-left: 10px;
  padding-right: 10px;
  margin-bottom: 10px;
}



#categorysort {
  font-size: 30px;
  font-family: 'Lithos Pro';
  position: absolute;
  margin-top: 2px;
  text-align: center;
  max-width: fit-content;
  margin: 0 auto;
  background-color: #f8f184;
  padding: 5px;
  border: 5px solid #908a3f;
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px;
  inset: 0;
  height: fit-content;
  top: -30px;
  -webit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

#filtersort {
  font-size: 15px;
  font-family: 'Lithos Pro';
  position: absolute;
  margin-top: 2px;
  text-align: center;
  max-width: fit-content;
  margin: 0 auto;
  background-color: #c8d1f4;
  padding: 5px;
  border: 5px solid #95a0cc;
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px;
  height: fit-content;
  top: -20px;
  -webit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

#gpInstructions {
  text-align: center;
  margin-top: 40px;
  font-weight: 600;
}

/* 
  STUFF FROM THIS POINT ON IS FOR THE USER PAGE
  */

#namebox {
  bottom: 40%;
  left: 15%;
  position: absolute;
  display: inline-block;
  width: max-content;
  padding: 55px;
  background-image: url("images/userthing.svg");
  background-size: 100% auto;
  background-repeat: no-repeat;
  background-position: left;
  z-index: 1;
}

#namebox p {
  position: relative;
  font-size: 35px;
  font-weight: bold;
  color: #000;
  font-style: italic;
  top: -6px;

}

#blurb {
  align-items: center;
  position: absolute;
  bottom: 19%;
  z-index: 2;
  height: 100px;
  width: 85%;
  margin: 10px;
  margin-left: 35px;
  padding: 10px;
  background-color: rgb(221, 192, 138);
  border: 5px solid rgb(73, 67, 55);
  display: flex;
  text-wrap: pretty;
}

#blurb pre {
  margin-top: 15px;
  text-align: center;
  font-family: 'Verdana';
  font-weight: 600;
  width: fit-content;
  margin: 0 auto;
  text-wrap: pretty;
}

.maintransparent {
  width: 650px;
  padding: 5px;
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px;
  margin: 10px;
  position: relative;
  top: -5px;
  padding-left: 20px;
}

.badges {
  background-color: #fff;
  padding: 8px;
  margin-bottom: 10px;
  border: 5px solid #95a0cc;
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px;
  text-align: center;
}

.badges p {
  font-size: 18px;
  font-weight: bold;
}

.badge {
  width: 25%;
}

.badge img {
  width: 100%;
}

#badgelist {
  display: flex;
  flex-wrap: wrap;
}

#userrender {
  left: -30px;
}

#placelabel {
  position: absolute;
  width: 150px;
  left: -15px;
  top: -20px;
}

#placeNdesc {
  display: flex;
  gap: 5px;
  margin-top: 20px;
  box-sizing: border-box;
}

.title {
  display: inline-block;
}

.title h1 {
  max-width: fit-content;
}

.title img {
  position: absolute;
  top: 60px;
  right: 160px;
}

#description {
  font-family: Verdana, "Geneva", Tahoma, sans-serif;
  background-color: #c4c4c4;
  border: 2px solid #706e6e;
  font-style: italic;
  padding-top: 20px;
  max-width: 100%;
  word-wrap: break-word;
  padding: 5px;
}

.profileitem {
  width: 25%;
}

.profileitem img {
  width: 75%;
  border: 2px solid black;
  gap: 5px;
  background-color: white;
}

#inventory {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  background-color: rgb(176, 176, 176);
  border: 2px solid black;
  padding-top: 5px;
  padding-bottom: 5px;
}

#invtabs {
  display: flex;

}

#commentB {
  position: absolute;
  top: -83px;
  left: 25%;
  width: 300px;
  z-index: -1;
}

.comment {
  display: flex;
}

.comment img {
  background-image: #8A9CEB;
  width: 100px;
}

.commentContent {
  display: flex;
}

#stats {
  justify-content: space-around;
  display: flex;
  flex-wrap: wrap;
  background-color: rgb(176, 176, 176);
  border: 2px solid black;
  padding-top: 5px;
  padding-bottom: 5px;
}

.commentText p {
  padding-bottom: 10px;
}

.commentText {
  padding-left: 10px;
}

.commentText p {
  font-family: 'Verdana', "Geneva", Tahoma, sans-serif;
  background-color: #a1bed9;
  border: 2px solid #294685;
  font-style: italic;
  padding: 10px;
  max-width: 100%;
  width: 100%;
  height: 75%;
}

/*  doc advised against this
  .commentText h4 {
    font-family:'Lithos Pro'
  } */

/* EVERYTHING FROM THIS POINT FORWARD IS FOR THE "PEOPLE" PAGE */



.peopleUser {
  margin-top: 10px;
  position: relative;
  display: inline-block;
  justify-content: center;
  max-width: fit-content;
  margin: 4px;
  flex-wrap: wrap;
}

.peopleUser img {
  display: block;
}

.peopleUserName {
  font-size: 16px;
  text-align: center;
  position: absolute;
  width: 180px;
  left: 20px;
  bottom: 10px;
  overflow: ellipse;
}

.onlineStatus {
  margin-left: auto;
  margin-right: auto;
  width: 160px;
  font-size: 10px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}



/* stupid item.php
  FUCK
  */



#typeImage {
  position: absolute;
  top: -20px;
  left: 10%;
  height: 100px;
}


#itemName {
  position: absolute;
  margin-top: 2px;
  text-align: center;
  max-width: fit-content;
  margin: 0 auto;
  background-color: #c8d1f4;
  padding: 5px;
  border: 5px solid #95a0cc;
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px;
  inset: 0;
  height: fit-content;
  top: -30px;
}

#itemRender {
  border: 2px solid black;
  margin-left: -13px;
}

#itemDescription {
  background-color: #f4c8c8;
  border: 2px solid #cc9595;
  margin-right: 10px;
  padding: 5px;
  line-height: 20px;
  font-size: 12px;
  font-family: Verdana, "Geneva", Tahoma, sans-serif;
  font-weight: 600;
  overflow-y: scroll;
  overflow-wrap: break-word;
  max-height: 155px;
}

#itemDescription::-webkit-scrollbar {
  width: 8px;
  height: 8px;
  scrollbar-width: thin;

}

#itemDescription::-webkit-scrollbar-track {
  background: #e9a9a9;
  border-radius: 4px;
  border-radius: 0;
}

#itemDescription::-webkit-scrollbar-thumb {
  background: #ba8686;
  border-radius: 4px;
  border-radius: 0;
}

#itemDescription::-webkit-scrollbar-thumb:hover {
  background: #956b6b;

}

.itemDetailsBOX {
  float: left;
  width: 50%;
}

#price {
  margin-top: 10px;
  background-color: #c8f4d8;
  border: 2px solid #95cca5;
  padding: 10px;
  max-width: fit-content;
  margin-bottom: 5px;
}

#identifiers {
  background-color: #f4f3c8;
  border: 2px solid #c3cc95;
  overflow: auto;
  width: 80%;
  padding: 10px;
  float: left;
  text-align: left;
  margin-bottom: 10px;
}



#identifiers p {
  float: right;
  font-size: 14px;
}

.maindupe {
  width: 850px;
  padding: 5px;
  background-color: #fff;
  border: 5px solid #95a0cc;
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px;
  position: relative;
  top: -5px;
  padding-left: 20px;
  margin: 0 auto;
  margin-top: 50px;
}

#recommendedsign {
  position: absolute;
  top: -50px;
  left: -20px;
  width: 700px;
}

#recommendedItems {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  margin-top: 50px;
  margin-left: -15px;
}

.recommendedItem {
  gap: 10px;
  border: 2px solid black;
  max-width: fit-content;
  padding: 2px;
}

.recommendedItem p {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.recommendedItem h6,
#uploaderInfo h6 {
  font-weight: 400;
  letter-spacing: 1px;
}

/* game page. */
#thumbnailholder {
  width: 650px;
  padding: 5px;
  background-color: #fff;
  border: 5px solid #95a0cc;
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px;
  margin: 10px;
  position: relative;
  top: -5px;
  padding-left: 20px;
}

.playButtonHolder {
  left: 10px;
  top: -15px;
  margin-top: 10px;
  display: flex;
  width: 55%;
  padding: 5px;
  /*
    background-color:white;
    border: 2px solid black;
    */
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px;
  position: relative;
  padding-left: 20px;
  padding-top: 20px;
  margin: 0 auto;
}

.gameDetailsHolder {
  display: flex;
  width: 850px;
  padding: 5px;
  background-color: #fff;
  border: 5px solid #95a0cc;
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px;
  position: relative;
  padding-left: 20px;
  padding-top: 20px;
  margin: 0 auto;
}

#gamedesc {
  background-color: #cecece;
  border: 5px dashed #888888;
  position: relative;
  top: -5px;
  padding: 5px;
  margin-left: 20px;
  overflow-wrap: break-word;
  overflow-x: hidden;
  max-height: 190px;
  margin-right: 10px;
  width: 612.08px;
  overflow-y: auto;
}

#descNservers {
  display: flex;
}

#serverlist {
  height: 190px;
  display: none;
  visibility: visible;
  background-color: white;
  border: 2px solid #3b3773;
  position: relative;
  top: -5px;
  padding: 5px;
  overflow-wrap: break-word;
  overflow-x: hidden;
  max-height: 190px;
  overflow-y: auto;
}

.server {
  flex-wrap: wrap;
  height: fit-content;
  justify-content: center;
  align-items: center;
  display: flex;
  width: fit-content;
  height: fit-content;
}

.server img {
  width: 46px;
  height: 46px;
  padding: 5px;
}

.serverlistJoin {
  margin: 4px;
  margin-top: 4px;
}

#playButton,
.serverlistJoin {
  transition: filter 0.2s ease-in;
}

#playButton:hover,
.serverlistJoin:hover {
  filter: brightness(1.5);
}

hr {
  margin: 4px;
  margin-top: 20px;
  margin-bottom: 20px;
  border: 1px dashed rgb(86, 86, 86);
}

button {
  font-family: 'Comic Sans MS';
}

.catalogPrice {
  font-size: 12px;
  color: green;
  font-weight: 600;
  font-family: 'Verdana';
  letter-spacing: -1px;
}

.catalogItem {
  gap: 10px;
  border: 2px solid black;
  max-width: fit-content;
  padding: 5px;
  max-height: fit-content;
}

.catalogItem img {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

.recommendedItem p {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* SIGN UP PAGE */

.legend {
  font-style: italic;
  margin-right: 15px;
  font-family: 'Verdana';
  font-weight: 600;
  font-size: 14px;
  padding: 2px;
  /*
    background-color: lightgrey;
    border: 2px solid grey;
    */
}

#signupUSERNAME {
  border: 2px solid rgb(97, 122, 131);
  background-color: lightblue;
  margin-top: 10px;
  margin-left: auto;
  margin-right: auto;
  padding: 10px;
  width: 80%;
}

#signupUSERNAME .signupLabel {
  line-height: 40px;
  float: right;
  color: #446b79;
  margin-right: 10px;
}

#signupUSERNAME .signupInput {
  float: right;
  padding: 10px;
  text-align: left;
  background-color: rgba(255, 255, 255, 0.494);
  border: 2px dashed rgb(97, 122, 131);
  font-family: 'Verdana';
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

#signupUSERNAME .signupDescription {

  margin-top: -10px;
  color: rgb(70, 128, 148);
  line-height: 14px;
  font-family: 'Verdana';
  font-weight: 600;
  font-size: 10px;
  margin-bottom: 30px;
}

/* PASSWORD */

#signupPASSWORD {
  border: 2px solid rgb(131, 97, 97);
  background-color: rgb(230, 173, 173);
  margin-top: 10px;
  margin-left: auto;
  margin-right: auto;
  padding: 10px;
  width: 80%;
}

#signupPASSWORD .signupLabel {
  line-height: 40px;
  float: right;
  color: rgb(121, 68, 68);
  margin-right: 10px;
}

#signupPASSWORD .signupInput {
  float: right;
  padding: 10px;
  text-align: left;
  background-color: rgba(255, 255, 255, 0.494);
  border: 2px dashed rgb(131, 97, 97);
  font-family: 'Verdana';
  height: 35px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

#signupPASSWORD .signupDescription {

  margin-top: -10px;
  color: rgb(148, 70, 70);
  line-height: 14px;
  font-family: 'Verdana';
  font-weight: 600;
  font-size: 10px;
  margin-bottom: 30px;
}

/* KEY */

#signupKEY {
  margin-left: 70px;
  border: 2px solid rgb(97, 131, 103);
  background-color: rgb(173, 230, 176);
  margin-top: 10px;
  margin-right: auto;
  padding: 10px;
  width: 40%;
  margin-bottom: 20px;
}

#signupKEY .signupLabel {
  line-height: 40px;
  color: rgb(68, 121, 70);
  margin-right: 10px;
  float: right;
}

#signupKEY .signupInput {
  float: right;
  padding: 10px;
  text-align: left;
  background-color: rgba(255, 255, 255, 0.494);
  border: 2px dashed rgb(97, 131, 100);
  width: 140px;
  font-family: 'Verdana';
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

#signupKEY .signupDescription {

  margin-top: -10px;
  color: rgb(70, 148, 74);
  line-height: 14px;
  font-family: 'Verdana';
  font-weight: 600;
  font-size: 10px;
  margin-bottom: 30px;
}

#signUpButton {
  margin-top: auto;
  margin-bottom: auto;
  margin-right: 70px;
  margin-left: 30px;
  background-color: #f5cd2f;
  color: #000;
  height: 170px;
  width: 180px;
  font-family: 'Comic Sans MS';
  font-size: 40px;
  font-weight: bold;
  padding: 5px;
  border: 4px solid black;
  transition: background-color 0.3s ease;
  border-radius: 100%;
  text-align: center;

}

#signUpButton:hover {
  animation: flash 1s infinite alternate;
}

@keyframes flash {
  0% {
    background-color: #f5cd2f;
  }

  100% {
    background-color: #e73c53;
  }
}

/* login page */

#logInButton {
  display: flex;
  margin-left: auto;
  margin-right: 16px;
  margin-top: 10px;
  margin-bottom: 10px;
  background-color: #f5cd2f;
  color: #000;
  width: max-content;
  font-family: 'Comic Sans MS';
  font-size: 20px;
  font-weight: bold;
  padding: 5px;
  border: 4px solid black;
  transition: background-color 0.3s ease;
  text-align: center;

}


#logInButton:hover {
  animation: flash 1s infinite alternate;
}

#LOGINPAGE {
  margin-left: auto;
  margin-right: auto;
  border: 2px solid rgb(97, 102, 131);
  background-color: rgb(180, 173, 230);
  margin-top: 10px;
  padding: 10px;
  width: 100px;
  margin-bottom: 20px;
}

#LOGINPAGE .signupLabel {
  line-height: 40px;
  color: rgb(81, 68, 121);
}

#LOGINPAGE .signupInput {
  padding: 10px;
  text-align: left;
  background-color: rgba(255, 255, 255, 0.494);
  border: 2px dashed rgb(102, 97, 131);
  width: 140px;
  height: 35px;

  font-family: 'Verdana';
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

#loginStuff p {
  font-size: 14px;
}