html {
  background-color: rgb(172, 150, 132);
  background-image: url(1x/woodbackground.png);
  background-repeat: no-repeat;
  background-position: center;
  background-attachment: fixed;
  background-size: cover;
  cursor: url('1x/White\ cursor.cur'), pointer;
}

body {
  text-align: center;
  border: none;
  align-items: center;
  display: flex;
  flex-direction: column;
  margin: 0; /* Removing default body margin */
  -webkit-user-select: none; /* Safari */
  -ms-user-select: none; /* IE 10 and IE 11 */
  user-select: none; /* Standard syntax */
}

canvas {
  margin-top: 12vh;
  display: flex;
  position: absolute;
  height: 80vh;
  width: calc(80vh * 539/426);
  transform-origin: top;
  image-rendering: pixelated;
  image-rendering: -moz-crisp-edges;
  image-rendering: -o-pixelated;
  text-rendering: optimizeLegibility;
  filter: drop-shadow(5px 5px 5px #2222226d);
}

#intro-bg {
  margin-top: 12vh;
  display: flex;
  position: absolute;
  height: 80vh;
  width: calc(80vh * 539/426);
  background-size: cover;
  background-repeat: no-repeat;
  transform-origin: top;
  image-rendering: pixelated;
  text-rendering: optimizeLegibility;
  background-image: url(1x/introborder.png);
  z-index: 4;
}

#intro-start {
  width: 28vh;
  height: 20vh;
  display: none;
  image-rendering: pixelated;
  z-index: 5;
  margin-left: 37vh;
  margin-top: 57vh;
  background-repeat: no-repeat;
  background-size: contain;
  background-image: url(1x/startbutton.png);
  filter: drop-shadow(5px 5px 5px #222222);
}

#intro-dialogue {
  position: absolute;
  display: none;
  bottom: 15%;
  left: 50%;
  transform: translateX(-50%);
  color: rgb(0, 0, 0);
  font-size: 3vh;
  font-family: Helvetica;
  text-align: justify;
  background-color: rgb(211, 218, 224);
  box-shadow: 
    inset 2px -2px 1px rgba(0,0,0,0.75),
    inset -2px 2px 1px rgba(255, 255, 255, 0.75);  
  filter: drop-shadow(5px 5px 5px #222222);
  width: 80%;
  padding: 3%;
  max-width: 600px;
}

#dialogue-box {
  margin-top: 26vh;
  width: calc(35vh * 325/225);
  height: 35vh;
  transform: scale(1);
  display: none;
  position: absolute;
  background-repeat: no-repeat;
  background-position: center;
  background-attachment: fixed;
  background-size: cover;
  image-rendering: pixelated;
  background-image: url(1x/dialogue\ box.png);
  z-index: 10;
  filter: drop-shadow(5px 5px 5px #2222226d);
}

#dialogue-text {
  align-items: left;
  font-size: 2vh;
  margin-top: 6vh;
  margin-left: 17vh;
  margin-right: 7.5vh;
  text-align: left;
  color: rgb(0, 0, 0);
}

#intro-text {
  font-family: Helvetica;
  position: absolute;
  top: 84.1vh;
  font-size: 2.8vh;
  z-index: 5;
  text-align: center;
}

#outro-bg {
  margin-top: 12vh;
  display: none;
  position: absolute;
  height: 80vh;
  width: calc(80vh * 539/426);
  background-size: cover;
  background-repeat: no-repeat;
  transform-origin: top;
  image-rendering: pixelated;
  text-rendering: optimizeLegibility;
  background-image: url(1x/outroborder.png);
  z-index: 40;
}

#text, #minigame-title {
  font-family: Helvetica;
  position: absolute;
  top: 84.2vh;
  z-index: 3;
  text-align: center;
}

#titleribbon {
  margin-top: 2vh;
  height: 10vh;
  width: calc(80vh * 539/426);
  image-rendering: pixelated;
  filter: drop-shadow(5px 5px 5px #2222226d);
}

#woebepencil {
  display: flex;
  position: absolute;
  margin-top: 12vh;
  margin-left: -103.62vh;
  height: 70vh;
  width: 70vh;
  transform: rotate(-85deg);
  background-image: url(1x/titlepencil.png);
  background-size: contain;
  background-repeat: no-repeat;
  z-index: -1;
}

#stickynote {
  display: flex;
  position: absolute;
  margin-top: 10vh;
  margin-right: -183.35vh;
  height: 30vh;
  width: 30vh;
  background-image: url(1x/stickynote.png);
  background-size: contain;
  background-repeat: no-repeat;
  z-index: 2000;
  filter: drop-shadow(5px 5px 5px #2222226d);
}

#minigame-bg {
  margin-top: 12vh;
  display: flex;
  position: absolute;
  height: 80vh;
  width: calc(80vh * 539/426);
  background-size: cover;
  background-repeat: no-repeat;
  transform-origin: top;
  image-rendering: pixelated;
  text-rendering: optimizeLegibility;
  filter: drop-shadow(5px 5px 5px #2222226d);
  z-index: 3;
}

