@font-face {
    font-family: "appleii";
    src: url('../fonts/Apple ][.ttf') format("truetype");
  }

@font-face {
    font-family: "greenscr";
    src: url('../fonts/Greenscr.ttf') format("truetype");
}


body {
    font-family: "appleii", monospace;
    background-color: black;
    color: rgb(5, 143, 5);
}

h1.maintitle {
    font-size: 2.9rem; 
    line-height: 1.0;  
    letter-spacing: -.1rem;
    margin-bottom: 0;
    margin-top: 2.0rem;
}

h4.subtitle {
    font-size: 1.1rem; 
}

.container {
    max-width: 800px; 
}

.dashed-top-bottom {
    border-style: dashed none dashed none;
    padding: 1em;
    margin-top: 0.5em;
    margin-bottom: 2em;
}

.footer {
    font-size: 1.2rem; 
}


@media (min-width: 350px) {
    h1.maintitle {
        font-size: 3.2rem; 
    }

    h4.subtitle {
        font-size: 1.2rem; 
    }
}


/* Larger than mobile */
@media (min-width: 400px) {
    h1.maintitle {
        font-size: 3.5rem; 
    }

    h4.subtitle {
        font-size: 1.3rem; 
    }
}

/* Larger than phablet (also point when grid becomes active) */
@media (min-width: 550px) {
    h1.maintitle {
        font-size: 4.2rem; 
    }    

    h4.subtitle {
        font-size: 1.6rem; 
    }
    
}

@media (min-width: 650px) {
    h1.maintitle {
        font-size: 5.0rem; 
    }    

    h4.subtitle {
        font-size: 1.8rem; 
    }
    
}


/* Larger than tablet */
@media (min-width: 750px) {
    h1.maintitle {
        font-size: 6.0rem;     
    }

    h4.subtitle {
        font-size: 2.2rem; 
    }
    
}

/* Larger than desktop */
@media (min-width: 1000px) {
    h1.maintitle {
        font-size: 8.0rem; 
    }    

    h4.subtitle {
        font-size: 3.0rem; 
    }
    
}

/* Larger than Desktop HD */
@media (min-width: 1200px) {
    h1.maintitle {
        font-size: 8.0rem; 
    } 
    
    h4.subtitle {
        font-size: 3.0rem; 
    }
    
}