/* Set character encoding to UTF-8 */
@charset "UTF-8";

/* Import Google Fonts and normalize.css */
@import url("https://fonts.googleapis.com/css2?family=Lexend+Deca&family=Poppins&display=swap");
@import 'normalize.css';

/* Styles for the navigation bar (nav) */
nav {
  display: flex; /* Use flex layout for navigation bar */
  font-family: "Inter", sans-serif; /* Set font family for the navigation bar */
  height: fit-content; /* Set the height to fit the content */
  color: var(--global-black); /* Use CSS variable for text color */
  border-bottom: 1px solid #ccc; /* Add border to the bottom of the navigation bar */
  background-color: #f9f9f9; /* Use CSS variable for background color */
  gap: 2em; /* Set gap between grid items */
  padding-top: 8px; 
  padding-bottom: 8px;
  padding: 1.2vh 6vw; /* Set width padding for the navigation bar */
}

/* Styles for the logo-div inside the navigation bar */
nav .logo-div {
  /* grid-area: logo; Position logo-div in the grid */
  display: flex; /* Use flexbox layout for logo-div */
  align-items: center; /* Align items vertically in the center */
  justify-content: center; /* Align items horizontally in the center */
  position: relative; /* Set position to relative for absolute positioning */
  min-width: fit-content; /* Set minimum width to fit the content */
}

nav .navbar-links {
  display: flex;
  justify-content: space-between;
  flex-direction: row-reverse;
  padding-top: 8px;
  padding-bottom: 8px;
  position: relative;
  width: 100%;
  margin-right: auto;
}

/* Styles for the unordered list (menu) inside the navigation bar */
nav ul {
  list-style: none; /* Remove list-style bullets */
  font-size: 1.2em; /* Set font size for unordered list */  ;
  margin: 0; /* Remove default margin */
  padding: 0; /* Remove default padding */
  grid-area: menu; /* Position menu in the grid */
  display: flex; /* Use flexbox layout for menu */
  align-items: center; /* Align items vertically in the center */
  justify-content: space-around; /* Space items evenly around the container */
}

/* Styles for anchor elements inside list items in the navigation bar */
nav .nav-list>li>a {
  font-size: 1.2em; /* Set font size for anchor elements */
  background-color: #f9f9f9;
}

/* Styles for the profile-dropdown inside the navigation bar */
nav .profile-dropdown {
  grid-area: logout; /* Position profile-dropdown in the grid */
  display: flex; /* Use flexbox layout for profile-dropdown */
  flex-direction: row-reverse;
  justify-content: flex-end; /* Align items to the end of the container */
  align-items: center; /* Align items vertically in the center */
  position: relative; /* Set position to relative for absolute positioning */
  font-size: 12px; /* Set font size for profile-dropdown */
  background-color: #f9f9f9;
  background: #f9f9f9;
}

/* Styles for the unordered list inside the profile-dropdown */
nav .profile-dropdown>ul {
  height: 100%; /* Set height of the unordered list to 100% */
}

/* Styles for list items inside the unordered list in the profile-dropdown */
nav .profile-dropdown>ul>li {
  height: 100%; /* Set height of list items to 100% */
  display: flex; /* Use flexbox layout for list items */
  justify-content: center; /* Align items horizontally in the center */
  align-items: center; /* Align items vertically in the center */
  background-color: #f9f9f9; /* Use CSS variable for background color */
}

/* Styles for anchor elements inside list items in the profile-dropdown */
nav .profile-dropdown>ul>li>a {
  color: #08203e; /* Set color for anchor elements in the profile-dropdown */
  margin: 0 5px; /* Set margin for anchor elements */
  margin-left: 11px; /* Set left margin for anchor elements */
}

/* Styles for h1 element inside the navigation bar */
nav h1 {
  text-align: center; /* Center align text within h1 element */
  margin: 0; /* Remove default margin */
}

/* Styles for anchor elements inside h1 element in the navigation bar */
nav h1 a {
  font-size: 1em; /* Set font size for anchor elements inside h1 element */
}

/* Styles for nested unordered lists in the navigation bar */
nav ul {
  list-style: none; /* Remove list-style bullets */
  margin: 0; /* Remove default margin */
  padding: 0; /* Remove default padding */
  padding-top: 10px; /* Set top padding for the nested unordered list */
  grid-area: menu; /* Position nested unordered list in the grid */
  display: flex; /* Use flexbox layout for nested unordered list */
  align-items: center; /* Align items vertically in the center */
  justify-content: space-around; /* Space items evenly around the container */
}

