/* Text Faces */

@import url('https://fonts.googleapis.com/css2?family=Libre+Baskerville&family=Poppins:ital,wght@1,200&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Frank+Ruhl+Libre&family=Libre+Baskerville&family=Poppins:ital,wght@1,200&display=swap');

/* root properties */

body{
    margin: 0;
    padding: 0;
}

/* containers for display */

.h-container{
    margin: 0;
    padding: 0rem;
    border: 0;
    width: 100vw;
    height: 100vh;
    display: grid;
  overflow: hidden;
    grid-template-columns: .001lvw 10lvw 23lvw 23lvw 23lvw 10lvw .001lvw;
    grid-template-rows: 10lvh 10lvh 41lvh 8lvh;
}
.navs{
  font-family: 'Poppins', sans-serif;
  font-size: 1.5rem;
  min-width: 0;
  flex: 1;
  grid-column-start: 1;
  grid-column-end: 6;
  grid-row-start:1;
  grid-row-end:2;
  grid-wrap: wrap;
  display: flex;
  flex-direction: row;
  align-items: flex-end;
  /* justify-content: space-evenly; */
  width: 100vh;
  backdrop-filter: blur(.2rem);
  background-color: #d1cbd7
    z-index:1002;
  }  
.navs a {
  text-decoration: none;
   color: #585151;
   transition: all .3s ease-in;
}
.navs ul {
  text-decoration: none;
   color: #585151;
    list-style-type: none;
  display: flex; 
    gap: 20px;
  padding: 20px;
  justify-content: flex-end;
}

a.link:hover {
  transform: 20px 0;
  transition: all .3s ease-in;
  color: #70b457;
   z-index:1000;
}
/*for side nav*/
.nava{
  font-family: 'Poppins', sans-serif;
  font-size: 1.5rem;
  min-width: 0;
  flex: 1;
  grid-column-start: 1;
  grid-column-end: 2;
  grid-row-start: 2;
  grid-row-end:3;
  grid-wrap: wrap;
  display: flex;
  /* float: left; */
  align-items: flex-start;
  background-color: #d1cbd7
    z-index:1002;
  align-content: stretch;
  flex-direction: column;
  flex-wrap: nowrap;
  justify-content:flex-star
  }
.nava a {
  text-decoration: none;
   color: #585151;
  
   transition: all .3s ease-in;
}
.nava li {
}
.nava ul {
  text-decoration: none;
  min-height: 0; 
   color: #585151;
    list-style-type: none;
  
    gap: 20px;
  padding: 20px;
  justify-content: flex-end;
}
/*for login centered materials*/
.input{
    font-family: 'Poppins', sans-serif;
  
  font-size: 1rem;
    border-radius: 6px;
    border:1.5px solid #b5e2a4;
    margin: 10px;
    Background-color:#b5e2a4;
    padding: 4px;
     width: 100%;
  }
  .button{
     font-size: 1rem;
    font-family: 'Poppins', sans-serif;
    border-radius: 6px;
    border:2px solid#b5e2a4;
    color:#b5e2a4;
    background-color:black;
    margin: 10px;
    cursor: pointer;
    padding:1rem;
    transition: all .3s ease-in;
  }
.button:hover{
   font-family: 'Poppins', sans-serif;
    border-radius: 6px;
    border:2px solid#b5e2a4;
    color:#b5e2a4;
    background-color:#514f4f;
    margin: 10px;
    cursor: pointer;
    padding:1rem;
}
  .login{
    font-family: 'Poppins', sans-serif;
    flex-direction:column;
    font-size: 1rem;
    display: flex;
    position: revitive;
    grid-column-start: 4;
    grid-column-end:5;
    grid-row-start: 2;
    grid-row-end: 5;
    text-align: justify;
    justify-content: space-evenly;
    /* transform: translateX(-120px); */
    z-index:100;
}
.foot{
  font-family: 'Poppins', sans-serif;
  font-size: .7rem;
  grid-column-start: 2;
  grid-column-end: 4;
  grid-row-start:4;
  grid-row-end:5;
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: left;
  width: 100vh;
  backdrop-filter: blur(.2rem);
  background-color: #d1cbd7
    z-index:1002;
  } 
.middle{
  font-family: 'Poppins', sans-serif;
    flex-direction:column;
    font-size: 1rem;
    display: flex;
    position: revitive;
    grid-column-start: 4;
    grid-column-end:5;
    grid-row-start: 2;
    grid-row-end: 3;
    text-align: justify;
    justify-content: space-evenly;
    /* transform: translateX(-120px); */
    z-index:100;
}
.middle select{
    font-family: 'Poppins', sans-serif;
  
  font-size: 1rem;
    border-radius: 6px;
    border:1.5px solid #b5e2a4;
    margin: 10px;
    Background-color:#b5e2a4;
    padding: 4px;
     width: 100%;
}
.lower{
  font-family: 'Poppins', sans-serif;
    flex-direction:column;
    font-size: 1rem;
    display: flex;
    position: revitive;
    grid-column-start: 4;
    grid-column-end:5;
    grid-row-start: 6;
    grid-row-end: 6;
    text-align: justify;
    justify-content: space-evenly;
     transform: translateX(-1200000px); 
    z-index:100;
}
  

@media (max-width: 800px){
  .h-container{
    margin: 0;
    padding: 0rem;
    border: 0;
    width: 100vw;
    height: 100vh;
    display: grid;
  overflow: auto;
    grid-template-columns: .001px 10lvw 23lvw 23lvw 23lvw 10lvw .001px;
    grid-template-rows: 10lvh 10lvh 41lvh 8lvh;
}
 .login{
    font-family: 'Poppins', sans-serif;
    flex-direction:column;
    font-size: 1rem;
    display: flex;
    position: revitive;
    grid-column-start: 2;
    grid-column-end:5;
    grid-row-start: 2;
    grid-row-end: 5;
    text-align: justify;
    justify-content: space-evenly;
    z-index:100;
}
 .middle{
    font-family: 'Poppins', sans-serif;
    flex-direction:column;
    font-size: 1rem;
    display: flex;
    position: revitive;
    grid-column-start: 3;
    grid-column-end:5;
    grid-row-start: 2;
    grid-row-end: 5;
    text-align: justify;
    justify-content: space-evenly;
    z-index:100;
}