/*
	style.css
*/

@font-face {
  font-family: 'PT Sans';
  src: url('/fonts/PTSans-Regular.woff2') format('woff2'),
       url('/fonts/PTSans-Regular.woff') format('woff');
  font-weight: 400;
  font-style: normal;
}

@font-face {
  font-family: 'PT Sans';
  src: url('/fonts/PTSans-Bold.woff2') format('woff2'),
       url('/fonts/PTSans-Bold.woff') format('woff');
  font-weight: 700;
  font-style: normal;
}

@font-face {
  font-family: 'PT Sans';
  src: url('/fonts/PTSans-Italic.woff2') format('woff2'),
       url('/fonts/PTSans-Italic.woff') format('woff');
  font-weight: 400;
  font-style: italic;
}

@font-face {
  font-family: 'PT Sans';
  src: url('/fonts/PTSans-BoldItalic.woff2') format('woff2'),
       url('/fonts/PTSans-BoldItalic.woff') format('woff');
  font-weight: 700;
  font-style: italic;
}

.logo { 
	font-family: "PT Sans", sans-serif;
  font-weight: bold;
  text-shadow: 0rem 0rem 2rem #ccc;
}
.logoinspired {
  background-color: #000;
  color: #fff;
}

body {
	margin: 0;
	padding: 0;
	font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;

}
/* --- Navbar --- */
    .navbar {
      background-color: #1f2937;
      color: white;
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 1rem;
      width: fit-content;
      position: fixed;
      top:1rem;
      right:1rem;
      border-radius: 0.5rem;
      z-index:9999;
      transition: top 0.4s ease-out;
      
    }

    .navbar .logo {
      font-size: 1.2rem;
      font-weight: bold;
    }

    .nav-links {
      display: none;
      flex-direction: column;
      gap: 1rem;
      margin: 1rem;
    }

    .nav-links a {
      color: white;
      text-decoration: none;
      font-size: 1rem;
    }

    .burger {
      cursor: pointer;
      display: flex;
      flex-direction: column;
      gap: 5px;
    }

    .burger div {
      width: 25px;
      height: 3px;
      background-color: white;
      transition: all 0.3s;
    }

    .nav-active {
      display: flex;
    }


	
#page {
	margin-left: auto;
	margin-right: auto;
	width: 100%;
	max-width: 1920px;
}

.spacer10 {
	height: 10vh;
}
.spacer25 {
	height: 25vh;
}

#triggerlazyload {
	height: 200vh;
}

#home {
  display: flex;
  justify-content: center; /* horizontal center */
  align-items: center;     /* vertical center */
  flex-direction: column;
  height: 100vh;           /* optional: makes container full screen height */
  

  background-size: cover;
  background-position: center;

}

.title {
  color: #fff;
  font-weight: bold;
  text-shadow: 0rem 0rem 2rem #000;
}

.subtitle {
  color: #fff;
  font-weight: bold;
  text-shadow: 0rem 0rem 2rem #000;
}

/* Media Queries */
/** Default */

#home {
	  background-image: url('images/output/480px/uk-france-night.webp');
}
.logo {
  font-size: 1rem;
  letter-spacing: 0.5rem;
}
.logoinspired {
  padding-left: 0.5rem;
}
.title {
  font-size: 4rem;
}
.subtitle {
  font-size: 1.25rem;
	text-align: center;
}

/** Select images based on width or height **/
@media (min-width: 481px), (min-height: 481px) {
  #home {
    background-image: url('images/output/768px/uk-france-night.webp');
  }
}


@media (min-width: 769px), (min-height: 769px) {
  #home {
    background-image: url('images/output/1024px/uk-france-night.webp');
  }

}

@media (min-width: 1025px), (min-height: 1025px) {
  #home {
    background-image: url('images/output/1440px/uk-france-night.webp');
  }

}

@media (min-width: 1441px), (min-height: 1441px) {
  #home {
    background-image: url('images/output/1920px/uk-france-night.webp');
  }

}

/** Adjust text on width only **/

@media (max-width: 1025px) {
	.logo {
	  font-size: 2.5rem;
	  letter-spacing: 1.25rem;
	}
	.logoinspired {
	  padding-left: 1.25rem;
	}
  .title {
    font-size: 3rem;
  }
  
  .subtitle {
    font-size: 2rem;
  }
}



@media (max-width: 769px) {
	.logo {
	  font-size: 2rem;
	  letter-spacing: 1rem;
	}
	.logoinspired {
	  padding-left: 1rem;
	}
  .title {
    font-size: 2.5rem;
  }
  
  .subtitle {
    font-size: 2rem;
  }
}

@media (max-width: 481px) {

	.logo {
	  font-size: 1.5rem;
	  letter-spacing: 0.5rem;
	}
	.logoinspired {
	  padding-left: 0.5rem;
	}
  .title {
    font-size: 4.5rem;
  }
  
  .subtitle {
    font-size: 1.4rem;
  }
}

@media (min-width: 1441px) {
	.logo {
	  font-size: 5rem;
	  letter-spacing: 2.5rem;
	}
	.logoinspired {
	  padding-left: 2.5rem;
	}
  .title {
    font-size: 6rem;
  }
  
  .subtitle {
    font-size: 3rem;
  }
}