body{
   color: #20520b;
   text-align: centre;
   font-family: 'Roboto', sans-serif;
  }
/*font can also be Lato-Light*/
 
a:link, a:visited {
 background-color: #069915;
 color: white;
 padding: 15px 25px;
 text-align: center;
 text-decoration: none;
 display: inline-block;
  overflow-x: hidden;
}
 
 /* other colors I could use: #F2A359 and #DB9065 */
/* text colour could be white if the background is changed to a darker colour*/
/* button colour could be changed to grey or light purple*/


a:hover, a:active {
 background-color: #034f0b;
 text-align: center;
}
 
h1 {
 color: #20520b;
 font-family: 'Roboto', sans-serif;
}

.my-link { 
  font-size: 20px !important;
  color: black !important;
}

.big{
  font-size: 30px;
}

h2{
  text-align: centre;
}

a{
  border-radius: 20px;
  text-align: center;
  }

  iframe{
    position:fixed; 
    top:0; 
    left:0;
    bottom:0; 
    right:0; 
    width:100%;
    height:100%; 
    border:none; 
    margin:0; 
    padding:0; 
    overflow:hidden; 
    z-index:999999;
  }
  
  #top{
    width: 100vw;
    height: 50px;
    display: flex;
    flex-direction: row;
    align-items:center;
  }

  .grid-container {
  display: flex;
  flex-wrap: wrap;
  padding: 10px;
}

.grid-item {
  width: 180px;
  padding: 20px;
  font-size: 20px;
  text-align: center;
}

  #top ul{
    margin-left: 67vw;
    display: flex;
    
    list-style: none;
    color: black;
  }
  #top ul li{
    padding: 10px;
  }
  #top ul li:hover{
    color: #F2A359;
    background: #A4031F;
  }

  li{
    color: #A4031F
  }
  
  button{
    background-color:  transparent;
    color: #20520b;
    border-color: transparent;
    cursor: pointer;
  }


  .title{
    margin-top: 100px;
    margin-left: 24px;
    font-size: 75px;
  }

  .button1{
    margin-left: 24px
  }