html {
    background-color: white;
}

#instructions {
    margin-top: 2em;
    text-align: center;
}

.instructionsDialog {
    text-align: left;
    font-size: 1rem;
    opacity: 1;
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    -o-transform: scale(1);
    transform: scale(1);
    background: white;
    padding: 20px 30px;
    max-width: 550px;
    margin: 40px auto;
    position: relative;
}

.instructionsImage {
    width: 80px;
    vertical-align: middle;
    margin: .25em 0;
}

#buttonTable {
    display: grid;
    grid-template-columns: 200px 200px 200px 200px 200px;
    column-gap: 1em;
    justify-content: center;
    padding-bottom: 1em;
}

.regionButton {
    margin-bottom: 1em;
}

.pulse {
    animation: pulse 2s infinite;
}

@media screen and (max-width: 1200px) {
    #buttonTable {
        grid-template-columns: 200px 200px 200px 200px;
    }
}

@media screen and (max-width: 925px) {
    #buttonTable {
        grid-template-columns: 200px 200px 200px;
    }
}

@media screen and (max-width: 725px) {
    #buttonTable {
        grid-template-columns: 200px;
    }
    
    .inactive {
        display:none;
    }
}

@media screen and (max-width: 505px) {
    #instructions {
        text-align: left;
    }
}