/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
   HTML content. To learn how to do something, just try searching Google for questions like
   "how to change link color." */

body {
  background:
  radial-gradient(ellipse at top left, #fff5f5, transparent 70%),
  radial-gradient(ellipse at top right, #e8d7ff, transparent 70%),
  radial-gradient(ellipse at bottom left, #c1ffe0, transparent 70%),
  radial-gradient(ellipse at bottom right, #9beaff, transparent 70%);
  min-height: 100vh;
}
header{
  max-width: 300px;
  margin: 0 auto;
  text-align:center;
  padding: 5px;
}
h1 {
  text-align:center;
  color: blue;
  font-family: Verdana;
}

p{
  text-align:center;
  color: #4a3f00;
  font-family: Georgia;
  padding: 20px;
  margin: 0 auto;
}

h2{
  text-align:left;
  background-size: 100% 100%;
  background-color: white;
  font-family: Georgia;
  color: #4a3f00;
  font-size: 15px;
  padding: 30px 30px;
  border-width: 2px;
  border-color: gold;
  border: solid;
  border-radius: 30px;
  z-index:1;
  position: absolute;  
}

.backgroundContainer{
  background-image: url("dreamlandscapescene.png");
  background-repeat: no-repeat;
  background-position: center;
  background-size:cover;
  width:  100%;
  height: 100vh;
  position: relative;
  display: flex;
  justify-content: center;
}

.beginButton {
  background-image: url("Icons/buttonBox1.png");
  background-size: 100% 100%;
  background-repeat: no-repeat;
  background-color: white;
  font-family: Georgia;
  color: #4a3f00;
  font-size: 20px;
  text-align: center;
  padding: 15px 30px; /*this is the padding between text and the outside of the button*/
  border-radius: 15px;
  cursor: pointer;
  display: inline-block;
  text-decoration: none;
  z-index: 2;
  align-items: center;
  justify-content:center;
  top: 55%;
  position: absolute;
  
  /* cursor: url(''), auto; */
}

.beginButton:hover {
  background-color: blue;
  color: white;
}
  
.circleContainer {
  display: flex;
  height:300px;
  width:300px;
  max-height: 100vh;
  align-items: center;
  justify-content:center;
  padding: 5px 5px;
  position: relative;
  /*border: dashed 1px;
  /*border-color:black;
  /*border-radius: 50%;*/ /*turn borders on to visual circle*/
  margin: 0 auto;
  
 
}

.questionMark {
  text-align: center; /*note:i think this is what centered my image for some reason*/
  display: flex; 
  position: absolute;
  top: 10%;
  z-index: 2;
  animation: rotate 2s infinite linear;
}



.doors {
  display: block;
  position: absolute;
  margin: auto;
  z-index: 1;
  top:40%;
  left: 40%;
  animation: doorMove 10s infinite linear;
}

.doors2{
  display: block;
  position: absolute;
  margin: auto;
  z-index: 1;
  top:40%;
  left: 40%;
  animation: door2Move 10s infinite linear;
}

.doors3{
  display:block;
  position: absolute;
  margin: auto;
  z-index: 1;
  top:40%;
  left: 40%;
  animation: door3Move 10s infinite linear;
}

@keyframes doorMove {
  0% {
      transform:rotate(0deg)
        translateY(150px) rotate(0deg);
  }
  100% {
      transform: rotate(360deg)
        translateY(150px) rotate(-360deg);
  }
}

@keyframes door2Move {
   0% {
      transform:rotate(40deg)
        translateY(150px) rotate(-40deg);
  }
  100% {
      transform: rotate(400deg)
        translateY(150px) rotate(-400deg);
  }
}

@keyframes door3Move {
   0% {
      transform:rotate(80deg)
        translateY(150px) rotate(-80deg);
  }
  100% {
      transform: rotate(440deg)
        translateY(150px) rotate(-440deg);
  }
}

@keyframes rotate {
   0% {transform:rotate(5deg)}
   
  50% {transform:rotate(-10deg)}
  
  100%{transform: rotate(5deg)}
        
  
}