body {
    background-image: url("background.gif");
    background-size: cover;
}

h1{
  color: rgb(159, 159, 237);
  font-size: 100px;
  font-family:monospace;
}


h2{
  background-color: pink;
  color: rgb(159, 159, 237);
  font-size: 20px;
  font-family:monospace;
  padding: 5px;
  
}

#img1 {
  border: 15px solid pink;
}

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

.column {
  flex: 50%;
  padding: 5px;
}

#navigate {
  background-color: pink;
}

.scrollbox{
  width: 350px;
  height: 550px;
  overflow-y: scroll;
  scroll-behavior: smooth;
  position: absolute;
  top: -20%;
  left: 20%;
  transform: translate(85%, 80%);
}

.scroll-page {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  font-size: larger;
}

@media (min-color: 8) {
  p {
    color: purple;
    font-size: 100px;
    text-align:center;
  }
}
.spheres {
  color: blue;
  font-size: xx-large;
  font-family:Arial, Helvetica, sans-serif;
  }
  
  .spheres:hover {
    color: rgb(246, 255, 252);
    text-shadow:1px 1px 10px rgb(248, 200, 200), 1px 1px 10px rgba(255, 21, 193, 0.788);
  }
  
  .SUGARCANE {
  color: blue;
  font-size: xx-large;
  font-family:Arial, Helvetica, sans-serif;
  }
  
  .SUGARCANE:hover {
    font-size:xx-large;
    font-family:Arial, Helvetica, sans-serif;
    color: rgb(255, 166, 236);
    text-shadow:1px 1px 10px rgb(111, 207, 193), 1px 1px 10px rgb(188, 255, 192);
  }
  
  .plaza {
    color: blue;
    font-size: xx-large;
    font-family:Arial, Helvetica, sans-serif;
  }
  
  .plaza:hover {
    color: rgb(252, 255, 166);
    text-shadow:1px 1px 10px rgb(207, 216, 32), 1px 1px 10px rgba(216, 255, 21, 0.788);
  }
  
  .someone {
    color: blue;
    font-size: xx-large;
    font-family:Arial, Helvetica, sans-serif;
  }
  
  .someone:hover {
    color:rgb(199, 226, 238);
    text-shadow:1px 1px 10px rgb(255, 240, 219), 1px 1px 10px rgb(244, 233, 189);
  }
  .jellyfish {
    color: blue;
    font-size: xx-large;
    font-family:Arial, Helvetica, sans-serif;
  }
  
  .jellyfish:hover {
    color:rgb(99, 0, 149);
    text-shadow:1px 1px 10px rgb(187, 148, 255), 1px 1px 10px rgb(237, 134, 239);
  }
  .water {
    color: blue;
    font-size: xx-large;
    font-family:Arial, Helvetica, sans-serif;
  }
  
  .water:hover {
    color:#fff;
    text-shadow:1px 1px 10px rgb(209, 188, 255), 1px 1px 10px rgb(238, 188, 255);
  }
  
  .angels {
    color: blue;
    font-size: xx-large;
    font-family:Arial, Helvetica, sans-serif;
  }
  
  .angels:hover {
    color:rgb(232, 253, 255);
    text-shadow:1px 1px 10px rgb(255, 154, 208), 1px 1px 10px rgb(255, 188, 240);
  }
  
  .bible {
    display: none
  }
  
  span:hover + .bible {
    display: block;
  }
  
  .row1 {
  display: flex;
  justify-content: center;
  }
  
  .column1 {
    flex:30%;
    justify-content: flex-start;
    padding: 10px
  }
  
  .img_column {
    padding: 5px
  }
  
  .Heartscape {
  color: rgb(255, 0, 0);
  font-size: xx-large;
  font-family:Arial, Helvetica, sans-serif;
  }
  .vids{
    text-align: center;
    position: relative;
    top: 10px;
}

.container{
    position: relative;
    text-align: center;
    color: white;
}

.hypnosis{
    position: absolute;
    color: white;
    text-align: center;
    font-size: 25px;
    font-family: arial;
    top: 260px;
    left: 46.5%;
}

.eye{
    height: 600px;
    width: 630px;
    position: relative;
}

.left{
    position: absolute;
    height: 370px;
    width: 400px;
    top: 130px;
    left: -20px;
}

.right{
    position: absolute;
    height: 370px;
    width: 400px;
    top: 130px;
}

.button{
    background-color: rgb(185, 94, 215);
    border: none;
    color: black;
    padding: 15px 32px;
    text-align: center;
    display: inline-block;
    font-size: 16px;
    margin: 4px 2px;
    cursor: pointer;
}
  
#imagesboy{
  animation-name: rotate;
  animation-duration: 0.7s;
  animation-iteration-count: infinite;
  animation-play-state: paused;
} 

#imagesboy:hover {
  animation-play-state: running;
}


@keyframes rotate {
  0% {
    transform: rotate(0);
  }
  100% {
    transform: rotate(360deg);
  }
}