:root {
  --clr-primary: #971717;
  --clr-secondary: #e0bb02;
  --clr-navbar: #f5f5f5;
  --clr-white: #fff;
  --clr-text: #333;
  --clr-background: #eee;
  --clr-backcover:   #efdd80;
}

@media (max-width: 21.25em) {
  .logo {
    width: 11rem;
  }
}

@media (min-width: 31.25em) and (max-width: 36em) {

}

@media (min-width: 48em) {
  .main__navbar {
    width: 66%;
  }

  .logo {
    width: 16rem;
  }

  .login__user {
    padding-right: 3rem;
  }

  .hamburger {
    padding-left: 3rem;
  }
}

@media (min-width: 62em) {
  .top__bar {
    position: fixed;
    top: .3125rem;
    z-index: 1000;

    width: 100%;
    height: 2rem;

    background-color: var(--clr-white);
  }

  .navbar {
    justify-content: space-around;

    top: 2.3125rem;

    border-top: .05rem solid transparent;

    background-color: var(--clr-backcover);
  }

  .navbar__logo {
    position: relative;

    width: auto;
    margin-left: 3rem;
    margin-top: -.75rem;
    border-bottom: .05rem solid transparent;

    background-color: transparent;
  }

  .main__navbar {
    width: 50%;
    margin-right: 3rem;
  } 

  .navbar__link {
    margin-right: 2rem;
  }

  .navbar__link:last-child {
    margin-right: 0;
  }

  .navbar__link .link__name {
    font-size: 1.125rem;
  }

  .navbar__link .navbar__icon {
    display: none;
  }

  .login__user {
    margin-top: -.875rem;
  }

  .login__icon {
    font-size: 1.5rem;
  }

  .hamburger {
    display: none;
  }

  .top__bar--list {
    display: flex;

    position: fixed;
    top: 0;
    right: 0;

    padding-top: .5rem;
    padding-right: 6rem;

    z-index: 100;
  }

  .top__bar--list .top__bar--item {
    margin-left: 1.5rem;
  }

  .top__bar--link {
    display: flex;
    flex-direction: row;
  }
}

@media (min-width: 75em) {

}