body, html {
    margin: 0;
    height: 100%;
    font-family: sans-serif;
}

.hero {
    /* Sizing */
    width: 100vw;
    height: 100vh;

    /* Flexbox */
    display: flex;
    justify-content: center;
    align-items: center;

    /* Text styling */
    text-align: center;
    color: #dbb67b;

    /* Background styling */
    background-image: linear-gradient(rgba(0, 0, 0, 0.5),rgba(0, 0, 0, 0.5)), url(../images/hero.jpeg);
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    background-attachment: fixed;
}

.hero h1 {
    /* Text styling */
    font-size: 7em;
    font-family: 'Tangerine', sans-serif;

    /* Margins */
    margin-top: 0;
    margin-bottom: 0;
}

.hero .btn {
    /* Positioning and sizing */
    display: block;
    width: 150px;

    /* Padding and margin */
    padding: 0.5em;
    margin-top: 50px;
    margin-left: auto;
    margin-right: auto;

    /* Text styling */
    color: #dbb67b;
    text-decoration: none;
    font-size: 2.5em;

    /* Border styling */
    border: 3px solid #dbb67b;
    border-radius: 20px;

    opacity: 0.6;
    transition: 0.3s;
}
.btn:hover {
    opacity: 1;
}