body {font-family: Arial, Helvetica, sans-serif;}

h1, h2 {
    color: #303030;
    text-align:center;
    }

p {text-align: center;}

.fade-in-sections {
  animation: fadeIn ease 3s;

}

.sections {
    background-color: #F0F0F0;
    width: 75%;
    padding: 10px;
    border: 3px solid grey;
    margin: 0 auto;
    
}

.grid-container {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(400px, 1fr));;
    background-color: #ffffff;
    padding: 10px;
    grid-column-gap: 55px;
    grid-row-gap: 55px;
    width: 95%;
    margin: auto;

  }

  .grid-item {
    background-color: #F0F0F0;
    border: 3px solid grey;
    padding: 25px;
    font-size: 30px;
    text-align: center;
    height: 81%;
    width: 90%;
    text-align: left;
    font-size: 100%;
    cursor: pointer;
  }

.grid-item:hover {
    transform: scale(1.1) ;
    -webkit-transition: transform, background-color 0.3s ease ;
    transition: transform 0.3s ease ;
    background-color: #b3b3ff;

  }

  .fade-in {
    animation: fadeIn ease 3s;
    -webkit-animation: fadeIn ease 3s;
    -moz-animation: fadeIn ease 3s;
    -o-animation: fadeIn ease 3s;
    -ms-animation: fadeIn ease 3s;
  }

  @keyframes fadeIn {
    0% {
      opacity:0;
    }
    100% {
      opacity:1;
    }
  }
  
  @-moz-keyframes fadeIn {
    0% {
      opacity:0;
    }
    100% {
      opacity:1;
    }
  }
  
  @-webkit-keyframes fadeIn {
    0% {
      opacity:0;
    }
    100% {
      opacity:1;
    }
  }
  
  @-o-keyframes fadeIn {
    0% {
      opacity:0;
    }
    100% {
      opacity:1;
    }
  }
  
  @-ms-keyframes fadeIn {
    0% {
      opacity:0;
    }
    100% {
      opacity:1;
  }
}