* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

:root {
  --bit-on-color: radial-gradient(circle at center, yellow 30%, red 90%);
  --bit-off-color: radial-gradient(circle at right top, brown 30%, black 90%);
}

html, body {
  background: #000;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
}

body {
  position: relative;
}

.container {
  display: grid;
  grid-template-columns: repeat(1, 1fr);
  row-gap: 1rem;
  column-gap: 1rem;
  margin: 1rem auto;
  padding: 1rem;
  max-width: 960px;
  width: 100%;
  animation: fade-in 1s forwards ease-in-out;
}

.label {
  display: inline-flex;
  font-size: 1.25rem;
  letter-spacing: .25rem;
  text-transform: uppercase;
  background: linear-gradient(
    to bottom,
    #fff8b0 0%,
    #ffd200 35%,
    #ff9a00 60%,
    #ff4e00 100%
  );
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  -webkit-text-stroke: .125rem #b80000;
  text-shadow:
    0 .125rem 0 #7a0000,
    0 .25rem .5rem rgba(0, 0, 0, .85);
}

.label.game-over {
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  transform: translateY(-50%);
  display: flex;
  justify-content: center;
  font-size: 2rem;
  opacity: 0;
  animation: fade-in 2s forwards;
  animation-delay: 11s;
}

.label.continue,
.press-start-container {
  animation: fade-out 1s forwards;
  animation-delay: 11s;
}

@keyframes fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes fade-out {
  from { opacity: 1; }
  to { opacity: 0; }
}

.label.continue {
  justify-self: center;
}

.label.continue::after {
  content: '9';
  display: block;
  animation: continue-counter 10s forwards ease-in-out;
  animation-delay: 1s;
}

@keyframes continue-counter {
  0% { content: '9' }
  10% { content: '8' }
  20% { content: '7' }
  30% { content: '6' }
  40% { content: '5' }
  50% { content: '4' }
  60% { content: '3' }
  70% { content: '2' }
  80% { content: '1' }
  90%, 100% { content: '0' }
}

.press-start-container {
  justify-self: center;
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
  justify-content: center;
  height: 2rem;
}

.press-start-container .label {
  position: absolute;
  top: 0;
}

.label.press {
  opacity: 1;
  animation: blink-press 10s forwards;
  animation-delay: 1s;
}

@keyframes blink-press {
  0%, 20%, 40%, 60%, 80%, 100% { opacity: 1; }
  10%, 30%, 50%, 70%, 90% { opacity: 0; }
}

.label.start {
  opacity: 0;
  animation: blink-start 10s forwards;
  animation-delay: 1s;
}

@keyframes blink-start {
  0%, 20%, 40%, 60%, 80%, 100% { opacity: 0; }
  10%, 30%, 50%, 70%, 90% { opacity: 1; }
}

.img-container {
  justify-self: center;
  max-width: 8rem;
  border-radius: 2rem;
  overflow: hidden;
}

.img-container img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  animation: died 1s forwards ease-in-out;
  animation-delay: 11s;
}

@keyframes died {
  from {}
  to {
    filter: grayscale(100%);
  }
}


.display {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  grid-template-rows: repeat(8, 1fr);
  column-gap: .25rem;
  row-gap: .25rem;
  justify-self: center;
}

.bit {
  width: 1rem;
  height: 1rem;
  border-radius: 50%;
  background: var(--bit-off-color);
}

/* Default number (9) */
.bit-0-1,
.bit-0-2,
.bit-0-3,
.bit-0-4,
.bit-1-0,
.bit-1-1,
.bit-1-4,
.bit-1-5,
.bit-2-0,
.bit-2-1,
.bit-2-4,
.bit-2-5,
.bit-3-0,
.bit-3-1,
.bit-3-4,
.bit-3-5,
.bit-4-1,
.bit-4-2,
.bit-4-3,
.bit-4-4,
.bit-4-5,
.bit-5-4,
.bit-5-5,
.bit-6-0,
.bit-6-1,
.bit-6-4,
.bit-6-5,
.bit-7-1,
.bit-7-2,
.bit-7-3,
.bit-7-4 {
  background: var(--bit-on-color);
}

