*  { box-sizing: border-box; }
html { scroll-behavior: smooth; }
html, body {
  height: 100%;
  margin: 0;
  padding: 0;
}
body { 
  font-family: serif; 
  font-size: 14px; 
  line-height: 1;
  position: relative;
  color: #fff;
  height: 100%;
  text-align: center;
  background-color: #000;
  
}
header {
    padding: 1rem 0 0.5rem;
    padding: 0;
}
main {
    position: relative;
    background: linear-gradient(180deg, #000, #07180b) no-repeat scroll center;
    border-bottom: 5px solid rgb(150, 150, 150);
    max-width: 900px;
    margin-left: auto;
    margin-right: auto;
}
h1, h2, h3, h4, h5, h6 {
  font-weight: 700;
  margin-top: 1rem;
  margin-bottom: 1rem;
  text-transform: uppercase;
  color: #fff;
}
h1 {
  font-size: 2em;
  font-size: 0.5rem;
  visibility: hidden;
  color: #fff;
  text-align: center;
  margin: 0;
  height: 0;
}
h2 {
  font-size: 1.25rem;
  color: #fff;
}
hr {
  margin: 1em auto 2em;
  width: 4em;
  border: 0;
  border-top: 2px solid #aaa;
}

/* Paragraph Styles */
p, li, button, label, input { 
  font-size: 1rem;
  line-height: 1.75;
  /* margin-bottom: 1em; */
  margin-top: 0;
}
a, button, label, input { 
  font-weight: 700; 
  text-decoration: none; 
  transition: all 0.1s ease-in-out;
  font-family: inherit; 
}
a {
  color: #d5ffe0; 
}
a:hover, 
a:active, 
a:focus { 
    background-color: #ffe9cb; 
    color: #3c042f; 
}
a:focus { 
    text-decoration: underline; 
}
  /* inputs & validation */
input.wrong {
  border-color: #;
}
button {
  cursor: pointer;
}
button[disabled] {
  color: #444;
}

/* utility */
.hidden { display: none; }
.visible-xs { display: none; }

/* sr-only */
.sr-only {
  border: 0 !important;
  clip: rect(1px, 1px, 1px, 1px) !important;
  -webkit-clip-path: inset(50%) !important;
    clip-path: inset(50%) !important;
  height: 1px !important;
  margin: -1px !important;
  overflow: hidden !important;
  padding: 0 !important;
  position: absolute !important;
  width: 1px !important;
  white-space: nowrap !important;
}

/* announcements */
.bgColor {
  padding: 0.5em 1em 1em;
  border: 3px solid rgb(255 255 255 / 50%);
  background-color: rgb(2 14 5 / 85%);
  box-shadow: 0px 10px 15px 5px rgb(2 14 5 / 50%);
}
#announcements {
  position: absolute;
  bottom: 2rem;
  left: 2rem;
  z-index: 9;
  width: calc(100% - 4rem);
}
#announcements h3 {
  font-size: 3rem;
  margin-bottom: 0.5rem;
}


