body {
    font-family: Arial, sans-serif;
    background-color: #323437;
    color: #333;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    height: 100vh;
    margin: 0;
    text-align: center;
}

h1 {
    color: #e2b714;
}

.resetButton .restartText{
    color: #646669;
    font-size: 1.3rem;
    animation: fadeOut 0.3s;
    animation-fill-mode: forwards;
}

.resetButton:hover .restartText{
    animation: fadeIn 0.3s;
    animation-fill-mode: forwards;
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes fadeOut {
  from { opacity: 1; }
  to { opacity: 0; }
}

button{
    background-color: inherit;
    border: none;
    height: fit-content;
    width: fit-content;
    padding: 0px;
    color: #646669;

}

button:hover{
    color: #8a878b;

}


i {
    font-size: 1.5rem;
    color: inherit;
    background-color: #323437;
    margin: 30px;
}

.app {
    display: flex;
    height: 100%; 
    width: fit-content;
    align-items: center;
    justify-content: center;
    flex-direction: inherit;
    margin-bottom: 20%;

}

#display {
    display: flex;
    font-size: 2rem;
    font-weight: bold;
    background-color: inherit;
    width: fit-content;
    height: fit-content;
    align-items: center;
}

#display a{
    margin: 2px;
    color: #646669;
    display: flex;
    align-items: center;
}

#typeWriter{
    display: flex;
    height: 30px;
    width: 3px;
    background-color: #e2b714;
    animation: fadeIn 0.5s infinite alternate;
}


@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}