*{
    font-family: 'Courier New', Courier, monospace;
}
body{
   background: linear-gradient(to bottom, #e6ffe6 0%, #ffffff 100%);
    margin-left: auto;
    margin-right: auto;
   }
p{
    text-align: center;
    color: #001a00;
}
div{
    float:center;
    /*padding: 100px;*/
 }
 p{
  color: #008000;
 }
h1,h2,h3,h4,h5,h6{
    text-align: center;
}
h1{
    color: #000000;
}
h2{
    color: #003300;
}
h3{
    color:  #004d00;
}
h4{
    color: #008000
}
h5{
    color: #00b300
}
h6{
    color: #00e600
}
footer{
    font-family: 'Courier New', Courier, monospace;
    text-align: center;
    color: #003300;
}
* {
    box-sizing: border-box;
  }

  iframe{
    width: 350px;
    height: 600px;
    border-radius: 10px 50px 10px 50px;
    padding: 30px;
    flex: 50%;
   }


  iframe:hover {
    opacity: 1.0;
  }

  .flex-container {
    display: flex;
    flex-direction: row;
    font-size: 13px;
    text-align: center;
    padding: auto;
  }
  
  .flex-item-left {
    background-color: #e6ffe6;
    border-radius: 10px 50px 10px 50px;
    padding: 30px;
    flex: 50%;
  }
  
  .flex-item-right {
    background-color: #ccffcc;
    border-radius: 50px 10px 50px 10px;
    padding: 30px;
    flex: 50%;
  }
  
  /* Responsive layout - makes a one column-layout instead of two-column layout */
  @media (max-width: 300px) {
    .flex-container {
      flex-direction: column;
    }
  }