:root {
    --dark: #071e3d;
    --darktwo: #1f4287;
    --light: #278ea5;
    --lighttwo: #21e6c1;
    --bright: #f5df4d;
  }
  * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
      font-family: "Roboto", sans-serif;
          }
    p, a {
        font-family: "Roboto", sans-serif;
        color: white;
      }
      
      p {
          font-family: "Roboto", sans-serif;
          letter-spacing: 1px;
        }
      h1 {
          font-family: "Roboto", sans-serif;
          color: white;
      }
      h2 {
          font-family: "Roboto", sans-serif;
          color: white;
      }
      h3 {
        font-family: "Roboto", sans-serif;
        color: white;
      }
      /* END STANDARD STYLING */
      /* start nav */
      .nav-style{
        box-shadow: 0 3px 20px rgba(0, 0, 0, 0.2);
      }
      .nav-logo {
        max-width: 200px;
      }

      /* end nav */
      /* start hero landing page */
      .hero-header {
        width: 100%;
        height:calc(100vh - 65px);
        background:linear-gradient(rgba(7, 30, 61, 0.599), rgba(31, 66, 135, 0.505)), url(/images/hero.png) no-repeat center / cover;
        color: white;
      }
      .hero-page {
        width: 90%;
        height: 100%;
        max-width: 1200px;
        margin: 0 auto;
        display: flex;
        align-items: flex-start;
        justify-content: center;
        flex-direction: column;
      }