#countdown {
  font-size: 5rem;
  font-family: 'Creepster', cursive, helvetica, sans-serif;
  color: #ac0c0c;
  text-shadow: 0 0 20px #000, 0 0 10px #e77575;
  letter-spacing: 0.2em;
  text-align: center;
  position: absolute;
  top: 40vh;
  left: 0;
  right: 0;
  margin: 0;
  padding: 0;
}
#start-btn,
#ready-btn {
  font-size: 2rem;
  font-family: 'Creepster', cursive, helvetica, sans-serif;
  color: #ffffff;
  background: #ac0c0c;
  border: none;
  padding: 1rem 2rem;
  cursor: pointer;
  transition: background 0.3s;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  border-radius: 1rem;
}
#start-btn:hover,
#ready-btn:hover {
  background: #e77575;
}


.days {
  font-size: 4rem;
  color: #ac0c0c;
  text-shadow: 0 0 15px #000, 0 0 7px #e77575;
  letter-spacing: 0.18em;
  font-family: 'Creepster', cursive, helvetica, sans-serif;
  display: block;
  margin-top: 1rem;
}

.time {
  font-size: 3rem;
  color: #e77575;
  text-shadow: 0 0 10px #000, 0 0 5px #ac0c0c;
  letter-spacing: 0.15em;
  font-family: 'Creepster', cursive, helvetica, sans-serif;
  display: block;
  margin-top: 1rem;
}
.time {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  gap: 1rem;
  margin-top: 1rem;
}
.digit, .separator {
  display: inline-block;
  font-variant-numeric: tabular-nums;
  max-width: 3.5em;
  text-align: center;
  box-sizing: border-box;
  overflow: hidden;
  white-space: nowrap;
}

#instabutton {
  font-size: 0.5rem;
  font-family: 'Creepster', cursive, helvetica, sans-serif;
  color: #fff;
  background: linear-gradient(135deg, #ac0c0c 60%, #e77575 100%);
  border: 2px solid #e77575;
  padding: 1rem 2.5rem;
  cursor: pointer;
  box-shadow: 0 0 25px #ac0c0c, 0 0 8px #000 inset;
  border-radius: 1.2rem;
  text-shadow: 0 0 10px #000, 0 0 5px #e77575;
  letter-spacing: 0.15em;
  position: absolute;
  left: 50%;
  top: 65%;
  transform: translate(-50%, -50%) scale(1);
  transition: background 0.3s, box-shadow 0.3s, transform 0.2s;
}

#instabutton:hover {
  background: linear-gradient(135deg, #e77575 60%, #ac0c0c 100%);
  box-shadow: 0 0 40px #e77575, 0 0 12px #000 inset;
  color: #fff;
  transform: translate(-50%, -50%) scale(1.08) rotate(-2deg);
}
body {
  position: relative;
  background: url("image.png") center center/cover no-repeat transparent;
  color: #cccccc;
  font-family: 'Creepster', cursive, helvetica, sans-serif;
  min-height: 100vh;
  margin: 0;
  padding: 0;
  overflow-x: hidden;

}



/* Style for myst images placed by JS */
body > img[src^="./myst"] {
  position: absolute !important;
  pointer-events: none !important;
  user-select: none !important;
  z-index: -1 !important;
}


h1, h2, h3, h4, h5, h6 {
  color: #bbbbbb;
  text-shadow: 0 0 10px #000, 0 0 5px #444;
  letter-spacing: 0.1em;
}

a {
  color: #888;
  text-decoration: none;
  transition: color 0.2s;
}

a:hover {
  color: #fff;
  text-shadow: 0 0 5px #444;
}

::-webkit-scrollbar {
  width: 8px;
  background: #222;
}

::-webkit-scrollbar-thumb {
  background: #444;
  border-radius: 4px;
}

/* ---------- Fog ---------- */
.fogwrapper {
  height: 100%;
  position: absolute;
  top: 0;
  width: 100%;
  -webkit-filter: blur(1px) grayscale(0.2) saturate(1.2) sepia(0.2);
  filter: blur(1px) grayscale(0.2) saturate(1.2) sepia(0.2);
}
#foglayer_01, #foglayer_02, #foglayer_03 {
  height: 100%;
  position: absolute;
  width: 200%;
}
#foglayer_01 .image01, #foglayer_01 .image02,
#foglayer_02 .image01, #foglayer_02 .image02,
#foglayer_03 .image01, #foglayer_03 .image02 {
  float: left;
  height: 100%;
  width: 50%;
}
#foglayer_01 {
  -webkit-animation: foglayer_01_opacity 10s linear infinite, foglayer_moveme 15s linear infinite;
  -moz-animation: foglayer_01_opacity 10s linear infinite, foglayer_moveme 15s linear infinite;
  animation: foglayer_01_opacity 10s linear infinite, foglayer_moveme 15s linear infinite;
}
#foglayer_02, #foglayer_03 {
  -webkit-animation: foglayer_02_opacity 21s linear infinite, foglayer_moveme 13s linear infinite;
  -moz-animation: foglayer_02_opacity 21s linear infinite, foglayer_moveme 13s linear infinite;
  animation: foglayer_02_opacity 21s linear infinite, foglayer_moveme 13s linear infinite;
}