/* steps */
#instructions {
  position: absolute;
  top: 1rem;
  width: calc(100% - 2rem);
  margin-left: 1rem;
  margin-right: 1rem;
  z-index: 2;
}
#instructions .step:not(.active) {
  display: none;
}
#workspace {
  position: relative;
  height: 90vh;
  max-height: 600px;
  background-color: #ECE2D8;
  background: url('../images/paperBg.JPG') no-repeat scroll center / cover;
  overflow: hidden;
}
#fireplace {
    bottom: 0;
    position: absolute;
    left: 0;
    width: 100%;
    height: 70vh;
    max-height: 400px;
    top: 3rem;
    background-image: url('../images/coffeeFireplace.GIF');
    background-repeat: no-repeat;
    background-attachment: scroll;
    background-position: top left;
    opacity: 0.25;
    z-index: 0;
}
body.step1 #fireplace {
    opacity: 1;
}
#table {
  width: 100%;
  height: 30vh;
  min-height: 100px;
  position: absolute;
  max-height: 200px;
  bottom: 0;
  border-top: 3px solid #07180b;
  background-color: rgb(7 24 11 / 66%);
}
#kettle {
  position: relative;
  width: 12rem;
  height: 8rem;
  z-index: 1;
  top: -5rem;
  left: 2.5rem;
}
body.step1 #kettle {
  cursor: pointer;
}
body.step1 #kettle:hover, 
body.step1 #kettle:active, 
body.step1 #kettle:focus {
  filter: drop-shadow(0.25rem 0.5rem 0.5rem rgba(0,0,0,0.3));
}
body.step1 #kettle.done {
  cursor: default;
}
body.step1 #kettle.done:hover, 
body.step1 #kettle.done:active, 
body.step1 #kettle.done:focus {
  filter: none;
}
#kettle #kettleBody {
  background-color: gray;
  width: 100%;
  height: 100%;
  position: relative;
  border-top-left-radius: 5rem;
  border-top-right-radius: 5rem;
  border-bottom-left-radius: 1rem;
  border-bottom-right-radius: 1rem;
  z-index: 2;
  transition: all 0.3s ease;
}
#kettle::before {
  content: '';
  display: block;
  position: absolute;
  width: 5rem;
  height: 1rem;
  background-color: #999999;
  top: -0.25rem;
  left: calc(50% - 2.75rem);
  border-radius: 50%;
  z-index: 3;
}
#kettleSpout {
  display: block;
  position: absolute;
  width: 3rem;
  height: 2rem;
  right: 0;
  top: 0;
  background-color: gray;
  transform: rotate(135deg);
}
#kettleSpout::after {
  display: block;
  content: '';
  position: absolute;
  width: 1rem;
  height: 2.5rem;
  background-color: #555;
  z-index: 2;
  border-radius: 0.5rem;
  top: -0.25rem;
  left: -0.25rem;
}
#kettleHandle {
  border: 1rem solid gray;
  width: 9rem;
  height: 6rem;
  border-radius: 75% 50%;
  position: absolute;
  left: calc(50% - 4.5rem);
  top: -4rem;
}
#kettle.moved {
  transform: scale(0.5);
  top: -200px;
  left: 100px;
}
#kettle.hot #kettleBody {
  background-image: radial-gradient(red, gray);
}
#kettle.steaming #kettleSpout::before {
  content: '';
  display: block;
  position: absolute;
  background-color: #fff;
  border-radius: 50%;
  transition: all 0.5s ease;
  width: 2rem;
  height: 1rem;
  transform: rotate(90deg);
  left: -1rem;
  top: 0.5rem;
  animation: steam 0.5s infinite;
}
#cozy {
  background-color: #B0BEB1;
  border-radius: 50%;
  width: 15rem;
  height: 4rem;
  position: absolute;
  left: 1rem;
  top: 1rem;
  z-index: 0;
}
#grinder {
  background-color: brown;
  position: absolute;
  width: 10rem;
  height: 15rem;
  left: calc(50% - 5rem);
  bottom: 50%;
  z-index: 3;
}
/* #grinder::before {
    z-index: 0;
    content: '';
    background-color: #444;
    height: 6rem;
    width: calc(100% - 2rem);
    display: block;
    position: absolute;
    top: -6rem;
    left: 1rem;
    border-radius: 100%;
}
#grinder::after {
    content: '';
    display: block;
    width: 1rem;
    height: 2rem;
    position: absolute;
    top: -8rem;
    background-color: #333;
    z-index: -1;
    left: calc(50% - 0.5rem);
    border-top-left-radius: 150%;
    border-top-right-radius: 150%;
    border-bottom-right-radius: 1rem;
    border-bottom-left-radius: 1rem;
}*/

#crank {
  height: 8rem;
  width: 8rem;
  aspect-ratio: 1 / 1;
  position: absolute;
  left: calc(50% - 4rem);
  border-radius: 50%;
  border: 1rem solid #07180b;
  transform-origin: center;
  transform: rotate(0deg);
  top: 1rem;
}
#handle {
  width: 1rem;
  height: 4rem;
  background-color: #000;
  position: absolute;
  top: -1rem;
  right: calc(50% - 0.5rem);
  transform-origin: bottom center;
  transform: rotate(0deg);
  cursor: pointer;
}
#handle::before {
    width: 1rem;
    height: 0.5rem;
    background-color: #fff;
    border: 1px solid #aaa;
    display: block;
    content: '';
    position: relative;
    left: calc(50% - 0.5rem);
    border-radius: 0.25rem;
    top: -0.25rem;
}
#center {
  background-color: #fff;
  border-radius: 100%;
  width: 1rem;
  height: 1rem;
  position: absolute;
  left: calc(50% - 0.5rem);
  top: calc(50% - 0.5rem);
  z-index: 5;
}

/* rotations for bean grinder */
#rotations {
  display: block; 
  position: relative;
  z-index: 5;
  top: 1.5rem;
}


