body {
  margin: 0;
  padding: 0;
  height: 100%;
  background-color: orchid; 
  background-image: url("gifs/picmix.com_2318728.gif") ;
  background-repeat: repeat;
  color: black;
  font-family: Verdana;
  overflow-x: hidden

}

.hotmagic {
  font-family: "Mystery Quest", Verdana;
  text-shadow: 2px 2px 5px rgba(0,0,0,0.5);
  color: black;
  background-color: darkmagenta;
  padding-top: 0;
  margin-top: 0;
  padding-bottom: 0;
  text-align: center;
  

}

.bottom-bg {
  height: 150px;
  background-color: black;
  background-size: cover;
  background-position: center;
  justify-content: center;
  align-items: center;
  text-align: center;
  display: flex;
  bottom: 0;
  margin-top: 50px;
  background-image: url("gifs/picmix.com_785812.gif");
  background-repeat: repeat;
}

.top-bg {
  height: 150px;
  background-color: black;
  background-size: cover;
  background-position: center;
  justify-content: center;
  align-items: center;
  text-align: center;
  background-image:url("gifs/picmix.com_785812.gif");
  display: flex;
  background-repeat: repeat;
}


.tresc {
  margin: 0 auto;    
  padding: 20px;
  background: teal;
  width: 70%;
  top: 50px;
  margin-top: 20px;
  margin-right: 15%;
  
}


.maincont {
  display: flex;
  
}

.container {
  margin: auto;
  width: 30%;
  background: white;
  padding: 20px;
  border: 2px seagreen;
  top: 50px;
  margin-top: 20px;
  margin-right: 3%;
  margin-left: 4%
  

}

.container2 {
  margin: auto;
  width: 30%;
  background: white;
  padding: 20px;
  top: 50px;
  margin-top: 20px;
  margin-right: 2%;
  margin-left: 2%;
  border-style: solid;
  border-width: 20px 20px 20px 20px;
  border-image: url("images/tumblr_46571f240848ca51b5a13f931985e4ad_8150c52f_2048.png") 30 30 30 30 round;
  background-clip: padding-box;
  

}

.centered-text {
text-align: center;
}

.centered-magic {
  text-align: center;
  font-family: "Mystery Quest", Verdana;
  text-shadow: 2px 2px 5px rgba(0,0,0,0.5);
}

.container1 {
  width: 55%;
  margin: auto;
  background: #B3FFD2;
  padding: 20px;
  border: 2px #B3FFD2;
  text-align: center;
}
  

.mystery-quest-regular {
  font-family: "Mystery Quest", system-ui;
  font-weight: 400;
  font-style: normal;
}


.magic {
  font-family: "Mystery Quest", Verdana;
  text-shadow: 2px 2px 5px rgba(0,0,0,0.5);

}

.whitetext {
  color: white
  
}

.boxshadow {
  box-shadow: 2px 2px 5px rgba(0,0,0,0.5);

}


.sidebar {
  text-align: left;
  align-self: flex-start;
  width: 8%;
  padding: 20px;
  top: 50px;
  margin-top: 20px;
  background: darkmagenta;
  color: black;
  background-clip: padding-box;
  border-style: solid;
  border-width: 20px 20px 20px 0px;
  border-image: url("images/tumblr_46571f240848ca51b5a13f931985e4ad_8150c52f_2048.png") 30 30 30 30 round;
  
}

.right {
  align-self: flex-start;
  margin: 0 auto;   
  padding: 20px;
  background: white;
  width: 12%;
  top: 50px;
  margin-top: 20px;
  margin-left: 0;
  margin-right: 0;
  background-clip: padding-box;

}

.divider {
  text-align: left;
  padding: 20px;
  margin-top: 20px;
  top: 100px;
  margin-left:0;

}
  


.insideblank {
  text-align: left;
  width: 10%;
  
}


.center {
  background-position: center;
  justify-content: center;
  align-items: center;
  text-align: center;

}


.inside {
  background: forestgreen;
  color: white;
  text-align: left
  

}

.ugh {
 text-align: center; 
 width: 40%;
 margin-right: 2%
}

.rotate {
 rotate: 90deg; 
}