html {
    max-width: 1200px;
    margin: 0 auto;
}
h1,h2,h3 {
    font-family: 'Libre Baskerville', serif;
}
h1 {
    font-size: 3.5em;
}
h2 {
    font-size: 2.5em;
}
h3 {
    font-size: 2em;
}
h4 p,a {
    font-family: 'Mukta', sans-serif;
}
h4 {
    font-size: 1.5em;
}
p, p a {
    font-size: 1em;
}
a {
    font-size: 1.5em;
    text-decoration: none;
    padding-left: 3em;
    padding-right: 3em;
}
ul {
    list-style: none;
}
#typography{
    text-align: center;
}

.flex {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 13px;
    background-color: #acdbdf;
}
header p {
    margin-top: -30px;
}
header h1 {
    margin-top: 10px;
}
header a:link {
    color: #69779b;
}
header a:visited {
    color: #69779b;
}
header a:hover {
    color: #ffffff;
}
header a:active {
    color: #d7eaea;
}
main a {
    color: #0059ff;
}
main p {
    margin-top: 10px;
}
main h2, main h3, main p {
    text-align: center;
}
#mta img, .wide {
    width: 90%;
    margin-top: -50px;
}
#mta p {
    line-height: 2em;
}
#mta div p {
    line-height: 1em;
    width: 600px;
}
.center {
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 50%;
}
.bullets {
    list-style: armenian;
}
main {
    margin-bottom: 100px;
}

/*  Background Image */

  
  .box {
    display: flex;
    width: 100%;
    height: 8px;
    margin: 5px 0px 60px 0px;
  }
  
  .box-sm {
    height: 8px;
    margin: 0;
    flex-grow: 1;
    transition: all 0.8s ease-in-out;
    cursor: pointer;
  }
  
/*Growing the width of box, when hover using flex-grow property*/
  .box-sm:hover {
    flex-grow: 12;
  }
  
 
  
  .red {
    background-color: #ff5852;
  }
  
  .orange {
    background-color: #ff9000;
  }
  
  .yellow {
    background-color: #ffd300;
  }
  
  .green {
    background-color: #3dcd49;
  }
  
  .blue {
    background-color: #0089d7;
  }
  
  .purple {
    background-color: #9e44c4;
  }