.bit-0-0 { animation: bit-0-0 10s forwards ease-in-out; }
.bit-0-1 { animation: bit-0-1 10s forwards ease-in-out; }
.bit-0-2 { animation: bit-0-2 10s forwards ease-in-out; }
.bit-0-3 { animation: bit-0-3 10s forwards ease-in-out; }
.bit-0-4 { animation: bit-0-4 10s forwards ease-in-out; }
.bit-0-5 { animation: bit-0-5 10s forwards ease-in-out; }
.bit-1-0 { animation: bit-1-0 10s forwards ease-in-out; }
.bit-1-1 { animation: bit-1-1 10s forwards ease-in-out; }
.bit-1-2 { animation: bit-1-2 10s forwards ease-in-out; }
.bit-1-3 { animation: bit-1-3 10s forwards ease-in-out; }
.bit-1-4 { animation: bit-1-4 10s forwards ease-in-out; }
.bit-1-5 { animation: bit-1-5 10s forwards ease-in-out; }
.bit-2-0 { animation: bit-2-0 10s forwards ease-in-out; }
.bit-2-1 { animation: bit-2-1 10s forwards ease-in-out; }
.bit-2-2 { animation: bit-2-2 10s forwards ease-in-out; }
.bit-2-3 { animation: bit-2-3 10s forwards ease-in-out; }
.bit-2-4 { animation: bit-2-4 10s forwards ease-in-out; }
.bit-2-5 { animation: bit-2-5 10s forwards ease-in-out; }
.bit-3-0 { animation: bit-3-0 10s forwards ease-in-out; }
.bit-3-1 { animation: bit-3-1 10s forwards ease-in-out; }
.bit-3-2 { animation: bit-3-2 10s forwards ease-in-out; }
.bit-3-3 { animation: bit-3-3 10s forwards ease-in-out; }
.bit-3-4 { animation: bit-3-4 10s forwards ease-in-out; }
.bit-3-5 { animation: bit-3-5 10s forwards ease-in-out; }
.bit-4-0 { animation: bit-4-0 10s forwards ease-in-out; }
.bit-4-1 { animation: bit-4-1 10s forwards ease-in-out; }
.bit-4-2 { animation: bit-4-2 10s forwards ease-in-out; }
.bit-4-3 { animation: bit-4-3 10s forwards ease-in-out; }
.bit-4-4 { animation: bit-4-4 10s forwards ease-in-out; }
.bit-4-5 { animation: bit-4-5 10s forwards ease-in-out; }
.bit-5-0 { animation: bit-5-0 10s forwards ease-in-out; }
.bit-5-1 { animation: bit-5-1 10s forwards ease-in-out; }
.bit-5-2 { animation: bit-5-2 10s forwards ease-in-out; }
.bit-5-3 { animation: bit-5-3 10s forwards ease-in-out; }
.bit-5-4 { animation: bit-5-4 10s forwards ease-in-out; }
.bit-5-5 { animation: bit-5-5 10s forwards ease-in-out; }
.bit-6-0 { animation: bit-6-0 10s forwards ease-in-out; }
.bit-6-1 { animation: bit-6-1 10s forwards ease-in-out; }
.bit-6-2 { animation: bit-6-2 10s forwards ease-in-out; }
.bit-6-3 { animation: bit-6-3 10s forwards ease-in-out; }
.bit-6-4 { animation: bit-6-4 10s forwards ease-in-out; }
.bit-6-5 { animation: bit-6-5 10s forwards ease-in-out; }
.bit-7-0 { animation: bit-7-0 10s forwards ease-in-out; }
.bit-7-1 { animation: bit-7-1 10s forwards ease-in-out; }
.bit-7-2 { animation: bit-7-2 10s forwards ease-in-out; }
.bit-7-3 { animation: bit-7-3 10s forwards ease-in-out; }
.bit-7-4 { animation: bit-7-4 10s forwards ease-in-out; }
.bit-7-5 { animation: bit-7-5 10s forwards ease-in-out; }
.bit { animation-delay: 1s; }

