#page-container {
  position: relative;
  min-height: 100vh;
  
}

#content-wrap {
  padding-bottom: 5rem;    /* Must match footer height */
}

#footer {
  position: absolute;
  background-color: #4d0b43;
  bottom: 0;
  width: 100%;
  height: 5rem;            /* footer height */
  color: white;
}

.footer a {
  color: #ffffff;
}
.footer a:visited {
  color: #f5f5f5;

}

.row {
  display: -webkit-flex;
  display: flex;
  color: white;
  flex-direction: row;
  
}


.column {
  flex: 30%;
  text-align: left;
  padding-left: 10%;
  padding-bottom: 5px;
  
}


body, html {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100vh;
    font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-size: 16px;
    overflow-x: hidden;
    scroll-padding-top: 25vh; /* height of sticky header */
}

.header {
  width: 100%;
  height: 25vh;
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  background-color: #4d0b43;
}


.title {
  
  font-family:Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
  font-size: clamp(4em, 6vw, 110px);
  text-align: center;
  color: white;
  
}

.tag {
  display: block;
  font-family:Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
  font-size: clamp(25px, 2.5vw, 45px);
  text-align: center;
  color: white;
  line-height: .7;
  
}

.middle{
  line-height: 1.5;
  height: 25vh;
  width: 100%;
  vertical-align: middle;
  text-align: center;
}

.main {
  margin-left: 10vw;
  padding: 2%;
  font-size: 20px;
}

.sidenav {
  margin: 0;
  padding: 0;
  width: 10vw;
  background-color: #ffffff;
  position: fixed;
  height: 100%;
  overflow: auto;
  border-right-style: solid;
  border-color: #4d0b43;
  
}

.sidenav a {
  display: block;
  color: black;
  padding: 2vh;
  text-decoration: none;
  cursor: pointer;
  
}



/*.sidenav ul { 
list-style-type: none;
margin-left: 0;
padding-left: 0;
margin-top: 0;
}

.sidenav a.active {
  background-color: #7c116c;
  color: white;
}*/

.sidenav a.active {
  background-color: #7c116c;
  color: white;
}

.sidenav a:hover:not(.active) {
  color: #808080;
  font-weight: bold;
}

.icon {
  
  display: none;
}



/*@media screen and (max-width:700px) {
  .sidenav {
    width: 100%;
    height: auto;
    position: sticky;
    border-bottom: solid;
    border-width: 1px;
    border-color: #8fd5ee;
    top: 0;
                                                  
  }
  .sidenav li {
    float: left;
    padding: 2%;    
  }
  
  .header {
    position: relative;
    height: 20vh;
    
  }

  .title {
   padding-top: 0%;
    font-size: 5em;
    
  }
  .main {
    margin-left: 0;
    font-size: 16px;
  }

  html {scroll-padding-top: 0;}
}

@media only screen and (max-width: 680px){

.title {padding-top: 3%;}

}*/

@media screen and (max-width: 700px) {
  .sidenav {
    position: sticky;
    top: 15px;
    border-width: 0;
    height: 0;
    width: 100%;
     transition: height .5s ease;
     overflow: hidden;
    
    
  }
  .sidenav a {
    text-align: center;
    float: none;
    border-bottom: solid;
    border-width: 1px;
    border-color: #7c116c;
    top: 0;
    height: 4vh;
    
  }

  .grow{
    /*height: 16vh;*/
    overflow: hidden;
  }

  .icon {
      display: block; 
      background-color: #4d0b43;
      height: 3vh;
      padding-top: 5px;
      width: 100%;
      z-index: 10;
      position: sticky;
      top: 0;
      
    }

    .icon i {
      float: right;
      padding-right: 10px;
      background-color: #4d0b43;
      color: white;
    }

  .header {
      position: relative;
      height: 15vh;

      
    
    }

    .middle{
      height: 15v;
      text-align: center;
    }

  .title{
    margin-top: -15px;
  } 

  .tag{
    line-height: 1;
  }

  .main {
    margin-left: 2px;
  }
  body, html {scroll-padding-top: 3vh;}


  #content-wrap {
    padding-bottom: 8rem;    /* Must match footer height */
  }

  #footer {
    
    height: 8rem;            /* footer height */
    color: white;
  }

  .row {
    flex-direction: column;
    
  }

  .column{
    padding-left: 25%;
  }

    .title{
      font-size: 6vh;
      text-align: center;
    }

    .tag{
      font-size: 2.5vh;
      text-align: center;
    }
}