h1 {
    font-family: monospace;
}

body {
    background-color: #181926;
    scroll-behavior: smooth;
}

div.mainFlexContainer {
    display: flex;
    flex-flow: row, nowrap;
    min-height: 640px;
}

div.mainContent {
    order: 2;
    width: 80%;
    padding: 8px;
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    border-style: solid;
    border-width: 6px;
    border-radius: 0px 16px 16px 16px;
    border-color: #b7bdf8;
    background: linear-gradient(165deg, rgb(54, 58, 79, 0.5), rgb(30, 32, 48, 0.5), rgb(30, 32, 48, 0.5));
    z-index: 2;
}

.typed {
    width: 0;
    overflow: hidden;
    text-wrap-mode: wrap;
    white-space: nowrap;
    animation: typeContent 3s steps(100, end) forwards;
}

.hidden {
    width: 0;
    overflow: hidden;
    white-space: nowrap;
}

.cursor {
    animation: cursorBlink 1s ease infinite;
}

@keyframes cursorBlink {
    0% {color: rgb(202, 211, 245, 100);}
    50% {color: rgb(202, 211, 245, 0);}
    100% {color: rgb(202, 211, 245, 100);}
}

@keyframes typeContent {
  from { width: 0 }
  to { width: 100% }
}

button {
    color: #a6da95;
    background-color: #24273a;
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    font-size: large;
    font-weight: bold;
    border: solid;
    border-color: #a6da95;
    border-radius: 4px;
    padding: 8px;
}

button:hover {
    color: #24273a;
    background-color: #b7bdf8;
    border-color: #c6a0f6;
    transition: all 0.8s ease;
}

button.links {
    min-width: 200px; 
    text-align: center
}

a {
  color: #a6da95;
  font-weight: bold;
  text-decoration: none;
}

a:hover {
  color: #b7bdf8;
  font-weight: bolder;
}

a.footer {
    font-size: small;
    font-weight: light;
}

a#renegadespork {
    color: #c6a0f6;
}

a#renegadespork:hover {
  color: #b7bdf8;
  font-weight: bolder;
}

hr {
    color: #5b6078;
}

iframe#doom {
    width:800px;
    height:600px;
    overflow: hidden;
    border:none"
}

table, th, td {
    color: #cad3f5;
    border: 2px solid  #5b6078;
    border-collapse: collapse;
    border-left: hidden;
    border-right: hidden;
    padding: 4px;
}

tr:nth-child(even) {
    background-color: #363a4f;
}

tr:hover {
    background-color: #5b6078;
}

code {
    color: #91d7e3;
    font-family: 'Courier New', Courier, monospace;
    overflow: scroll;
}

footer {
    font-family: Verdana, Geneva, Tahoma, sans-serif;
}

ul {
    list-style-type: '> ';
}

img {
    max-width: 50%;
    display: block;
    margin-left: 5%;
}

img.button {
    height: 50px;
}

#ferris {
    position: relative;
    animation: ferris 1s ease infinite;
}

@keyframes ferris {
    0% {
        left: -2px;
        top: 0px;
    }
    25% {
        left: 0px;
        top: -2px;
    }
    50% {
        left: 2px;
        top: 0px;
    }
    75% {
        left: 0px;
        top: -2px;
    }
    100% {
        left: -2px;
        top: 0px;
    }
}