/*
  In all animations, with 10s, that means: 
  -  0% = 9
  - 10% = 8
  - 20% = 7
  - 30% = 6
  - 40% = 5
  - 50% = 4
  - 60% = 3
  - 70% = 2
  - 80% = 1
  - 90% = 0
*/
@keyframes bit-0-0 {
  20%, 40% { background: var(--bit-on-color); }
  0%, 10%, 30%, 50%, 60%, 70%, 80%, 90%, 100% { background: var(--bit-off-color); }
}

@keyframes bit-0-1 {
  0%, 10%, 20%, 30%, 40%, 60%, 70%, 90%, 100% { background: var(--bit-on-color); }
  50%, 80% { background: var(--bit-off-color); }
}

@keyframes bit-0-2 {
  0%, 10%, 20%, 30%, 40%, 60%, 70%, 80%, 90%, 100% { background: var(--bit-on-color); }
  50% { background: var(--bit-off-color); }
}

@keyframes bit-0-3 {
  0%, 10%, 20%, 30%, 40%, 60%, 70%, 80%, 90%, 100% { background: var(--bit-on-color); }
  50% { background: var(--bit-off-color); }
}

@keyframes bit-0-4 {
  0%, 10%, 20%, 30%, 40%, 50%, 60%, 70%, 90%, 100% { background: var(--bit-on-color); }
  80% { background: var(--bit-off-color); }
}

@keyframes bit-0-5 {
  20%, 40%, 50% { background: var(--bit-on-color); }
  0%, 10%, 30%, 60%, 70%, 80%, 90%, 100% { background: var(--bit-off-color); }
}

@keyframes bit-1-0 {
  0%, 10%, 20%, 30%, 40%, 60%, 70%, 90%, 100% { background: var(--bit-on-color); }
  50%, 80% { background: var(--bit-off-color); }
}

@keyframes bit-1-1 {
  0%, 10%, 20%, 30%, 40%, 60%, 70%, 80%, 90%, 100% { background: var(--bit-on-color); }
  50% { background: var(--bit-off-color); }
}

@keyframes bit-1-2 {
  80% { background: var(--bit-on-color); }
  0%, 10%, 20%, 30%, 40%, 50%, 60%, 70%, 90%, 100% { background: var(--bit-off-color); }
}

@keyframes bit-1-3 {
  50%, 80% { background: var(--bit-on-color); }
  0%, 10%, 20%, 30%, 40%, 60%, 70%, 90%, 100%{ background: var(--bit-off-color); }
}

@keyframes bit-1-4 {
  0%, 10%, 20%, 30%, 50%, 60%, 70%, 90%, 100% { background: var(--bit-on-color); }
  40%, 80% { background: var(--bit-off-color); }
}

@keyframes bit-1-5 {
  0%, 10%, 20%, 30%, 50%, 60%, 70%, 90%, 100% { background: var(--bit-on-color); }
  40%, 80% { background: var(--bit-off-color); }
}

@keyframes bit-2-0 {
  0%, 10%, 30%, 40%, 90%, 100% { background: var(--bit-on-color); }
  20%, 50%, 60%, 70%, 80% { background: var(--bit-off-color); }
}

@keyframes bit-2-1 {
  0%, 10%, 30%, 40%, 90%, 100% { background: var(--bit-on-color); }
  20%, 50%, 60%, 70%, 80% { background: var(--bit-off-color); }
}

@keyframes bit-2-2 {
  50%, 80% { background: var(--bit-on-color); }
  0%, 10%, 20%, 30%, 40%, 60%, 70%, 90%, 100% { background: var(--bit-off-color); }
}

@keyframes bit-2-3 {
  50%, 80% { background: var(--bit-on-color); }
  0%, 10%, 20%, 30%, 40%, 60%, 70%, 90%, 100% { background: var(--bit-off-color); }
}