/* ---------- Moving Fog ---------- */
/*
  'size: cover' || 'size: 100%'; results remain the same
  'attachment: scroll' can be added or removed; results remain the same
  'attachment: fixed' causing unexpected results in Chrome
  'repeat-x' || 'no-repeat'; results remain the same
*/ 
#foglayer_01 .image01, #foglayer_01 .image02 {
  background: url("https://raw.githubusercontent.com/danielstuart14/CSS_FOG_ANIMATION/master/fog1.png") center center/cover no-repeat transparent;
}
#foglayer_02 .image01, #foglayer_02 .image02,
#foglayer_03 .image01, #foglayer_03 .image02{
  background: url("https://raw.githubusercontent.com/danielstuart14/CSS_FOG_ANIMATION/master/fog2.png") center center/cover no-repeat transparent;
}

/* ---------- Keyframe Layer 1 ---------- */
@-webkit-keyframes foglayer_01_opacity {
  0% { opacity: .1; }
  22% { opacity: .5; }
  40% { opacity: .28; }
  58% { opacity: .4; }
  80% { opacity: .16; }
  100% { opacity: .1; }
}
@-moz-keyframes foglayer_01_opacity {
  0% { opacity: .1; }
  22% { opacity: .5; }
  40% { opacity: .28; }
  58% { opacity: .4; }
  80% { opacity: .16; }
  100% { opacity: .1; }
}
@-o-keyframes foglayer_01_opacity {
  0% { opacity: .1; }
  22% { opacity: .5; }
  40% { opacity: .28; }
  58% { opacity: .4; }
  80% { opacity: .16; }
  100% { opacity: .1; }
}
@keyframes foglayer_01_opacity {
  0% { opacity: .1; }
  22% { opacity: .5; }
  40% { opacity: .28; }
  58% { opacity: .4; }
  80% { opacity: .16; }
  100% { opacity: .1; }
}
/* ---------- Keyframe Layer 2 ---------- */
@-webkit-keyframes foglayer_02_opacity {
  0% { opacity: .5; }
  25% { opacity: .2; }
  50% { opacity: .1; }
  80% { opacity: .3; }
  100% { opacity: .5; }
}
@-moz-keyframes foglayer_02_opacity {
  0% { opacity: .5; }
  25% { opacity: .2; }
  50% { opacity: .1; }
  80% { opacity: .3; }
  100% { opacity: .5; }
}
@-o-keyframes foglayer_02_opacity {
  0% { opacity: .5; }
  25% { opacity: .2; }
  50% { opacity: .1; }
  80% { opacity: .3; }
  100% { opacity: .5; }
}
@keyframes foglayer_02_opacity {
  0% { opacity: .5; }
  25% { opacity: .2; }
  50% { opacity: .1; }
  80% { opacity: .3; }
  100% { opacity: .5; }
}
/* ---------- Keyframe Layer 3 ---------- */
@-webkit-keyframes foglayer_03_opacity {
  0% { opacity: .8 }
  27% { opacity: .2; }
  52% { opacity: .6; }
  68% { opacity: .3; }
  100% { opacity: .8; }
}
@-moz-keyframes foglayer_03_opacity {
  0% { opacity: .8 }
  27% { opacity: .2; }
  52% { opacity: .6; }
  68% { opacity: .3; }
  100% { opacity: .8; }
}
@-o-keyframes foglayer_03_opacity {
  0% { opacity: .8 }
  27% { opacity: .2; }
  52% { opacity: .6; }
  68% { opacity: .3; }
  100% { opacity: .8; }
}
@keyframes foglayer_03_opacity {
  0% { opacity: .8; }
  27% { opacity: .2; }
  52% { opacity: .6; }
  68% { opacity: .3; }
  100% { opacity: .8; }
}
/* ---------- Keyframe moveMe ---------- */
@-webkit-keyframes foglayer_moveme {
  0% { left: 0; }
  100% { left: -100%; }
}
@-moz-keyframes foglayer_moveme {
  0% { left: 0; }
  100% { left: -100%; }
}
@-o-keyframes foglayer_moveme {
  0% { left: 0; }
  100% { left: -100%; }
}
@keyframes foglayer_moveme {
  0% { left: 0; }
  100% { left: -100%; }
}

@media only screen
  and (min-width: 280px)
  and (max-width: 767px) {
    #foglayer_01 .image01, #foglayer_01 .image02,
    #foglayer_02 .image01, #foglayer_02 .image02,
    #foglayer_03 .image01, #foglayer_03 .image02 {
      width: 100%;
    }
  }