/* Styles for list items in the navigation bar */
nav li {
  position: relative; /* Set position to relative for absolute positioning */
}

/* Styles for the nested unordered list when hovering over a list item */
nav li:hover ul {
  display: flex; /* Display the nested unordered list on hover */
  flex-wrap: wrap; /* Allow items to wrap within the container */
  flex-direction: column; /* Stack items vertically */
  justify-content: center; /* Align items vertically in the center */
  align-items: center; /* Align items horizontally in the center */
}

/* Styles for anchor elements and buttons in the navigation bar */
nav a,
nav button {
  text-align: center; /* Center align text within anchor elements and buttons */
  text-decoration: none; /* Remove default text decoration */
  font-weight: 500; /* Set font weight for anchor elements and buttons */
  font-size: 1.2em; /* Set font size for anchor elements and buttons */
  display: inline-block; /* Display anchor elements and buttons as inline-block elements */
  color: var(--global-black); /* Use CSS variable for text color */
}

/* Styles for nested unordered lists in the navigation bar */
nav ul ul {
  display: none; /* Hide nested unordered lists by default */
  position: absolute; /* Position nested unordered lists absolutely */
  top: calc(100% - 1px); /* Position nested unordered lists just below their parent list items */
  left: 0; /* Align nested unordered lists to the left */
  background-color: var(--global-white); /* Use CSS variable for background color */
  width: 100%; /* Set the width of nested unordered lists to 100% */
  z-index: 1; /* Set z-index to appear above other elements */
  border: var(--global-grey) 0.8px solid;
  border-radius: 4px; /* Add border radius to nested unordered lists */
}

/* Styles for list items in nested unordered lists */
nav ul ul li {
  height: 100%; /* Set height of list items in nested unordered lists to 100% */
  width: 100%; /* Set width of list items in nested unordered lists to 100% */
}

/* Styles for anchor elements in nested unordered lists when hovering over their parent list items */
nav ul li a:hover {
  color: var(--global-blue); /* Change text color on hover for anchor elements */
}

/* Styles for anchor elements in nested unordered lists */
nav ul ul li a {
  padding: 10px 10%; /* Set padding for anchor elements in nested unordered lists */
  display: inline-block; /* Display anchor elements as inline-block elements */
  font-size: medium; /* Set font size for anchor elements in nested unordered lists */
}

/* Styles for form element inside the navigation bar */
nav form {
  width: 100%; /* Set form width to 100% */
  height: 100%; /* Set form height to 100% */
}

/* Styles for button element inside the form in the navigation bar */
nav form button {
  border: none; /* Remove border for form buttons */
  background: none; /* Remove background for form buttons */
  color: rgb(236, 71, 71); /* Set text color for form buttons */
  cursor: pointer; /* Set cursor to pointer for form buttons */
  transition: color 0.4s ease-in-out; /* Add transition for color change */
  padding: 0; /* Remove default padding */
  font-size: medium; /* Set font size for form buttons */
  display: inline-block; /* Display form buttons as inline-block elements */
  padding: 10px 10%; /* Set padding for form buttons */
}

/* Styles for button element inside the form when hovering */
nav form button:hover {
  color: rgb(255, 57, 57); /* Change text color on hover for form buttons */
}

/* Styles for the logo-div inside the navigation bar */
nav .logo-div {
  grid-area: logo; /* Position logo-div in the grid */
}

/* Styles for the logo inside the logo-div */
nav .logo {
  color: var(--global-black); /* Set text color for the logo */
  font-weight: bold; /* Set font weight for the logo */
  font-size: 1.4em; /* Set font size for the logo */
}

/* Styles for the span element inside the logo-div */
nav .logo span {
  color: #2093df; /* Change text color for the superscript '³' */
}

/* Styles for the repo element */
nav .repo {
  font-weight: bold; /* Set font weight for the repo element */
  font-size: 1em; /* Set font size for the repo element */
}

/* Styles for the arrow element */
nav .arrow {
  display: inline-block; /* Display the arrow as an inline-block element */
  transition: transform 0.5s ease-in-out; /* Add transition for the transform property */
}