/* This creates the default styling for everything */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  font-family: "Kumbh Sans", sans-serif;
}

#fa-computer {
  border-radius: 300px;
  height: 110%; /* Sets the image height to 80% of its container */
  width: auto; /* Sets the image width to 80% of its container */
  margin-right: 1rem; /* Adds a right margin of 0.5 rem to create space between the icon and adjacent text */
}

/* Is essentially creating the bar that is the navigation bar */
.navbar {
  background: #131313; /* Background color */
  height: 80px; /* Sets the height to 80 pixels */
  display: flex; /* Uses Flexbox for layout */
  justify-content: center; /* Centers items horizontally within the navigation bar */
  align-items: center; /* Centers items vertically within the navigation bar */
  font-size: 1.2rem; /* Sets the font size of the text within the navigation bar */
  position: sticky; /* Makes the navigation bar stick to the top of the viewport when scrolling */
  top: 0; /* Positions the sticky navigation bar at the top of the viewport */
  z-index: 999; /* Ensures the navigation bar appears above other elements */
}

/* Styles for the navigation bar container inside the navigation bar */
.navbar__container {
  display: flex; /* Uses Flexbox for layout */
  justify-content: space-between; /* Distributes items with space between them */
  height: 80px; /* Sets the height of the container to 80 pixels */
  z-index: 1; /* Sets the stacking order of the container */
  width: 100%; /* Sets the container width to 100% of its parent element */
  max-width: 1300px; /* Sets a maximum width for the container */
  margin-right: auto; /* Centers the container horizontally by setting the right margin to auto */
  margin-left: auto; /* Centers the container horizontally by setting the left margin to auto */
  padding-right: 50px; /* Adds 50 pixels of padding to the right side */
  padding-left: 50px; /* Adds 50 pixels of padding to the left side */
}

/* Styles for the navigation bar logo/title */
#navbar__logo {
  background-color: #1721ec; /* Sets a background color (not visible due to background image and clipping) */
  background-image: linear-gradient(
    to top,
    #ffffff 5%,
    #ffffff 100%
  ); /* Applies a gradient background image */
  background-size: 100%; /* Ensures the background image covers the entire element */
  -webkit-background-clip: text; /* Clips the background to the foreground text for WebKit browsers */
  -moz-background-clip: text; /* Clips the background to the foreground text for Mozilla browsers */
  -webkit-text-fill-color: transparent; /* Makes the text color transparent for WebKit browsers */
  -moz-text-fill-color: transparent; /* Makes the text color transparent for Mozilla browsers */
  display: flex; /* Uses Flexbox for layout */
  align-items: center; /* Centers items vertically within the logo */
  cursor: pointer; /* Changes the cursor to a pointer on hover, indicating it is clickable */
  text-decoration: none; /* Removes any text decoration (like underlines) */
  font-size: 2rem; /* Sets the font size of the text to 2 rem units */
}

/* Increase size effect on logo*/
#navbar__logo:hover {
  /* Scale the element slightly */
  transform: scale(1.05);
}

/* Styles for the computer icon image */
#logo-photo {
  height: 60%; /* Sets the image height to 80% of its container */
  width: auto; /* Sets the image width to 80% of its container */
  margin-right: 1rem; /* Adds a right margin of 0.5 rem to create space between the icon and adjacent text */
}

/* Styles for the navigation menu, or the other items in the navigation bar */
.navbar__menu {
  display: flex; /* Uses Flexbox for layout */
  align-items: center; /* Centers items vertically within the menu */
  list-style: none; /* Removes default list styling (bullets) */
  text-align: center; /* Centers text within the menu items */
}

/* Styles for individual navigation items */
.navbar__item {
  height: 80px; /* Sets the height of each navigation item to 80 pixels */
}

/* Styles for the navigation links */
.navbar__links {
  color: #fff; /* Sets the text color to white */
  display: flex; /* Uses Flexbox for layout */
  align-items: center; /* Centers items vertically within the link */
  justify-content: center; /* Centers items horizontally within the link */
  text-decoration: none; /* Removes any text decoration (like underlines) */
  padding: 0 1rem; /* Adds padding: 0 on top and bottom, 1 rem on left and right */
  height: 100%; /* Sets the height of the link to 100% of its parent element */
}

/* Styles for the navigation button container */
.navbar__btn {
  display: flex; /* Uses Flexbox for layout */
  justify-content: center; /* Centers items horizontally within the button container */
  align-items: center; /* Centers items vertically within the button container */
  padding: 0 1rem; /* Adds padding: 0 on top and bottom, 1 rem on left and right */
  width: 100%; /* Sets the width of the button container to 100% of its parent element */
}

/* Styles for the button on hover */
.button:hover {
  background: #0800a0; /* Changes the background color of the button to blue on hover */
  transition: all 0.3s ease; /* Adds a transition effect for all properties over 0.3 seconds with an ease timing function */
}

