@font-face{
    font-family: "corsiva";
    src: url('Monotype-Corsiva-Regular.ttf');
}

@font-face{
    font-family: "lucon";
    src: url('lucon.ttf');
}

@font-face{
    font-family: "cour";
    src: url('cour.ttf');
}

@font-face{
    font-family: "helvetica";
    src: url('Helvetica.ttf');
}

@font-face{
    font-family: "helvetica-bold";
    src: url('Helvetica-Bold.ttf');
}

@font-face{
    font-family: "oblique";
    src: url('Helvetica-Oblique.ttf');
}

#typing-container {
  font-family: monospace;
  color: white;
  font-size: 24px;
  line-height: 35px;
  text-align: center;
  position: absolute;
  top: 920px;
  left: 1230px;
}

#cursor {
  animation: blink 0.8s infinite;
}

@keyframes blink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0; }
}

.scanlines {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  pointer-events: none;
  z-index: 9999;

  background: repeating-linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0.266) 0px,
    rgba(0, 0, 0, 0.274) 1px,
    transparent 1px,
    transparent 3px
  );

  mix-blend-mode: multiply;
  opacity: 0.4;
}

.pc{
    transform: scale(.4);
    position: absolute;
    top: 150px;
    left: 375px;
    filter: drop-shadow(0 0 20px rgb(255, 255, 255));
}

#enter-link{
    color: white;
}

#enter-link:hover{
    background-color: rgb(255, 255, 255);
    color: black !important;
    border-radius: 10%;
    padding: 5px;
}

body{
    background-size: 100%;
    background-color:#0a0a0a;
    width: 100vw;
    height: 100vh;
    margin: 0;
    overflow-y: hidden;
    overflow-x: hidden;
}

#context_menu{
    position: absolute;
    z-index: 11111;
    background-image: url('');
	  background-size: 50%;
    border: 1px dotted ;
    color: 0;
    display: none;
    letter-spacing: 2px;
    width: 0;
}

html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
    cursor: url(key.png), auto;
    font-weight: 500;
    font-size: 20px;
    width: 100vw;
    height: 100vh;
    overflow-y: hidden;
    overflow-x: hidden;
}

.footer{
    z-index: 100;
    position: absolute;
    top: 610px;
    font-size: 14px;
    left: 210px;
    width: 1000px;
    font-family: 'helvetica';
}

/*SCREEN SIZES*/

/*ipad/tablet screens*/


@media screen and (min-width: 800px) and (orientation: landscape){
    #everything { position: absolute; zoom: 50%;
    left:-500px;
    top:-240px; }
    #text { 
        overflow: auto; 
        overflow: scroll; 
    }
    #text111{
        -webkit-text-size-adjust: 145%;
        text-size-adjust: 145%;
        line-height: 10px !important;
        opacity: 90% !important;
    }
    #context_menu{
        line-height: 24px !important;
    }
    body{
        background-size: 100% !important;
    }
}

@media screen and (min-width: 900px) and (orientation: landscape){
    #everything { position: absolute; zoom: 66%;
    left:-580px;
    top:-260px; }
    #text { 
        overflow: auto; 
        overflow: scroll; 
    }
    #text111{
        -webkit-text-size-adjust: 145%;
        text-size-adjust: 145%;
        line-height: 10px !important;
        opacity: 90% !important;
    }
    #context_menu{
        line-height: 24px !important;
    }
    body{
        background-size: 100% !important;
    }
}

@media screen and (min-width: 1000px) and (orientation: landscape){
    #everything { position: absolute; zoom: 68%;
    left:-550px;
    top:-280px; }
    #text { 
        overflow: auto; 
        overflow: scroll; 
    }
    #text111{
        -webkit-text-size-adjust: 145%;
        text-size-adjust: 145%;
        line-height: 10px !important;
        opacity: 90% !important;
    }
    #context_menu{
        line-height: 24px !important;
    }
    body{
        background-size: 120% !important;
    }
}

/*mobile screens*/

