html {
    font-family: "Roboto", sans-serif;
}

body {
    background-color: #b7ada7;
    background-image: url('background.jpg');
    background-position: center center;
    background-size: cover;
    background-repeat: no-repeat;
    height: 100vh;
    background-position-y: 50px;
}

h1 {
    font-weight: 900;
    font-size: 2.4em;
    line-height: 1em;
    position: relative;
}

        
button
{
    padding: 0.5em;
	border-radius: 0.5em;
	background-color: #646c6b;
	border: none;
	cursor: pointer;
	font-size: 2em;
	color: #fff;
}
    button:hover:enabled {
        background-color: #fff;
        color: #646c6b;
    }


    button:disabled,
    button[disabled] {
        background-color: #939998;
        color: #cdd1d1;
    }

/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) {
    h1 {
        font-size: 3.2em;
        line-height: 2em;
    }

    button {
        font-size: 2.5em;
        margin: 1em;
    }
}

/* X-Large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {
        
}

/* XX-Large devices (larger desktops, 1400px and up) */
@media (min-width: 1400px) {
    h1 {
        font-size: 4.2em;
    }

    button {
        font-size: 3em;
    }
}