@font-face {
  font-family: ibmBios;
  src: url(WebPlus_IBM_BIOS.woff);
}

@font-face {
  font-family: ibmBios2y;
  src: url(WebPlus_IBM_BIOS-2y.woff);
}

/* Not visually visible, but still semantic */
.no-vis {
    position: absolute;
    left: -10000px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

body {
    background: rgb(0,23,15);
    background: linear-gradient(120deg, rgba(0,23,15,1) 0%, rgba(0,0,0,1) 100%);
    overflow: hidden;
    width: 100%;
    height: 100%;
    position: fixed;
    margin: 0;
}

.background {
    background-image: url("big-background.webp");
    background-repeat: no-repeat;
    background-position: 48% 52%;
    background-size: 3840px 2160px;
    /* background-image: url("background.jpg");
    background-position: 45% 75%;
    background-size: 2560px 1440px; */
    background-scale: 125%;
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: -999999;
}

.screen-overlay {
/*display: none;*/
    background-image: url("screen-overlay.webp");
    background-repeat: no-repeat;
    background-position: 48% 52%;
    mix-blend-mode: color-dodge;
    opacity: 0.9;
    /*background: rgba(0,0,255,0.3);*/
    width: 100%;
    height: 100%;
    position: fixed;
    pointer-events: none;
    z-index: 99;
}

.container {
    position: fixed;
    width: 100%;
    height: 86%;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
}

.font-logo {
    font-size: 8pt;
}

.photo-container {
    /* background: rgba(255,0,0,0.3); */
    position: fixed;
    height: 1200px;
    display: flex;
    align-items: flex-end;
    bottom: 0;
    pointer-events: none;
    z-index: 999;
}

.photo {
    position: relative;
    bottom: -50px;
}

.screen-render {
    width: 75em;
    padding: 2em;
    margin-left: auto;
    margin-right: auto;
    font-family: ibmBios, monospace;
    font-size: 9pt;
    color: #EF9400;
    text-shadow:
        0 0 3px rgba(160,32,0,1),
        0 0 25px rgba(231,126,0,0.5);
    /* background: rgba(0,128,0,0.3); */
    height: 660px;
    overflow-x: scroll;
    overflow-y: visible;
    -ms-overflow-style: none;  /* IE and Edge */
    scrollbar-width: none;  /* Firefox */
    mix-blend-mode: screen;
}

.screen-render::-webkit-scrollbar {
    display: none;
}

.screen-render a {
    color: #EF9400;
}

.screen-render a:hover {
    color: #000;
    background: #EF9400;
    box-shadow:
        0 0 3px rgba(160,32,0,1),
        0 0 25px rgba(231,126,0,0.5);
}

.screen-render h1,
.screen-render h2,
.screen-render h3,
.screen-render h4,
.screen-render h5,
.screen-render h6 {
    display: inline-block;
    color: #000;
    background: #EF9400;
    box-shadow:
        0 0 3px rgba(160,32,0,1),
        0 0 25px rgba(231,126,0,0.5);
}

.screen-render .p {
    display: block;
    color: #EF9400;
    background: none;
    box-shadow: none;
    text-shadow:
        0 0 3px rgba(160,32,0,1),
        0 0 25px rgba(231,126,0,0.5);
}

.center {
    max-width: fit-content;
    margin-left: auto;
    margin-right: auto;
}

.link-list {
    text-align: center;
}

.link-list li {
    margin: 2em 3em;
}
.link-list li a {
    padding: 1em 2em;
}

.no-bullets {
    list-style: none;
    padding: 0;
}

.mobile {
    visibility: hidden;
}

/* LARGE */
@media screen and (min-width: 870px) {
    /* #small_text { display: none; }
    #screen-content { display: block; } */
    .screen-render { font-family: ibmBios, monospace;

    }
}

/* SMALL */
@media screen and (max-width: 870px) {
    .mobile {
        visibility: visible;
    }

    .screen-render { font-family: ibmBios2y, monospace;
        width: 90%;
    }
}

@media screen and (min-width: 870px) and (max-width: 1080px) {
    .screen-render { font-size: 8pt }
}

/* SMALL VERT */
@media screen and (max-height: 930px) {
    .container {
        /* height: 80%; */
        align-items: flex-start;
    }

    .screen-render {
        position: relative;
        top: 7em;
    }

    .background, .screen-overlay {
        background-position-y: 46%;
    }
}

@media screen and (max-width: 1400px) {
    .photo {
        position: relative;
        bottom: -15%;
    }
}
@media screen and (max-height: 1100px) {
    .photo {
        bottom: -25%;
    }
}

@media screen and (min-height: 1250px) {
    .container {
        top: 3%;
    }
}
@media screen and (max-height: 860px) {
    .screen-render {
        height: 75vh;
    }
    .photo {
        display: none;
    }
}
@media screen and (max-height: 760px) {
    .container {
        height: 100%;
    }
    .screen-render {
        top: 0;
        height: 100%;
    }
    .background, .screen-overlay {
        background-position-y: 46%;
    }
}

/* LARGE VERT */
/*@media screen and (min-height: 950px) {
    .screen-render {
        position: relative;
        top: 10%;
        margin-bottom: 200px;
    }
}*/

@media print {
    body {
        overflow: visible;
    }

    .container {
        display: block;
    }

    .screen-render {
        font-size: 8pt;
        color: #000;
        text-shadow: none;
        overflow: visible;
    }

    .screen-render a {
        color: #000;
    }

    .photo, .screen-overlay {
        display: none;
    }
}