/*COLOURS Pastel
orange #FF781F 
pink #F665B5
light pink/cream #FFE3DC
blue #85FFFD
green #87FF65
*/




body {
      font-size: 20px;
      font-family: 'Bubblegum Sans', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
      color: #ffffff;
      font-weight: 300;
      text-align: center;
      background-image: linear-gradient(45deg,  #ffffff, #e6d4ff,#ffffff);
  
      justify-content: center;
  }


  
  #main_container {
  font-size: 20px;
  font-family: 'Bubblegum Sans', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
  color: #ffffff;
  font-weight: 300;
  text-align: center;

  background-image: linear-gradient(to top, rgba(255,0,0,0), #6422c0);
  border-radius: 25px;
  margin: 25px;

    width: 95vw;
    height: 700px;
    justify-self: center;
    display: flex;
    flex-wrap: wrap;
  
}

#top_container {
  font-size: 20px;
  font-weight: 300;
  text-align: center;
  color: #6422c0;
  background-image: linear-gradient(40deg,  rgba(255,0,0,0),rgba(255, 255, 255, 0.705), rgb(255, 255, 255));
  width: 100%;
  height: 350px;
  border-radius: 25px;
  margin: 25px;
  display: flex;
  flex-wrap: wrap;
  opacity: 0.9;
  transition: all .2s ease-in-out; 
}

#top_container:hover {
  font-size: 20px;
  font-weight: 300;
  text-align: center;
   width: 100%;
  height: 350px;
  border-radius: 25px;
  margin: 25px;
  display: flex;
  flex-wrap: wrap;
  opacity: 1;
  transform: scale(1.02); 
}


#top_container_image {
  width: 40%;
  height: 90%;
  border-radius: 25px;
  margin: 10px;
}

#top_container_text {
  font-size: 35px;
  font-weight: 200;
  text-align: right;
  width: 40%;
  height: 90%;
  border-radius: 25px;
  margin: 10px;
}

.bottom_container {
  font-size: 20px;
  color: #6422c0;
  font-weight: 300;
  text-align: center;

  width: 420px;
  height: 275px;

  background-image: linear-gradient(to bottom,  rgba(255,0,0,0),rgba(255, 255, 255, 0.219), rgba(255, 255, 255, 0.758));
  border-radius: 25px;
  margin: 25px;
  
  opacity: 0.8;
  transition: all .2s ease-in-out;
}

.bottom_container:hover {
  opacity: 1;
  transform: scale(1.05); 
}