:root{
  --current-x:0px;
  background-color: #000000;
}
.side-menu {
  flex-direction: row;
  display: flex;
  position: fixed;
  width: 100vw;
  height: 50vh;
  flex-shrink: 1 ;
  top:0 ;
  left:0 ;
}
.main-btn {
  width: calc(100% /7 );
  display: flex;
  position: sticky;
  align-items: center;
  justify-content: center;
  background-color: #fbff00;
  color: #ffffff;
  margin-left: 0;
  aspect-ratio: 1/1;
  
}

.options {
  position: relative;
  color: #000;
  list-style: none;
  width: calc(100% /7 );
  height: 100%;
  margin-top: 0;
  margin-left: 0;
  padding-left:0 ;
  display: flex;
  flex-shrink: 1 ;
  flex-grow: 1;
  right:100vw;
  transition: transform 2s ease-in-out;
}




.options button {
  height: 100%;
  width: 100%;
  position: sticky;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #000000;
  background-color: #00830f;
  padding: 2.5vw;
  flex-grow: 1;
}


.main-btn:active .options{
  transition: tranform ;
  transform: translateX(100vw);
}

.side-menu:hover .options {
  transform: translateX(100vw);

}




.side-menu:hover .main-btn {
  background-color: #000dff;
}


/*home page*/