/* Styles for the button */
.button {
  display: flex; /* Uses Flexbox for layout */
  justify-content: center; /* Centers items horizontally within the button */
  align-items: center; /* Centers items vertically within the button */
  text-decoration: none; /* Removes any text decoration (like underlines) */
  padding: 10px 20px; /* Adds padding: 10px top and bottom, 20px left and right */
  height: 100%; /* Sets the height of the button to 100% of its parent element */
  width: 100%; /* Sets the width of the button to 100% of its parent element */
  border: none; /* Removes any default border from the button */
  outline: none; /* Removes the default outline that browsers apply to focused elements */
  border-radius: 4px; /* Rounds the corners of the button with a radius of 4 pixels */
  background: #141414; /* Sets the background color of the button to a shade of orange-red */
  color: #ffffff; /* Sets the text color within the button to white */
}

/* Styles for the navigation links on hover */
.navbar__links:hover {
  color: #0800a0; /* Changes the text color of the navigation links to orange-red on hover */
  transition: all 0.3s ease; /* Adds a transition effect for all properties over 0.3 seconds with an ease timing function */
}

/* Media query for screens with a maximum width of 960px */
@media screen and (max-width: 960px) {
  /* Styles for the container inside the navigation bar */
  .navbar__container {
    display: flex; /* Uses Flexbox for layout */
    justify-content: space-between; /* Distributes items with space between them */
    height: 80px; /* Sets the height of the container to 80 pixels */
    z-index: 1; /* Sets the stacking order of the container */
    width: 100%; /* Sets the container width to 100% of its parent element */
    max-width: 1300px; /* Sets a maximum width for the container */
    padding: 0; /* Removes any padding from the container */
  }

  /* Styles for the navigation menu */
  .navbar__menu {
    display: grid; /* Uses Grid layout */
    grid-template-columns: auto; /* Defines one column with auto width */
    margin: 0; /* Removes any margin from the menu */
    width: 100%; /* Sets the menu width to 100% of its parent element */
    position: absolute; /* Positions the menu absolutely */
    top: -1000px; /* Moves the menu off-screen */
    opacity: 1; /* Sets the opacity of the menu */
    transition: all 0.5s ease; /* Adds a transition effect for all properties over 0.5 seconds with an ease timing function */
    height: 50vh; /* Sets the menu height to 50% of the viewport height */
    z-index: -1; /* Places the menu behind other elements */
  }

  /* Styles for the navigation menu when active */
  .navbar__menu.active {
    background: #131313; /* Sets the background color of the menu */
    top: 100%; /* Positions the menu below the navbar */
    opacity: 1; /* Ensures the menu is fully opaque */
    transition: all 0.5s ease; /* Adds a transition effect for all properties over 0.5 seconds with an ease timing function */
    z-index: 99; /* Brings the menu to the front */
    height: 50vh; /* Sets the menu height to 50% of the viewport height */
    font-size: 1.6rem; /* Sets the font size of the menu items */
  }

  /* Styles for the navigation bar logo */
  #navbar__logo {
    padding-left: 25px;
    font-size: 1.5rem; /* Adds padding to the left side */
  }

  /* Styles for the bars in the mobile menu toggle */
  .navbar__toggle .bar {
    width: 25px; /* Sets the width of the bars */
    height: 3px; /* Sets the height of the bars */
    margin: 5px auto; /* Adds vertical margin and centers horizontally */
    transition: all 0.3s ease-in-out; /* Adds a transition effect for all properties over 0.3 seconds with an ease-in-out timing function */
    background: #fff; /* Sets the background color of the bars to white */
  }

  /* Styles for individual navigation items */
  .navbar__item {
    width: 100%; /* Sets the width of each navigation item to 100% of its parent element */
  }

  /* Styles for the navigation links */
  .navbar__links {
    text-align: center; /* Centers text within the link */
    padding: 2rem; /* Adds padding to the link */
    width: 100%; /* Sets the link width to 100% of its parent element */
    display: table; /* Changes the display property to table */
  }

  /* Styles for the navigation button container */
  .navbar__btn {
    padding-bottom: 2rem; /* Adds padding to the bottom */
  }

  /* Styles for the button */
  .button {
    display: flex; /* Uses Flexbox for layout */
    justify-content: center; /* Centers items horizontally within the button */
    align-items: center; /* Centers items vertically within the button */
    width: 80%; /* Sets the width of the button to 80% of its parent element */
    height: 80px; /* Sets the height of the button to 80 pixels */
    margin: 0; /* Removes any margin from the button */
  }

  /* Styles for the mobile menu */
  #mobile-menu {
    position: absolute; /* Positions the menu absolutely */
    top: 20%; /* Positions the menu 20% from the top */
    right: 5%; /* Positions the menu 5% from the right */
    transform: translate(5%, 20%); /* Translates the menu position */
  }

  /* Styles for the bars in the mobile menu toggle */
  .navbar__toggle .bar {
    display: block; /* Changes the display property to block */
    cursor: pointer; /* Changes the cursor to a pointer on hover */
  }

  /* Styles for the second bar when the menu is active */
  #mobile-menu.is-active .bar:nth-child(2) {
    opacity: 0; /* Makes the second bar invisible */
  }

  /* Styles for the first bar when the menu is active */
  #mobile-menu.is-active .bar:nth-child(1) {
    transform: translateY(8px) rotate(45deg); /* Moves the first bar and rotates it to form an "X" shape */
  }

  /* Styles for the third bar when the menu is active */
  #mobile-menu.is-active .bar:nth-child(3) {
    transform: translateY(-8px) rotate(-45deg); /* Moves the third bar and rotates it to form an "X" shape */
  }
}

