@font-face {
     font-family: 'Orbitron';
     src: URL('../fonts/Orbitron.ttf') format('truetype');
}

@font-face {
     font-family: 'Montserrat';
     src: URL('../fonts/Montserrat-Regular.ttf') format('truetype');
}

body {
     margin: 0;
     background-color: black;
     font-family: 'Montserrat';
     color: #c1c0d1;
     background-color: black;
     background-image: url('../img/sitebg.jpg');
     background-repeat: no-repeat;
     background-attachment: fixed;
     background-size: cover;
}

h1, h2, h3, h4, h5 {
     font-family: 'Orbitron';
     color: white;
}

 /* The navigation bar */
.navbar {
     overflow: hidden;
     background-color: rgb(32, 32, 32);
     position: fixed; /* Set the navbar to fixed position */
     top: 0; /* Position the navbar at the top of the page */
     width: 100%; /* Full width */
     border-bottom: 1px solid rgb(77, 75, 75);
     z-index: 1;
}

/* Links inside the navbar */
.navbar a {
     float: left;
     display: block;
     color: #d8d6d6;
     text-align: center;
     padding: 14px 16px;
     text-decoration: none;
     font-family: 'Orbitron';
     text-transform: uppercase;
     letter-spacing: 0.1em;
     border-right: 1px solid rgb(77, 75, 75);
}

/* Change background on mouse-over */
.navbar a:hover {
     color: yellow;
}

/* Main content */
.main {
     margin: 40px 15% 0px 15%; /* Add a top margin to avoid content overlay */
}

div#site-container {
     display: flex;
     flex-direction: column;
     min-height: 100vh;
}

footer {
     margin-top: auto;
     background-color: rgb(43, 43, 43);
     width: 100%; /* Full width */
     border-top: 1px solid rgb(56, 55, 55);
     overflow: hidden;
}

a {
     text-decoration: none;
     color: blue;
}

/* Responsive columns - smaller font-size on smaller screens */
@media screen and (max-width: 1800px) {
     body {
          font-size: 0.85vw;
     }
}

/* Responsive columns - smaller font-size on smaller screens */
@media screen and (max-width: 1300px) {
     body {
          font-size: 1vw;
     }
}

/* Responsive columns - smaller font-size on smaller screens */
@media screen and (max-width: 1000px) {
     body {
          font-size: 1.15vw;
     }
}

/* Responsive columns - smaller font-size on smaller screens */
@media screen and (max-width: 700px) {
     body {
          font-size: 2.5vw;
     }
}