html {
  box-sizing: border-box;
}

:root {

  /* ! Font Colors */
  --clr-accent-400: hsl(12, 78%, 50%); 
  --clr-accent-100: hsl(12, 77%, 81%);

  --clr-primary-400: hsl(189, 94%, 53%);
  
  --clr-neutral-900: hsl(232, 12%, 13%);
  --clr-neutral-100: hsl(0, 0%, 100%);
  
  --clr-background-100: hsl(0, 10%, 88%);

  --ff-primary: font-family: 'Be Vietnam Pro', sans-serif;

  --ff-body: var(var(--ff-primary));
  --ff-accent: var(var(--ff-primary));

  --fw-regular: 400;
  --fw-semi-bold: 500;
  --fw-bold: 700;

  --fs-300: .8125rem;
  --fs-400: .875rem;
  --fs-500: .9375rem;
  --fs-600: 1rem;
  --fs-650: 1.77rem;
  --fs-700: 1.875rem;
  --fs-800: 2.5rem;
  --fs-900: 2.5rem;

  --fs-body: var(--fs-400);
  --fs-primary-heading: var(--fs-800);
  --fs-secondary-heading: var(--fs-700);
  --fs-nav: var(--fs-500);
  --fs-button: var(--fs-300);
}

@media (min-width: 50em) {
  :root {

    --fs-body: var(--fs-500);
    --fs-primary-heading: var(--fs-900);
    --fs-secondary-heading: var(--fs-800);
    
    --fs-nav: var(--fs-300);
  }
}

/* The Universal Selector */
*, /* All elements*/
*::before, /* All ::before pseudo-elements */
*::after {
  /* All ::after pseudo-elements */
  /* height & width will now include border & padding by default but can be overridden as needed */
  box-sizing: inherit;
}

/* utility classes */

.text-primary-400 {
  color: var(--clr-primary-400)
}
.text-accent-400 {
  color: var(--clr-primary-400)
}
.text-accent-100 {
  color: var(--clr-primary-100)
}
.text-neutral-100 {
  color: var(--clr-primary-100)
}
.text-neutral-900 {
  color: var(--clr-primary-900)
}
.bg-primary-400 {
  background-color: var(--clr-primary-400)
}
.bg-accent-400 {
  background-color: var(--clr-primary-400)
}
.bg-accent-100 {
  background-color: var(--clr-primary-100)
}
.bg-neutral-100 {
  background-color: var(--clr-primary-100)
}
.bg-neutral-900 {
  background-color: var(--clr-primary-900)
}

.fw-bold { font-weight: var(--fw-bold); }
.fw-semi-bold { font-weight: var(--fw-semi-bold); }
.fw-regular { font-weight: var(--fw-regular); }

.fs-primary-heading { font-weight: var(--fs-primary-heading); }
.fw-secondary-heading { font-weight: var(--fs-secondary-heading); }

.fs-300 { font-size: var(--fs-300);}
.fs-400 { font-size: var(--fs-400);}
.fs-500 { font-size: var(--fs-500);}


body {
  background-color: rgb(251, 250, 245);
  color: #f6f6f6;
  /* Use a system font, if none are available use any found sans-sarif font */
  font-family: 'Be Vietnam Pro', sans-serif;
  margin: 0;
  width: 100vw;
}

nav {
  background-color: #f6f6f6;
  color: #1a1a1a;
  display: flex;
  align-items: center;
  padding: 0px;
  min-height: 80px;
  padding: 0 1em;
  justify-content: center;
  width: 100vw;
}

main {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}

.logout-btn {
  margin-left: auto;
  padding-right: 1em;
}

.profile-pic {
  margin-left: auto;
  width: 3em;
  border-radius: 50%;
  margin-left: 1em;
}

.profile-first-name {
  font-size: --fs-200;
  text-decoration: none;
  color: var(--clr-primary-400);
  align-items: flex-end;
}

.nav-list {
  display: flex;
  font-size: var(--fs-600);
}

.nav-list > li {
  padding: 0 2.8em;
  list-style-type: none;
  text-decoration: none;
  font-size: var(--fs-600);
}

.nav-list > li > a{
  text-decoration: none; 
  font-size: var(--fs-600);
  color: var(--clr-neutral-900);
  font-weight: var(--fw-semi-bold);
}
.nav-list > li > a:hover{
  text-decoration: underline; 
  color: var(--clr-accent-400);
  cursor: pointer;

}

.logo-pic {
  text-decoration: none;
  font-size: var(--fs-700);
  color: var(--clr-accent-400);
}