/* button */

.button {
  position: absolute;
  bottom: 10%;
  height: 20%;
  width: 20%;
  border:7px ridge green;

  transition: all 0.2s ease-in;
  border-radius:20%;
  z-index: 40;

  
  color: white;
  cursor: pointer;
  font-size: xx-large;
  display: flex;
  align-items: center;
  justify-content: space-around;
  align-content: center;
  box-shadow: 0px 0px 20px 8px rgb(255 255 255 / 49%);
}



.button:hover {
  box-shadow: 0px 0px 20px 0px rgb(255 255 255 / 49%);
  transform: translateY(-6px);
}



  .b1{
    right: 70%;
  }
  .b2{
    right: 40%;
    background: rgb(0, 0, 0);
  }
  .b3{
    right: 10%;
  }
  .b4{
    height: 50px;
    width: 50px;
    right: 0px;
    top:0px;
    margin: 10px;
    
    border: none;
    background: rgb(0 0 0 / 33%);
    box-shadow: 0px 40px 50px 0px rgb(0 0 0 / 56%)
  }
  


/* dasboard */
  .dashboard{
  max-width: 1500px;
  max-height: 1000px;
  text-align: center;
  position: absolute;
  left:50%;
  top:50%;
  height: 80%;
  width: 80%;
  transform: translate(-50%,-50%);
  background: rgb(0, 0, 0);
  transition: all 0.2s ease-in;
  border-radius: 8%;
  border:7px ridge green;
  z-index: 10;
  overflow: hidden;
  }


  .content{
    
    position: absolute;
    left: 50%;
    top: 9%;
    color: white;
    box-shadow: inset 1px 1px 20px 90px #00000052;
    transform: translateX(-50%);
  }