body {
    background: url("/brickcrunch3.png");
    animation: backgroundmode 40s linear infinite;
    color: black;
    text-align: center;
      cursor: url("/Arrowcrunch.png") 0 3, auto ;
}

a {
  cursor: url("/arrow2crunch.png") 20 5, auto;
  color: #8f9cd9;
}

.whiteText {
  color: white;
  font-size: 20px;
  text-shadow: 1px 1px  black;
}

.whiteTextItalic {
  color: white;
  font-size: 20px;
  text-shadow: 1px 1px  black;
  font-style: italic;
}

.bottomBar {
}

.epicTextItalic {
  color: black;
  font-size: 20px;
  text-shadow: 2px 2px  #f2b6d6, -2px -2px  #b6f2f1;
  font-style: italic;
}

.whiteTextTitle {
  color: white;
  font-size: 26px;
  text-shadow: 1px 1px  black;
}

.whiteTextLeft{
  color: white;
  font-size: 20px;
  text-shadow: 1px 1px  black;
  text-align: justify;
}

.epicTextTitle {
  color: black;
  font-size: 26px;
  text-shadow: 2px 2px  #f2b6d6, -2px -2px  #b6f2f1;
}

.epicText {
  color: black;
  font-size: 20px;
  text-shadow: 2px 2px  #f2b6d6, -2px -2px  #b6f2f1;
}

.titleText {
  font-size: 32px;
  color: black;
  text-shadow: 2px 0 0 #fff, -2px 0 0 #fff, 0 2px 0 #fff, 0 -2px 0 #fff, 1px 1px #fff, -1px -1px 0 #fff, 1px -1px 0 #fff, -1px 1px 0 #fff;
}

.mainText {
 font-size: 32px; 
 text-align: center;
 color: black;
 text-shadow: 2px 0 0 #fff, -2px 0 0 #fff, 0 2px 0 #fff, 0 -2px 0 #fff, 1px 1px #fff, -1px -1px 0 #fff, 1px -1px 0 #fff, -1px 1px 0 #fff;
}
 
.fatText {
  font-size: 32px; 
 text-align: center;
 color: black;
 font-weight: bold;
 text-shadow: 2px 0 0 #fff, -2px 0 0 #fff, 0 2px 0 #fff, 0 -2px 0 #fff, 1px 1px #fff, -1px -1px 0 #fff, 1px -1px 0 #fff, -1px 1px 0 #fff;
}

.smallText {
 font-size: 19px; 
 text-align: center;
 color: black;
 text-shadow: 2px 0 0 #fff, -2px 0 0 #fff, 0 2px 0 #fff, 0 -2px 0 #fff, 1px 1px #fff, -1px -1px 0 #fff, 1px -1px 0 #fff, -1px 1px 0 #fff;
}

.homeDiv {
 display: flex;
 justify-content: center;
}

.bigDiv {
  margin-top: 10px;
  margin-bottom: 20px;
  background: url("/marble2.png");
  padding: 20px 10px 20px 10px;
  border: 1px solid rgb(232,232,232);
  display: inline-block;
}

.divItem {
 background: url("/wood6crunch.png");
 border: double 3px white;
 width: 600px;
 padding: 0% 1% 0% 1%;
 margin: 20px;
}

.divBlog {
 background: url("/wood6crunch.png");
 border: double 3px white;
 width: 800px;
 padding: 0% 1% 0% 1%;
 margin: 20px;
}

.pauseDiv {
 display: flex;
 justify-content: center;
margin-top: -50px;
margin-bottom: -15px;
background: url("/woodcrunch.png");

 border: 3px double white;
 width: 250px;
 padding-left: 10px;
 padding-right: 10px;
 height: 40px;
}

.pauseDivIndex {
 display: flex;
 justify-content: center;
margin-top: 0px;
margin-bottom: 0px;

 width: 200px;
 padding-left: 10px;
 padding-right: 10px;
 height: 40px;
}

.divWelcome2 {
 background: url("/wood6crunch.png");
 border: double 3px white;
 width: 400px;
 height: 480px;
 padding: 0% 1% 0% 1%;
 margin: 20px;
display: inline-block;
}

.divChangelog {
 height: 225px;
 width: 400px;
 background: url("/whitetilescrunch.png");
 background-size: 85%;
 border: double 3px white;
 display: inline-block;
 margin-left: 0px;
}

.divHomeBlog {
 height: 225px;
 width: 400px;
 background: url("/wood6crunchwhite.png");
 border: double 3px white;
 display: inline-block;
}

.divHomelist {
   height: 480px;
   width: 400px;
 display: inline-block;
 margin: 20px;
}

.divChangelogItem {
 border: dashed 2px #1d1e1f;
 margin-left: 50px;
 margin-right: 50px;
 margin-top: 0px;
 margin-bottom:0px;
}

.divItemArt {
 background: url("/wood6crunch.png");
 border: double 3px white;
 width: 600px;
 padding: 0% 1% 0% 1%;
}

.imageArt {
 height: 100px; 
}

.artDiv {
  display: flex;
  flex-direction: row;
  align-items: top;
  justify-content: center; 
}

.button:hover {
    cursor: url("/arrow2crunch.png") 20 5, auto;
}

.map {
 border: double 3px black; 
}

