body{
  font-family: Verdana, Geneva, Tahoma, sans-serif;
  color: #ffffff;
  background-image: url("../assets/777.gif");
  background-repeat: repeat;
  overflow: hidden;
  background: url('../assets/777.gif') repeat;
  background-size: 220px 220px;
  animation: bg-scrolling 150s linear infinite;
  overflow-y: scroll;
}
@keyframes bg-scrolling {
  from { background-position: 0 0; }
  to { background-position: 100% 100%; }
}

.content-wrapper{
  width: 1255px;
  margin: 0 auto;
  position: relative;
  z-index: 0;
}

.flex{
  display:flex;
  justify-content:center;
  position: relative;
  z-index: 0;
}

.flex-2{
  display:flex;
  justify-content:center;
  height: 195px;
  position: relative;
  z-index: 0;
}

a:visited{
  color: #aa00aa;
  background-color: transparent;
  text-decoration: none;
}

aside{
  border:2px solid #ff00ff;
  background-color:#000000;
  margin:5px;
  height: 180px;
  width:40%;
  padding:5px;
  overflow: scroll;
  overflow-x: hidden;
  position: relative;
  z-index: 0;
}
aside::-webkit-scrollbar{ width: 6px; }
aside::-webkit-scrollbar-thumb{ background: #00ff00; }

main{
  border:2px solid #ff00ff;
  background-color:#000000;
  margin:5px;
  width:100%;
  padding:5px;
  position: relative;
  z-index: 0;
}

.flex .width-30{
  border:2px solid #ff00ff;
  background-color:#000000;
  margin:5px;
  width:33%;
  height: 192px;
  padding:5px;
  position: relative;
  z-index: 0;
}

.flex .width-40{
  border:2px solid #ff00ff;
  background-color:#000000;
  margin:5px;
  width:47%;
  padding:5px;
  position: relative;
  z-index: 0;
}

.flex .h3{
  font-style:italic;
}

.inner-row{
  display: flex;
  gap: 10px;
  position: relative;
  z-index: 0;
}

.inner-box{
  flex: 1;
  padding: 10px;
  position: relative;
  z-index: 0;
}

.inner-box textarea{ height: 100%; }

#floater{
  -webkit-animation: mover 1s infinite alternate;
  animation: mover 0.5s infinite alternate;
}

@-webkit-keyframes mover{
  0% { transform: translateY(0); }
  100% { transform: translateY(-5px); }
}
@keyframes mover{
  0% { transform: translateY(0); }
  100% { transform: translateY(-5px); }
}

@keyframes gelatine{
  from, to { transform: scale(1, 1); }
  25% { transform: scale(0.9, 1.1); }
  50% { transform: scale(1.1, 0.9); }
  75% { transform: scale(0.98, 1.02); }
}

.hollis iframe{ background-color: #ff00ff; }

.profile-box{
  display: flex;
  gap: 10px;
  align-items: flex-start;
  position: relative;
  z-index: 0;
}

.profile-left{ flex: 0 0 auto; }

.profile-right{
  display: flex;
  flex-direction: column;
  flex: 1;
}

.profile-name{
  margin: 0;
  font-style: italic;
}

.button-list{
  margin-top: 8px;
  display: flex;
  flex-direction: column;
  gap: 5px;
  max-height: 120px;
  overflow-y: auto;
  padding-right: 4px;
  align-items: center;
}
.button-list::-webkit-scrollbar{ width: 6px; }
.button-list::-webkit-scrollbar-thumb{ background: #ff00ff; }

.height-600{
  border:2px solid #ff00ff;
  background-color:#000000;
  margin:5px;
  width:100%;
  height: 200px;
  padding:5px;
  overflow-y: auto;
  text-align: center;
  position: relative;
  z-index: 0;
}
.height-600::-webkit-scrollbar{ width: 6px; }
.height-600::-webkit-scrollbar-thumb{ background: #00ff00; }

.height-300-width-100{
  border:2px solid #ff00ff;
  background-color:#000000;
  margin:5px;
  width:100%;
  height:326px;
  padding:5px;
  position: relative;
  z-index: 0;
}

.fishContainer{
  width: 100%;
  height: 100%;
  position: relative;
  overflow: hidden;
}

.fish{
  background-image: url('../assets/gamzee.gif');
  background-size: contain;
  background-repeat: no-repeat;
  width: 200px;
  height: 200px;
  position: absolute;
  transition: transform 0.3s ease;
}

.height-600 .stamps-about img{
  width: 99px;
  height: 55px;
}

#flood{
  position: fixed !important;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: 0 !important;
}

iframe{
  position: relative;
  z-index: 10;
}

.webrings{
  max-height: 100%;
  overflow-y: scroll;
  position: relative;
  z-index: 0;
}
.webrings::-webkit-scrollbar{ width: 6px; }
.webrings::-webkit-scrollbar-thumb{ background: #00ff00; }
.webrings li p{ margin: 0px; }

.header{
  position: relative;
  z-index: -1;
}

body *:not(.header):not(.header *){
  position: relative;
  z-index: 1;
}

#music-box{
  position: fixed;
  bottom: 20px;
  left: 20px;
  text-align: center;
  z-index: 9999;
}

#volume-slider{
  width: 80px;
  cursor: pointer;
  margin-top: 5px;
}

#music-toggle{
  display: block;
  margin: 5px auto 0;
  cursor: pointer;
}

#music-box p{
  margin: 0;
  font-family: monospace;
  color: white;
  background-color: #000000;
  font-size: 10px;
  z-index: 10000;
  position: relative;
}

.tabcontent{ display: none; }

.pixelbinder{
  width: fit-content;
  position: relative;
  padding: 10px;
  background-image: url("Graphics/dark-stained-timber-13504-in-architextures.jpg");
  margin-left: auto;
  margin-right: auto;
  border: 2px solid black;
  text-align: center;
  image-rendering: pixelated;
}

.pixelbinderbg{
  width: 181px;
  height: 100px;
  position: relative;
  margin: 10px 0 10px 0;
  text-align: left;
}

#binderbackground{ z-index:1 }

.pixelbinder button{
  background-color: #fff;
  border: none;
  color: #444951;
  text-align: center;
  display: inline-block;
  font-family: 'Garamond', serif;
  font-size: 16px;
}

.pixelbinder button:hover{
  background-color: #FFEB3B;
  cursor: pointer;
}

.binder-page{
  position:absolute;
  top:0;
  left:0;
  width:181px;
  height:100px;
  z-index:2;
  display:grid;
  grid-template-columns:1fr 1fr;
}

.slot{
  display:flex;
  justify-content:center;
  align-items:center;
}

.poster{
  width:65px;
  height:auto;
  image-rendering:pixelated;
}

.clique-box{
  border: 2px solid #ff00ff;
  background-color:#000000;
  margin:5px;
  padding: 3px;
  display: inline-block;
  width: fit-content;
  max-width: 100%;
}

.clique-box .flex {
  width: auto;
}