@font-face {
    font-family: 'ITC Avant Garde Gothic Bold';
    src: url('ITC Avant Garde Gothic Bold.otf') format('opentype');
    font-weight: bold;
    font-style: normal;
}

html, body { height: 100%; }

.title {
    font-family: 'ITC Avant Garde Gothic Bold', 'Courier New', monospace;
    font-size: 2.6rem;
    letter-spacing: 1px;
    text-shadow: 0 0 10px #33ff66;
    margin: 0 0 1rem;
}

nav{
    display:flex;
    flex-direction: row;
    align-items: center;
    justify-content:center;
    position: fixed;
    top: 0;
    left:50%;
    right:50%;
    gap: 2rem;
}

body {
    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; 
    transition: opacity 1.2s ease 0.3s; /*remember delays for splash page fades*/
}

body div{
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .2rem
}

body::before { /*pseudo-elements allow for design without adding new elements (ong i didn't learn about these in info 151)*/
    content: '';
    position: fixed;
    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 */
}

a {
    display: inline-block;
    background: transparent;
    border-radius: 10px;
    border-style: solid; 
    border-color:#33ff66;
    border-width: .5px;
    font-family: Helvetica, Arial;
    text-decoration: none;
    text-align: center;
    text-shadow:#33ff66;
    padding: 0.6rem 2rem;
    font-size: medium;
    color: #33ff66;
    flex-direction: column;
}

a.nav{
    display: inline-block;
    background: transparent;
    border-radius: 10px;
    border-style: solid; 
    border-color:#33ff66;
    border-width: .5px;
    font-family: Helvetica, Arial;
    text-decoration: none;
    text-align: center;
    text-shadow:#33ff66;
    padding: 0.6rem 2rem;
    font-size: xx-large;
    color: #33ff66;
    flex-direction: column;
}

p.about{
    text-align: center; 
    max-width: 60ch;
}