@font-face {
    font-family: "PixelOp";
    src: url("/PIXELOPERATORHB.TTF") format("truetype");
}

@media (max-width: 600px) {
 #pagedoll {
 display: none;
    }
}

/* hi there! please credit me @ goldenfreddy.neocities.org if you copy any of the coding here! thanks :) */

:root {
  width: 100vw;
  height: 100vh;
  background-image: url(/assets/simple/simplePBY.png);
  font-family: "PixelOp", sans-serif;
  font-size: 11pt;
  color: #1c001e;
  text-align: center;
  box-shadow: inset 0px 0px 30px 20px rgba(255, 255, 255, 0.75);
}

.maincontain {
  width: 88vw;
  height: 95vh;
  max-width: 1500px;
  max-height: 1000px;
  margin: auto;
}

.text01{
    overflow-x:hidden;
    overflow-y:scroll;
    height:8em;
    border: 1px dashed #1c001e;
    padding: 5px 10px;
    z-index: 10;
    position: relative;
  }
  
.mainflex {
  display: flex;
  justify-content: center; 
  align-items: center; 
  flex-direction: row; 
  flex-wrap: nowrap;
  height: 100%;
  width: auto;
  gap: 12px;
  word-break: break-word;
}

.flexone {
  display: block;
  height: 85%;
  width: 15vw;
  min-width: 100px;
  left: 0;
  color: #1c001e;
  background-color: #db60e4;
  overflow: auto;
  word-break: break-word;
  border: dashed #1c001e 2px;
  border-radius: 10px;
  padding: 10px;
}

.flextwo {
  display: flex;
  height: 95%;
  width: 50vw;
  min-width: 200px;
  word-break: break-word;
/* ══════ flex atts ══════ */
  justify-content: center;
  align-items: center;
  flex-direction: column;
  flex-wrap: nowrap;
  padding: 10px;
  gap: 5px;
}

.flexthree {
  display: block;
  height: 85%;
  width: 15vw;
  min-width: 100px;
  right: 0;
  color: #1c001e;
  background-color: #db60e4;
  overflow: hidden;
  word-break: break-word;
  border: dashed #1c001e 2px;
  border-radius: 10px;
  padding: 10px;
}

/* ══════════════════════════════════════════════════════ middle box divs ══════════════════════════════════════════════════════ */

.header {
  display: block;
  top: 0;
  height: 15%;
  min-height: 100px;
  width: 100%;
  background-color: #db60e4;
  overflow: hidden;
  word-break: break-word;
  border: solid black 2px;
  border: dashed #1c001e 2px;
  border-radius: 10px;
  padding: 10px;
}

.mainer {
  display: block;
  height: 64.5%;
  min-height: 200px;
  width: 100%;
  background-color: #db60e4;
  overflow: auto;
  word-break: break-word;
  border: solid black 2px;
  border: dashed #1c001e 2px;
  border-radius: 10px;
  padding: 10px;
}

.footer {
  display: block;
  bottom: 0;
  height: 15%;
  min-height: 100px;
  width: 100%;
  background-color: #db60e4;
  overflow: hidden;
  word-break: break-word;
  border: dashed #1c001e 2px;
  border-radius: 10px;
  padding: 10px;
}

/*  text styling  */

::selection {
  background: RGBA(175, 55, 225, 0.3);
}

u {
  text-decoration: #ffba96 dashed underline;
}

a:link {
  color: #e2f123;
  font-weight: bold;
  text-decoration: #ffba96 dashed underline;
}

a:visited {
  color: #e2f123;
  font-weight: bold;
  text-decoration: #ffba96 dashed underline;
}

a:hover {
  color: #000000;
  font-weight: bold;
  text-decoration: #badfff dashed underline;
}

button {
  color: white;
  background-color: #a923f1;
  border: dashed #ffffff 2px;
  border-radius: 5px;
}

button:hover {
  color: white;
  background-color: #23e3f1;
  border: dashed #ffffff 2px;
  border-radius: 5px;
}

button:active {
  color: #75b1ff;
  background-color: #cfe8ff;
  border: dashed #a3d4ff 2px;
  border-radius: 5px;
}

ul {
  margin: auto;
  text-align: left;
  width: fit-content;
  list-style: square inside url("https://goldentemps.neocities.org/assets/simple/bulletPBY.png");
}

h1 {
 color: #1c001e; 
}

h2 {
 color:#1c001e; 
}



/*this is stuff for the tabs*/

/* Style the tab */
.tab {
  overflow: hidden;

}

/* Style the buttons inside the tab */
.tab button {
  color: white;
  background-color: #a923f1;
  float: none;
  border: dashed #ffffff 2px;
  outline: none;
  cursor: pointer;
  padding: 10px 12px;
  transition: 0.3s;
  font-size: 17px;
}

/* Change background color of buttons on hover */
.tab button:hover {
  background-color: #23e3f1;
}

/* Create an active/current tablink class */
.tab button.active {
  background-color: #ff23f1;
}