*{
    margin: 0;
    padding: 0;
    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
  }

    /*------------------------------------------------------------------*/
    /*-------------------------- MAIN STYLES --------------------------*/
    /*----------------------------------------------------------------*/

  
  nav{
    width: 100%;
    box-sizing: border-box;
    padding: 20px;

    background-color: #5C2E5B;
    color: white;
    text-align: center;
  }

  .nav-links{
    box-sizing: border-box;
    padding-top: 20px;
  }

 .nav-links a{
    display: inline-block;
    padding: 0 5%;
    color: white;
  }

  main{
    width: 100%;
    margin: 0 auto;
  }

  .flex-container{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
  }
  
  .flex-box-padding{
    box-sizing: border-box;
    padding: 5px;
  }

  .flex-box {
    height: 200px; /*default height for all boxes*/
    width:100%; /*100% of the container*/
    background-color: #8a708a;
    text-align: center;
  }
  
  
  /* Extra small devices (phones, 600px and down) */
    @media only screen and (max-width: 600px) {

    /*Main Styles ----------------------------*/
    /*-------------------------------------------------------------------------*/

    .flex-container{
        flex-direction: column; /*Change direction to flex vertically in mobile*/
    }

    .flex-box-padding, .flex-box {
        width: 100%; /*All boxes will have 100% width in mobile*/

    }
}
    
    /* Small devices (portrait tablets and large phones, 600px and up) */
    @media only screen and (min-width: 600px) {
        
    .flex-container{        
        flex-direction: column; /*Change direction to flex vertically in tablet*/

    }
    
        .flex-box-padding, .flex-box {
            width: 100%; /*All boxes will have 100% width in tablet*/
        }
    }
    
    /* Large devices (laptops/desktops, 992px and up) */
    @media only screen and (min-width: 992px) {
        
        .flex-container{
            flex-direction: row;     /*Change direction back to row*/
        }

        /* Page 1 Styles ----------------------------*/
        /*-------------------------------------------------------------------------*/
   
        .flex-w50 {
            width: 50%;
        }      

        /* Page 2 Styles ----------------------------*/
        /*-------------------------------------------------------------------------*/

        #page2 .flex-container{
            flex-direction: column; /*override the flex direction*/
            height: 500px;
        }

        #page2 .flex-box{
            height: 100%;
        }

        .flex-w20{
            width: 20%;
        }

        .flex-h100{ 
            height: 100%;
        }

        .flex-h80{
            height: 80%;
        }

        .flex-h50{
            height: 50%;
        }

        .flex-h33{
            height: 33.33%;
        }

        .flex-h25{
            height: 25%;
        }

        .flex-h20{
            height: 20%;
        }

        /* Page 3 Styles ----------------------------*/
        /*-------------------------------------------------------------------------*/
        
        .flex-w25{
            width: 25%;
        }

        /* Page 4 Styles ----------------------------*/
        /*-------------------------------------------------------------------------*/

        .flex-h2y {
            height: 410px; /*height = (2*200px) + padding (5+5px) */
        }
    }