body {
  background-color: rgb(10, 5, 26);
  color: white;
}

span {
  font-family: "Major Mono Display", "Courier New", "monospace";
}

.joulu {
  color: rgb(20, 128, 20);
  text-shadow: 0 0 0.4em #ff0000, 0 0 3em #00ff15;
  display: inline-block;
}

.joulu2 {
  color: #ff0000;
  text-shadow: 0 0 0.4em #00ff15, 0 0 3em #ff0000;
  display: inline-block;
}

.aatto2 {
  color: rgb(20, 128, 20);
  text-shadow: 0 0 0.4em #ff0000, 0 0 3em #00ff15;
  display: inline-block;
}

.aatto1 {
  color: #ff0000;
  text-shadow: 0 0 0.4em #00ff15, 0 0 3em #ff0000;
  display: inline-block;
}

#main {
  color: white;
  margin: auto;
  width: 50%;
  /*text-align: center;*/
}

#aatto{

  font-size: clamp(1rem, 2em, 6vw);
}

#next-div {
  text-align: left;
  align-content: center;
  display: flex;
  flex-wrap: wrap;
}
a {
  color: gray;
}

@media only screen and (max-width: 1500px) {
  #main {
    color: white;
    margin: auto;
    width: 50%;
  }
}

@media only screen and (max-width: 1000px) {
  #main {
    color: white;
    margin: auto;
    width: 95%;
  }
}

@media only screen and (max-width: 600px) {
  #main {
    color: white;
    margin: auto;
    width: 95%;
  }
}

p {
  font-size: 0.4em;
  margin: 0 auto;

  text-align: center;
}