*{
 margin: 0;
 padding: 0;
}

:root{
  --font1:"Montserrat", sans-serif;
  --font2:"Roboto Condensed", sans-serif;
  --font3:"Epunda Slab", serif;
}


body{
  width: 100vw;
  background: #f3f4f6;
  font-family: var(--font2);
  /* padding-top: 75%; 4:3 Aspect Ratio (divide 3 by 4 = 0.75) */

}

html{
  font-size: 62.5%;
}
a{
  text-decoration: none;
  color: black;
}

.navlinkimg{
  width: 3rem;
}


.maincontainer{
  width: 90%;
  height: 95vh;
  max-width: 125rem;
  display: flex;
  background: white;
  margin: 1.5rem auto;
  border-radius: 40px;
  border: 0.1px solid black;
 }


.maincontainer1{
  width: 20%;
  max-width: 25rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  border-right: 0.5px solid black;

}

.lst1,.lst2{

  margin: 0.5rem;
  padding: 0.5rem;
  font-size: 2.5rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.lst1{
  margin-top: 7rem;
}


.navlinktag1:hover{ 
  transform: scale(1.05);
  box-shadow: 0 8px 16px rgba(0,0,0,0.2);
} 

.navlinktag1.active {
  background-color: var(--sky);
  font-weight: bold;
}

.navlinktag1 {
  display: inline-flex;         /* changed from inline-block to inline-flex */
  align-items: center;          /* vertically centers content */
  margin: 1rem;
  padding: 1rem 1.5rem;
  border-radius: 15px;
  box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
  font-size: 2.5rem;
  font-family: var(--font2);
  gap: 0.5rem;
}