html {
    font-family: raleway, sans-serif;
    font-size: 62.5%;
  }
  
  @media (max-width: 75em) {
    html {
      font-size: 60%;
    }
  }
  
  @media (max-width: 61.25em) {
    html {
      font-size: 58%;
    }
  }
  
  @media (max-width: 28.75em) {
    html {
      font-size: 55%;
    }
  }
  
  body {
      background-color: floralwhite;
    margin: 0;
  }
  
  navbar {
    position: fixed;
    top: 0;
    width: 100%;
    right: 0;
    background-color: #1d3577;
    min-height: 75px;
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    align-items: center;
    margin: 0;
    box-shadow: 0 2px 0 rgb(0 0 0 / 60%);
   }
  
  navbar li {
    padding: 20px 5%;
    list-style-type: none;
  }
  
  navbar a {
    display: block;
    text-decoration: none;
    font-size: 1.5rem;
    color: #a8dadc;
    font-size: 2rem;
  }
  

  #welcome-section {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100vh;
    color: #233036;
    background-color: #457b9d;
  }
  
  #welcome-section h1 {
    font-size: 8rem;
    padding: 3rem;
    padding-bottom: 0;
    margin-bottom: 0;
  }

  #welcome-section p {
    font-size: 2rem;
    padding: 0.5rem;
    margin: 0;
  }

  #projects-header-section {
    width: 100%;
    margin: 0;
    min-height: 10vw;
    background-color: #233036;
    color:#a8dadc;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  #projects-header h1{
    font-size: 8rem;
    padding: 3rem;
    margin: 0;
    text-align: center;
  }
  
 
  .project-category{
    display: flex;
    flex-direction: column;
    margin: 0;
    width: 100%;
    min-height: 30vw;
    background-color: #a8dadc;
  }

  .project-category h2{
    font-size: 6rem;
    padding: 3rem;
    padding-bottom: 0;
    margin: 0;
    text-align: center;
    color: #233036;
  }

  .project-category h4{
    font-size: 4rem;
    padding: 1rem;
    padding-bottom: 0;
    margin: 0;
    text-align: center;
    color: #233036;
  }

  .category-header{
    display: flex;
    flex-direction: column;
    margin: 0;
    padding: 1em;
    width: 100%;
    min-height: 2vw;
    background-color: #457b9d;
  }

  .category-header h4 {
    padding: 0.5em 1em;
  }

  .category-content {
    display: flex;
    justify-content:space-evenly;
    align-items: center;
    flex-direction: row;
    flex-wrap: wrap;
    width: 100%;
    padding: 3em;
    background-color: #a8dadc;
  }

  .project-tile{
    width: 30rem;
    height: 20rem;
    margin: 3rem;
    border-radius: 1rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: center;
    text-decoration: none;
    box-shadow: 0.5rem 0.5rem 0.2rem #1d3577;
    background-color: #457b9d;
    background-size: cover;
  }
  
  .project-tile h3 {
    height: 50%;
    margin: 0;
    font-size: 2.5rem;
    font-weight: bold;
    padding: 1rem;
    padding-bottom: 0.5rem;
    display: flex;
    justify-content: center;
    align-content: center;
    flex-direction: column;
    color: #233036; 
  }
  
  .project-tile p {
    height: 50%;
    margin: 0;
    font-size: 1.75rem;
    font-weight: bold;
    padding: 1rem;
    display: flex;
    justify-content: center;
    align-content: center;
    flex-direction: column;
    color: #233036;
  }
   
  #contact-section {
    display: flex;
    flex-direction: column;
    justify-content: center;
    margin: 0;
    width: 100%;
    height: fit-content;
    min-height: 50vh;
    background-color: #233036;
    color: #69bee3;
  }
  
  #contact-section h2 {
    font-size: 6rem;
    padding: 3rem;
    margin: 0;
    text-align: center;
    color: #69bee3;
  }
  
  #contact-section-body {
    display: flex;
    padding-bottom: 4rem;
    flex-direction: row;
    justify-content: center;
    align-items: center;
  }

  .contact-tile{
    width: fit-content;    
    height:fit-content;
    margin: 3rem;
    padding: 3rem 5rem;
    border-radius: 1rem;
    background-color: #457b9d;
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: center;
    color: #233036;
    text-decoration: none;
    font-size: 2rem;
    box-shadow: 0.5rem 0.5rem 0.2rem #222222;
  }