@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@200;400;600;800&family=Lato:wght@400&family=Roboto:wght@100&display=swap');

html {
  height: 100%;
}

* {
  box-sizing: border-box;
}

body {
    display: grid;
    grid-template-rows: 3.5rem auto fit-content(8rem) ;
    grid-template-areas: "header"
                         "main"
                         "footer";
    padding-top: 0;
    height: 100%;
    margin: 0;
}
.main-header {
  display: flex;
  width: 100%;
  justify-content: space-between;
  align-items: center;
  padding: 0 0.3rem;
  font-family: 'Orbitron', sans-serif;
  background-color: rgb(34, 33, 33);
  position: sticky;
  z-index: 30;
}

.main-nav {
  display: grid;
  grid-template-columns: repeat(24,1fr);
  grid-template-areas: "header two three four five six seven admin grade message school special logout userinfo userinfo userinfo userinfo eighteen nineteen twenty twentyone twentytwo twentythree twentyfour";
  width: 100%;
  z-index: 30;
}

.main-nav__dropdown {
  display: none;
  flex-direction: column;
  position: absolute;
  z-index: -10;
}

.open {
  display: flex !important;
  
}

.open-mobile {
  opacity: 1 !important;
  display: flex !important;
  
}

.backdrop-visible {
  display: flex !important;
}


.database-dropdown__container {
    background-color: #790202;
    padding: 1rem;
    border: 3px ridge #8e0404;
}

.tourism-dropdown__container {
    background-color: #44447e;
    padding: 1rem;
    border: 3px ridge #242442;
}

.nativas-dropdown__container {
    background-color: #791771;
    padding: 1rem;
    border: 3px ridge #63135d;
}

.database-dropdown__container a,
.tourism-dropdown__container a,
.nativas-dropdown__container a {
  display: flex;
  color: #ecebeb;
  text-shadow: 1px 1px #353434;
  width: 100%;
  font-size: 1.2rem;
}

.database-dropdown__container a:hover,
.database-dropdown__container a:active,
.tourism-dropdown__container a:hover,
.tourism-dropdown__container a:active,
.nativas-dropdown__container a:hover,
.nativas-dropdown__container a:active {
    color: white;
}

.dropdown-divider {
  height: 1px;
  width: 80%;
  background-color: black;
}

main {
  grid-area: main;
  margin-top: 0;
}

.nav-anchor:active,
.nav-anchor:hover {
  color: white;
  text-decoration: none;
}


.backdrop {
  display: none;
  position: fixed;
  opacity: 1;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(0, 0, 0, 0.5);
  transition: opacity 0.2s linear;
  z-index: 20;
}
.backdrop-2 {
  display: none;
  position: fixed;
  opacity: 1;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: #0717f380;
  transition: opacity 0.2s linear;
  z-index: 30;
}

.database-grid {
  grid-area: grade;
}

.main-footer {
  display: grid;
  grid-area: footer;
  background: black;
  padding: 0;
  margin: 0;
  list-style: none;
  font-family: 'Lato', sans-serif;
  bottom: 0;
  width: 100%;
  z-index: 30;
}

.main-footer__links {
  display: flex;
  flex-direction: column;
  list-style: none;
  align-items: center;
  padding: 0;
  margin: 0;
  color: rgba(255, 255, 255, 0.616);
}

.main-footer__item {
  padding: 0.2rem 0;
  font-size: 0.8rem;
  font-family: "Barlow Condensed";
}

.main-footer__item a {
  color: #d6d6d6;
}

.main-footer__item a:hover,
.main-footer__item a:active {
  color: white;
  text-decoration: none;
}

.toggle-button {
  width: 3rem;
  background: transparent;
  border: 1px solid #777777;
  cursor: pointer;
  padding-top: 0;
  padding-bottom: 0;
  vertical-align: middle;
  border-radius: 5px;
}

.toggle-button__bar {
  width: 100%;
  height: 0.2rem;
  background: #777777;
  display: block;
  margin: 0.6rem 0;
}

.main-nav__brand-icon {
  display: none;
}

.nav-user__bar {
  display: none;
}

.database-grid {
  display: none;
}

.tourism-grid {
  display: none;
}

.nativas-grid {
  display: none;
}

.recycle-grid {
  display: none;
}
.nav-bar__logout {
  display: none;
}

.nav-bar__login {
  display: none;
}

.main-nav__brand-icon img:hover,
.main-nav__brand-icon img:active {
  outline: auto;
}

.bigtext-container {
  display:flex;
  font-family: inherit;
  justify-content: center;
  width: 100%;
  margin: 0;
  border: 0;
  text-align: center;
}

