:root{
    --text-color: rgb(20, 236, 92);
    --link-color: rgba(105, 156, 10, 0.735); /* so i don't have to memorize or keep going back to this*/
    --background-color: yellow;
    --box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}
*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: sans-serif;
}
body{
    background-size: cover;
    background-position: center top;
    background-repeat: no-repeat;
    min-height: 100vh;
}


.faq-container{
    max-width: 1200px;
    margin: 0 auto;
    background: rgba(255, 255, 255, 0.9);
    padding: 30px;
    border-radius: 15px;
    box-sizing: var(--box-shadow);
    margin-top: 50px;
}

.faq-header{
    font-size: 2.5em;
    color: var(--link-color);
    margin-bottom: 30px;
    text-align: center;
}

.faq-item{
    margin-bottom: 20px;
}

.faq-question{
    background-color: var(--link-color);
    color: white;
    padding: 15px;
    border: none;
    border-radius: 8px;
    width: 100%;
    text-align: left;
    font-size: 1.2em;
    cursor: pointer;
    transition: background-color 0.3 ease;
}
.faq-answer{
    display: none;
    padding: 15px;
    background-color: white;
    border: 2px solid var(--link-color);
    border-radius: 8px;
    margin-top: 10px;
}
.faq-answer p{
    color: #333;
    font-size: 1em;

}













/**Make sure to understand how the css class selectors here 
work with the child elements. Specifically, that child elements
in the html document do not write class and the css class. Rfer to navabr and navabr i**/

/* set the positioning of the navabr*/
.navbar{
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 1000;
    
  }
  
  /* apply css elements to the a tag (hyperlinks) */
  .navbar a{
    position: relative;
    color: white !important;
    text-decoration: none;
    display: inline-block;
    /** Margin adds space outside of it and and other elements**/
    padding: 10px;
    margin-right: 20px;
    cursor: pointer;
    z-index: 10;
  
  }
  
  .NA-list{
    margin-left: 500px;
    font-weight: bold;
    margin-top: 50%;
    font-size: 1.2rem;
    text-align: center;
  }
  
  
  .navbar .nav-link:hover{
    color: gold !important;
  }
  
  /* Apply css to the font awsome elements, remember they come in tags of i */
  .navbar i{
    position: relative;
    bottom: -15px;
  }
  
  /* apply css to search bar */
  .navbar input{
    position: relative !important;
    width: 100%;
    max-width: 410px;
    left: 20px;
    border-top-right-radius: 0px;
    border-bottom-right-radius: 0px;
  }
  
  /** This css is for the profile icon from font awsome **/
  #ProfileIcon{
    bottom: 0px;
  }
  
  /* apply css when hovering over a element */ 
  
  
  .navbar button{
    background-color: white;
  
  }
  .nav-link{
    cursor: pointer;
  }
  
  .navbar i{
    color: white;
  }
  
  /** The following css is for the W button and a message appearing when hovering over it **/
  
  .button-Container{
    position: relative;
    display: inline-block;
  }
  
  #MainButton{
    color: transparent !important;
    background-color: transparent !important;
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
  }
  
  
  
  .hover-message{
    opacity: 0; /** affect the transpaerncy or the clarity of the element**/
    visibility: hidden;
    background-color: rgb(8, 98, 8);
    color: white;
    padding: 10px 20px;
    position: absolute;
    top: 100%;
    left: 30px;
    transform: translateX(-50%);
    white-space: nowrap;
    transition: opacity 0.3s ease-in-out, visibility 0s linear 0S; 
    border-radius: 5px;
    cursor: pointer;
    width: 70px;
    
  }
  
  .hover-message:hover{
    color:gold;
  }
  .button-container:hover .hover-message{
    opacity: 1;
    visibility: visible;
    transition: opacity 0.3s ease-in-out, visibility 0s linear 0s;
  }
  
  #HomeIcon{
    position: absolute;
    left: 2px;
    top: 15px;
    font-size: 13px;
    
  
  }
  
  
  /** Under stand the difference between opacity and visibility
  They both revolve around how an element appears
  Opacity controls the transparency of an element (values 0-1)
  
  **/
  
  
  /** WSU text in the middle of the nav bar **/
  
  #NavText{
    position: relative;
    color: gold;
    text-align: center;
    width: 100%;
    top: -50px;
    left: 6px;
  }
  
  /** The css below is for the search icon on the right */
  #RightButton{
    position: relative  !important;
    border: 12px solid transparent !important; /** the thickness of the border **/
    border-radius: 0px !important; /** the corners of the border **/
    border-top-right-radius: 5px !important;
    border-bottom-right-radius: 5px  !important;
    background-color: gold; /** Color of button we use background color, otherwise color alone only affects the text color in the button **/
    cursor: pointer;
    right: -4px;
  }
  
  #RightButton:hover{
    background-color: goldenrod !important;
    color: white;
  }
  
  #searchicon{
    position: absolute;
    bottom: -3px;
    right: -1px;
    font-size: 19px;
    color: green
    
  }
  .navbar .form-control{
    z-index: 1000; /*Place search bar on top*/
    position: relative;
  }