html {
    background-color: #2e2e2e;
}

html,
body,
pre {
margin-top: 0;
margin-bottom: 0;
color: #6bc2ed;
font-family: "Droid Sans Mono Slashed", "Droid Sans Mono", "Lucida Console", "Consolas", monospace;
font-size: 10pt;
/* .8125rem; */
letter-spacing: 0px;
line-height: 12pt;
}

a,
a:hover,
a:visited,
a:focus,
a:active {
text-decoration: none;
color: inherit;
}

body::-webkit-scrollbar {
display: none;
}

.bolt-action {
margin-top: 21px;
cursor: pointer;
}

.bolt-action img.hover {
display: none;
}
.bolt-action img.default {
display: block;
}
.bolt-action:hover img.default {
display: none;
}
.bolt-action:hover img.hover {
display: block;
}

.center-div {
display: flex;
justify-content: center;
flex-wrap: wrap;
}

.fd-column {
flex-direction: column;
}

.col3 {
-moz-column-count: 3;
-webkit-column-count: 3;
column-count: 3;
}

.company-logo {
margin-top: 16pt;
}

.content-wrapper {
flex-direction: column;
align-items: center;
}

.ctr {
text-align: center;
}

.footer {
position: fixed;
width: 600px;
bottom: 0;
max-height: 20px;
}

.hidden {
display: none !important;
}

.show {
display: block !important; /* or flex, grid, inline, etc. */
}


img {
image-rendering: optimizeSpeed;
/* PREFER SPEED OVER SMOOTHING  */
image-rendering: -moz-crisp-edges;
/* Firefox                        */
image-rendering: -o-crisp-edges;
/* Opera                          */
image-rendering: -webkit-optimize-contrast;
/* Chrome (and eventually Safari) */
image-rendering: optimize-contrast;
/* CSS3 Proposed                  */
-ms-interpolation-mode: nearest-neighbor;
/* IE8+                           */
image-rendering: pixelated;
/* Prevents the context menu (long press menu) */
-webkit-touch-callout: none;
/* Disables text selection */
-webkit-user-select: none;
user-select: none;
/* Allow dragging behavior specifically on the image */
touch-action: pan-x pan-y;
/* Prevent default drag */
-webkit-user-drag: none;
}

.main-content {
margin-top: 14px;
}

.menu {
width: 100%;
line-height: 13pt;
margin-bottom: -1pt;
border-top: 1px solid #6bc2ed;
}

.norm {
background-color: #2e2e2e;
color: #6bc2ed;
}

.nrp {
white-space: nowrap;
}

.portrait {
font-size: 10px;
line-height: 10px;
padding: 20px;
margin-top: 12px;
}

.portrait-description {
padding: 20px;
}

.pre {
white-space: pre;
}

.reversed {
background-color: #6bc2ed;
color: #2e2e2e;
}

.rt {
text-align: right;
}

.small-browser {
display: none;
}

.smgmobile {
margin-top: 20px;
}

.top-bar {
border-top: 2px solid #2e2e2e;
}

.missile {
position: fixed;
top: 0;
left: 0;
width: 5px;
height: 50px;
background: yellow; 
animation: missileAnimation .75s linear forwards;
}
@keyframes missileAnimation {
100% {
    top: 20px;
}
}

@keyframes explode {
0% {
    filter: brightness(200%) hue-rotate(180deg);
}
100% {
    transform: scale(0);
    opacity: 0;
}
}

@keyframes slideUp {
0% {
    transform: translateY(0);
}
100% {
    transform: translateY(-100%);
}
}

@keyframes slideDown {
0% {
    transform: translateY(0);
}
100% {
    transform: translateY(100%);
}
}

#welcome-modal {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.8);
color: inherit;
display: flex;
justify-content:center;
align-items: center;
z-index: 1000;
}

.modal-button {
padding: 10px 20px;
font-size: inherit;
color: inherit;
background: transparent;
border: 2px solid #6bc2ed;
width: 140px;
}

.modal-button:hover {
background: #6bc2ed;
color: #2e2e2e;
}

/* Media Queries */

@media screen and (max-width: 625px) {
.big-browser {
    display: none;
}
.small-browser {
    display: block;
}
.content-wrapper {
    max-width: 100%;
}
.menu {
    line-height: 28px;
}
.portrait {
    font-size: 9px;
    line-height: 9px;
}

.footer {
    max-height: 30px;
}

}