/* step 3 scoops */
#scoopInput {
  position: absolute;
  width: calc(50% - 1rem);
  right: 1rem;
  bottom: 1rem;
  z-index: 8;
}
#container {
  border: 0.25rem solid #ddd;
  border-radius: 0.25rem 0.25rem 0.5rem 0.5rem;
  height: 10rem;
  width: 10rem;
  left: calc(50% - 5rem);
  position: absolute;
  top: -5rem;
  box-shadow: 0 0.5rem 0.5rem 0.25rem rgba(7, 24, 11, 0.3);
}
#container::before {
  content: '';
  display: block;
  width: 100%;
  height: 100%;
  background-image: linear-gradient(135deg, rgba(255,255,255,0.3), rgba(255,255,255,0.5));
}
#container_filling, #carafe_filling {
  background-color: saddlebrown;
  width: 100%;
  height: 0;
  position: absolute;
  bottom: 0;
}
#container_numbers span::before {
    display: block;
    content: '';
    border-bottom: 1px solid red;
    position: absolute;
    left: 0;
    width: 100%;
    top: 0;
}
#container_numbers {
    position: absolute;
    top: 0;
    height: 100%;
    display: flex;
    flex-flow: column nowrap;
    justify-content: space-between;
    padding: 0.25rem 0.5rem;
    right: 0;
    color: red;
    font-family: sans-serif;
    width: 100%;
    text-align: right;
}
#container_numbers span {
    width: 100%;
    position: relative;
}

/* step 4 carafe */
#carafe {
  border: 0.25rem solid #ccc;
  border-radius: 0.25rem 0.25rem 0.5rem 0.5rem;
  height: 15rem;
  width: 10rem;
  left: calc(50% - 5rem);
  position: absolute;
  top: -10rem;
}
#carafe::before {
  content: '';
  display: block;
  width: 100%;
  height: 100%;
  background-image: linear-gradient(135deg, rgba(255,255,255,0.3), rgba(255,255,255,0.5));
}
#carafe::after {
  content: '';
  display: block;
  width: 1rem;
  height: 2rem;
  background-image: linear-gradient(135deg, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.5));
  border: 0.25rem solid #ccc;
  position: absolute;
  left: -1.5rem;
  top: 0;
  border-bottom-left-radius: 100%;
}
#carafe_handle {
  border: 1rem solid #333;
  width: 3rem;
  border-left: 0;
  height: 80%;
  position: absolute;
  top: 0;
  right: -3.25rem;
  z-index: 1;
  border-radius: 0 50% 50% 0;
}
body.step7 #carafe_lid,
body.step8 #carafe_lid,
body.step9 #carafe_lid {
  background-color: #222;
  width: calc(100% + 0.5rem);
  height: 2rem;
  position: absolute;
  top: -2rem;
  left: -0.25rem;
  border: 0.25rem solid #444;
  border-top-left-radius: 3rem;
  border-top-right-radius: 3rem;
}
body.step4 #press, body.step5 #press, body.step6 #press, body.step7 #press {
  display: none;
}
body.step4 #carafe {
  left: 3rem;
}
body.step4 #container:hover, 
body.step4 #container:active, 
body.step4 #container:focus {
  outline: 0.25rem solid rgb(176 245 255 / 30%);
}
body.step4 #container.emptied,
body.step4 #container.emptied:hover, 
body.step4 #container.emptied:active, 
body.step4 #container.emptied:focus {
  outline: none;
  cursor: default;
}
body.step4 #container {
  left: auto;
  top: -3rem;
  right: 1rem;
  cursor: pointer;
  z-index: 2;
}

/* step 5 */
body.step5 #carafe {
  z-index: 5;
  left: auto;
  right: 4rem;
  top: -8rem;
}
body.step5 #kettle:not(.emptied) {
  cursor: pointer;
}
body.step5 #kettle:not(.emptied):hover, 
body.step5 #kettle:not(.emptied):active, 
body.step5 #kettle:not(.emptied):focus {
  filter: drop-shadow(0.25rem 0.5rem 0.5rem rgba(0,0,0,0.3));
}
#carafe.full #carafe_filling {
  height: 90%;
  opacity: 0.75;
  background-color: #2b1505;
}

/* step 6 */
body:not(.step6) #spoon { display: none; }
#spoon {
    height: calc(100% + 3rem);
    position: absolute;
    width: 3rem;
    top: -3rem;
    left: 0;
    cursor: pointer;
}
#spoon_bowl, #spoon_arm {
    background-color: gray;
    height: 100%;
    width: 100%;
    position: absolute;
}
#spoon_bowl {
    border-radius: 100%;
    bottom: 0;
    height: 5rem;
}
#spoon_arm {
    width: 1rem;
    left: calc(50% - 0.5rem);
    border-radius: 0.25rem;
}
#spoon.stirred {
  cursor: default;
}
#spoon:hover,
#spoon:active,
#spoon:focus {
  filter: drop-shadow(0.25rem 0.5rem 0.5rem rgba(255,255,255,0.3));
}