@supports not (-webkit-touch-callout: none) {
    @media screen and (min-width: 1px) and (max-width: 428px)and (orientation: portrait){
    #everything { position: absolute; zoom: 60%;
    left:-940px;
    top:-100px;
    }
    body{
        background-size: 280%;
    }
    div{
        width: 100;
    }
}}

/*
@supports not (-webkit-touch-callout: none) {
    @media screen and (max-width: 176px) and (min-width: 176px) and (orientation: portrait){
    #everything { position: absolute; zoom: 22%;
    left:-900px;
    top:-200px;
  }
    #text { 
        overflow: auto; 
        overflow: scroll; 
    }
    #text111{
        -webkit-text-size-adjust: 145%;
        text-size-adjust: 145%;
        line-height: 10px !important;
        opacity: 90% !important;
    }
    #context_menu{
        line-height: 24px !important;
    }
    body{
        background-size: 200% !important;
    }
}}
/*
@supports not (-webkit-touch-callout: none) {
    @media screen and (max-width: 240px) and (min-width: 240px) and (orientation: portrait){
    #everything { position: absolute; zoom: 34%;
    left:-940px;
    top:-240px;
  }
    #text { 
        overflow: auto; 
        overflow: scroll; 
    }
    #text111{
        -webkit-text-size-adjust: 145%;
        text-size-adjust: 145%;
        line-height: 10px !important;
        opacity: 90% !important;
    }
    #context_menu{
        line-height: 24px !important;
    }
    body{
        background-size: 220% !important;
    }
}}

@supports not (-webkit-touch-callout: none) {
    @media screen and (max-width: 320px) and (min-width: 320px) and (orientation: portrait){
    #everything { position: absolute; zoom: 50%;
    left:-960px;
    top:-200px;
  }
    #text { 
        overflow: auto; 
        overflow: scroll; 
    }
    #text111{
        -webkit-text-size-adjust: 145%;
        text-size-adjust: 145%;
        line-height: 10px !important;
        opacity: 90% !important;
    }
    #context_menu{
        line-height: 24px !important;
    }
    body{
        background-size: 280% !important;
    }
}}

@supports not (-webkit-touch-callout: none) {
    @media screen and (max-width: 360px) and (min-width: 360px)and (orientation: portrait){
    #everything { position: absolute; zoom: 50%;
    left:-940px;
    top:-80px;
  }
    #text { 
        overflow: auto; 
        overflow: scroll; 
    }
    #text111{
        -webkit-text-size-adjust: 145%;
        text-size-adjust: 145%;
        line-height: 10px !important;
        opacity: 90% !important;
    }
    #context_menu{
        line-height: 24px !important;
    }
    body{
        background-size: 280% !important;
    }
}}

@supports not (-webkit-touch-callout: none) {
    @media screen and (max-width: 375px) and (min-width: 375px) and (orientation: portrait){
    #everything { position: absolute; zoom: 50%;
    left:-930px;
    top:-20px;
  }
    #text { 
        overflow: auto; 
        overflow: scroll; 
    }
    #text111{
        -webkit-text-size-adjust: 145%;
        text-size-adjust: 145%;
        line-height: 10px !important;
        opacity: 90% !important;
    }
    #context_menu{
        line-height: 24px !important;
    }
    body{
        background-size: 280% !important;
    }
}}

@supports not (-webkit-touch-callout: none) {
    @media screen and (max-width: 390px) and (min-width:390px) and (orientation: portrait){
    #everything { position: absolute; zoom: 58%;
    left:-960px;
    top:-20px;
  }
    #text { 
        overflow: auto; 
        overflow: scroll; 
    }
    #text111{
        -webkit-text-size-adjust: 145%;
        text-size-adjust: 145%;
        line-height: 10px !important;
        opacity: 90% !important;
    }
    #context_menu{
        line-height: 24px !important;
    }
    body{
        background-size: 400% !important;
    }
}}

@supports not (-webkit-touch-callout: none) {
    @media screen and (max-width: 414px) and (min-width:414px) and (orientation: portrait){
    #everything { position: absolute; zoom: 60%;
    left:-940px;
    top:-20px;
  }
    #text { 
        overflow: auto; 
        overflow: scroll; 
    }
    #text111{
        -webkit-text-size-adjust: 145%;
        text-size-adjust: 145%;
        line-height: 10px !important;
        opacity: 90% !important;
    }
    #context_menu{
        line-height: 24px !important;
    }
    body{
        background-size: 280% !important;
    }
}}

@supports not (-webkit-touch-callout: none) {
    @media screen and (max-width: 428px) and (min-width:428px) and (orientation: portrait){
    #everything { position: absolute; zoom: 60%;
    left:-940px;
    top:-20px;
  }
    #text { 
        overflow: auto; 
        overflow: scroll; 
    }
    #text111{
        -webkit-text-size-adjust: 145%;
        text-size-adjust: 145%;
        line-height: 10px !important;
        opacity: 90% !important;
    }
    #context_menu{
        line-height: 24px !important;
    }
    body{
        background-size: 340% !important;
    }
}}

/*monitors*/

