/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
   HTML content. To learn how to do something, just try searching Google for questions like
   "how to change link color." */
   
   /*https://hexcolor.co/accessible-color-palette is a WCAG Contrast Checker and https://webaim.org/resources/contrastchecker/ is also a contrast checker */

/*RESET*/

  * {
    
  }

/*UTILITIES*/

  body {
    background: radial-gradient(343px at 46.3% 47.5%, rgb(242, 242, 242) 0%, rgb(241, 241, 241) 72.9%);
    color: #000;
    font-family: Verdana, Arial, Calibri, Century Gothic, Helvetica, Tahoma, sand-serif; /* https://accessibe.com/blog/knowledgebase/ada-compliant-fonts */ /* https://www.section508.gov/develop/fonts-typography/ */
    font-size: 1rem;
    line-height: 1.6;
    
/* Fonts to avoid
    You should generally avoid these fonts when designing for accessibility:

    Script fonts: Because script fonts emulate cursive handwriting, their letters are often not distinct from each other. This can cause difficulties for people with dyslexia, low vision, and some other disabilities

    Decorative fonts: Avoid fonts that prioritize decorative aesthetics over readability

    Thin or lightweight fonts: If a font is too thin or lightweight, it can be very difficult to read */
  }
  
/*Accessibility 

    https://www.w3schools.com/css//css_accessibility.asp

    https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/line-height
                                                  |
    Use a minimum value of 1.5 for line-height for main paragraph content. This will help people experiencing low vision conditions, as well as people with cognitive concerns such as Dyslexia. If the page is zoomed to increase the text size, using a unitless value ensures that the line height will scale proportionately.*/  

/*HEADING*/

  /*https://www.w3schools.com/css//css_accessibility.asp 
    
    3. Have Visible Focus Indicators
Always use the :focus pseudo-class to ensure that interactive elements (like links, buttons, input fields) have a clear visual focus style.

Using :focus will ensure that keyboard users and screen-readers understand which element is currently active.*/

  a:focus, button:focus, input:focus {
    outline: 2px solid #0E11A8;
  }

  nav {
    display: flex;
    flex-wrap: row;
    align-items: center;
    justify-content: center;
    padding: 0.5rem;
    gap: 0.5rem;
    background-color: #00FFBC;
    font-weight: strong; /* Pretty sure bold was changed to strong for the newer HTML coding*/
    border: 6px double #000000;
    border-radius: 20px;
  }
  
  aside {
    background-color: #00E0B0;
    color: #fff;
  }

  nav a {
    display: inline-block;
    min-width: 9rem;
    padding: 0.5rem;
    border-radius: 0.2rem;
    text-align: center;
    text-decoration: none;
    color: #0E11A8 
  }  
  
  
/*Hover and Focus states*/   /* https://www.w3.org/WAI/tutorials/menus/styling/ */
    
  nav a[aria-current='page'] {
    color: #0E11A8; 
    text-decoration: underline overline #0E11A8;
    text-decoration-style: wavy;
  }  
    
/*Active state (Indicate the menu item that was activated through clicking, tapping, or keyboard selection. Users can identify unintended activation, for instance when they have clicked on the wrong menu item.)*/
   
  nav a:active {
	  color: #0E11A8;
	  background-color: #00E0B0;
	  text-decoration: line-through;
  }
   
  nav ul, nav li {
    margin: 0 auto;
    padding: 0;
    list-style: none;
  } 
   
  nav ul {
    display: flex;
    width: 100%;
    text-align: center;
  } 
   
  nav li {
    display: flex;
    flex-direction: row;
    position: relative;
  } 
   

  
   
   
   
   
   
/* All elements with class=" " */   
   
/* All <li> elements with class=" " */   
   
   
   
   
   
   
   
/*I Suck So Much At Media queries right now, still trying to figure it out*/

  /*https://www.w3schools.com/css//css_accessibility.asp
  
    The CSS prefers-reduced-motion @media feature lets you check if a user has asked to reduce motion, such as animations or transitions.

    Some users have motion sensitivity and prefer websites with less animation. You can use this media query to turn off, or tone down animations and transitions for the users who has activated this setting on their computer:*/

   @media (prefers-reduced-motion: reduce) {
  * {
    animation: none !important;
    transition: none !important;
  }
}
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
    
    
  }