@import url('https://fonts.googleapis.com/css2?family=VT323&display=swap');

body {
    position: relative; /* Prevent body scrolling */
    width: 100%;
    height: 100%;
    margin: 0;
    overflow: auto; /* Disable global scrolling */
}

.computer-container {
    position: relative;
    width: 100%;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1;
} 

.screen-container {
    position: absolute;
    top: 13%;
    left: 18.7%;
    width: 52.3%;
    height: 70.7%;
    z-index: 2;
    overflow: hidden;
}
  
.computer-image {
    position: absolute;
    height: 100%;
    width: 100%;
    z-index: 3;
    pointer-events: none;
}

.scroll-content {
    position: relative;
    overflow-y: auto;
    padding-bottom: 40px;
    padding-left: 15px;
    bottom: 40px;
    scrollbar-width: none;
    -ms-overflow-style: none;
    &::-webkit-scrollbar {
        display: none;
    }
}

#screen {
    position: relative;
    width: 100%;
    height: 100%;
    background-color: rgb(5, 66, 5);
    padding: 2% 3%;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    z-index: 2;
    overflow-y: auto;
}


#bezel {
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    pointer-events: none;
    margin: auto;
    z-index: 4;
}

#scan {
    opacity: 45%;
    width: 100%;
    height: 100%;
    pointer-events: none;
    margin: auto;
    z-index: 3;
}

#screen, #bezel, #scan {
    position: absolute;
    top: 0%;
    left: 0%;
    width: 100%;
    height: 100%;
}

#ascii {
    font-family: "VT323", monospace;
    text-shadow: 1px 1px 2px rgb(177, 253, 124), 0 0 1em rgb(177, 253, 124), 0 0 0.2em rgb(177, 253, 124);
    padding-top: 50px;
    color: rgb(180, 239, 41);
    font-size: 15;
    white-space: pre;
    padding-bottom: 0px;
    text-align: center;
}

#text,
#command-input-wrapper {
    font-family: "VT323", monospace;
    text-shadow: 0 0 1em rgb(177, 253, 124), 0 0 .1em rgb(80, 170, 16);
    color: rgb(180, 239, 41);
    font-size: 15;
}

#command-input-wrapper {
    position: sticky;
    display: flex;
    align-items: center;
    margin-top: auto;
    caret-color: transparent;
    z-index: 2;
}

#command-input-display {
    font-family: "VT323", monospace;
    font-size: 15px;
    color: rgb(180, 239, 41);
    text-shadow: 0 0 1em rgb(177, 253, 124), 0 0 .1em rgb(80, 170, 16);
    outline: none;
    background: none;
    border: none;
    white-space: pre;
    position: sticky;
}

#command-input-display::after {
    content: '';
    display: inline-block;
    width: 6px;
    height: 1px;
    background: rgb(180, 239, 41);
    animation: blink .8s steps(1) infinite;
    position: relative;
    vertical-align: bottom;
    margin-left: 5px;
    margin-top: 8px;
}

#output {
    overflow: auto;
    font-family: "VT323", monospace;
    color: rgb(180, 239, 41);
    text-shadow: 0 0 1em rgb(177, 253, 124), 0 0 .1em rgb(80, 170, 16);
    font-size: 17px;
    white-space: pre-wrap;
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* IE/Edge */
}

/* Blinking cursor animation */
@keyframes blink {
    50% {
        background: transparent;
    }
}

.noselect {
    -webkit-touch-callout: none;
    /* iOS Safari */
    -webkit-user-select: none;
    /* Safari */
    -khtml-user-select: none;
    /* Konqueror HTML */
    -moz-user-select: none;
    /* Old versions of Firefox */
    -ms-user-select: none;
    /* Internet Explorer/Edge */
    user-select: none;
    /* Non-prefixed version, currently
                              supported by Chrome, Edge, Opera and Firefox */
}

@keyframes swimAcross {
    0% {
        transform: 
            translate(calc(var(--enter-x) * 1%), calc(var(--enter-y) * 1%)) 
            scale(0.5) 
            rotateZ(calc(var(--enter-rotation) * 1deg));
        opacity: 1;
    }
    20% {
        transform: 
            translate(calc(20vw * var(--rand1)), calc(80vh * var(--rand2))) 
            scale(0.7) 
            rotateZ(calc(15deg * var(--rand-rot1)));
    }
    40% {
        transform: 
            translate(calc(60vw * var(--rand3)), calc(30vh * var(--rand4))) 
            scale(0.8) 
            rotateZ(calc(-25deg * var(--rand-rot2)));
    }
    60% {
        transform: 
            translate(calc(40vw * var(--rand5)), calc(70vh * var(--rand6))) 
            scale(0.9) 
            rotateZ(calc(35deg * var(--rand-rot3)));
    }
    80% {
        transform: 
            translate(calc(80vw * var(--rand7)), calc(50vh * var(--rand8))) 
            scale(0.95) 
            rotateZ(calc(-15deg * var(--rand-rot4)));
    }
    100% {
        transform: 
            translate(calc(var(--exit-x) * 1%), calc(var(--exit-y) * 1%)) 
            scale(0.5) 
            rotateZ(calc(var(--exit-rotation) * 1deg));
        opacity: 1;
    }
}

img[alt="Tully"] {
    will-change: transform;
}