html {
    background: radial-gradient(circle, #ffffff, #ffffff 50%, #cdcdcd 50%, #ffffff);
    background-size: 8px 8px;
}

body {
    background-color: white;
    border: 20px solid #5d3900;
    border-radius: 14px;
    display: block;
    margin-left: auto;
    margin-right: auto;
    height: relative;
    max-width: 1400px;
}

img {
    width: 30%;
    height: 30%;
    display: block; /* makes the image into its own block so it's an element you can affect - this is why align-content or align-items wouldn't work */
    margin-left: auto;
    margin-right: auto;
}

p {
    text-align: center;
    font-family: helvetica, sans-serif;
}

.title {
    font-size: 250%;
}

.quote {
    font-size: 240%;
    font-family: 'Allura', cursive;

}

.button {
    color: green;
    font-size: 120%;
    text-decoration: none;
    border-color: green;
    font-size: 30px;
    text-decoration: underline;
}

.button:hover {
    background-color: #f7fddc;
}