body {
  background-color: #000;
  color: orange;
  font-family: Verdana;
  margin: 0;
  background-image: url("bg6.gif");
  background-size: 18dvh;
  background-position: center center;
  overflow: hidden;
}

/* ----------- BOXES  ------------ */

.e44 { /* top */
  grid-column: 1 / span 5;
  grid-row: 1 / span 1;
  overflow: hidden;
  color: white;
  font-size: 2dvh;
  z-index: +2;
  display: flex;
  justify-content: center;
  align-items: center;
}

.e33 { /* right */
  grid-column: 5 / span 1;
  grid-row: 2 / span 3;
  overflow: hidden;
  color: white;
  font-size: 2dvh;
  z-index: +2;
}

.e22 { /* middle */
  grid-column: 2 / span 3;
  grid-row: 2 / span 3;
  overflow: hidden;
  color: white;
  font-size: 2dvh;
  z-index: +2;
}

.e11 { /* left */
  grid-column: 1 / span 1;
  grid-row: 2 / span 3;
  overflow: hidden;
  color: white;
  font-size: 2dvh;
  z-index: +2;
}

.e55 {
  grid-column: 1 / span 5;
  grid-row: 5 / span 1;
  overflow: hidden;
  color: white;
  font-size: 2dvh;
  z-index: +2;
}

/* ----------- BOXES BACKGROUND ------------ */

.e4 { /* top */
  grid-column: 1 / span 5;
  grid-row: 1 / span 1;
  background-color: black;
  overflow: hidden;
  border: 0.5dvh solid #0ff;
  display: flex;
  justify-content: center;
  align-items: center;
}

.e3 { /* right */
  grid-column: 5 / span 1;
  grid-row: 2 / span 3;
  background-color: black;
  color: white;
  border: 0.5dvh solid #ff0;
}

.e2 { /* middle */
  grid-column: 2 / span 3;
  grid-row: 2 / span 3;
  background-color: black;
  font-size: 2dvh;
  color: #f00;
  overflow: hidden;
  border: 0.5dvh solid #00f;
}

.e1 { /* left */
  grid-column: 1 / span 1;
  grid-row: 2 / span 3;
  background-color: black;
  overflow: hidden;
  border: 0.5dvh solid #0ff;
}


.e5 {
  grid-column: 1 / span 5;
  grid-row: 5 / span 1;
  background-color: black;
  border: 0.5dvh solid #0ff;
  font-size: 2dvh;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* ---------------- WRAPPERS ----------------- */

.wrapper1 {
  height: 91dvh;
  width: 91dvh;
  padding: 0.5dvh;
  background-color: black;
  margin: auto;
  margin-top: 1.5dvh;
  border: 2.5dvh double;
  display: grid;
  grid-template-columns: 20dvh 1fr 1fr 1fr 20dvh;
  grid-template-rows: 15dvh 1fr 1fr 1fr 5dvh;
  gap: 1dvh;
}

.wrapper2 {
  height: 100dvh;
  width: 110dvh;
  margin: auto;
  position: absolute;
  top: 0;
  margin-left: -9.5dvh;
  z-index: +1;
  background-color: ;
  box-sizing: border-box;
  display: grid;
  grid-template-columns: repeat(10, 10%);
  grid-template-rows: repeat(10, 10%);
  display: none;
}

.wrapper3 {
  height: 100dvh;
  width: 100dvw;
  color: yellow;
  font-size: 5dvh;
  z-index: -2;
  background-color: ;
  position: fixed;
  top: 0;
  left: 0;
  opacity: 0.5;
  word-break: break-all;
  line-height: 5dvh;
  display: flex;
  justify-content: center;
  align-items: center;
}


/* ---------------- TEXT ----------------- */

.meme {
  font-size: 1dvh;
  margin: 0.5dvh;
  display: inline;
}

.goat {
  font-size: 2dvh;
  margin: 0;
  display: inline;
  letter-spacing: -10%;
}

.rainbow-text-shadow {
  display: inline-block;
  font-size: 5dvh;
  color: #ef3550;
  letter-spacing: 300%;
  text-shadow: 5dvh 0 #f48fb1, 10dvh 0 #7e57c2, 20dvh 0 #2196f3, 30dvh 0 #26c6da, 40dvh 0 #43a047, 60dvh 0 #eeff41, 70dvh 0 #f9a825, 8px 0 #ff5722, -1px 0 #f48fb1, -2px 0 #7e57c2, -3px 0 #2196f3, -4px 0 #26c6da, -5px 0 #43a047, -6px 0 #eeff41, -7px 0 #f9a825, -8px 0 #ff5722;
}

.textbox1 {
  width: 100%;
  height: 6dvh;
  background-color: ;
  box-sizing: border-box;
  display: flex;
  justify-content: center;
  align-items: center;
}

.loremipsum {
  font-size: 2dvh;
  color: red;
  margin: 1dvh;
  text-align: center;
  vertical-align: bottom;
}

/* ---------------- TEXT ART ----------------- */

.mushroomman {
  font-size: 0.88dvh;
  margin: 0;
}

.areyouokay {
  font-size: 0.39dvh;
  margin-left: 0dvh;
  margin-top: 0;
}

.chillguy {
  font-size: 0.68dvh;
  color: #fff;
  margin: 0;
}

.shrek {
  font-size: 0.94dvh;
  margin-left: 0dvh;
  margin-top: 0;
}

.uno {
  font-size: 0.93dvh;
  margin-left: 0dvh;
  margin-top: -0.7dvh;
}


.squidward {
  font-size: 1.3dvh;
  margin-left: 0dvh;
  margin-top: -0.7dvh;
}

.moonstar {
  margin: 0dvh;
  line-height: 1.4dvh;
}

/* ---------------- MUSIC ----------------- */

.cover {
  width: 9dvh;
  height: 9dvh;
  background-color: black;
  z-index: +2;
  margin: 2dvh;
  border: 1dvh solid #00f;
}

.coverimage {
  width: 100%;
  height: 100%;
}

.player{
  width: 30dvh;
  height: 10dvh;
  background-color: black;
  border: 1dvh solid #f00;
  margin: auto;
}

.coveractive {
  height: 8dvh;
  width: 8dvh;
  box-sizing: border-box;
  background-color: black;
  border: 0.5dvh solid #0f0;
  margin-top: 1dvh;
  margin-left: 1dvh;
}

/* ---------------- IMAGES ----------------- */

.img1 {
  width: 10dvh;
}

.img2 {
  width: 10dvh;
}

.img3 {
  width: 10dvh;
}

.img4 {
  width: 10dvh;
}

.img5 {
  width: 10dvh;
}

.img6 {
  width: 10dvh;
}

.img7 {
  width: 10dvh;
}

.img8 {
  width: 10dvh;
}

.img9 {
  width: 10dvh;
}

.img10 {
  width: 10dvh;
}

.img11 {
  width: 10dvh;
}

.img12 {
  width: 10dvh;
}

.img13 {
  width: 10dvh;
}

.img14 {
  width: 10dvh;
}

.img15 {
  width: 10dvh;
}

.img16 {
  width: 10dvh;
}

.img17 {
  width: 10dvh;
}

.img18 {
  width: 10dvh;
}

.img19 {
  width: 10dvh;
}

.img20 {
  width: 10dvh;
}