head {
  background-color: #F1F1F1;
  text-align: center;
  padding: 20px;
}
body {
  /*background-color: rgb(194 182 182);*/
  font-family: 'Garamond', sans-serif;
}
.MyGradientClass
{
    height:auto;
    background-image: linear-gradient(bottom, rgb(172, 184, 189) 25%, rgb(183, 208, 84) 75%, rgb(105, 156, 106) 82%);
    background-image: -o-linear-gradient(bottom, rgb(172, 184, 189) 25%, rgb(183, 208, 84) 75%, rgb(105, 156, 106) 82%);
    background-image: -moz-linear-gradient(bottom, rgb(172, 184, 189) 25%, rgb(183, 208, 84) 75%,rgb(105, 156, 106) 82%);
    background-image: -webkit-linear-gradient(bottom,rgb(172, 184, 189) 25%, rgb(183, 208, 84) 75%, rgb(105, 156, 106) 82%);
    background-image: -ms-linear-gradient(bottom, rgb(172, 184, 189) 25%, rgb(183, 208, 84) 75%, rgb(105, 156, 106) 82%);

    background-image: -webkit-gradient(
        linear,
        left bottom,
        left top,
        color-stop(0.25, rgb(172, 184, 189)),
        color-stop(0.63, rgb(183, 208, 84)),
        color-stop(0.82, rgb(105, 156, 106))
    );   
}

h1{ 
  font-family: 'Courier New', Courier, monospace;
  font-size:3vw;
  border-width:3px; 
  border-style:solid; 
  border-color:#042550;
  text-align: center;
  color: rgb(103, 25, 37);
}

#button1{
  font-family: 'Courier New', Courier, monospace;
  font-weight: bold;
  font-size: 25px;
  border-radius: 25px;
  margin-right: 60px;
  width: 300px;
  height: 50px;
  background: rgba(30, 52, 142, 0.5)
  
}

#button1:hover {
  background-color:green;  
}

#button2{
  font-family: 'Courier New', Courier, monospace;
  font-weight: bold;
  font-size: 25px;
  border-radius: 25px;
  margin-left: 100px;
  width: 300px;
  height: 50px;
  background: rgba(30, 52, 142, 0.5)
}
#button2:hover {
  background-color:green;  
}

#button3{
  font-family: 'Courier New', Courier, monospace;
  font-weight: bold;
  font-size: 25px;
  border-radius: 25px;    
  width: 300px;
  height: 50px;
  background: rgba(30, 52, 142, 0.5)
  
}

#button3:hover {
  background-color:green;  
}

#container{  
  margin-bottom: 60px;
  text-align: center;
}

#pOne{
  font-size: 23px;
  text-align: center;
  font-weight: bold;
  font-family: 'Times New Roman', Times, serif; 
}

#question{
  font-size: 23px;
  text-align: justify;
  font-weight: bold;
  color: rgb(19, 6, 118);
}

#answer{
  margin-top: 20px;
  font-size: 23px;
  text-align: justify;
  font-weight: bold;
  color: rgb(172, 53, 14);
}

img#frame{
  width: 500px;
  height: 300px;
}
img#bubblewrap{
  width: 350px;
  height: 200px;
}
.center {
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 400px;
  height:250px;  
}

@media screen and (max-width: 768px) {
  /* For IPAD: */
  
  img#picture1{
    margin-left: 30px;
  }
  img#picture2{    
    margin-left: 30px;
  }
  h3{
    box-sizing: border-box;
    inline-size: 410px;
    margin-left: 170px;
    text-align: center;    
  }
  p{
    text-align: center;   
    margin-left: 140px;  
    font-size: 15px;  
    inline-size: 450px;
    }

    #button1{
      margin-bottom: 30px;
      margin-right: 10px;
    }

    #button2{
      margin-left: 30px;
      margin-right: 10px;
    }
    img{
      width: 300px;
      height: 35px;
      display: block;
      margin-left: auto;
      margin-right: auto;
      inline-size: 400px;
      }
  }

  @media screen and (max-width: 320px) {
    /* For phone */
    [class*="column"] {
      height: 500px;
    }
    h1{
      font-size: 30px;
      margin-left: 10px;
      box-sizing: border-box;
      inline-size: 300px;
    }
    h2{
      font-size: 20px;
    }
    p{
      margin-left: 0px;
      text-align: left;  
      inline-size: 300px;         
    }
    #button1{
      margin-bottom: 20px;
      margin-left: 30px;
      width: 200px;
    }
    #button2{
      margin-left: 30px;
      margin-bottom: 20px;
      width: 200px;
    }
    img{
    width: 300px;
    height: 35px;
    display: block;
    margin-left: auto;
    margin-right: auto;
    }
    img#frame{
      width: 300px;
      height: 200px;
    }
    img#bubblewrap{
      width: 300px;
      height: 200px;
    }
    img#charts{
      width: 275px;
      height: 200px;
        
    }
  }