:root {
  /* Set neon color */
  --neon-text-color: #f40;
  --neon-border-color: #08f;
}

body {
  font-family: 'Verdana', sans-serif;
  padding: 2em;
  margin-top: 0em;
  margin-bottom: 3em;
  margin-right: 3em;
  margin-left: 3em;
  background: linear-gradient(120deg, #0c2323 0%, #071414 45%, #020606 100%);
  min-height: 100vh;
}

h1 {
  font-size: 3em;
  font-weight: 200;
  font-style: italic;
  color: #fff;
  padding: 2rem;
  border: 0.4rem solid #fff;
  border-radius: 2rem;
  text-transform: uppercase;
  text-align: center;
  animation: flicker 2s infinite alternate;
}

h1::-moz-selection {
  background-color: var(--neon-border-color);
  color: var(--neon-text-color);
}

h1::selection {
  background-color: var(--neon-border-color);
  color: var(--neon-text-color);
}

h1:focus {
  outline: none;
}

/* Animate neon flicker - credit to: https://codepen.io/GeorgePark/pen/MrjbEr */
@keyframes flicker {

    0%, 19%, 21%, 23%, 25%, 54%, 56%, 100% {

        text-shadow:
            -0.2rem -0.2rem 1rem #fff,
            0.2rem 0.2rem 1rem #fff,
            0 0 2rem var(--neon-text-color),
            0 0 4rem var(--neon-text-color),
            0 0 6rem var(--neon-text-color),
            0 0 8rem var(--neon-text-color),
            0 0 10rem var(--neon-text-color);

        box-shadow:
            0 0 .5rem #fff,
            inset 0 0 .5rem #fff,
            0 0 2rem var(--neon-border-color),
            inset 0 0 2rem var(--neon-border-color),
            0 0 4rem var(--neon-border-color),
            inset 0 0 4rem var(--neon-border-color);
    }

    20%, 24%, 55% {
        text-shadow: none;
        box-shadow: none;
    }
}


h2 {
  color: #071414;
  letter-spacing: .2em;
}

p {
  display: inline;
  font-size: 1.2em;
  color: #071414;
  letter-spacing: 0.1em;
  padding: 0.2em;
}

p1 {
  font-size: 1.2em;
  letter-spacing: 0.2em;
  padding: 0.2em;
}

table, th, td {
  font-size: 1.2em;
  letter-spacing: 0.1em;
  color: #071414;
}

td {
  padding: 0.1em;
  text-align: center;
  border-bottom: 1px solid #ddd;
}

th {
  padding: 0.5em;
}

button {
  border: 2px solid #f44336;
  color: #071414;
  background-color: white;
  height: 2em;
  width: 2em;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 1.2em;
  margin: 0.2em;
  cursor: pointer;
  border-radius: 50%;
  transition: all 0.2s ease-in-out;
}

button:hover {
  background-color: #4CAF50;
  color: white;
  box-shadow: 0 5px 15px #4CAF50;
}

.buttonHolder{
  text-align: center;
}

.chartHolder {
  padding: 5em, 70px, 5em;
}

div {
  border-radius: 2em;
  background-color: #f6fcfc;
  flex: 1;
}

.left-column {
  width: 50%;
  float: left;
  padding: 2%;
}

.right-column {
  width: 40%;
  float: right;
  padding: 2%;
}

/* For screens 1200px wide or less, columns will stack */
@media screen and (max-width: 1200px) {
  .left-column {
    width: 96%;
    margin-bottom: 2em;
  }

  .right-column {
    width: 96%;
    float: left;
  }
}

/* For screens 800px wide or less, columns will stack */
@media screen and (max-width: 800px) {
button {
  font-size: 2em;
}