/*This is for the Home page */

.body {
  background-image: linear-gradient(to right, lightblue, white);
}
.homeimg, .subimg {
  height: 100px;
  width: 100px;
  display: block;
  margin: 0;
  border: 2px solid blue;
  border-radius: 30px;
  margin-left: 180px;
  animation: expand 1s 1s ease-in-out 1 both;
}
.subimg {
  animation: none;
  margin: 0;
  margin-left: 130px;
  height: 200px;
  width: 200px;
  /*animation: exsmall .5s ease-in-out infinite alternate;*/
}
@keyframes exsmall {
  from {
    height:200px;
    width:200px;
  }
  to {
    height: 220px;
    width:220px;
  }
}
@keyframes expand {
  from {
    width:100px;
    height:100px;
  }
  to {
    width:100%;
    height:400px;
    margin-left: 0;
  }
}
.enter {
  display: block;
  text-decoration: none;
  margin: 30px;
  font-variant: small-caps;
  font-size: 30px;
  font-family: Georgia;
  font-weight: bold;
  color: limegreen;
  background: black;
  text-align: center;
  border: 3px outset blue;
  border-radius: 10px;
  animation: change 2s linear infinite alternate;
  transition: font-size 1s, background 2s .2s;
}
.enter:hover {
  font-size: 45px;
  background: cyan;
  border: 3px inset maroon;
}
@keyframes change {
  0% {
    color: limegreen;
    border-color: red;
  }
  66% {
    color: cornflowerblue;
    border-color: aqua;
  }
  100% {
    color: magenta;
    border-color: gold;
  }
}
.credits {
  text-align: center;
  color: navy;
  text-decoration: underline blue;
  font-size: 30px;
  font-family: Arial Bold;
  display: block;
}
.exit {
  font-size:25px;
  font-weight: bold;
  font-family: Verdana;
  text-align: right;
  border: 3px solid brown;
  border-radius: 5px;
  background: none;
  box-sizing: border-box;
  margin-left: 345px;
}
.dets {
  display: none;
  text-align: center;
  background: whitesmoke;
  outline: 5px dashed black;
  font-family: serif;
  font-weight: normal;
  font-size: 30px;
}
.ex {
  color: black;
  font-weight: normal;
  font-size: 20px;
  text-decoration: none;
}

/*This is for the difficulty page */

.ask {
  color:crimson;
}
.difficulty {
  width:50%;
  height:40px;
  background: white;
  border: 3px groove turquoise;
  display: block;
  font-size: 25px;
  font-family:monospace;
  font-weight: bold;
}
.con {
  margin-top: 10px;
  display: block;
  color: white;
  border-radius: 5px;
  background-color: limegreen;
  font-family: monospace;
  border: 3px outset yellow;
  font-size: 25px;
  font-weight: bold;
  transition: color .5s, background-color 1s .5s;
}
.con:hover {
  color:green;
  background-color: white;
  border: 3px inset gray;
}
.prev {
  box-sizing: content-box;
  margin: 10px 70px 0px;
  display: block;
  text-decoration: none;
  color: navy;
  background-color: gold;
  border: 4px solid navy;
  text-align: center;
  font-size: 30px;
}
.arc {
  font-family: serif;
  font-size: 25px;
  color:red;
  font-weight: bold;
  background-color: whitesmoke;
  border: 3px outset cyan;
  margin-bottom: 50px;
  animation: arcade 2s linear infinite alternate;
}
@keyframes arcade {
  0% {
    color:red;
    border-color: cyan;
  }
  25% {
    color:maroon;
    border-color: lightblue;
  }
  50% {
    color:brown;
    border-color: blue;
  }
  75% {
    color:magenta;
    border-color: teal;
  }
  100% {
    color:hotpink;
    border-color: turquoise;
  }
}