/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
   HTML content. To learn how to do something, just try searching Google for questions like
   "how to change link color." */
   
   .fontdiner-swanky-regular {
  font-family: "Fontdiner Swanky", serif;
  font-weight: 400;
  font-style: normal;
}

  
* {
  margin: 0;
padding: 0;
}

 body {
  background-color: gray;
  color: black;
  font-family: helvetica;
  padding: 0px;
   min-height: 100vh;
   height: auto;
   display: grid;
    grid-template-rows: auto 1fr auto; 
    
    /* BG Image */
    
      background-image: url("sky-compressed.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-attachment: fixed;
  
}

main {
   background-color: white;
  max-width: 900px;
      /* Controls width */
    margin: 0px auto;      /* Centers horizontally */
    padding: 40px;          /* Space inside box */
  /*border-radius: 8px;     /* Optional rounded corners */
  /*box-shadow: 0 0 15px rgba(0,0,0,0.2); /* Optional shadow */
}
  
.header {
  max-width: 100%;
  height: 12vh;
  background: white;
 display: flex;
  align-items: center;
  justify-content: center;
}


nav {
  max-width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 30px 0px;
}

nav ul li {
  display: inline-block;
  list-style: none;
  font-size: clamp(0.50rem, calc(0.318rem + 1.818vw), 2.00rem);
  margin: 0px 0px 0px 70px;
  
}

nav ul li a {
  text-decoration: none;
  color: black;
  margin: 1vh 2vh;
  font-family: "Fontdiner Swanky", sans-serif;
}

.center-text {
  text-align: center;
  
}



footer {
  color: white;
 text-align: center;
 padding: 10px 0px;
}
  
  .footer-box {
  max-width: 100%;
  height: 50px;
  background: blue;
  }