@font-face {
  font-family: 'Rubik';
  src: url('../fonts/Rubik/Rubik-VariableFont_wght.ttf') format('truetype');
  font-weight: 100 900;
}

:root {
  --white: #FFFFFF;
  --blue: #09CAC7;
  --navy: #025377;
  --orange: #EB9B6A;
  --grey: #B2C0CB;
}

main {
  margin-top: 100px;
  min-height: 100vh;
}

section {
  padding: 50px;
}

/*
  General Styling and Classes
*/
  h1, h2, h3, h4, h5, h6 {
  font-family: Rubik, sans-serif;
}

h1, h2, h3 {
  color: var(--blue);
}
h4, h5, h6 {
  color: var(--navy);
}
  p {
    color: var(--grey);
  }

  p.large {
    font-size: 1.2rem;
  }

  a {
    color: var(--blue);
  }

a:hover, a:active, a:visited {
  color: var(--blue);
  opacity: 0.7;
}

  .dark-bg {
    background-color: var(--navy);
  }

    .dark-bg h1, .dark-bg h2, .dark-bg h3, .dark-bg h4, .dark-bg h5, .dark-bg h6 {
      color: var(--blue);
    }

    .dark-bg p, .dark-bg a {
      color: var(--grey);
    }

.grey-bg {
  background-color: var(--grey);
}

  .grey-bg h1, .grey-bg h2, .grey-bg h3, .grey-bg h4, .grey-bg h5, .grey-bg h6 {
    color: var(--white);
  }

  .grey-bg p, .grey-bg a {
    color: var(--navy);
  }

.orange-bg {
  background-color: var(--orange);
}

  .orange-bg h1, .orange-bg h2, .orange-bg h3, .orange-bg h5, .orange-bg h6 {
    color: var(--navy);
  }

   .orange-bg h4, .orange-bg p, .orange-bg a {
    color: var(--white);
  }

.icon {
  height: 30px;
  width: auto;
}

.wave-bg {
  min-height: 40vh;
  background-color: var(--navy);
  background-image: url('../images/wave-lines.svg');
  background-position: bottom right;
  background-repeat: no-repeat;
  background-size: cover;
  background-blend-mode: luminosity;
}

/*
  Nav Styling
*/
.navbar-brand img {
  height: 60px;
  width: auto;
  transition: ease all 0.3s;
}

.navbar-light .navbar-nav .nav-link {
  color: var(--navy);
}

  .navbar-light .navbar-nav .nav-link:focus, .navbar-light .navbar-nav .nav-link:hover {
    color: var(--blue);
  }

.navbar-light .navbar-text {
  color: var(--orange);
  font-weight:100;
}

nav.chunky .navbar-brand img {
  height: 120px;
  width: auto;
  transition: ease all 0.3s;
}

nav {
  border-bottom: 1px solid rgb(178 192 203 / 0.30);
  
}
  nav.chunky {
    border-bottom: 0px;
  }

/*
  Header Styling
*/
.header {
  min-height: 60vh;
}

  .header h1 {
    color: var(--orange);
    font-weight: 100;
  }

.header h2 { 
  color: var(--grey);
  font-size: 3.5rem;
  font-weight:100;
}

/*
  Info Box Styling
*/

.info-box {
  height: 100%;
  padding: 0.5rem;
}

.info-box img {
  height: 75px;
  width: auto;
}

.info-box h3 {
  font-size: 1.2rem;
  font-weight: 600;
}

/*
  Profile Styling
*/

.profile img {
  height: 96px;
  width: auto;
  border-radius: 50%;
  box-shadow: 0px 2px 5px rgb(2 83 119 / 0.40)
}

.profile h3 {
  margin-top: 1rem;
  margin-bottom: 0rem;
  color:var(--orange);
}

/*
  Footer
*/

footer a {
  margin: 0 0.5rem;
}