@media screen and (min-width: 1200px) and (orientation: landscape){
    #everything { 
    position: absolute; 
    zoom: 80%;
    left:-510px;
    top:-200px; }
    #text { 
        overflow: auto; 
        overflow: scroll; 
    }
    #text111{
        -webkit-text-size-adjust: 145%;
        text-size-adjust: 145%;
        line-height: 10px !important;
        opacity: 90% !important;
    }
    #context_menu{
        line-height: 24px !important;
    }
    body{
        background-size: 100% !important;
    }
}

@media screen and (min-width: 1300px) and (orientation: landscape){
    #everything { 
    position: absolute; 
    zoom: 80%;
    left:-460px;
    top:-220px; }
    #text { 
        overflow: auto; 
        overflow: scroll; 
    }
    #text111{
        -webkit-text-size-adjust: 145%;
        text-size-adjust: 145%;
        line-height: 10px !important;
        opacity: 90% !important;
    }
    #context_menu{
        line-height: 24px !important;
    }
    body{
        background-size: 120% !important;
    }
}

@media screen and (min-width: 1400px) and (orientation: landscape){
    #everything { position: absolute; zoom: 90%;
    left:-500px;
    top:-200px; }
    #text { 
        overflow: auto; 
        overflow: scroll; 
    }
    #text111{
        -webkit-text-size-adjust: 145%;
        text-size-adjust: 145%;
        line-height: 10px !important;
        opacity: 90% !important;
    }
    #context_menu{
        line-height: 24px !important;
    }
    body{
        background-size: 120% !important;
    }
}

@media screen and (min-width: 1600px) and (orientation: landscape){
    #everything { position: absolute; zoom: 90%;
    left:-420px;
    top:-200px; }
    #text { 
        overflow: auto; 
        overflow: scroll; 
    }
    #text111{
        -webkit-text-size-adjust: 145%;
        text-size-adjust: 145%;
        line-height: 10px !important;
        opacity: 90% !important;
    }
    #context_menu{
        line-height: 24px !important;
    }
    body{
        background-size: 120% !important;
    }
}

@media screen and (min-width: 1680px) and (orientation: landscape){
    #everything { position: absolute; zoom: 100%;
    left:-480px;
    top:-180px; }
    #text { 
        overflow: auto; 
        overflow: scroll; 
    }
    #text111{
        -webkit-text-size-adjust: 145%;
        text-size-adjust: 145%;
        line-height: 10px !important;
        opacity: 90% !important;
    }
    #context_menu{
        line-height: 24px !important;
    }
    body{
        background-size: 120% !important;
    }
}

    
@media screen and (min-width: 1700px) and (orientation: landscape){
    #everything { position: absolute; zoom: 100%;
    left:-340px;
    top:-80px; }
    #text { 
        overflow: auto; 
        overflow: scroll; 
    }
    #text111{
        -webkit-text-size-adjust: 145%;
        text-size-adjust: 145%;
        line-height: 10px !important;
    }
    #context_menu{
        line-height: 24px !important;
    }
    body{
        background-size: 120% !important;
    }
}

