style.css

@media (min-width: 760px) {
    #container {
        margin:  25px auto;
        width: 500px;
    }

    #screen {
        width: 500px;
        height: 500px;
    }
}

@media (max-width: 760px) {
    #container {
        margin: 25px auto;
        width: 400px;
    }

    #screen {
        width: 400px;
        height: 400px;
    }
}

@media (orientation: portrait) {
    #container {
        margin:  2vh auto;
        width: 80vw;
    }

    #screen {
        width: 80vw;
        height: 80vw;
    }
}

.text {
    font-family: Ubuntu Mono, cursive, Arial;
    font-size: 18px;
    font-style: normal;
    font-variant: normal;
    font-weight: 500;
    line-height: 19px;
}

#btn {
    -webkit-animation: fadein 3s; /* Safari, Chrome and Opera > 12.1 */
    -moz-animation: fadein 3s; /* Firefox < 16 */
    -ms-animation: fadein 3s; /* Internet Explorer */
    -o-animation: fadein 3s; /* Opera < 12.1 */
    animation: fadein 3s;
    display: block;
    margin: auto;
    background: #A8A8A8;
    border: 1px solid;
    border-radius: 5px;
    font-family: Ubuntu Mono, cursive, Arial;
    font-size: 15px;
    padding: 5px;
}

#btn:hover {
    background: #D0D0D0;
}

@keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Firefox < 16 */
@-moz-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Safari, Chrome and Opera > 12.1 */
@-webkit-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Internet Explorer */
@-ms-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}