.main {
  background-color: #131313;
}

h1 {
  text-align: center;
  font-size: 4rem;
  background-color: #0800a0;
  background-image: linear-gradient(-20deg, #0800a0 0%, #21d4fd 100%);
  background-size: 100%;
  -webkit-background-clip: text;
  -moz-background-clip: text;
  -webkit-text-fill-color: transparent;
  -moz-text-fill-color: transparent;
}

.timeline-date {
  text-align: left;
  font-size: 2rem;
  background-color: #0800a0;
  background-image: linear-gradient(-20deg, #0800a0 0%, #21d4fd 100%);
  background-size: 100%;
  -webkit-background-clip: text;
  -moz-background-clip: text;
  -webkit-text-fill-color: transparent;
  -moz-text-fill-color: transparent;
}

body {
  font-family: Arial, sans-serif;
  margin: 0;
  padding: 0;
  background-color: #131313;
}

.timeline-container {
  max-width: 800px;
  margin: 20px auto;
  padding: 20px;
  background-color: #3b3b3b;
  border-radius: 8px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

.timeline {
  position: relative;
  padding: 20px 0;
  margin: 20px 0;
}

.timeline::before {
  content: "";
  position: absolute;
  left: 50%;
  width: 2px;
  height: 100%;
  background-color: #131313;
  transform: translateX(-50%);
}

.timeline-item {
  position: relative;
  margin: 20px 0;
  width: 50%;
  padding-left: 30px;
  padding-right: 30px;
}

.timeline-item:nth-child(odd) {
  left: 0;
}

.timeline-item:nth-child(even) {
  left: 50%;
}

.timeline-item::before {
  content: "";
  position: absolute;
  top: 20px;
  left: -9px;
  width: 18px;
  height: 18px;
  background-color: #131313;
  border: 2px solid #ddd;
  border-radius: 50%;
  z-index: 1;
}

.timeline-date {
  font-weight: bold;
  margin-bottom: 10px;
  color: #ddd;
}

.timeline-content {
  background-color: #131313;
  padding: 15px;
  border-radius: 8px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

.timeline-content h3 {
  margin-top: 0;
  color: #ffffff;
}

.timeline-content p {
  margin: 5px 0;
  color: #ffffff;
}

/* Footer CSS */
.footer__container {
  background-color: #131313;
  padding: 10rem 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

#footer__logo {
  color: #ffffff;
  display: flex;
  align-items: center;
  cursor: pointer;
  text-decoration: none;
  font-size: 2rem;
  position: 10 0;
}

#footer-picture {
  height: 60%; /* Sets the image height to 70% of its container */
  width: auto; /* Ensures the width is proportional to the height */
  margin-right: 1rem;
  max-width: 100px; /* Optional: Limits the maximum width */
  border-radius: 8px; /* Adjust the radius as needed */
}

#footer__logo:hover {
  transform: scale(1.05);
}

.footer__link--wrapper {
  display: flex;
}

#footer-picture {
  height: auto; /* Sets the image height to 70% of its container */
  width: auto; /* Ensures the width is proportional to the height */
  margin-right: 1rem;
  max-width: 200px; /* Optional: Limits the maximum width */
  border-radius: 8px; /* Adjust the radius as needed */
}

.footer__link--items {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  margin: 20px;
  text-align: left;
  width: 200px;
}

.footer__link--items > h2 {
  color: #fff;
  margin-bottom: 20px;
}

.footer__link--items a {
  color: #fff;
  text-decoration: none;
  margin-bottom: 0.5rem;
}

/* Social Icons */
.social__icon--link {
  color: #fff;
  font-size: 24px;
}

.social__media {
  max-width: 1000px;
  width: 100%;
}

.social__media--wrap {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 90%;
  max-width: 1000px;
  margin: 40px auto 0 auto;
}

.social__icons {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 240px;
}

.social__logo {
  color: #fff;
  justify-self: start;
  margin-left: 20px;
  cursor: pointer;
  text-decoration: none;
  font-size: 2rem;
  display: flex;
  align-items: center;
  margin-bottom: 16px;
}

.website__rights {
  color: #fff;
}

@media screen and (max-width: 820px) {
  .footer__links {
    padding-top: 2rem;
  }

  #footer__logo {
    margin-bottom: 2rem;
  }

  .website__rights {
    margin-bottom: 2rem;
  }

  .footer__link--wrapper {
    flex-direction: column;
  }

  .social__media--wrap {
    flex-direction: column;
  }
}

@media screen and (max-width: 480px) {
  .footer__link--items {
    margin: 0;
    padding: 10px;
    width: 100%;
  }
}