@import url(_ext/fonts.googleapis.com/css2/index_1cc47nd.html);
@import url(_ext/fonts.googleapis.com/css2/index_1osjfby.html);

@font-face {
  font-family:"XP Tahoma";
  src: url(windows-xp-tahoma.otf) format('opentype');
  font-size:16px;
}

body {
  background-color: black;
  color: white;
  font-family: "XP Tahoma";
}

.rotate-270 {
  transform:rotate(270deg);
}

/* yeah i got no idea */ /* wait these actually work????? */
html, * {
  scrollbar-width: thin;
  scrollbar-color: #18204c transparent;
}

::-webkit-scrollbar-track {
  background: transparent;
}

.anime-header {
  font-family:"Comic Relief", system-ui;
  font-size:4rem;
  color:#4a54e0;
  text-shadow:5px 5px 0 #363c7c, 10px 10px 0 #1c1f3d;
}

.container {
  background-color:#1f274d;
  border:5px solid #1e2a64;
  padding:15px
}

a:link {
  color:#008dff
}

a:visisted {
  color:#5a00ff
}

.tutor-box {
  position:fixed;
  display:flex;
  top:100vh;
  left:0vh;
  background-color:rgba(0,0,0,0.5);
  z-index:1337;
  gap:10px;
  flex-direction:column;
  padding:10px;
  align-items:center;
  border:15px solid;
  border-image:url(border.png) 30;
  transform:translate(10px, calc(-100% - 10px));
}



.tutor-text {
  display:flex;
  justify-content:space-between;
}

.tutor-arrow-container {
  display:grid;
  grid-template-columns:1fr 1fr 1fr;
  grid-template-rows:auto auto;
  column-gap:5px;
  row-gap:5px; /* is this a thing? idk lol */
  width:90px;
}

.arrow-box {
  height:25px;
  width:25px;
  text-align:center;
  color:black;
  border-radius:3px;
  user-select:none;
  /* background-color in main.js */
}

.line {
   border-top:1px #fff;
}

.desc-box {
  border-left:5px solid #141829;
  padding:0.7rem;
  font-size:1.05rem;
  height:1rem;
  width:auto;
}
/* i pasted this from github im not removing the awkward dents */
.cube {
        width:400px;
        height:200px;
        position:relative;
        transform-style:preserve-3d;
        transform:translateZ(180px);
      }

      .face {
        position:absolute;
        width:800px;
        height:400px;
        border:2px solid white;
        display:flex;
        align-items:center;
        justify-content:center;
        transform:scaleX(-1);
      }
      .top, .bottom {
        height:800px;
      }
      /* i got ai to type this i am too lazy */
      .front  { transform: translateZ(400px) scaleX(-1);  }
      .back   { transform: translateZ(-400px) rotateY(180deg) scaleX(-1); }
      .right  { transform: rotateY(90deg) translateZ(400px) scaleX(-1); }
      .left   { transform: rotateY(-90deg) translateZ(400px) scaleX(-1); }
      .top    { transform: rotateX(90deg) translateZ(200px) scaleX(-1); }
      .bottom { transform: rotateX(-90deg) translateZ(200px) scaleX(-1); } 

      .inner-face {
        position:relative;
        width:100%;
        height:100%;
      }

      .face-item {
        position:relative;
      }