html,body{
    height: 100%;
} 

#root{
    width: 100%;
    height:100%;
    background-color: black;
    display:flex;
    justify-content: center;
    align-items: center;
}

#start-button{
    background-color: black;
    font-size: 100px;
    font-family: "Andale Mono";
    color:white;
    border:none;
    outline:none;
    cursor: pointer;
}

p{
    font-size: 150px;
    font-family: "Arial";
    text-align: center;
}

#loader:after {
    content: '.';
    animation: dots 1s steps(1, end) infinite;
    
}
  
  @keyframes dots {
    0%, 20% {
      color: rgba(0,0,0,0);
      text-shadow:
        .25em 0 0 rgba(0,0,0,0),
        .5em 0 0 rgba(0,0,0,0);}
    40% {
      color: white;
      text-shadow:
        .25em 0 0 rgba(0,0,0,0),
        .5em 0 0 rgba(0,0,0,0);}
    60% {
      text-shadow:
        .25em 0 0 white,
        .5em 0 0 rgba(0,0,0,0);}
    80%, 100% {
      text-shadow:
        .25em 0 0 white,
        .5em 0 0 white;}}