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) 63%, rgb(105, 156, 106) 82%);
    background-image: -o-linear-gradient(bottom, rgb(172, 184, 189) 25%, rgb(183, 208, 84) 63%, rgb(105, 156, 106) 82%);
    background-image: -moz-linear-gradient(bottom, rgb(172, 184, 189) 25%, rgb(183, 208, 84) 63%,rgb(105, 156, 106) 82%);
    background-image: -webkit-linear-gradient(bottom,rgb(172, 184, 189) 25%, rgb(183, 208, 84) 63%, rgb(105, 156, 106) 82%);
    background-image: -ms-linear-gradient(bottom, rgb(172, 184, 189) 25%, rgb(183, 208, 84) 63%, 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-size: 3vw; 
  margin-bottom: 0px;
  text-align: left;
}
h3{
  border-width:3px; 
  border-style:solid; 
  border-color:#042550;
}

img {
  margin-left: 75px;
  border-radius: 25px;
  margin-bottom: 50px;
  width: 450px;
  height: 250px;
}



.row {
  display: flex;
}

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


h1{ 
  text-align: left;
  color: #040900;
}

h2{
  font-size: 15px;
  text-align: left;
  line-height:0px;
  margin-top: 5px;  
}

h3{
  font-family: 'Courier New', Courier, monospace;
  font-size: 50px;
  text-align: center;
  color: rgb(103, 25, 37);
}


p{  
  font-size: 20px; 
  margin-top: 0px;
  margin-bottom: 0px;
}

#button1{
  font-family: 'Courier New', Courier, monospace;
  font-weight: bold;
  font-size: 25px;
  border-radius: 25px;
  margin-right: 120px;
  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: 120px;
  width: 300px;
  height: 50px;
  background: rgba(30, 52, 142, 0.5)
}
#button2:hover {
  background-color:green;  
}
#container{  
  margin-bottom: 40px;
  text-align: center;
}


@media screen and (max-width: 768px) {
  /* For IPAD: */
  img{
    margin-left: 10px;  
    width: 300px;
    height: 150px;      
  }
  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;
    }
}

  @media screen and (max-width: 320px) {
    /* For phone */
    [class*="column"] {
      height: 500px;
    }
    h1{
      font-size: 30px;
    }
    h2{
      font-size: 20px;
    }
    h3{
      box-sizing: border-box;
      inline-size: 400px;
      margin-left: 80px;
    }
    p{
      text-align: center;  
      inline-size: 300px;         
    }
    #button1{
      margin-bottom: 20px;
      margin-left: 150px;
      width: 250px;
    }

    #button2{
      margin-left: 150px;
      width: 250px;
    }

    img{
    width: 250px;
    height: 200px;
    }
  }