@keyframes bit-2-4 {
  0%, 10%, 20%, 50%, 60%, 70%, 90%, 100% { background: var(--bit-on-color); }
  30%, 40%, 80% { background: var(--bit-off-color); }
}

@keyframes bit-2-5 {
  0%, 10%, 20%, 50%, 60%, 70%, 90%, 100% { background: var(--bit-on-color); }
  30%, 40%, 80% { background: var(--bit-off-color); }
}

@keyframes bit-3-0 {
  0%, 30%, 40%, 90%, 100% { background: var(--bit-on-color); }
  10%, 20%, 50%, 60%, 70%, 80% { background: var(--bit-off-color); }
}

@keyframes bit-3-1 {
  0%, 10%, 30%, 40%, 50%, 90%, 100% { background: var(--bit-on-color); }
  20%, 60%, 70%, 80% { background: var(--bit-off-color); }
}

@keyframes bit-3-2 {
  10%, 30%, 40%, 50%, 60%, 80% { background: var(--bit-on-color); }
  0%, 20%, 70%, 90%, 100% { background: var(--bit-off-color); }
}

@keyframes bit-3-3 {
  10%, 20%, 30%, 40%, 60%, 70%, 80% { background: var(--bit-on-color); }
  0%, 50%, 90%, 100% { background: var(--bit-off-color); }
}

@keyframes bit-3-4 {
  0%, 10%, 20%, 30%, 40%, 50%, 60%, 70%, 90%, 100% { background: var(--bit-on-color); }
  80% { background: var(--bit-off-color); }
}

@keyframes bit-3-5 {
  0%, 50%, 90%, 100% { background: var(--bit-on-color); }
  10%, 20%, 30%, 40%, 60%, 70%, 80% { background: var(--bit-off-color); }
}

@keyframes bit-4-0 {
  10%, 30%, 50%, 90%, 100% { background: var(--bit-on-color); }
  0%, 20%, 40%, 60%, 70%, 80% { background: var(--bit-off-color); }
}

@keyframes bit-4-1 {
  0%, 10%, 30%, 50%, 90%, 100% { background: var(--bit-on-color); }
  20%, 40%, 60%, 70%, 80% { background: var(--bit-off-color); }
}

@keyframes bit-4-2 {
  0%, 70%, 80% { background: var(--bit-on-color); }
  10%, 20%, 30%, 40%, 50%, 60%, 90%, 100% { background: var(--bit-off-color); }
}

@keyframes bit-4-3 {
  0%, 20%, 70%, 80% { background: var(--bit-on-color); }
  10%, 30%, 40%, 50%, 60%, 90%, 100% { background: var(--bit-off-color); }
}

@keyframes bit-4-4 {
  0%, 10%, 20%, 30%, 40%, 50%, 60%, 90%, 100% { background: var(--bit-on-color); }
  70%, 80% { background: var(--bit-off-color); }
}

@keyframes bit-4-5 {
  0%, 10%, 30%, 40%, 50%, 60%, 90%, 100% { background: var(--bit-on-color); }
  20%, 70%, 80% { background: var(--bit-off-color); }
}

@keyframes bit-5-0 {
  10%, 30%, 50%, 60%, 90%, 100% { background: var(--bit-on-color); }
  0%, 20%, 40%, 70%, 80% { background: var(--bit-off-color); }
}

@keyframes bit-5-1 {
  10%, 30%, 50%, 60%, 70%, 90%, 100% { background: var(--bit-on-color); }
  0%, 20%, 40%, 80% { background: var(--bit-off-color); }
}

@keyframes bit-5-2 {
  20%, 50%, 70%, 80% { background: var(--bit-on-color); }
  0%, 10%, 30%, 40%, 60%, 90%, 100% { background: var(--bit-off-color); }
}

@keyframes bit-5-3 {
  20%, 50%, 80% { background: var(--bit-on-color); }
  0%, 10%, 30%, 40%, 60%, 70%, 90%, 100% { background: var(--bit-off-color); }
}

