* { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Source Sans Pro', sans-serif; } /*downloaded fonts */ @font-face { font-family: "lactosa"; src: url("../fonts/lactosa.otf"); } @font-face { font-family: "sunrise"; src: url("../fonts/sunrise.ttf"); } h1 { font-family: "sunrise"; font-size: 4em; color: #8a79b2; padding-top: 10px; padding-left:25px; } .subtitle{ padding-left:25px; } .firstnav { background-color: white; width: 100%; height: 60px; } #secondnav { height: 50px; background-color: #3f3f3f; width: 100%; padding: 0; margin: 0; font-size: 20px; } #sec3 { margin: 10px 10px 20px 10px; } /*footer*/ footer { background-color: #bdbdbd; color: #000; bottom: 0; margin-bottom: 0; font-size: 15px; margin-top: 0; width: 100%; height: 70px; word-spacing: 10px; text-align: center; padding-top: 10px; } @font-face { font-family: "sunrise"; src: url("../fonts/sunrise.ttf"); } h1 { font-family: "sunrise"; font-size: 4em; color: #8a79b2; padding-top: 10px; padding-left:25px; } .subtitle{ padding-left:25px; } @font-face { font-family: "future"; src: url("../fonts/future.ttf"); } .subtitle { font-family: "future"; font-size: 1em; } #maincon, #maincon2{ min-height: 50vh; margin: 0; background-image: url("../images/main.jpg"); background-repeat: no-repeat; background-size: cover; background-position: center center; overflow-x: hidden; } .nav-link{ font-size: 25px; padding: 10px; font-weight: bold; font-color: #050d57; font-family: "sunrise"; letter-spacing: 5px; } /*Media Queries */ @media (max-width: 575.98px) { ... } /*Small devices (landscape phones, less than 768px)*/ @media (max-width: 767.98px) { ... } /*Medium devices (tablets, less than 992px)*/ @media (max-width: 991.98px) { ... } /*Large devices (desktops, less than 1200px*/) @media (max-width: 1199.98px) { ... }