#minigame-main, #minigame-secondary {
  position: absolute;
  background-size: contain;
  image-rendering: crisp-edges ;
  background-repeat: no-repeat;
  margin: 0px;
  margin-top: 15vh;
  height: 60vh
}  

#minigame-main {
  z-index: 4 ;
}

#minigame-main:hover, #intro-start:hover {
  cursor: url('1x/Mouse\ click.cur'), pointer;
}

#minigame-secondary {
  z-index: 3;
}

#minigame-text {
  position: absolute;
  display: none;
  padding-top: 1vh;
  padding-bottom: 1vh;
  padding-left: 2vh;
  padding-right: 2vh;
  top: 20%;
  left: 50%;
  font-size: 4vh;
  font-family: "Helvetica";
  text-transform: uppercase;
  font-weight: bold;
  color: rgb(255, 255, 255);
  stroke: 10px black;
  z-index: 1000;
  text-transform: uppercase;
  font-weight: bold;
  animation: textGlowAnimation ease-in-out 1s infinite;
  transform-origin: center;
  transform: rotate(-15deg);
}

.minigame-message {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 1000;
  background-color: white;
  color: black;
  padding: 10px;
  border: 1px solid black;
}

#bellbackingleft {
  width: 40vh;
  height: 89.95vh;
  position: absolute;
  margin-left: -103.62vh;
  margin-top: 2vh;
  image-rendering: pixelated;
  filter: drop-shadow(5px 5px 5px #2222226d);
  background-image: url(1x/bellbacking.png);
  background-repeat: no-repeat;
  background-size: contain;
  z-index: -1;
}

#bellbackingright {
  width: 22vh;
  height: 90vh;
  position: absolute;
  margin-right: -123.35vh;
  margin-top: 2vh;
  image-rendering: pixelated;
  filter: drop-shadow(5px 5px 5px #2222226d);
  background-image: url(1x/bellbacking.png);
  background-repeat: no-repeat;
  background-size: contain;
  z-index: 3;
}

#bellbackingbottom {
  margin-top: 95vh;
  width: calc(80vh * 539/426);
  height: 80vh;
  position: absolute;
  background-image: url(1x/bellbackingbottom.png);
  image-rendering: pixelated;
  filter: drop-shadow(5px 5px 5px #2222226d);
  background-repeat: no-repeat;
  background-size: contain;
  z-index: 2;
}

.key {
  opacity: 0%;
  filter: drop-shadow(2px 2px 2px #2222226d);
  width: 12vh;
  height: 20vh;
  image-rendering: pixelated;
  z-index: 3;
}

#silverkey {
  margin-left: -78vh;
  margin-top: -8vh;
  background-image: url(1x/silverkey.png);
  background-repeat: no-repeat;
  background-size: contain;
}

#goldkey {
  margin-right: -77vh;
  margin-top: -20.2vh;
  background-image: url(1x/goldkey.png);
  background-repeat: no-repeat;
  background-size: contain;
}

.bell {
  opacity: 0%;
  pointer-events: none;
  filter: drop-shadow(5px 5px 5px #2222226d);
  transform: rotate(15deg);
  width: 14vh;
  height: 20vh;
  image-rendering: pixelated;
  z-index: 4;
}

#mossbell {
  margin-left: -122vh;
  margin-top: -18vh;
  background-image: url(1x/mossbell.png);
  background-repeat: no-repeat;
  background-size: contain;
}

#leadbell {
  margin-left: -119vh;
  margin-top: -2vh;
  background-image: url(1x/leadbell.png);
  background-repeat: no-repeat;
  background-size: contain;
}

#heartbell {
  margin-top: 5vh;
  margin-left: -124vh;
  background-image: url(1x/heartbell.png);
  background-repeat: no-repeat;
  background-size: contain;
}

#woodbell {
  margin-left: -117svh;
  margin-top: -1vh;
  background-image: url(1x/woodbell.png);
  background-repeat: no-repeat;
  background-size: contain;
}

#starbell {
  margin-right: -121vh;
  margin-top: -80vh;
  background-image: url(1x/starbell.png);
  background-repeat: no-repeat;
  background-size: contain;
}

#cloudbell {
  margin-right: -122vh;
  margin-top: 1vh;
  background-image: url(1x/cloudbell.png);
  background-repeat: no-repeat;
  background-size: contain;
}

#icebell {
  margin-right: -122vh;
  margin-top: 0vh;
  background-image: url(1x/icebell.png);
  background-repeat: no-repeat;
  background-size: contain;
}

#creambell {
  margin-right: -124vh;
  margin-top: 0vh;
  background-image: url(1x/creambell.png);
  background-repeat: no-repeat;
  background-size: contain;
}




.glow {
  filter: drop-shadow(0 0 3px rgba(255, 255, 255, 0.8))
  drop-shadow(0 0 5px rgba(0, 0, 0, 0.7))
  drop-shadow(0 0 7px rgba(255, 255, 255, 0.6));
}

