h1{
      color: #2c2c2c;
        margin: initial;
      width: 100%;
      font-family: sans-serif;
      text-align: center;
      line-height: 100px;
      font-size: 60px;
      background-clip: padding-box;
      background-image: linear-gradient(to right, rgba(51, 185, 107, 0.5),#fffbee);
        border-radius: 10px;
        opacity: initial;
        -webkit-animation: fadein 5s; /* Safari, Chrome and Opera > 12.1 */
     -moz-animation: fadein 5s; /* Firefox < 16 */
      -ms-animation: fadein 5s; /* Internet Explorer */
       -o-animation: fadein 5s; /* Opera < 12.1 */
          animation: fadein 5s;
    }
    .name {
    color: rgba(51, 185, 107, 0.5);
    text-align: center;
    font-family: sans-serif;
    align-content: center;
    margin-top: 20px;
    font-size: 36px;
    font-weight: bolder;
    
    }

    .course {
      color: #2c2c2c;
      text-align: center;
      font-family: sans-serif;
      padding-bottom: 1em;
      align-content: center;
      font-size: 24px;
      font-weight: bold;

      }

      hr.solid {
        border-top: 3px solid #2c2c2c;
       
      }

    body {
        background-color: #fffbee;
        border: #335b7e;
        border-radius: 100px;   
    }
    
 
    

    h4{
        color:#2c2c2c;
        margin: auto;
        padding: 5px;
        text-align: center;
        padding-left: 10px;
        -webkit-animation: fadein 10s; /* Safari, Chrome and Opera > 12.1 */
     -moz-animation: fadein 10s; /* Firefox < 16 */
      -ms-animation: fadein 10s; /* Internet Explorer */
       -o-animation: fadein 10s; /* Opera < 12.1 */
          animation: fadein 10s;
    }

    
    


    .navbar {
      line-height: 2em;
      background-color: rgba(51, 185, 107, 0.5);
  }
 
      .navbar ul {
        list-style-type: none;
        text-align: center;

        overflow: hidden;        
    }
    .navbar li{
        float: center;
        display: inline;
    }

    footer{
      text-align: center;
      padding-bottom: 10px;
      color: #2c2c2c;
      
    }
    
.name{
  -webkit-animation: fadein 3s; /* Safari, Chrome and Opera > 12.1 */
     -moz-animation: fadein 3s; /* Firefox < 16 */
      -ms-animation: fadein 3s; /* Internet Explorer */
       -o-animation: fadein 3s; /* Opera < 12.1 */
          animation: fadein 3s;
}

h2{
  -webkit-animation: fadein 5s; /* Safari, Chrome and Opera > 12.1 */
     -moz-animation: fadein 5s; /* Firefox < 16 */
      -ms-animation: fadein 5s; /* Internet Explorer */
       -o-animation: fadein 5s; /* Opera < 12.1 */
          animation: fadein 5s;
}

.splitscreen {
  display:flex;
}
.splitscreen .left {
  flex: 1;
  float: right;
  display: table;
  margin-left:auto;
  margin-right:auto;
  text-align:center;

  width: 25%;
}
.splitscreen .right {
  flex: 1;
  float: left;
  display: table;
  margin-left:auto;
  margin-right:auto;
  text-align:center;
  width: 25%;
}


section {
  display: table;
  margin-left:auto;
  margin-right:auto;
  text-align:center;
  columns: 3;
  -webkit-columns: 3;
  -moz-columns: 3;
  width: 25%;
}

.pics {
  border-radius: 10px;
}

.pics:hover{
filter: grayscale();
}



@keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Firefox < 16 */
@-moz-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Safari, Chrome and Opera > 12.1 */
@-webkit-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Internet Explorer */
@-ms-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Opera < 12.1 */
@-o-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}