@font-face {
  font-family: "Minecraft";
  /* set name */
  src: url(fonts/minecraft_font.woff);
  /* url of the font */
  font-weight: normal;
  font-style: normal;
}

body {
  color: white;
  font-family: "Minecraft", Arial;
  background-image: url("img/background.png");
  background-repeat: no-repeat;
  background-size: cover;
  background-attachment: fixed;
  min-height: 100%;
  margin: 0;
}

.grey {
  color: gray;
  /*Nur um sicher zu gehen, dass ich eine andere Textfarbe mindestens 1 mal verwendet habe, ich habe das hier direkt vor dem absenden hinzugefügt.*/
}

.center {
  text-align: center;
}

img.center {
  display: block;
  margin: auto;
  width: 85%;
}

.center_s {
  display: block;
  margin: auto;
  background: url(img/title.png);
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
  background-color: transparent;
  border: 0px;
  height: 5.5vw;
  width: 55vw;
  margin-top: 3px;
}

.spt {
  /* forgot why I called it spt :-:, something with header, sptt is main page header*/
  top: 0px;
  margin-top: -4px;
  height: 5vw;
  width: 100vw;
  border-bottom: 3px solid #ffffff;
  padding-bottom: 12px;
  margin-left: 3vw;
  position: fixed;
  z-index: 100;
  /*As high as possible cuz idk how many z levels I need*/
  background-image: url(img/headerfix.png);
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
}

.sptt {
  top: 25px;
  height: 15%;
  width: 98%;
  border-bottom: 3px solid #ddd;
  padding-bottom: 16px;
  margin-left: 1vw;
}

.sb {
  /*sidebar*/
  top: 0px;
  left: 0px;
  height: 100%;
  width: 12.5vh;
  background: #201e1e;
  border-right: 5px solid black;
  position: fixed;
  flex-wrap: wrap;
  display: flex;
  justify-content: space-between(15%);
  justify-content: center;
  z-index: 200;
}

.text {
  margin-top: 10%;
  margin-left: min(12vw, 7vw);
  width: 91vw;
  position: relative;
  z-index: 0;
}

.btnb:hover {
  /*button brightness*/
  filter: brightness(0.85);
  scale: 1.08;
}

footer {
  background-color: rgba(41, 2, 43, 0.414);
  height: 80px;
  top: 20px;
  bottom: 0px;
  padding-left: 82.5%;
}

.mpb {
  /* Main Page Buttons */
  position: relative;
  margin-top: 8.3%;
  justify-content: center;
  display: flex;
  gap: 5vw;
  align-items: center;
  height: 355px;
}

.bc {
  /*Cointainer (used for forms and Bridges, thats why bc since its mainly a bridge container)*/
  border: 5px solid rgb(99, 1, 99);
  border-radius: 12px;
  border-spacing: 12px;
  width: 90.5vw;
  background-color: rgba(16, 15, 15, 0.67);
  margin-top: 15px;
  margin-bottom: 15px;
  min-height: 60vh;
}

.bct {
  /*Bridge Container Text*/
  margin-left: 1.5vw;
  min-height: 350px;
}

.bci {
  /*Bridge Container Image*/
  margin-top: -21px;
  height: 35vw;
  max-height: 340px;
  float: right;
  border: solid black 4px;
  margin-bottom: 1px;
}

.bcdi {
  /*Bridge Container Difficulity and Inventor*/
  border-top: 3px solid white;
  width: 91.5vw;
  max-width: 89vw;
  margin-left: 1vw;
}

.ls {
  /*Adjusts location of the tierlist tables*/
  position: relative;
  margin: 1vw;
}

table {
  border: 5px solid rgb(99, 1, 99);
  border-radius: 12px;
  border-spacing: 12px;
  width: 90vw;
}

th,
td {
  border: 3px solid black;
}

.bb {
  /*Bottom Border*/
  border-bottom: 3px solid white;
  margin-left: 25%;
  width: 50%;
}

.i {
  /*For Inputs */
  width: 80vw;
  height: 56px;
  background-color: rgba(99, 1, 99, 0.185);
  color: white;
  border: 3px solid #000000;
  border-radius: 10px;
  margin-bottom: 10px;
}

label {
  margin-top: 15px;
  font-size: 25px;
}

input {
  font-family: "Minecraft";
  margin-top: 15px;
  font-size: 25px;
  text-align: center;
}

.tib {
  width: 85vw;
  max-width: 1250px;
  height: 56px;
  background-color: rgba(99, 1, 99, 0.185);
  color: white;
  border: 3px solid #000000;
  border-radius: 10px;
}

.imgi {
  background-color: rgba(99, 1, 99, 0.185);
  color: white;
  border: 3px solid #000000;
  border-radius: 10px;
  text-align: center;
}

.tsize {
  font-size: 25px;
}

