html {
        background: #76B3B9;
        background: -moz-linear-gradient(top, #76B3B9 0%, #7F9BAF 100%);
        background: -webkit-linear-gradient(top, #76B3B9 0%, #7F9BAF 100%);
        background: linear-gradient(to bottom, #76B3B9 0%, #7F9BAF 100%);
    }

    /* 
        Old color scheme, from lightest to darkest 1:5
        #aef1ab light
        #60DA7F light accent
        #47AE69 main
        #248883 dark accent
        #0F2A3B dark 

        new color scheme 1
        #f5f3f6 light 
        #76b3b9 light accent
        #7F9BAF main
        #596ABA dark accent
        #272f3f dark
    */



    body {
        /* dark */
        color: #272f3f;
        margin: 0px 0px;
    }

    ::selection {
        /* pick one */
        background: #f5f3f6;
    }

    .hideOverflow {
        overflow-x: hidden;
        overflow-y: hidden;
        /* do not change  */
        background-image: #60DA7F;
        background-image: -moz-linear-gradient(top, #60DA7F 0%, #47AE69 50%, #248883 100%);
        background-image: -webkit-linear-gradient(top, #60DA7F 0%, #47AE69 50%, #248883 100%);
        background-image: linear-gradient(to bottom, #60DA7F 0%, #47AE69 50%, #248883 100%);
        background-size: cover;
    }

    .title {
        font-family: 'Montserrat', sans-serif;
        text-align: center;
    }

    .titleText {
        margin: auto;
    }

    p {
        font-family: 'Lato', sans-serif;
        font-size: 18px;
    }

    label {
        font-family: 'Lato', sans-serif;
        display: block;
    }

    .intro {
        margin: 10px 150px;
        /* light */
        background-color: #f5f3f690;
        padding: 10px 20px;
    }

    .container {
        display: flex;
        margin: 30px 180px;
        /* light */
        background-color: #f5f3f690;
        padding: 30px 20px;
    }

    .container1 {
        display: block;
        margin: 30px 180px;
        /* light */
        background-color: #f5f3f690;
        padding: 30px 20px;
    }

    .blueBG {
        /* do not change */
        background-color: #1d0fa15b;
    }

    p a {
        text-decoration: solid;
    }

    a:link {
        color: #596ABA;;
    }

    a:visited {
        color: #596ABA;
    }

    a:hover {
        color: #3a4c9c;
    }

    .blue {
        background-color: #13049931;
        height: 100%; /* 100% Full-height */
        width: 100%; /* 0 width - change this with JavaScript */
        position: fixed; /* Stay in place */
        z-index: 1; /* Stay on top */
        top: 0; /* Stay at the top */
        overflow-y: hidden;
    }

    .myCanvas {
        overflow: hidden;
    }

    .container-side {
        width: 50%;
        padding: 14px 16px;
        float: right;
    }

    .PSUpper {
        display: flex;
        font-family: 'Montserrat', sans-serif;
        font-size: 20px;
    }

    .PSLower {
        padding: 10px;
    }

    .projectSection {
        overflow: auto;
        padding-bottom: 10px;
    }

    .PSTitle {
        margin-top: 10px;
        margin-bottom: 10px;
        font-size: 30px;
        text-decoration: solid;
        text-decoration-color: #1c6b67 ;
    }

    .inlineImage {
        float: right;
        height: 250px;
        margin-left: 20px;
    }

    .logo {
        height: 50px;
        margin-left: 20px;
    }

    .sliderOutput {
        display: inline-block;
    }

    .output {
        /* light */
        background-color: #f5f3f690;
        padding: 14px 16px;
        margin-top: 5%;
    }

    .resetButton {
        margin-top: 8%;
    }

    .invisCursor a:hover {
        cursor: none;
    }

    .topnav {
        /* dark */
        background-color: #272f3f;
        overflow: hidden;
    }
      
    /* Style the links inside the navigation bar */
    .topnav a {
    float: left;
    color: #f5f3f6;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
    font-family: 'Lato', sans-serif;
    font-size: 19px;
    }
    
    /* Change the color of links on hover */
    .topnav a:hover {
    background-color: #ddd;
    /* dark */
    color: 272f3f;
    }
    
    /* Add a color to the active/current link */
    .topnav a.active {
    /* light accent*/
    background-color: #76b3b9;
    /* light */
    color: f5f3f6;
    }

    .sidenav {
        height: 100%; /* 100% Full-height */
        width: 0; /* 0 width - change this with JavaScript */
        position: fixed; /* Stay in place */
        margin: 0px;
        z-index: 2; /* Stay on top */
        top: 0; /* Stay at the top */
        right: 0;
        /* light */
        /* transparent */
        background-color: #f5f3f6bb;
        overflow: hidden;
        padding-top: 30px; /* Place content 60px from the top */
        transition: 0.5s; /* 0.5 second transition effect to slide in the sidenav */
    }

    .sidenavInterior {
        padding: 40px 8px 8px 32px;
    }
    
    .sidenav label {
        font-family: 'Lato', sans-serif;
        text-decoration: none;
        display: block;
        transition: 0.3s;
    }

    .sidenav a {
        font-family: 'Lato', sans-serif;
        text-decoration: none;
        display: block;
        transition: 0.3s;
    }

    .sidenav .exit {
        position: absolute;
        top: 10px;
        left: 25px;
        margin-right: 50px;
        text-decoration: none;
    }

    .sidenav a:hover {
        /* light */
        color: #f5f3f6;
    }

    .sidenav .closebtn {
        position: absolute;
        top: 0;
        right: 25px;
        font-size: 36px;
        margin-left: 50px;
        text-decoration: none;
    }


    input[type=text], select {
        width: 75%;
        padding: 12px 20px;
        margin: 8px 0;
        border-radius: 4px;
        display: inline-block;
        box-sizing: border-box;
    }

    button[type=button] {
        width: 75%;
        /* dark accent */
        background-color: #596ABA;
        /* light */
        color: #f5f3f6;
        padding: 14px 20px;
        margin: 8px 0;
        border: none;
        border-radius: 4px;
        cursor: pointer;
        font-family: 'Lato', sans-serif;
        display: block;
    }

    button[type=button]:hover {
        /* dark */
        background-color: #272f3f;
      }