/* Use box-sizing model */
*, *::before, *::after {
    box-sizing: border-box;
}

html {
    height: 100vh;
}

body {
    font-family: Consolas, Menlo, "Noto Mono", "DejaVu Sans Mono", monospace;
    font-size: 1.2rem;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: rgb(27,31,32);
    color: rgb(207 207 207);
}

main {
    text-align: center;
    max-width: 40ch;
    margin: 4rem;
}

.logo {
    max-width: 156px;
    margin-bottom: 2rem;
}

h1 {
    font-weight: bold;
    margin-bottom: 2rem;
}

p {
    margin-bottom: 2rem;
    text-wrap: balance;
}

a.btn {
    text-decoration: none;;
    display: inline-block;
    padding: 1.5rem 2.5rem;
    background-color: rgb(255, 211, 0);
    color: rgb(27,31,32);
    border-radius: 3rem;
}

a.btn:hover {
    transform: scale(1.1);
    background-color: rgb(255, 224, 77);
    transition: transform 350ms cubic-bezier(0,.26,.13,1.55),background 150ms,color 150ms;
}

@media only screen and (min-width: 600px) {
    body {
        font-size: 2rem;
    }
}