:root {
  --eng-color: #01ff2f;
  --jap-color: rgb(255, 0, 191);
}

body {
 color: var(--eng-color);
}

#check-sheet-toggle {
  position: fixed;
  right: 50%;
  bottom: 20px;
  max-width: 250px;
  font-size: 20px;
  text-decoration: underline;
  padding: 10px 15px;
  border-radius: 20px;
  outline: 1px solid var(--text-color);
  color: var-(--text-color);
  background: var(--bg-color);
  text-align: center;
  transform: translateX(50%);
  z-index: 200;
  &:hover {
    color: var(--hover-color);
    outline: 1px solid var(--hover-color);
    cursor: pointer;
  }
}

nav {
  z-index: 5;
}

/* make the check sheet fade in */
#draggable-fixed-box, #drag-inst, #jp-toggle {
  animation: 1s ease-out 1s slide-in forwards;
  translate: -110%;
}

#draggable-fixed-box {
  position: fixed;
  top: 10px;
  left: 10px;
  /* width: 250px; */
  z-index: 30; /* Ensures it stays on top of other content */
  mix-blend-mode: multiply;
  height: 400px;
  border-radius: 20px;
  padding: 20px; 
  width: 280px;
  cursor: move;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  max-width: 70vw;
  filter: drop-shadow(5px 5px 5px rgba(0,0,0,0.4));
  
}

#drag-inst {
  /* padding: 10px; */
  color: var(--text-color);
  /* outline: 1px #fff solid;*/
  font-size: 16px;
  text-align: center;
  max-width: 220px;
  position: fixed;
  position-anchor: --anchor-1;
  top: anchor(top);
  left: anchor(center);
  z-index: 31;
  transform: translateX(-50%);
  background: var(--bg-color);
  border-radius: 10px;
  padding: 5px;
  transition: opacity 0.5s;
}

#jp-toggle {
  color: var(--text-color);
  background: var(--bg-color);
  font-size: 16px;
  text-decoration: underline;
  cursor: pointer;
  max-width: 220px;
  position: fixed;
  position-anchor: --anchor-2;
  top: anchor(bottom);
  left: anchor(left);
  z-index: 31;
  transform: translate(-50%, -60px);
  border-radius: 10px;
  padding: 5px;
  transition: opacity 0.5s;
  &:hover {
    color: var(--hover-color);
  }
}

  /* JS inserted class to hide the instructions */
.is-active {
  opacity: 0;
  transition: opacity 0.5s;
}

/* anchors */

#anchor-1 {
  anchor-name: --anchor-1;
}

#anchor-2 {
  anchor-name: --anchor-2;
}

/* Japanese overlaid elements */
.japanese {
  color: var(--jap-color);
  pointer-events: none;
  transition: 0.2s opacity;
}

nav .overlap:hover .japanese {
    opacity: 0;
    transition: 0.2s opacity;
}

/* classes for javascript to toggle */

.green-bg {
  background: var(--eng-color);
  transition: background-color 1s;
}

.red-bg {
  background: #ff0000;
  transition: background-color 1s;
}

.inc-z-index {
    z-index: 2;
}

.jp-after::after {
    content: " Japanese. [日本語]"
}

.eng-after::after {
    content: " English. [英語]"
}

/* styles for diagram */

#cover-diagram {
  display: grid;
  margin: 0 auto;
  img {
    grid-area: 1 / 1;
    max-height: 90vh;
    max-width: 90vh;
    margin: 0 auto;
  }
}

#cover-move {
  animation: 3s ease-in-out cover-move infinite alternate;
}

@keyframes cover-move {
  to {
    translate: -6.5% 15%;
  }
}


/* tablet styles */

@media screen and (width >= 450px) {
  #draggable-fixed-box {
    width: 500px;
  }

  #drag-inst {
    max-width: 350px;
  }
}

/* desktop styles */

@media screen and (width >= 900px) {
  
  

  #draggable-fixed-box {
    width: 700px;
    height: 500px;
  }

  
}

/* animation classes */



/* animation keyframes */

@keyframes bob {
  to {
    translate: 0 10px;
  }
}

@keyframes slide-in {
  from {
    translate: -110%;
  }
  to{
    translate: 0%;
  }
}

/* fix broken animation for firefox and safari */

@supports (-webkit-app-region: inherit) {
  /* .bob {
  animation: 1s bob ease-in 3s infinite alternate;
} */
}