.bigtext-title {
  display: flex;
  color: #fafcee;
  border: 1px inset #2a2a2b;
  padding: 0.4rem 0;
  width: 100%;
  justify-content: center;
  align-items: center;
  font-size: 1.1rem;
  text-shadow: 1px 1px #353434;
}
.admin-icon {
  display: flex;
  font-size: 1.5rem;
  height: 2.1rem;
  width: 1.5rem;
  text-decoration: none !important;
  line-height: 2rem !important;
  color: #c0d406;
  text-shadow:
   -1px -1px 0 #638601,  
    1px -1px 0 #638601,
    -1px 1px 0 #638601,
     1px 1px 0 #638601;
}

.nav-admin {
  background-color: #bdc258;
  border: 3px inset #727a39 ;
  grid-area: userinfo;
}

.nav-admin span {
  background-color: #544f22;
  color: #e3d982;
  border: 2px dotted #928c52;
}

.nav-student {
  background-color: #6e91b3;
  border: 3px inset #5563be ;
}

.nav-student span {
  background-color: #0f2197;
  color: #9cb6d1;
  border: 2px dotted rgb(90, 90, 144);
}


.teacher-container {
  color: #2f4f2c;
}

.student-container {
  color: #0f2197;
}

.student-username {
  background-color: #0f2197;
  color: #9cb6d1;
}

.student-user__type {
  border-top: 1px solid #0f2197;
}

.nav-teacher {
  background-color: #70cc4e;
  border: 3px inset #427441 ;
}

.nav-teacher span {
  background-color: #2f4f2c;
  color: #85e761;
  border: 2px dotted #529254;
}

.mobile-nav {
  display: none;
  position: fixed;
  flex-direction: column;
  opacity: 1 !important;
  background-color: #292828;
  height: 100vh;
  width: 50vw;
  padding: 3rem 0;
  border-right: 1px solid #aeaefa;
  z-index: 25;
}

.mobile-brand img {
  border: 10px outset rgb(72, 72, 72);
    width: 100%;
    height: auto;
    border-radius: 10px;
  }

.mobile-brand {
  display: flex;
  width: 100%;
  justify-content: center;
  align-items: center;
  background-color: #101010;
  color: #d3d3d3;
  padding-top: 0.5rem;
  font-size: 1.4rem;
  border-bottom: 2px inset black;
  font-weight: 800;
}

.mobile-username__container {
  display: flex;
  width: 100%;
  padding: 0.2rem 0 0.5rem 0;
}

.mobile-icon__container {
  display: flex;
  width: 30%;
  justify-content: center;
}

