body
{
    background-color: #181818;
}

table
{
    width: 100%;
    height: 100%
}

#main
{
    align-content: center;
    width: 100%;
}

#text
{
    width: 100%;
    text-align: center;
    color: #00d800;
    font-family: 'Inconsolata';
    font-size: 80px;
}

#content
{
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    color: #00d800;
    font-family: 'Inconsolata';
    font-size: 44px;
}

#screen
{
    align-self: center;
    display: flex;
    /*justify-content: center;*/
    align-items: left;
    margin-top: 2%;
    width: 50%;
    height:500px;
    border-color: #e8e8e8;
    border-style: solid;
    border-width: 1px;
}

td.link:hover
{
    color:#00d800;
}

.link
{
    width: 80%;
    text-align: left;
}

.linkHover
{
    width:20%;
    text-align: right;
}

.menu
{
    color: #e8e8e8;
    display: flex-start;
    border-width: 3px;
    border-color: #e8e8e8;
    border-style: solid;
    height: 100%;
    width: 20%;
    align-self: end;
    align-items: left;
}

.preview
{
    color: #e8e8e8;
    margin: 20px;
    width: 80%;
}

.typewriter{
  position: relative;
  overflow: hidden; /* Ensures the content is not revealed until the animation */
  border-right: .15em solid orange; /* The typwriter cursor */
  white-space: nowrap; /* Keeps the content on a single line */
  margin: 0 auto; /* Gives that scrolling effect as the typing happens */
  display: inline-block;
  letter-spacing: .12em; /* Adjust as needed */
  animation: 
    typing 1.8s steps(20),
    blink-caret .75s step-end infinite;
}

.instruction
{
    color:#e8e8e8;
    animation: flashing-text 1.5s step-end infinite;
}

@keyframes flashing-text {
    50% { opacity: 0%; }
}

@keyframes typing {
  from { width: 0 }
  to { width: 25% }
}

@keyframes blink-caret {
  from, to { border-color: transparent }
  50% { border-color: orange; }
}