* {
  margin: auto;
  transition: 1s;
  font-family: 'Handwriting';
  user-select: none; /* disable highlighting */
}

a {
  color: black;
  text-decoration: none;
}

a:hover, img:hover {
  cursor: url('../assets/cursors/hand_point.png'), pointer;
}

body {
  height: 100%;
  width: 100%;
  /* background: bg-color bg-image position/bg-size bg-repeat bg-origin bg-clip bg-attachment initial|inherit; */
  background: #d17f50cb url(../assets/Tasty\ Tutor\ Game\ Homepage.png) repeat fixed center;
  background-blend-mode: multiply;
  background-size: 25%;
  backdrop-filter: contrast(45%);
  cursor: url('../assets/cursors/pointer_toon_a.png'), crosshair;
  font-size: 1.5vw;
}

@font-face {
  font-family: 'Handwriting';
  src: url(../assets/Handwriting\ \(The\ Code\ Dose\).ttf);
}

#pauseMusic {
  height: 50px;
  margin-top: 2vh;
  margin-left: 2vh;
  border-radius: 30%;
  padding: 10px;
  position: absolute;
  z-index: 1001;
  transition: 0s;
  background-color: #ffcd28;
  box-shadow:
    inset -1px -3px 7px 1px #b85d39cb, /* bottom right */
    inset 1px -3px 7px 1px #b85d39cb /* left right */;
}

#pauseMusic:hover {
  opacity: 1;
  box-shadow:
    inset 3px 3px 5px #b85d39cb,
    inset -3px -3px 5px #ffcd28,
    inset -3px 3px 5px #b85d39cb,
    inset 3px -3px 5px #b85d39cb;
}

.button {
  transition: 0s;
  background-color: #ffcd28;
  box-shadow:
    inset -1px -3px 7px 1px #b85d39cb, /* bottom right */
    inset 1px -3px 7px 1px #b85d39cb /* left right */;
}

.button:hover {
  box-shadow:
    inset 3px 3px 5px #b85d39cb,
    inset -3px -3px 5px #ffcd28,
    inset -3px 3px 5px #b85d39cb,
    inset 3px -3px 5px #b85d39cb;
}