@media screen and (min-width: 1900px) and (orientation: landscape){
    #everything { position: absolute; zoom: 100%;
    left:-340px;
    top:-160px; }
    #text { 
        overflow: auto; 
        overflow: scroll; 
    }
    #text111{
        -webkit-text-size-adjust: 145%;
        text-size-adjust: 145%;
        line-height: 10px !important;
    }
    #context_menu{
        line-height: 24px !important;
    }
    body{
        background-size: 120% !important;
    }
}

/*around my monitor size*/

@media screen and (min-width: 2000px) and (orientation: landscape){
    #everything { 
        position: absolute;
        zoom: 100%;
        top: -2%;
        left: -1%; }
    #text { 
        overflow: auto; 
        overflow: scroll; 
    }
    #text111{
        -webkit-text-size-adjust: 145%;
        text-size-adjust: 145%;
        line-height: 10px !important;
    }
    #context_menu{
        line-height: 24px !important;
    }
    body{
        background-size: 100% !important;
    }
}

@media screen and (min-width: 2200px) and (orientation: landscape){
    #everything { 
        position: absolute;
        zoom: 90%;
        top: -100px;
        left: -100px; }
    #text { 
        overflow: auto; 
        overflow: scroll; 
    }
    #text111{
        -webkit-text-size-adjust: 145%;
        text-size-adjust: 145%;
        line-height: 10px !important;
    }
    #context_menu{
        line-height: 24px !important;
    }
    body{
        background-size: 100% !important;
    }
}

@media screen and (min-width: 2500px) and (orientation: landscape){
    #everything { 
        position: absolute;
        zoom: 100%;
        top: -40px;
        left: -20px; }
    #text { 
        overflow: auto; 
        overflow: scroll; 
    }
    #text111{
        -webkit-text-size-adjust: 145%;
        text-size-adjust: 145%;
        line-height: 10px !important;
    }
    #context_menu{
        line-height: 24px !important;
    }
    body{
        background-size: 100% !important;
    }
}

    @media screen and (min-width: 3000px) and (orientation: landscape){
    #everything { position: absolute; zoom: 260%;
    left:240px;
    top:80px; }
    #text { 
        overflow: auto; 
        overflow: scroll; 
    }
    #text111{
        -webkit-text-size-adjust: 145%;
        text-size-adjust: 145%;
        line-height: 10px !important;
    }
    #context_menu{
        line-height: 24px !important;
    }
    body{
        background-size: 120% !important;
    }
} 


/* tv monitors for some reason*/

@media screen and (max-width:640px) and (orientation: landscape){
    #everything { 
        position: absolute;
        zoom: 50%;
        top: -240px;
        left: -690px; }
    #text { 
        overflow: auto; 
        overflow: scroll; 
    }
    #text111{
        -webkit-text-size-adjust: 145%;
        text-size-adjust: 145%;
        line-height: 10px !important;
        opacity: 90% !important;
    }
    #context_menu{
        line-height: 24px !important;
    }
    body{
        background-size: 120% !important;
    }
}

@media screen and (min-width:3840px) and (orientation: landscape){
            #everything { 
                position: absolute;
                zoom: 220%;
                top: -220px;
                left: -480px; }
            #text { 
                overflow: auto; 
                overflow: scroll; 
            }
            #text111{
                -webkit-text-size-adjust: 145%;
                text-size-adjust: 145%;
                line-height: 10px !important;
                opacity: 80% !important;
            }
            #context_menu{
                line-height: 24px !important;
            }
            body{
                background-size: 100% !important;
            }
}

@media screen and (min-width:7000px) and (orientation: landscape){
                #everything { 
                    position: absolute;
                    zoom: 220%;
                    top: -220px;
                    left: 400px; }
                #text { 
                    overflow: auto; 
                    overflow: scroll; 
                }
                #text111{
                    -webkit-text-size-adjust: 145%;
                    text-size-adjust: 145%;
                    line-height: 10px !important;
                    opacity: 80% !important;
                }
                #context_menu{
                    line-height: 24px !important;
                }
                body{
                    background-size: 100% !important;
                }
}