/* step 7: wait */
  /* timepiece */
  #timepiece {
    position: relative;
    width: 5rem;
    left: 3rem;
    top: -8rem;
  }
  #timepiece_case {
    background-color: #bbb;
    background-image: radial-gradient(#fff 0%, #aaa 60%, #666 70%, #aaa 100%);
    border-radius: 100%;
    border: 1px solid #777;
    min-width: 5rem;
    min-height: 5rem;
    aspect-ratio: 1 / 1;
    position: relative;
    z-index: 1;
  }
  #timepiece_fob {
    position: absolute;
    top: -1rem;
    left: calc(50% - 0.25rem);
    width: 0.5rem;
    height: 1.5rem;
    background-color: #bbb;
    clip-path: polygon(0% 0%, 100% 0%, 80% 100%, 30% 100%);
    border-top: 0.25rem double #666;
    background-image: linear-gradient(90deg, #bbb, #888, #bbb, #888, #bbb, #888, #bbb, #888, #bbb, #888);
    z-index: 0;
  }
  #timepiece_clip {
    border: 0.25rem solid #888;
    width: 2rem;
    height: 1.5rem;
    border-radius: 50%;
    position: absolute;
    left: calc(50% - 1rem);
    top: -1.75rem;
    z-index: 1;
  }
  #timepiece_clip::after {
    content: '';
    width: 1.25rem;
    height: 0.5rem;
    background-color: #ddd;
    display: block;
    border-radius: 50%;
    position: absolute;
    bottom: -0.6rem;
    left: calc(50% - 0.625rem);
    background-image: radial-gradient(#ccc 0%, #777 60%, #333 70%);
  }
  #timepiece_face {
    width: 4rem;
    height: 4rem;
    background-image: radial-gradient(rgb(255 244 234) 0%, rgb(215 169 129) 60%, rgb(255 244 234) 80%);
    border-radius: 50%;
    aspect-ratio: 1 / 1;
    position: absolute;
    top: calc(0.5rem - 0.5px);
    left: calc(0.5rem - 0.5px);
    border: 1px solid #666;
  }
  #timepiece_dial {
    width: 0.5rem;
    height: 0.5rem;
    background-color: #07180b;
    background-image: radial-gradient(#264b2f, #000);
    position: absolute;
    left: calc(50% - 0.25rem);
    top: calc(50% - 0.25rem);
    border-radius: 50%;
    z-index: 1;
    border: 1px solid #000;
  }
  #timepiece_face::before {
    content: '';
    display: block;
    border-radius: 50%;
    width: 100%;
    height: 100%;
    background-image: radial-gradient(rgba(255,255,255,0.3) 0%, rgba(255,255,255,0.2) 70%);
    position: relative;
    z-index: 4;
  }
  #timepiece_face::after {
    content: '';
    display: block;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.5);
    position: absolute;
    right: 0.4rem;
    top: 0.75rem;
    width: 1rem;
    height: 0.5rem;
    transform: rotate(45deg);
  }
  #timepiece_numbers {
      width: 100%;
      height: 100%;
      position: absolute;
      top: 0;
      left: 0;
      z-index: 0;
  }
  #timepiece_numbers span::before {
      content: '';
      display: block;
      font-size: 0.5rem;
      position: absolute;
      top: 0.25rem;
      left: 0;
      font-family: inherit;
      color: #07180b;
      width: 100%;
  }
  #timepiece_numbers span#timepiece_num_12::before {
      content: 'XII';
  }
  #timepiece_numbers span#timepiece_num_3::before {
      content: 'III';
      top: calc(50% - 0.25rem);
      width: calc(100% - 0.25rem);
      text-align: right;
  }
  #timepiece_numbers span#timepiece_num_6::before {
      content: 'VI';
      top: calc(100% - 0.75rem);
  }
  #timepiece_numbers span#timepiece_num_9::before {
      content: 'IX';
      top: calc(50% - 0.25rem);
      text-align: left;
      left: 0.25rem;
  }
  .hand {
      height: 0.5rem;
      background-color: #07180b;
      background-image: linear-gradient(0deg, #07180b 0%, #07180b 30%, #455e4a 48%, #d9ebdd 50%, #455e4a 52%, #07180b 70%, #07180b 100%);
      position: absolute;
      top: calc(50% - 0.25rem);
      left: 50%;
      clip-path: polygon(0% 30%, 80% 0%, 90% 50%, 80% 90%, 0% 70%);
      transform-origin: left center;
      transform: rotate(-90deg);
  }
  #timepiece_hand_hour {
    width: 30%;
    clip-path: polygon(0% 30%, 80% 0%, 100% 50%, 80% 100%, 0% 70%);
  }
  #timepiece_hand_minute {
    width: 50%;
  }
  #timepiece_hand_second {
    width: 50%;
    height: 0.25rem;
  }

    /* hour hands */
  .hour_1 {
    transform: rotate(300deg);
  }
  .hour_2 {
    transform: rotate(330deg);
  }
  .hour_3, .minute_15 {
    transform: rotate(0deg);
  }
  .hour_4 {
    transform: rotate(30deg);
  }
  .hour_5 {
    transform: rotate(60deg);
  }
  .hour_6, .minute_30 {
    transform: rotate(90deg);
  }
  .hour_7 {
    transform: rotate(120deg);
  }
  .hour_8 {
    transform: rotate(150deg);
  }
  .hour_9, .minute_45 {
    transform: rotate(180deg);
  }
  .hour_10 {
    transform: rotate(210deg);
  }
  .hour_11 {
    transform: rotate(240deg);  
  }
  .hour_12, .minute_0 {
    transform: rotate(270deg);  
  }

