* {margin:0; padding:0; box-sizing:border-box;}

     img{
          max-width:100%;
          display: block;
     }

     header {background-color: white;}

     #backtop {
          position: fixed;
          left:auto;right: 20px;top:auto;bottom: 20px;
          outline: none;
          overflow:hidden;
          color:#fff;
          text-align:center;
          background-color:#5C4D6E;
          height:40px;
          width:40px;
          line-height:40px;
          font-size:14px;
          border-radius:2px;
          cursor:pointer;
          transition:all 0.3s linear;
          z-index:999999;
          opacity:1;
          display:none;
     }

     #backtop:hover {
         background-color:#D2BEEF;
     }

     #backtop.mcOut {
         opacity:0;
     }

     #logo{
          text-align: center;
          padding-top: 1em;
     }

     .special {
          text-decoration: underline;
          background-color: #DC7CE7;
     }

     .clearfix::after {
       content: "";
       clear: both;
       display: table;
     }

     .right {
          float: right;
     }

     a:hover {
      background-color: #DC7CE7;
      color: black;
     }

     .previous {
          margin-left: 65px;
      background-color: #f1f1f1;
      color: black;
     }

     .next {
      background-color: #D2BEEF;
      color: white;
     }

     .previous, .next{
          padding: 20px;
          margin-bottom: 60px;
     }

     h1 {
          margin-top: 50px;
          font-size: 5em;
     }

     h1, h2, h3, h4, h5 {
          font-family: 'Fredoka One', cursive;
     }

     p{
          font-family: 'Archivo', sans-serif;

     }

     .herop {
          font-size: 3em;
          margin-top: 50px;
          margin-bottom: 50px;
     }


     .widthcontrol {max-width:575px;}

     main {
          padding:20px 20px 20px 20px;
          }

     footer {
          padding:20px;
          text-align:center;
          }

/*menu styles*/

     nav ul {list-style-type:none;}

     nav li {
          text-align:center; /* centers the text in the li*/
     }

     nav ul a {
          display:block; /*this allows you to apply padding to the links*/
          padding:2em;/* padding on the links make the clickable area large enough for fingers */
          color:black;
          font-family: 'Archivo', sans-serif;
          text-decoration:none;
          font-size:1em;
     }

     nav a:hover {
          background-color:#D2BEEF;
     }

     a {
       text-decoration: none;
       display: inline-block;
       color: #D2BEEF;
     }

     a:hover {
       background-color: #DC7CE7;
       color: black;
     }




/*applies only to screens over 768px - tablet and above*/
@media only screen and (min-width: 768px){

     main{
          max-width:980px;
          margin:0 auto;
          }

     nav {
          max-width:980px;
          margin:0 auto;
          display:flex;
          justify-content: space-between;
          align-items: center;
     }

     nav ul {
          display:flex; /* this turns on flexbox and makes the li into flex items*/
          justify-content:space-between; /*this spreads the li out evenly */
          list-style-type:none; /*removes the bullet point on the list*/
     }

     nav li {
          flex: 1 0 auto;  /*this makes the li fill in the space available instead of having space between them that is empty */
     }


     #logo{
          text-align: center;
          padding-top: 0;
          max-width: 200px;
     }

     .previous {
          margin-left: 350px;
      background-color: #f1f1f1;
      color: black;
     }

     .next {
      background-color: #D2BEEF;
      color: white;
     }

     .previous, .next{
          padding: 20px;
          margin-top: 10px;
          margin-bottom: 10px;
          border-radius: 20px;
     }
     /*grid layout in main*/

     .grid {
          display:flex;
          flex-wrap:wrap;
     }

     .project-box {
          flex-basis:80%;
          padding:1em;
          margin-left: 100px;
          margin-bottom: 5em;
     }

     .triple {
          flex-basis:33.3%;
          padding:.5em;
     }

     .triplesize {
          flex-basis:33.3%;
          padding:.5em;
          margin-left: 100px;
     }

     .tripletext {
          flex-basis:28%;
          padding: 1em;
          margin-left: 50px;
     }

     .double{
        width:50%;
        padding:1em;
   }

     .info {
        width:50%;
        padding:1em;
        margin-top: 60px;
   }

     .description {
        width:50%;
        padding:1em;
        margin-top: 38px;
   }

   .caption {
        text-align: center;
   }


     /* project box overlays */

     .project-box {
          position:relative;
     }

     .overlay {
            position: absolute;
            top: 0;
            bottom: 0;
            left: 0;
            right: 0;
            height: 100%;
            width: 100%;
            opacity: 0;
            transition: .9s ease;
            background-color: #5C4D6E;
          }

     .project-box:hover .overlay {
          opacity: 1;
          }

     .text {
          color: white;
          font-size: 3em;
          font-family: 'Fredoka One', cursive;
          position: absolute;
          top: 50%;
          left: 50%;
          -webkit-transform: translate(-50%, -50%);
          -ms-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
          text-align: center;
     }*/

     /*modal*/
     .modal {
               z-index:1;
               display:none;
               padding-top:10px;
               position:fixed;
               left:0;
               top:0;
               width:100%;
               height:100%;
               overflow:auto;
               background-color:rgb(0,0,0);
               background-color:rgba(0,0,0,0.8)
     }

     .modal-content{
               margin: auto;
               display: block;
                   position: absolute;
                 top: 50%;
                 left: 50%;
                 transform: translate(-50%, -50%);
     }

     .close {
          text-decoration:none;float:right;
          font-size:100px;
          font-weight:bold;
          color:#5C4D6E;
     }

     .container1 {
          width:470px;
          padding:5px;
     }

     .middleimg {
          margin-left: 150px;
          width: 700px;
     }

     .margintop {
          margin-top: 60px;
     }

     .modal-content, #caption {
         -webkit-animation-name: zoom;
         -webkit-animation-duration: 0.6s;
         animation-name: zoom;
         animation-duration: 0.6s;
     }


     @-webkit-keyframes zoom {
         from {-webkit-transform:scale(0)}
         to {-webkit-transform:scale(1)}
     }

     @keyframes zoom {
         from {transform:scale(0)}
         to {transform:scale(1)}
     }