@keyframes rotateAnimation {
  0%, 100% { transform: rotate(0deg); }
  50% { transform: rotate(5deg); }
}

@keyframes textrotateAnimation {
  0% { transform: rotate(-15deg); }
  25% { transform: rotate(-10deg); }
  75% { transform: rotate(-20deg); }
  100% { transform: rotate(-15deg); }
}

@keyframes textGlowAnimation {
  0% { text-shadow: none; }
  50% {   text-shadow: 0 0 20px rgb(255, 0, 0),
                        0 0 10px rgba(255, 255, 255, 1);; }
  100% { text-shadow: none; }
}

.wobble {
  transform-origin: center;
  animation: rotateAnimation .75s ease-in-out infinite;
}

.rotate {
    transform-origin: center;
    animation: rotateAnimation ease-in-out infinite;
}

/*moss*/
.pour {
  transform: rotate(-45deg);
}

.snip {
  transform: translateX(-30%) translateY(70%);
}

.dig {
  animation: digAnimation ease;
  transform-origin: top right;
}

@keyframes digAnimation {
  0% { transform: translateX(0%) translateY(0%); }
  10% { transform: translateX(-30%)  translateY(70%); }
  55% { transform: translateX(-30%)  translateY(70%) rotate(0deg)}
  70% { transform: translateX(-30%)  translateY(70%) rotate(35deg)}
  100% { transform: translateX(-30%)  translateY(70%) rotate(35deg)}
}


/*lead*/
.pickaxe {
  transform-origin: bottom;
  transform: rotate(45deg)
}

.hammer {
  transform-origin: bottom;
  transform: rotate(-85deg)
}

/*heart*/
.knife1 {
  transform-origin: left;
  transform: rotate(25deg)
}

.knife2 {
  transform-origin: left;
  transform: rotate(-25deg)
}

.wipe1 {
  animation: wipe1Animation ease;
}

@keyframes wipe1Animation {
  0% { transform: translateX(0%) translateY(0%); }
  100% { transform: translateX(180%) translateY(-170%); }
}

.wipe2 {
  animation: wipe2Animation ease;
}

@keyframes wipe2Animation {
  0% { transform: translateX(0%) translateY(0%); }
  100% { transform: translateX(-180%) translateY(-170%); }
}

/*wood*/
.axe {
  transform-origin: bottom;
  transform: rotate(-45deg)
}

@keyframes sawAnimation {
  0% { transform: translateX(0%); }
  50% { transform: translateX(-40%); }
  100% { transform: translateX(0%); }
}

.saw {
  transform-origin: center;
  animation: sawAnimation ease;
}

@keyframes shaveAnimation {
  0% { transform: translateY(0%); }
  50% { transform: translateY(20%); }
  100% { transform: translateY(0%); }
}

.shave {
  transform-origin: center;
  animation: shaveAnimation ease;
}

/*cloud*/
.lasso {
  animation: lassoAnimation ease;
}

@keyframes lassoAnimation {
  0% { transform: translateX(0%) translateY(0%); }
  10% { transform: translateX(160%) translateY(-170%); }
  30% { transform: translateX(80%) translateY(-100%); }
  100% { transform: translateX(80%) translateY(-100%); }
}

.poke {
  transform-origin: top;
  transform: skewY(30deg) translateX(50%) translateY(-50%);
}

.punch {
  transform: skewY(30deg) translateX(-100%) translateY(-20%);
}

/*ice*/
.shake {
  transform-origin: center;
  animation: shakeAnimation ease;
}

@keyframes shakeAnimation {
  0% { transform: rotate(0deg); }
  20% { transform: rotate(15deg) translateY(20%); }
  20% { transform: rotate(-15deg) translateY(-50%); }
  60% { transform: rotate(15deg) translateY(20%); }
  20% { transform: rotate(-15deg) translateY(-50%); }
  100% { transform: rotate(0deg); }
}

.icepick {
  transform: translate(-50%, 70%);
}

/*star*/
.turn {
  transform-origin: center;
  transform: scaleY(-1);
}

/*cream*/
@keyframes whiskAnimation {
  0% { transform: rotate(0deg); }
  20% { transform: rotate(15deg) translate(10%, 10%); }
  60% { transform: rotate(-15deg) translate(-20%, 20%); }
  100% { transform: rotate(0deg); }
}
.whisk {
  transform-origin: bottom left;
  animation: whiskAnimation ease;
}

@keyframes dragAnimation {
  0% { transform: rotate(0deg) }
  20% { transform: rotate(15deg) translateX(10%) }
  20% { transform: rotate(-65deg) translateX(-10%) }
  60% { transform: rotate(15deg) translateX(10%)}
  20% { transform: rotate(-65deg) translateX(-10%)}
  100% { transform: rotate(0deg);}
}
.drag {
  transform-origin: top;
  animation: dragAnimation ease;
}