@font-face {
    font-family: 'VCR OSD Mono';
    src: url(fonts/VCR_OSD_MONO_1.001.ttf) format("truetype");
}

:root {
    --select: #EC4899;
    --alert: yellow;
    --input: white;
}

body, html {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    background-color: blue;
    color: var(--input);
    font-family: 'VCR OSD Mono', Regular;
    
}

ul {
    list-style: none;
}

#alerts h1, #alerts h3 {
    margin: 20px;
    padding: 0;
}

#container {
    width: 50%;
    margin: auto;
    max-width: 960px;
    /* height: 100vh; */
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
}

#alerts {
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: center;
    margin-top: 20px;
    line-height: .25;
    color: var(--alert);
}

#alert1 {
    font-size: 3em;
}

#alert2 {
    font-size: 2em;
}

#alert1 {
    animation: blinker 1.75s linear infinite;
    -webkit-animation: blinker 1.75s linear infinite;
}
#alert2 {
    animation: blinker 2.5s linear infinite;
    -webkit-animation: blinker 2.5s linear infinite;
}
@keyframes blinker {
    0%, 50% {
        opacity: 0;
    }
    51%, 100% {
        opacity: 1;
    }
}

#inputs {
    margin-top: 80px;
    line-height: 1.25;
}

.input {
    font-size: 1.5em;
}

.input:hover {
    color: var(--select);
}

.input a:hover {
    cursor: pointer;
}

@media(max-width: 812px) {
    body {
        /* background-color: green; */
    }
    #alert1 {
        font-size: 1.75em;
    }

    #alert2 {
        font-size: 1.5em;
    }

    .input {
        font-size: 1em;
    }

 }

 @media(max-width: 512px) {
     body {
         /* background-color: blueviolet; */
     }

     #inputs {  
         width: 150%;
         /* background-color: orange; */
         padding-left: 125px;
     }

     #alert1 {
        font-size: 1.25em;;
    }

    #alert2 {
        font-size: 1.15em;
    }

    .input {
        font-size: .75em;
    }

 }