/* 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." */

@font-face { 
	font-family: "bombardier"; 
		url("./fonts/BOMBARD_.ttf") format("truetype"); 
	font-weight: normal;
	font-style: normal; 
	font-display: swap; 
}

h1 { font-family: "bombardier"; } 
h2 { font-family: "bombardier"; } 


body {
  background-color: #E9DA35;
  color: black;
  font-family: Verdana;
}

/* Header styling */
.site-header {
    background-color: #222;
    color: #fff;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 30px;
    border-bottom: 3px solid #ff00ff;
}

.header-title h1 {
    margin: 0;
    font-size: 1.5rem;
    font-family: "bombardier";
}

/* Navigation bar */
.navbar ul {
    list-style: none;
    display: flex;
    gap: 20px; /* Space between links */
    margin: 0;
    padding: 0;
}

.navbar li a {
    color: #fff;
    text-decoration: none;
    font-family: "bombardier";
    font-weight: bold;
    padding: 5px 10px;
    border: 1px solid transparent;
}

/* Hover effect */
.navbar li a:hover {
    background-color: #fff;
    color: #222;
    border: 1px solid #fff;
}

 /* Preloader CSS. Change the background color by swapping out #fff in the background property. You can also find more preloader icons here: https://samherbert.net/svg-loaders/  */
        #preloader {
        align-items: center;
        justify-content: center;
        width: 100%;
        display: flex;
        position: fixed;
        height: 100vh;
        left: 0;
        top: 0;
        background: #fff
          url("https://samherbert.net/svg-loaders/svg-loaders/spinning-circles.svg")
          no-repeat center;
        z-index: 9999;
    }