body {
  background-color: #282828;
}

a {
  -webkit-text-stroke: 0.125rem #282828;
  text-decoration: none;
}

p {
  color: #FFFFFF;
  text-align: center;
  font-size: 3rem;
  font-family: "Verdana-Bold"  ,sans-serif;
  overflow-wrap: break-word;
}

img {
  max-height:99vh;
  max-width: 99vw;
}

.overlay {
  position:fixed;
  z-index: 2;
  vertical-align:middle;
	text-align:center;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%); /* thanks to https://css-tricks.com/quick-css-trick-how-to-center-an-object-exactly-in-the-center/ */
}

.content {
  position:fixed;
  z-index: 3;
}

#top-left {
  position: fixed;
  background-color: rgba(39,209,130,1);
  height: 45vh;
  width: 45vw;
  top: 0;
  left: 0;
}

#top-right {
  position: fixed;
  background-color: rgba(230, 60, 55, 1);
  height: 45vh;
  width: 45vw;
  top: 0;
  right: 0;
}


#bottom-right {
  position: fixed;
  background-color: rgba(71,193,250,1);
  height: 45vh;
  width: 45vw;
  bottom: 0;
  right: 0;
}

#bottom-left {
  position: fixed;
  background-color: rgba(241,241,3,1);
  height: 45vh;
  width: 45vw;
  bottom: 0;
  left: 0;
}


.Q2 {
  position: fixed;
  height: 49vh;
  width: 49vw;
  top: 0;
  left: 0;
}

.Q1 {
  position: fixed;
  height: 49vh;
  width: 49vw;
  top: 0;
  right: 0;
}

.Q4 {
  position: fixed;
  height: 49vh;
  width: 49vw;
  bottom: 0;
  right: 0;
}

.Q3 {
  position: fixed;
  height: 49vh;
  width: 49vw;
  bottom: 0;
  left: 0;
}

.Q2 p {
  position: fixed;
  top: 0rem;
  left:0rem;
  margin-top: 4rem;
  margin-left: 4rem;
}

.Q1 p {
  position: fixed;
  top:0;
  right:0;
  margin-top: 4rem;
  margin-right:4rem;
}

.Q3 p {
  position: fixed;
  bottom:0;
  left:0;
  margin-bottom: 4rem;
  margin-left: 4rem;
}

.Q4 p {
  position: fixed;
  bottom: 0;
  right:0;
  margin-bottom: 4rem;
  margin-right: 4rem;
}

@media only screen
    and (device-width : 375px)
    and (device-height : 812px)
    and (-webkit-device-pixel-ratio : 3)  {
   p {
     font-size:4.5rem;
   }

   a {
     -webkit-text-stroke: 0.15rem #000000;
   }

   .Q2 p {
     position: fixed;
     top: 0rem;
     left:0rem;
     margin-top: 12rem;
     margin-left: 3rem;
   }

   .Q1 p {
     position: fixed;
     top:0;
     right:0;
     margin-top: 10rem;
     margin-right:3rem;
   }

   .Q3 p {
     position: fixed;
     bottom:0;
     left:0;
     margin-bottom: 12rem;
     margin-left: 3rem;
   }

   .Q4 p {
     position: fixed;
     bottom:0;
     right:0;
     margin-bottom: 12rem;
     margin-right: 3rem;
   }

}