body{
    font-family: monospace;
}
#output{
    font-size: 200%;
}
#btn-gen-1{
    width: 200px;
    height: 50pt;
    font-size: 15pt;
}
#btn-gen-5{
    width: 200px;
    height: 50pt;
    font-size: 15pt;
    display: none;
}
h1{
    font-family: 'Lexend Giga', sans-serif;

}

@media only screen and (min-width: 320px){
    .container {
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
    }
    html, body, .container {
        height: 100%;
        margin: 0;
    }
    h1{
        font-size: 1.2rem;
        background-color: #174287;
        color: #F5F5F5;
        padding: .8rem;
        margin: 0;
        text-align: center;
    }
    #output{
        text-align: center;
    }
}

@media only screen and (min-width:768px){
    h1{
    font-size: 3rem;
    background-color: #23D160;
    }
    #btn-gen-1{
        width: 300px;
        height: 75pt;
        font-size: 1.5rem;
    }
    body{
        color: darkgray;
        font-size: 2rem;
    }
}

@media only screen and (min-width:1024px){
    body{
    font-size: 1rem;
    text-align: left;
    }
    h1{
        background-color: #FF3860;
    }
    .container {
        display: block;
        margin: 1rem;
    }
    #output{
        text-align: left;
    }
}
@media only screen and (min-width:1408px){
    body{
    font-size: 1rem;
    text-align: left;
    }
    #btn-gen-1{
        width: 600px;
        height: 150pt;
        font-size: 3rem;
    }
    #btn-gen-5{
        width: 600px;
        height: 150pt;
        font-size: 3rem;
        display: inline;
    }

    h1{
        background-color: #ff00dd;
        font-size: 3rem;
    }
    .container {
        display: block;
        margin: 1rem;
    }

    #output{
        text-align: left;
    }
}