:root {
  --blue-deep: #2361FF;
  --blue-cyan: #61FFFF;
  --blue-bright: #24FFFF;
  --blue-light: #D0FCFF;
  --pink: #FF2361;
  --yellow: #FFFF23;
  --gold: #FFDC24;
  --purple: #DC24FF;
  --off-white: #FFFFDC;
}

body {
  margin: 0;
  height: 100vh;
  background: linear-gradient(135deg, var(--blue-deep), var(--blue-cyan));
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: center;
  align-items: center;
  font-family: "Poppins", Arial, sans-serif;
}

.title {
  font-size: 60px;
  font-weight: 900;
  color: var(--pink);
  text-transform: uppercase;
  text-shadow:
    -3px -3px 0 #fff,
     3px -3px 0 #fff,
    -3px  3px 0 #fff,
     3px  3px 0 #fff;
  margin: 0;
}

.number {
  font-size: 70px;
  font-weight: 900;
  color: var(--yellow);
  text-transform: uppercase;
  text-shadow:
    -4px -4px 0 #fff,
     4px -4px 0 #fff,
    -4px  4px 0 #fff,
     4px  4px 0 #fff;
  margin: 0;
}

.title, .number {
  filter: drop-shadow(0 6px 0 rgba(0,0,0,0.2));
}

.tip {
    font-size: 40px;
  font-weight: 700;
  color: var(--pink);
  text-transform: uppercase;
  text-shadow:
    -3px -3px 0 #fff,
     3px -3px 0 #fff,
    -3px  3px 0 #fff,
     3px  3px 0 #fff;
  margin: 0;
  filter: drop-shadow(0 6px 0 rgba(0,0,0,0.2));
}

#inputNum {
    width: 300px;
    height: 40px;
    justify-self: center;
    text-align: center;
    font-size: 30px;
}
#checkBtn {
    width: 300px;
    height: 45px;
    justify-self: center;
    text-align: center;
    font-size: 30px;
    background-color: var(--gold);
    color: var(--off-white);
    border: 4px solid var(--off-white);
}
#againBtn {
    width: 300px;
    height: 45px;
    justify-self: center;
    text-align: center;
    font-size: 30px;
    background-color: var(--pink);
    color: var(--off-white);
    border: 4px solid var(--off-white);

}

.result {
  font-size: 40px;
  font-weight: 700;
  color: var(--yellow);
  text-transform: uppercase;
  text-shadow:
    -3px -3px 0 #fff,
     3px -3px 0 #fff,
    -3px  3px 0 #fff,
     3px  3px 0 #fff;
  margin: 0;
  filter: drop-shadow(0 6px 0 rgba(0,0,0,0.2));
}

#score {
  font-size: 40px;
  font-weight: 700;
  color: var(--pink);
  text-transform: uppercase;
  text-shadow:
    -3px -3px 0 #fff,
     3px -3px 0 #fff,
    -3px  3px 0 #fff,
     3px  3px 0 #fff;
  margin: 0;
  filter: drop-shadow(0 6px 0 rgba(0,0,0,0.2));
}