body {
  top: 0;
  left: 0;
  margin: 0;
  height: 100%;
  overflow: hidden;
  background-color: rgb(156,169,225);
  transition: background-color 1s ease-out;
}

#zigzag-break-container {
  z-index: -1;
  position: absolute;
  overflow: hidden;
  width: 100%;
  top: 0px;
  left: 0px;
  opacity:1;
  transition: opacity 2s ease-out;
}

#zigzag-break-container.break {
  opacity: 1;
}

#zigzag-break-container.work {
  opacity: 0;
}

#zigzag-work-container {
  z-index: -1;
  position: absolute;
  overflow: hidden;
  width: 100%;
  top: 0px;
  left: 0px;
  opacity:0;
  transition: opacity 2s ease-out;
}

#zigzag-work-container.break {
  opacity: 0;
}

#zigzag-work-container.work {
  opacity: 1;
}

.zigzag-break {
  position: relative;
  width: 100%;
  height: 20vh;
  background: linear-gradient(135deg, rgb(128,145,213) 25%, transparent 25%) -10vh 0,
      linear-gradient(-135deg, rgb(128,145,213) 25%, transparent 25%) -10vh 0,
      linear-gradient(45deg, rgb(128,145,213) 25%, transparent 25%),
      linear-gradient(-45deg, rgb(128,145,213) 25%, transparent 25%);
  background-size: 20vh;
  animation: scroll-zigzag 2s linear infinite; /* Set the animation */
}

.zigzag-work {
  position: relative;
  width: 100%;
  height: 20vh;
  background: linear-gradient(135deg, rgb(252,176,106) 25%, transparent 25%) -10vh 0,
      linear-gradient(-135deg, rgb(252,176,106) 25%, transparent 25%) -10vh 0,
      linear-gradient(45deg, rgb(252,176,106) 25%, transparent 25%),
      linear-gradient(-45deg, rgb(252,176,106) 25%, transparent 25%);
  background-size: 20vh;
  animation: scroll-zigzag 2s linear infinite; /* Set the animation */
}

@keyframes scroll-zigzag {
  100% {
    background-position: 10vh 0, 10vh 0, 20vh 0, 20vh 0;
  }
}

#background-transition {
  top: 0;
  left: 0;
  position: fixed;
  width: 100%;
  height: 100%;
  background-color: rgb(156,169,225);
  opacity: 1;
  transition: opacity 2s ease-out;
}

body.work {
  background-color: rgb(246,209,147);
}
  
body.break {
  background-color: rgb(156,169,225)
}

#timer, #selector, #reset, #title, #about, footer {
  text-align: center;
  color: #ffffff;
}

#marzano-timer {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

#timer-container {
  cursor: url("/assets/images/tomato-seed_01.png"), pointer;
  border: 1.5vh solid #ffffff; 
  position: fixed;
  box-sizing: border-box;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border-radius: 45% / 100%;
  max-width: 90%;
}

#timer-container.mouseAnimation {
  transform: translate(var(--translate-x), var(--translate-y));
  transition: transform .5s ease-out;
}

#timer {
  font-size: 15vh;
  font-family: "Gasoek One";
  color: #ffffff;
  padding: 0px 5vh;
}

#selector {
  max-width: 120vh;
  position: fixed;
  bottom: 0%;
  left: 50%;
  transform: translate(-50%);
  font-family: "Gasoek One";
  color: rgba(255,255,225,.5);
  display: flex;
  white-space: nowrap;
}

.selector:hover > .selection{
  border-color: #ffffff;
  color: #ffffff;
}

.selector {
  cursor: url("/assets/images/tomato-seed_01.png"), pointer;
  width: 30vw;
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-size: 5vh;
  font-family: "Gasoek One";
}

.selector--top {
  left: calc(50% - 2.25vh);
  border-top: 2.25vh solid transparent;
  border-bottom: 2.25vh solid rgba(255,255,225,.5);
  border-left: 2.25vh solid transparent;
  border-right: 2.25vh solid transparent;
}

.selector--top:hover {
  border-bottom: 2.25vh solid #ffffff;
}

.selector--bottom {
  left: calc(50% - 2.25vh);
  border-top: 2.25vh solid rgba(255,255,225,.5);
  border-bottom: 2.25vh solid transparent;
  border-left: 2.25vh solid transparent;
  border-right: 2.25vh solid transparent;
}

.selector--bottom:hover {
  border-top: 2.25vh solid #ffffff;
}

.selection {
  width: 16vh;
  font-size: 7.5vh;
  border: 1px solid rgba(255,255,225,.5);
  border-radius: 10% / 50%;
  border-width: 1vh;
  align-self: center; /* Vertical centering */
}

.mode.highlighted {
  color: #ffffff;
}

#reset {
  cursor: url("/assets/images/tomato-seed_01.png"), pointer;
  position: fixed;
  top:0;
  left:0;
  font-size: 2em;
  font-family: "IBM Plex Sans";
  padding: 1vw;
}

#title {
  position: fixed;
  top:0;
  left:50%;
  transform: translate(-50%);
  font-size: 3em;
  font-family: "Gasoek One";
}

#about {
  cursor: url("/assets/images/tomato-seed_01.png"), pointer;
  position: fixed;
  top:0;
  right:0;
  font-size: 2em;
  font-family: "IBM Plex Sans";
  padding: 1vw;
}

#blurb {
display: none;
}

#footer {
  position: fixed;
  bottom: 0;
  right: 0;
  font-size: 1em;
  font-family: "IBM Plex Sans";
  padding: 1vw;
}

@media screen and (max-width: 500px) {
  
  #timer {
    font-size: 15vw;
  }
  
  #selector {
    width: 80%;
  }
  
  .selector {
    font-size: 5vw;
  }
  
  .selection {
    width: 15vw;
    font-size: 7.5vw;
  }

  #reset {
    font-size: 1.25em;
  }
  
  #title {
    font-size: 2em;
  }
  
  #about {
    font-size: 1.25em;
  }
}