@import url('https://fonts.googleapis.com/css2?family=Dosis&display=swap');
div, p {
  font-family: 'Dosis', sans-serif;
  color: white;
  text-shadow:
  1px 1px 0 black;
}

.mouthbutton {
  border: none;
  color: white;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  cursor: pointer;
}

.righteyebutton {
  border: none;
  color: white;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  cursor: pointer;
}

.lefteyebutton {
  border: none;
  color: white;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  cursor: pointer;
}

.accessoriesbutton {
  border: none;
  color: white;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  cursor: pointer;
}

.highlightsbutton {
  border: none;
  color: white;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  cursor: pointer;
}

.settings{
  position: absolute;
  z-index: 9;
  background-color: rgba(0, 0, 0, 0.1);
  border-radius: 20px;
  padding: 20px;
}

.settings:hover{
  cursor:grabbing;
}

.glasses {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 5;
}


.accessories {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 5;
}

.leye {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 3;
}

.reye {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
}

.mouth {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 4;
}

.highlights {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 1;
}

.face {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 0;
}

button {
  border-radius: 5px;
  background-color: rgba(0, 0, 0, 0.1);
  color: white;
}

button:hover{
  background-color: rgba(0, 0, 0, 0.5);
}

button:active{
  background-color: black;
}