@import url("https://fonts.googleapis.com/css2?family=Poppins&display=swap");



body, html {
  font-family: "Poppins";
  margin: 0;      
  padding: 0;     
  /* overflow: hidden;   */
  height: 100vh;}



/*============BACKGROUND=======*/


  #background {
    position: absolute;  /* Position the background absolutely */
    bottom: -20px;        /* Move the background further down (adjust this value) */
    left: 0;              /* Align the left to the left of the viewport */
    width: 100vw;         /* Set width to the full width of the viewport */
    z-index: -5;          /* Ensure the background stays behind content */
  }

  #background svg {
    width: 100vw;         /* Make the SVG fill the width of the viewport */
    height: auto;         /* Maintain aspect ratio */
    display: block;       /* Remove extra space below the SVG */

  }



  /*============Navbar=======*/

/* nav{
  background-color: rgb(248, 249, 250);
  box-shadow: 3px 3px 5px rgba(152, 160, 164, 0.1);

} */

nav button.nav-link {
  height: 50px;            /* Match nav li height exactly */
  padding: 0 30px;         /* Same padding as other nav links */
  margin-top: 3px;         /* Same margin */
  text-decoration: none;
  display: flex;
  align-items: center;
  color: rgb(8, 7, 7);
  background: none;        /* Remove any background */
  border: none;            /* Remove any border */
  /* cursor: pointer;        
  font-size: 16px;        
  box-sizing: border-box;   */
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

/* Hover effect */
.flashcardsBtn:hover {
  background-color: lightgrey;
  transform: translateY(-4px);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
}


nav {
  background-color: rgb(248, 249, 250);
  box-shadow: 3px 3px 10px rgba(152, 160, 164, 0.2);  /* Stronger shadow for depth */
  transition: box-shadow 0.3s ease, transform 0.3s ease; /* Smooth transition */
  font-size: 16px;
  z-index: 1000;
  position: sticky;
  top: 0;
}

nav ul {
  width: 100%;
  list-style: none;
  display: flex;
  justify-content: flex-end;
  align-items: center;
}

nav li{
  height: 50px;
}

nav a {
  height: 100%;
  padding: 0 30px;
  margin-top: 3px;
  text-decoration: none;
  display: flex;
  align-items: center;
  color: black;
  transition: transform 0.3s ease, box-shadow 0.3s ease; /* Smooth transition for hover */
}

/* Add 3D hover effect on the links */
nav a:hover {
  background-color: lightgrey;
  transform: translateY(-4px);  /* Lift the item slightly on hover */
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2); /* Add a shadow when hovered for depth */
}

/* Hover effect for the entire nav */
nav:hover {
  transform: translateY(-5px);  /* Raise the entire navbar on hover */
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.15);  /* Increase shadow depth */
}

nav li:first-child {   /* betta logo */
  margin-right: auto;
}

.sidebar {
  position: fixed; /* not absolute */
  z-index: 1050; /* raise it above everything else */
  top: 0;
  right: 0;
  height: 100vh;
  /* width: 270px; */
  background-color: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(10px);
  box-shadow: -10px 0 10px rgba(0,0,0,0.2);
  display: none; /* set to flex when visible */
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  overflow-y: auto;
}


/* padding 0 fixed the logo alignment issue */
.sidebar li, ul{      
  width: 100%;
  padding: 0;
}

.sidebar a{
  width: 100%;

}

.menu-button{
  display: none;
}


.account-dropdown {
  position: relative;
}

.account-dropdown .dropdown-content {
  display: none;
  position: absolute;
  top: 100%;
  background-color: #f9f9f9;
  min-width: 160px;
  z-index: 1;
  list-style: none;
  padding: 0;
  margin: 0;
  box-shadow: 0px 8px 16px rgba(0,0,0,0.2);
}

.account-dropdown .dropdown-content li a {
  display: block;
  padding: 10px;
  color: #333;
  text-decoration: none;
}

.account-dropdown:hover .dropdown-content {
  display: block;
}



@media(max-width: 800px){
  .hideOnMobile{
    display: none;
    position: relative;
    z-index: 999;
  }

.menu-button{
    display: block;
    position: relative;
    z-index: 999;
}}


@media(max-width: 400px){
  .sidebar{
    width: 100%;
    position: relative;
    z-index: 999;
  }}


/*=========Chatbot=======*/

/* .chat-wrapper {
  text-align: center;
  padding: 20px;
}

.button-group {
  margin-top: 20px;
}

.sendButton, .clearButton {
  padding: 10px 20px;
  font-size: 16px;
  background-color: #2d7b30;
  color: white;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  margin: 0 5px;
  margin-bottom: 10px;
}

.sendButton:hover, .clearButton:hover {
  background-color: #286e3f;
}

#chatbox {
  margin-top: 30px;
  width: 60%;
  max-width: 900px;
  height: 400px;
  margin: 0 auto;
  padding: 15px;
  background-color: #f0f0f0;
  border: 2px solid #ccc;
  border-radius: 10px;
  overflow-y: auto;

  box-shadow:
      inset -2px -2px 5px rgba(255, 255, 255, 0.7),
      inset 2px 2px 5px rgba(0, 0, 0, 0.1),
      5px 5px 15px rgba(0, 0, 0, 0.3);
}

#chatbox span {
  display: block;
  text-align: left;
  margin-bottom: 10px;
}

#chatbox strong {
  color: #2d7b30;
} */