/* 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-color: white;
  color: black;
  font-family: Verdana;
  cursor: url("/images/compass_cursor.png"), default;
}
#Border{
  width: 1275px;
  height: 850px;
  
  margin-top: 100px;
  
  display: flex;
  align-items: center;
  align-content: center;
  
  border: 10px solid pink;
  border-radius: 20px;
  }

#main_left{
  background-color: green;
  width: 300px;
  height: 500px;
  
  position: absolute;
  top: 150px;
  left: 35px;
  
  /*display: flex;*/
  /*align-items: center;*/
  /*align-content: center;*/
  
  border: 1px solid black;
  border-radius:20px;
  
  
  
  animation: onMove 3s forwards;
  /*infinite*/
  
  }
  
/*#main_left::hover{*/
  
/*}*/

@keyframes onMove {
  0% {background-color: white;}
  100% {background-color: #9ED38D;}
  
  0% {border: 1px solid black;}
  100% {border: 3px solid #66865B;}
  
  0% {border-radius: 20px;}
  100% {border-radius: 75px 25px;}
}

/* Pause on hover */
/*.element:hover {*/
/*  animation: ;*/
/*}   */

/*#line_border{*/
/*  background-color: green;*/
/*  width: 50px*/
/*  height: 500px*/
  
/*  position: absolute;*/
/*  top: 150px;*/
/*  left: 400px;*/
  
/*   animation: lineMove 3s forwards;*/
/*  }*/

#line_border{
  background-color: green;
  /*width: 5px;*/
  /*height: 400px;*/
  
  position: absolute;
  top: 200px;
  left: 370px;
  
  border: 5px dotted green;
  border-radius: 5px;
  
  animation: lineMove 3s forwards;
  }
  @keyframes lineMove {
    0% {height: 0px}
    100% {height: 400px}
  }



#main_right{
  background-color: green;
  width: 850px;
  height: 500px;
  
  position: absolute;
  top: 150px;
  left: 410px;
  
  /*display: flex;*/
  /*align-items: center;*/
  /*align-content: center;*/
  
  border: 1px solid black;
  border-radius:10px;
  
  
  
  animation: onMove 3s forwards;
  /*infinite*/
  
  }
  
#main_left_fg{
  /*background-color: blue;*/
  width: 150px;
  height: 150px;
  
  transition: scale(1) 3s ease;
  transform: scale(1);
  transform: rotate(0deg);
  
  position: absolute;
  top: 550px;
  left: 10px;
  
  animation: popUp 1s forwards;
  animation: rotateFg 5s infinite;
  }
  #main_left_fg2{
  /*background-color: blue;*/
  width: 150px;
  height: 150px;
  
  transition: scale(1) 3s ease;
  transform: scale(1);
  transform: rotate(0deg);
  
  position: absolute;
  top: 100px;
  left: 230px;
  
  animation: popUp 1s forwards;
  animation: rotateFg 5s infinite;
  }
  @keyframes popUp {
    0% {transform: scale(0);}
    25% {transform: scale(.5);}
    50%{transform: scale(1.5);}
    100% {transform: scale(1);}
  }
  @keyframes rotateFg {
    0% {transform: rotate(0deg);}
    25% {transform: rotate(15deg);}
    /*50%{transform: rotate(0deg);}*/
    75% {transform: rotate(-15deg);}
    100% {transform: scale(0deg);}
  }