* {margin: 0; padding: 0; box-sizing: border-box;}

body {background: #000; height: 100vh; overflow: hidden; font-family: 'Courier New', monospace;}

#splash {
    position: fixed;
    inset: 0;               /*this is the shorthand for top/right/bottom/left :0 */
    background: #000;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 10; /* allows element to sit above others */
    transition: opacity 1s ease;
    max-width: 100vw; max-height:100vh;
}
#splash img {max-width: 100%; max-height:100%;max-width: 100vw; max-height:100vh; }

#splash.hidden {opacity:0; pointer-events: none;} /* pointer events set to none prevents elements from taking clicks*/

#menu {
    position: fixed;
    inset: 0;
    background: #001100;   /* background and color make phosphor green */
    color: #33ff66;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 1.5rem;
    /*text-shadow: 0 0 6px #33ff66;*/ /* colored shadows produce glows, bu the line is not really needed here. Preserved for use in text sections*/
    opacity: 0;
    transition: opacity 1.2s ease 0.3s; /*remember delays for splash page fades*/
}

#menu.home_row {
    display: flex;         /*default tool for element child alignment/positioning*/    
    flex-direction: row;       
    justify-content: center;   
    align-items: center;       
    gap: 1rem;
}

#menu.visible {opacity: 1;}

#menu::before { /*pseudo-elements allow for design without adding new elements (ong i didn't learn about these in info 151)*/
    content: '';
    position: absolute;
    inset: 0;
    background: repeating-linear-gradient(  /*repeating gradient creates crt lines*/
        to bottom,
        rgba(0,0,0,0) 0px,
        rgba(0,0,0,0)  2px,
        rgba(0,0,0,0.25)  3px,
        rgba(0,0,0,0.25)  4px

    );
    pointer-events: none; /*ensures pseudo-element does not cause interference */
    animation: flicker 3s infinite
}

@keyframes flicker {
    0%, 100% {opacity: 1;}
    50%      {opacity: 0.92;} /*animations require keyframes, subtle drop in opacity produces a CRT flicker */
}