.mobile-info__container {
  display: flex;
  width: 70%;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.mobile-username__icon {
  display: flex !important;
  width: 80%;
  justify-content: center;
  align-items: center;
  font-size: 1.4rem;
  border-radius: 5px;
  margin: 0.2rem;
  box-shadow: 2px 2px 3px 2px rgba(0,0,0,0.3);
  text-shadow: 1px 1px #353434;
}

.mobile-username {
  display: flex;
  width: 90%;
  justify-content: center;
  margin: 0.2rem auto;
  border-radius: 5px;
  font-weight: 600;
}

.mobile-user__type {
  display: flex;
  width: 90%;
  justify-content: center;
  font-size: 0.8rem;
  margin: 0 auto;
  font-style: italic;
  font-size: 0.75rem;
}

.mobile-username:hover,
.mobile-username:active {
  text-decoration: none;
  color: white;
  width: 100%;
}

.mobile-admin__container {
  background-color: #bdc258;
  border: 3px outset rgb(106, 116, 2);
}


.mobile-teacher__container {
  background-color: #70cc4e;
  border: 3px inset #427441;
}

.mobile-student__container {
  background-color: #6e91b3;
  border: 3px inset #5563be ;
}

.mobile-usertype__teacher {
  border-top: 1px solid #2f4f2c;
  color: #223c20;
}

.mobile-usertype__student {
  border-top: 1px solid #0f2197; 
  color: #0b1765;
}

.mobile-icon__admin {
  background-color: #5f7003;
  color: #e3d982;
  border: 2px dotted #728603(90, 90, 144);
}

.mobile-icon__teacher {
  background-color: #2f4f2c;
  color: #85e761;
  border: 2px dotted #529254(90, 90, 144);
}

.mobile-icon__student {
  background-color: #0f2197;
  color: #9cb6d1;
  border: 2px dotted rgb(90, 90, 144);
}

.mobile-nav__bar {
  display: flex;
  flex-direction: column;
  background-color: #383838;;
  list-style: none;
  margin: 0 auto;
  padding: 0;
  height: 100%;
  width: 100%;
}

.mobile-nav__item {
  display:flex;
  margin: 0 0.5rem;
}

.mobile-nav__a {
  display: flex;
  justify-content: center;
  align-items: center;
  color: #d6d6d6;
  text-align:center;
  width: 100%;
  padding: 0.5rem 0 0.5rem 1rem;
  margin: 0.3rem auto;
  border: 2px outset #043a31;
  text-shadow: 1px 1px #353434;
}

.mobile-menu__icons {
  display: flex !important;
  justify-content: center;
  align-items: center;
  margin-right: 0.5rem;
}
.mobile-database__button {
    background-color: #8e0404;
    color: #e3e1e1;
    border: 2px outset #700303;
}
.mobile-tourism__button {
    background-color: #213696;
    color: #e3e1e1;
    border: 2px outset #182769;
}

.mobile-nativas__button {
    background-color: #901b86;
    color: #e3e1e1;
    border: 2px outset #63135d;
}

.mobile-nativas__button:active,
.mobile-nativas__button:hover {
    background-color: #ab219f;
    color: white;
    text-decoration: none;
}

.mobile-logout__button {
    background-color: #a61717;
    color: #e3e1e1;
    border: 2px outset #63135d;
}

.mobile-logout__button:active,
.mobile-logout__button:hover {
    background-color: #c71d1d;
    color: white;
    text-decoration: none;
}

.mobile-login__button {
    background-color: #035f0f;
    color: #e3e1e1;
    border: 2px outset #63135d;
}

.mobile-login__button:active,
.mobile-login__button:hover {
    background-color: #058316;
    color: white;
    text-decoration: none;
}

/* .mobile-recycle__button {
    background-color: #124f01;
    color: #e3e1e1;
    border: 2px outset #0c3701;
} */

.mobile-dropdown {
  display: none;
  flex-direction: column;
  align-items: center;
  right: 0;
  top: 30%;
  position: fixed;
  padding: 1.2rem 0 0.8rem 0; ;
  width: 50vw;
  z-index: 40;
}

.mobile-dropdown h5,
.mobile-dropdown a {
  color: #d6d6d6;
  text-shadow: 1px 1px rgb(70, 70, 70);
}

.mobile-dropdown h5:hover,
.mobile-dropdown a:hover,
.mobile-dropdown h5:active,
.mobile-dropdown a:active {
  color: white;
  text-decoration: none;
}

.mobile-dropdown a {
  font-size: 0.8rem;
}

.mobile-dropdown__database {
  background-color: #8e0404;
  border: 3px ridge #690303;
}

.mobile-dropdown__tourism {
  background-color: #213696;
  border: 3px ridge #19286c;
}

.mobile-dropdown__nativas {
  background-color: #901b86;
  border: 3px ridge #63135d;
}

@media (min-width: 50rem) {
    .mobile-nav {
      display: none;
    }
    .bigtext-title {
        font-size: 1.8rem;
    }
    .toggle-button {
      display: none;
    }
    .main-nav {
      display: grid;
      grid-template-columns: repeat(24,1fr);
      grid-template-areas: "header two three four five admin admin database database  tourism tourism nativas nativas recycle recycle userinfo userinfo userinfo userinfo userinfo userinfo logout logout login login";
      width: 100%;
      z-index: 30;
    }
    .main-nav__brand-icon {
      display: flex;
      justify-content: flex-start;
      align-items: center;
      grid-area: header;
      position: absolute;
      top: 0;
    }
    .main-nav__brand-icon img {
      display: flex;
      width: 6rem;
      height: 6rem;
      border: 5px outset #575656;
      border-radius: 50%;
      background-color: rgb(56, 56, 56);
      margin-top: 0rem;
      z-index: 2;
    }
    .main-nav__brand-icon img:hover,
    .main-nav__brand-icon img:active {
      outline: auto;
    }

    .nav-user__bar span {
      display: flex !important;
      width: 25%;
      height: 90%;
      justify-content: center;
      align-items: center;
      font-size: 1.6rem;
      border-radius: 5px;
      margin: 0 0.5rem;
      text-shadow: 2px 2px #353434;
    }
    .user-container {
      display: flex;
      flex-direction: column;
      width: 75%;
      margin: 0;
      justify-content: center;
      align-items: center;
      font-size: 1.2rem;
    }

    .user-username {
      display: flex;
      margin: 0 auto;
      justify-content: center;
      align-items: center;
      font-size: 1rem;
      font-weight: 400;
      width: 90%;
      margin: 0.2rem auto;
      border-radius: 5px;
    }
    
    .user-user__type {
      display: flex;
      margin: 0 auto;
      width: 90%;
      justify-content: center;
      font-size: 0.7rem;
    }
    
    .user-username {
      font-size: 0.8rem;
    }

    .admin-container {
      color: #3c3817;
    }

    .admin-username {
      background-color: #3c3817;
      color: #e3d982;
    }

    .admin-user__type {
      border-top: 1px solid #544f22; 
      margin: 0 auto;
    }
    .database-grid {
      grid-area: database;
      display: flex;
      font-size: 2rem;
    }

    .tourism-grid {
      grid-area: tourism;
      display: flex;
      font-size: 2rem;
    }

    .nativas-grid {
      grid-area: nativas;
      display: flex;
      font-size: 2rem;
    }

    .recycle-grid {
      grid-area: recycle;
      display: flex;
      font-size: 2rem;
    }
    .nav-user__bar {
      display: flex;
      width: 100%;
      align-items: center;
      grid-area: userinfo;
      border: 3px outset grey;
    }
    .nav-user__bar span {
      font-size: 1.2rem;
    }

    .nav-database {
      display: flex;
      width: 100%;
      justify-content: center;
      align-items: center;
      text-shadow: 2px 2px #353434;
      background-color: #8e0404;
      color: #e3e1e1;
      height: 3.8rem;
    } 

    .nav-tourism__button {
      display: flex;
      width: 100%;
      justify-content: center;
      align-items: center;
      text-shadow: 2px 2px #353434;
      background-color: #213696;
      color: #e3e1e1;
      height: 3.8rem;
    }
    .nav-nativas__button {
      display: flex;
      width: 100%;
      justify-content: center;
      align-items: center;
      text-shadow: 2px 2px #353434;
      background-color: #901b86;
      color: #e3e1e1;
      height: 3.8rem;
    }

    /* .nav-recycle__button {
      display: flex;
      width: 100%;
      height: 3.8rem;
      justify-content: center;
      align-items: center;
      text-shadow: 2px 2px #353434;
      background-color: #124f01;
      color: #e3e1e1;
    } */
    
    .nav-recycle__button {
      display: flex;
      width: 100%;
      height: 3.8rem;
      justify-content: center;
      align-items: center;
      text-shadow: 2px 2px #353434;
      background-color: rgb(62, 62, 62);
      border: 2px outset grey;
    }

    .nav-bar__logout {
      display: flex;
      width: 100%;
      justify-content: center;
      align-items: center;
      grid-area: logout;
      text-shadow: 2px 2px #353434;
      background-color: #a61717;
      color: #e3e1e1;
      height: 3.8rem;
      font-size: 1.4rem;
    }

    .nav-logout__button {
      display: flex;
      width: 100%;
      justify-content: center;
      align-items: center;
      grid-area: logout;
      background-color: black;
    }

    .nav-user__bar span {
       font-size: 1.2rem;
    }
    .nav-bar__logout:hover,
    .nav-bar__logout:active {
        background-color: #c01d1d;
        color: white;
        text-decoration: none;
    }

    .nav-bar__login {
      display: flex;
      width: 100%;
      justify-content: center;
      align-items: center;
      grid-area: login;
      text-shadow: 2px 2px #353434;
      background-color: #035f0f;
      color: #e3e1e1;
      height: 3.8rem;
      font-size: 1.4rem;
    }


    .nav-bar__login:active,
    .nav-bar__login:hover {
        background-color: #058316;
        color: white;
        text-decoration: none;
    }


    .main-footer__item {
      font-size: 1rem;
    }
}

@media (min-width: 80rem) {
    .bigtext-title {
        font-size: 2rem;
    }

    .main-nav {
        grid-template-areas: "header two three four five admin admin database database  tourism tourism nativas nativas recycle recycle userinfo userinfo userinfo userinfo logout logout login login  login login";
    }

    .main-nav__brand-icon img {
      width: 9rem;
      height: 9rem;
    }
    .main-header {
      display: flex;
    }
    .bigtext-title {
      font-size: 2rem;
      padding: 0.5rem 0;
    }
    .nav-user__bar span {
      font-size: 1.6rem;
    }
    .user-username {
      font-size: 1rem;
    }
    .user-user__type {
      font-size: 0.8rem;
    }
      .main-footer__item {
      font-size: 1.2rem;
    }
}