#doorPainting {
  height: 336px;
  width: 204px;
  display: inline-block;
  background: url("doors/Painting1.png") no-repeat;
  background-size: 204px 366px;
}
#doorPainting:hover {
  background: url("doors/Painting2.png") no-repeat;
  background-size: 204px 366px;
}

#doorArchitecture {
  height: 336px;
  width: 204px;
  display: inline-block;
  background: url("doors/Architecture1.png") no-repeat;
  background-size: 204px 366px;
}
#doorArchitecture:hover {
  background: url("doors/Architecture2.png") no-repeat;
  background-size: 204px 366px;
  }

#doorPoetry {
  height: 336px;
  width: 204px;
  display: inline-block;
  background: url("doors/Poetry1.png") no-repeat;  
  background-size: 204px 366px;
}
#doorPoetry:hover {
  background: url("doors/Poetry2.png") no-repeat;    
  background-size: 204px 366px;
}

#doorMusic {
  height: 336px;
  width: 204px;
  display: inline-block;
  background: url("doors/Music1.png") no-repeat;    
  background-size: 204px 366px;
}
#doorMusic:hover {
  background: url("doors/Music2.png") no-repeat;    
  background-size: 204px 366px;
}

#doorGames {
  height: 336px;
  width: 204px;
  display: inline-block;
  background: url("doors/Games1.png") no-repeat;    
  background-size: 204px 366px;
}

#doorGames:hover {
  background: url("doors/Games2.png") no-repeat;   
  background-size: 204px 366px;
}

.wideningDiv {
  width: 1100px;
  height: 0px;
}


#linkID:hover {
  opacity: 0.6;
}

#enterID {
 margin-left: 25px; 
}

.divContainer {
  margin-top: 200px;
  margin-bottom: 200px;
  height: 230px;
  width: 350px;
  background: url("/woodcrunch.png");
  border-color: white;
  border-style: outset;
  border-width: 2px;
  
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}

.divWelcome {
  margin-bottom: 20px;
  background: url("/woodcrunch.png");
  padding: 1% 0 1% 0.5%;
  border: 3px double rgb(232,232,232);
  display: inline-block;
    
  height: 
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}

.div3:hover {
  background: url("/wood6crunch.png");
  opacity: 0.7;
}

#selectedID {
 background: url("/wood6crunch.png");
 border: double 3px white;
}

.divTopbar {
  margin-bottom: 20px;
  background: url("/woodcrunch.png");
  padding: 0.5% 0.5%;
  border: 3px double rgb(232,232,232);
  display: block;
  width: 90%;
  height: 90px;
  display: flex;
  align-items: center;
  justify-content: space-evenly;
  flex-direction: row;
}

.faqDiv {
 border: 1px solid white;
 background: url("/wood6crunchwhite.png");
 width: 450px;
}

.faqDiv:hover {
 opacity: 0.6;
}

.hoverImage:hover {
 opacity: 0.6; 
}

.borderDivFloat {
 border: 1px solid white;
 display: flex;
 flex-direction: row;
 justify-content: space-evenly;
 align-items: center;
 margin-bottom: 20px;
 background: url("/wood6crunchwhite.png");
}

.borderDiv {
 border: 1px solid white;
 margin-bottom: 20px;
 background: url("/wood6crunchwhite.png");
}

.borderDivWhite {
 border: 1px solid white;
 display: flex;
 flex-direction: row;
 justify-content: space-evenly;
 align-items: center;
 width: 300px;
 margin-bottom: 20px;
 background: url("/whitetilescrunch.png");
 float: left;
}

.sidebarGif {
 height: 60px;
 width: auto;
}

.sidebarGif2 {
 height: 70px;
 width: auto;
}

#planID {
 border-color: white;
 border-style: solid;
 border-width: 4px;
 margin: 20px
}

#hardhat {
 font-size: 20px;
 font-style: bold;
 text-shadow: 2px 2px white;
}

#itmeID {
 height: 500px;
 width: auto;
}

#idGIF {
 height: 250px;
 width: auto;
}

#border {
    border: 1px double white;
}

.whiteTextRainbow {
  color: white;
  font-size: 20px;
  animation: colourmode 3s linear infinite;
}

.whiteTextRainbowTitle {
  color: white;
  font-size: 26px;
  animation: colourmode 3s linear infinite;
}

@keyframes backgroundmode {
 0% {
  background-position: 0% 0%;
 }
 50% {
  background-position: 100% 0%; 
 }
  0% {
  background-position: 0% 0%;
 }
}

@keyframes colourborder {
 0% {
  border: 3px solid red; 
}
20%{
  border: 3px solid orange
}
40% {
  border: 3px solid yellow
}
60% {
  border: 3px solid green
}
80% {
  border: 3px solid blue
}
80% {
  border: 3px solid purple
}
 100% {
  border: 3px solid red
}
}


@keyframes colourmode {
 0% {
  text-shadow: 1px 1px red; 
 }
 14.2% {
  text-shadow: 1px 1px orange;
 }
 28.57% {
  text-shadow: 1px 1px yellow; 
 }
 42.85% {
  text-shadow: 1px 1px green;
 }
 57.14% {
   text-shadow: 1px 1px blue;
 }
 71.42% {
   text-shadow: 1px 1px indigo;
 }
 85.2%{
   text-shadow: 1px 1px violet;
 }
  100% {
   text-shadow: 1px 1px red;
 }
}