@charset "UTF-8";

/* Resetting default styles */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box; /* Ensures padding and border are included in the element's total width and height */
}

/* Styling the navigation bar */
nav {
  background-color: #000009; /* Background color of the navigation bar */
  list-style: none;
}

nav ul li {
  display: inline-block;
  padding: 0 auto;
  margin: 0;
}

nav a {
  font-size: 1.5em;
  float: left;
  color: white;
  margin: 0;
  padding: 15px 40px 15px 40px;
  text-decoration: none;
  font-weight: 300;
}

ul {
  margin: 0;
  padding: 0;
}

.logo {
  font-weight: bolder;
  font-size: 2em;
  padding: 0 auto;
  margin: 0;
  color: #DEFFF2; /* Color of the logo text */
}

/* Styling the page body */
body {
  background-color: #464F51; /* Background color of the page */
  color: white; /* Text color */
  font-family: "Roboto", sans-serif;
}

/* Styling the footer */
footer {
  background-color: rgba(0, 0, 0, 0.158); /* Background color */
  width: 100%; /* Full width */
  height: 6vh; /* Height of the footer */
}

footer p {
  width: fit-content; /* Adjust width as needed */
  font-weight: 300;
  margin: 0 auto; /* Center horizontally */
  padding: 10px 0 0 0; /* Padding */
}

/* Styling the video container */
.video-container {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh; /* Full height of the viewport */
}

/* Styling the video text */
.video-text {
  position: absolute;
  top: 20px; /* Adjust top position as needed */
  left: 0;
  right: 0;
  text-align: center;
  color: white; /* Optional: Change text color */
  font-size: 24px; /* Adjust font size as needed */
  z-index: 1; /* Ensure text appears above the video */
}

/* Styling the video */
.vid {
  width: 70%;
}

.vid iframe {
  display: block;
  margin: 0;
  width: 100%; /* Make the video fill its container */
  height: 60vh; /* Adjust video height as needed */
}