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

body{
    font-family: "Montserrat", Verdana, sans-serif;
    background-color: #202022;
    color: #e3e3e3;
    padding: 0;
}

h1, h2 {
    font-family: "Open Sans", Arial, sans-serif;
    font-weight: 400;
    line-height: 140%;
}


/* nav */

nav {
    font-size: clamp(1.2em, 1vw, 1.5em);
    background-color: #1d1d1f;
    padding: 0.8% 14px;
    position: sticky;
    top: 0;
    z-index: 1;
}

nav ul {
    list-style-type: none;
    margin: 10px 0;
    padding: 0;
    text-align: center;
    overflow: hidden;
    
    display: flex;
    justify-content: center;
}


nav li a {
    display: block;
    color: rgb(255, 255, 255);
    padding: 4px 20px 10px 20px;
    text-decoration: none;

    transition: color 0.4s;
}

nav li a:hover:not(.active) {
    color:rgb(118, 117, 117);
}

.active{
    color:rgb(255, 255, 255);
    border-bottom: 1.5px solid #ffffff;
}

.topnav .icon {
  display: none;
}


/* end nav */



/* Main */

main {
    background-color: #1d1d1f;
    border-radius: 10px;
    font-size: 1.125em;
    padding: 35px;
    width: 90%;
    margin: 30px auto;
    line-height: 145%;
}


main h2 {
    line-height: 100%;
    text-align: center;
    font-size: clamp(2em, 3vw, 2.7em);
    margin-bottom: 50px;
}

main h3 {
    font-family: "Open Sans", Arial, sans-serif;
    font-weight: 400;
    line-height: 110%;

    font-size: 1.6875em;
    padding: 10px;
    margin: 40px 0 13px 0;
}


main p { 
    font-size: 1em;
    margin-bottom: 20px;
}

/* Link */

main a:link {
	color: #9090ff;
}  
  
/* mouse over link */  
main a:hover {
	color: rgb(82, 82, 252);
}  
  
/* selected link */  
main a:active {
	color: rgb(122, 122, 247);
}


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

    nav ul {
        display: block;
        margin-left: 10px;
    }

    .topnav li {
        display: none;
    }

    .topnav li.icon {
        display: block;
        float: right;
        padding-top: 8px;
    }

    .topnav.responsive { 
        position: relative;
        padding: 5px;
    }

    .topnav.responsive .icon {
        position: absolute;
        right: 0;
        top: 0;
    } 

    .topnav.responsive li {
        float: none;
        display: block;
        text-align: left;
    }

    .topnav.responsive li:not(:first-child), .topnav.responsive li:not(.icon)  {
        padding-top: 10px;
    }

    .topnav.responsive li .active {
        border: none;
        color: #757575;
    }
}