.minh {
  min-height: 700px;
}

.left {
  text-align: left;
  margin-left: 2vw;
}

input[type="radio"] {
  width: 25px;
  height: 25px;
}

input[type="range"] {
  width: 80%;
}

input[type="file"] {
  width: 60vw;
}

iframe {
  border-top: 3px solid white;
}

.simg {
  /*small img*/
  height: 12vw;
}

.bh1 {
  /*Bigger h1*/
  font-size: 7vw;
}

.hofi {
  /*Hall Of Fame Image*/
  margin-top: -21px;
  float: right;
  min-height: 60vh;
  max-height: 70vh;
}

.ac {
  /*Align Center*/
  text-align: center;
}

/*Button Images*/

.tub {
  /*Turns Button (had to change it cuz tb interfeared with tierlist button)*/
  height: 50vh;
  width: 67.5vw;
  background: url(img/turns.png);
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
  background-color: transparent;
  border: 0px;
  margin-bottom: 55px;
}

.pb {
  /*Pattern Button*/
  height: 50vh;
  width: 67.5vw;
  background: url(img/patterns.png);
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
  background-color: transparent;
  border: 0px;
  margin-bottom: 55px;
}

.shb {
  /*Shapes Button (had to change it cuz sb was already for sidebar*/
  height: 50vh;
  width: 67.5vw;
  background: url(img/shapes.png);
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
  background-color: transparent;
  border: 0px;
  margin-bottom: 55px;
}

.subb {
  /*Submit Button (had to change that too cuz of sidebar)*/
  height: 50vh;
  width: 67.5vw;
  background: url(img/submit.png);
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
  background-color: transparent;
  border: 0px;
  margin-bottom: 55px;
}

.tlb {
  /* tierlist image */
  height: 10vh;
  width: 10vh;
  background: url(img/tierlist.png);
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
  background-color: transparent;
  border: 0px;
  margin-top: 55px;
}

.bpb {
  /* bridgiopedia image */
  height: 10vh;
  width: 10vh;
  background: url(img/bridgopedia.png);
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
  background-color: transparent;
  border: 0px;
}

.tlbb {
  /* tierlist image BIG */
  height: 25vw;
  width: 15vw;
  background: url(img/tierlist.png);
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
  background-color: transparent;
  border: 0px;
}

.bpbb {
  /* bridgiopedia image BIG*/
  height: 30vw;
  width: 25vw;
  background: url(img/bridgopediaicon.png);
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
  background-color: transparent;
  border: 0px;
}

.tbb {
  /*Tutorial Button Big*/
  height: 25vw;
  width: 15vw;
  background: url(img/tutorialicon.png);
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
  background-color: transparent;
  border: 0px;
}

.hofbb {
  /*Hall of Fame Button Big*/
  height: 15vw;
  width: 12vw;
  background: url(img/halloffameicon.png);
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
  background-color: transparent;
  border: 0px;
}

.tahbb {
  /*Tips and Help Button Big*/
  height: 15vw;
  width: 12vw;
  background: url(img/tipsandhelpicon.png);
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
  background-color: transparent;
  border: 0px;
}

.tb {
  /*Tutorial Button*/
  height: 10vh;
  width: 10vh;
  background: url(img/tutorialicon.png);
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
  background-color: transparent;
  border: 0px;
}

.hofb {
  /*Hall of Fame Button*/
  height: 10vh;
  width: 10vh;
  background: url(img/halloffameicon.png);
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
  background-color: transparent;
  border: 0px;
}

.tahb {
  /*Tips and Help Button*/
  height: 10vh;
  width: 10vh;
  background: url(img/tipsandhelpicon.png);
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
  background-color: transparent;
  border: 0px;
}

.stb {
  /*Straight Button*/
  height: 50vh;
  width: 67.5vw;
  background: url(img/straight.png);
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
  background-color: transparent;
  border: 0px;
  margin-bottom: 55px;
}

.db {
  /*Diagonal Button*/
  height: 50vh;
  width: 67.5vw;
  background: url(img/diagonal.png);
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
  background-color: transparent;
  border: 0px;
  margin-bottom: 55px;
}

.vb {
  /*Vertical Button*/
  height: 50vh;  
  width: 67.5vw;
  background: url(img/vertical.png);
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
  background-color: transparent;
  border: 0px;
  margin-bottom: 55px;
}

.smb {
  /*Sneakmechanic Button*/
  height: 50vh;
  width: 67.5vw;
  background: url(img/sneakmechanic.png);
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
  background-color: transparent;
  border: 0px;
  margin-bottom: 55px;
}

.mb {
  /*Map Button*/
  height: 80px;
  width: 80px;
  background: url(img/earth.png);
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
  background-color: transparent;
  margin-top: 7.5vw;
  border: 0px;
}

summary {
  font-size: 35px;
}