* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html,
body {
  background: linear-gradient(-45deg, #ffe7e1, #cbcbcb, #eff9fd, #d2d2d2);
  background-size: 400% 400%;
  animation: gradient 15s ease infinite;
  height: 100vh;

  font-family: "Open Sans", -apple-system, BlinkMacSystemFont, "Segoe UI",
    Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", Helvetica, Arial,
    sans-serif;
}

@keyframes gradient {
  0% {
    background-position: 0% 50%;
  }

  50% {
    background-position: 100% 50%;
  }

  100% {
    background-position: 0% 50%;
  }
}

body.swal2-shown>[aria-hidden="true"] {
  transition: 0.1s filter;
  filter: blur(7px);
}

.container {
  width: 1440px;
  height: 650px;
  background-image: url(assets/taust_kook.png);
  margin: 50px auto 0;
  background-repeat: no-repeat;
}

.options {
  position: relative;
  top: 25px;
  left: 15px;
  height: 25px;
}

.settings-button {
  position: absolute;
  top: 75px;
  left: 0px;
  height: 25px;
}

.mute-button {
  position: absolute;
  top: 75px;
  left: 38px;
  height: 25px;
}

.mute-music-button {
  position: absolute;
  top: 75px;
  left: 75px;
  height: 23px;
}

#showName {
  position: absolute;
  top: 115px;
  left: 0px;
  font-size: 2rem;
}

.kitchen-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}

.kitchen-top:first-child {
  margin-left: 250px;
}

.correct-lamp {
  margin-left: 250px;
}

.window {
  margin-top: 50px;
  margin-right: 25px;
}

.correct-kubu {
  margin-left: 160px;
}

.kitchen-container {
  display: flex;
  align-items: flex-end;
  margin-left: 5rem;
}

.cupboard-top {
  display: flex;
  align-items: flex-end;
  justify-content: space-around;
}

.stove {
  margin-top: 30px;
}

.stove-top {
  display: flex;
  flex-direction: column;
}

.stove-oven {
  margin-bottom: 3px;
}

.kapp2 {
  margin-bottom: 3px;
}

.counter-top {
  display: flex;
  justify-content: space-around;
  align-items: flex-end;
}

.vertical-buttons {
  display: inline-flex !important;
  flex-direction: column;
  align-items: flex-start !important;
}

/* Hover Effects */

.correct-lamp:hover {
  content: url("/assets/correct/lamp2.png");
  cursor: pointer;
}

.correct-kubu:hover {
  content: url("/assets/correct/kubu-correct.png");
  cursor: pointer;
}

.correct-fridge:hover {
  content: url("/assets/correct/kulmkapp2.png");
  cursor: pointer;
}

.correct-mikrolaineahi:hover {
  content: url("/assets/correct/mikrolaineahi2.png");
  cursor: pointer;
}

.correct-roster:hover {
  content: url("/assets/correct/roster2.png");
  cursor: pointer;
}

.correct-stove:hover {
  content: url("/assets/correct/pann2.png");
  cursor: pointer;
}

.correct-oven:hover {
  content: url("/assets/correct/ahi2.png");
  cursor: pointer;
}

.correct-washer:hover {
  content: url("/assets/correct/noudepesumasin2.png");
  cursor: pointer;
}

.correct-kohvimasin:hover {
  content: url("/assets/correct/kohvimasin2.png");
  cursor: pointer;
  width: 53px;
  height: 92px;
}

.correct-veekeetja:hover {
  content: url("/assets/correct/veekeetja2.png");
  cursor: pointer;
}

.btn {
  display: inline-block;
  padding: 6px 12px;
  margin-top: 10px;
  font-size: 14px;
  font-weight: normal;
  line-height: 1.428571429;
  text-align: center;
  white-space: nowrap;
  vertical-align: middle;
  cursor: pointer;
  background-image: none;
  border: 1px solid transparent;
  border-radius: 4px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  -o-user-select: none;
  user-select: none;
}

.btn-danger {
  color: #fff;
  background-color: #d2322d;
  border-color: #ac2925;
}

.btn-success {
  color: #fff;
  background-color: #47a447;
  border-color: #398439;
}

.btn.btn-success[disabled] {
  pointer-events: none;
  cursor: not-allowed;
  opacity: 0.65;
  filter: alpha (opacity=65);
  -webkit-box-shadow: none;
  box-shadow: none;
}

.btn-primary {
  color: #fff;
  background-color: #3276b1;
  border-color: #285e8e;
}