/* step 8 */
body.step8 #carafe {
  top: -5rem;
}
#press {
  width: 100%;
  height: 1em;
  background-color: #222;
  position: absolute;
  top: 0;
  z-index: 0;
}
#press::before {
  content: '';
  display: block;
  position: absolute;
  width: 0.5rem;
  height: 16.5rem;
  top: -16.5rem;
  left: calc(50% - 0.25rem);
  background-color: #aaa;
  z-index: -1;
}
#press::after {
  content: '';
  display: block;
  position: absolute;
  width: 2rem;
  height: 2rem;
  background-color: #222;
  border-radius: 100%;
  left: calc(50% - 1rem);
  top: -18rem;
}
body.step8 #carafe, body.step9 #carafe {
  cursor: pointer;
  filter: drop-shadow(0.25rem 0.5rem 0.5rem rgba(0,0,0,0.3));
}

/* step 9 */
#coffeeCup {
  background-color: #000;
  border: 0.25rem solid #acbeaf;
  width: 8rem;
  height: 9rem;
  border-radius: 0.25rem 0.25rem 0.5rem 0.5rem;
  position: relative;
  left: 1rem;
  top: -2rem;
  vertical-align: middle;
  z-index: 1;
  cursor: default;
}
#coffeeCup_handle {
  border: 1rem solid #acbeaf;
  position: absolute;
  right: -3rem;
  top: 0.6rem;
  height: 80%;
  width: 3rem;
  border-radius: 0 100% 100% 0;
  z-index: 0;
  border-left: 0;
}
#coffeeCup_text {
  position: absolute;
  top: calc(50% - 2.5rem);
  width: 100%;
  font-size: 2rem;
  text-transform: uppercase;
  color: #acbeaf;
  font-weight: 900;
  font-family: Courier, monospace;
}
#coffeeCup.steaming #coffeeCup_steam {
  border-radius: 50%;
  background-color: #fff;
  width: 100%;
  height: 1rem;
  top: -1rem;
  position: absolute;
  animation: steamCup 0.5s infinite;
}

/* controls */
#controls {
  position: absolute;
  right: 0.5rem;
  bottom: 0.5rem;
  z-index: 10;
}
#controls button {
  color: #07180b;
}



/* show / hide step-related elements based on body class */
.item[class*="step"] { display: none; }
body.step1 .step1,
body.step2 .step2,
body.step3 .step3,
body.step4 .step4,
body.step5 .step5,
body.step6 .step6,
body.step7 .step7,
body.step8 .step8,
body.step9 .step9 { display: block; }


/* media queries */
@media (max-width: 767px) {
  .visible-xs { display: block; }
  #scoopInput {
    width: calc(100% - 2rem);
  }
}


/* animations */
@keyframes steam {
  from {
    left: -1rem;
    opacity: 1;
  }
  to {
    left: -5rem;
    opacity: 0;
  }
}
@keyframes steamCup {
  from {
    top: -1rem;
    opacity: 1;
  }
  to {
    top: -3rem;
    opacity: 0;
  }
}