@keyframes bit-5-4 {
  0%, 10%, 30%, 40%, 50%, 60%, 90%, 100% { background: var(--bit-on-color); }
  20%, 70%, 80% { background: var(--bit-off-color); }
}

@keyframes bit-5-5 {
  0%, 10%, 30%, 40%, 50%, 60%, 90%, 100% { background: var(--bit-on-color); }
  20%, 70%, 80% { background: var(--bit-off-color); }
}

@keyframes bit-6-0 {
  0%, 10%, 30%, 60%, 70%, 90%, 100% { background: var(--bit-on-color); }
  20%, 40%, 50%, 80% { background: var(--bit-off-color); }
}

@keyframes bit-6-1 {
  0%, 10%, 30%, 60%, 70%, 90%, 100% { background: var(--bit-on-color); }
  20%, 40%, 50%, 80% { background: var(--bit-off-color); }
}

@keyframes bit-6-2 {
  20%, 80% { background: var(--bit-on-color); }
  0%, 10%, 30%, 40%, 50%, 60%, 70%, 90%, 100% { background: var(--bit-off-color); }
}

@keyframes bit-6-3 {
  20%, 80% { background: var(--bit-on-color); }
  0%, 10%, 30%, 40%, 50%, 60%, 70%, 90%, 100% { background: var(--bit-off-color); }
}

@keyframes bit-6-4 {
  0%, 10%, 30%, 40%, 50%, 60%, 90%, 100% { background: var(--bit-on-color); }
  20%, 70%, 80% { background: var(--bit-off-color); }
}

@keyframes bit-6-5 {
  0%, 10%, 30%, 40%, 50%, 60%, 90%, 100% { background: var(--bit-on-color); }
  20%, 70%, 80% { background: var(--bit-off-color); }
}

@keyframes bit-7-0 {
  40%, 70% { background: var(--bit-on-color); }
  0%, 10%, 20%, 30%, 50%, 60%, 80%, 90%, 100% { background: var(--bit-off-color); }
}

@keyframes bit-7-1 {
  0%, 10%, 30%, 40%, 60%, 70%, 80%, 90%, 100% { background: var(--bit-on-color); }
  20%, 50% { background: var(--bit-off-color); }
}

@keyframes bit-7-2 {
  0%, 10%, 20%, 30%, 40%, 60%, 70%, 80%, 90%, 100% { background: var(--bit-on-color); }
  50% { background: var(--bit-off-color); }
}

@keyframes bit-7-3 {
  0%, 10%, 20%, 30%, 40%, 60%, 70%, 80%, 90%, 100% { background: var(--bit-on-color); }
  50% { background: var(--bit-off-color); }
}

@keyframes bit-7-4 {
  0%, 10%, 30%, 50%, 60%, 70%, 80%, 90%, 100% { background: var(--bit-on-color); }
  20% { background: var(--bit-off-color); }
}

@keyframes bit-7-5 {
  50%, 70%, 100% { background: var(--bit-on-color); }
  0%, 10%, 20%, 30%, 40%, 60%, 80%, 90%, 100% { background: var(--bit-off-color); }
}

@media (min-width: 640px) {
  .container {
    grid-template-columns: repeat(2, 1fr);
    row-gap: 4rem;
    align-items: center;
  }

  .label {
    font-size: 2rem;
    -webkit-text-stroke: .25rem #b80000;
    text-shadow:
      0 .25rem 0 #7a0000,
      0 .5rem .625rem rgba(0, 0, 0, .85);
  }

  .label.game-over {
    font-size: 5rem;
  }

  .label.continue {
    justify-self: unset;
  }

  .press-start-container {
    align-self: flex-start;
    justify-self: end;
  }

  .press-start-container .label {
    right: 0;
  }

  .img-container {
    justify-self: center;
    max-width: 20rem;
    border-radius: 4rem;
  }

  .display {
    justify-self: end;
  }
  
  .bit {
    width: 3rem;
    height: 3rem;
  }
}