/*  FONTS  */

@font-face {
    font-family: Mikela;
    src: url(fonts/Mikela-Regular.woff);
  }

@font-face {
    font-family: Circular;
    src: url(fonts/CircularStd-Book.woff);
}

body {
    background-color: #2e392b;
    color: rgb(240, 216, 191);
    align-items: center;
    align-content: center;
}

/*
header, main, footer {
    display: grid;
    grid-template-columns: 
        [full-width-start]
        calc(50vw - 36em)
        [main-content-start]
        repeat(6, [col] 1fr)
        [main-content-end]
        calc(50vw - 36em)
        [full-width-end]
    ;
    grid-column-gap: 2em;
    padding: 1em 0em 1em 0em;
}
*/

.title, .text, .buttons {
    grid-column: 2 / span 3;
    align-items: center;
    margin: auto;
    width: 75%;
}

.text {
    border-bottom: 1px solid rgb(240, 216, 191);
    padding-bottom: 1em;
    text-align: center;
    font-family: Circular;
}

.image {
    min-height: clamp(31.25rem, 24.6479rem + 21.1268vw, 50rem);;
    background-image: url(images/header-image.webp);
    background-repeat: no-repeat;
    background-attachment: none;
    background-size: cover;
    background-position: center center;
}

.buttons {
    margin-top: 3em;
    margin-bottom: 3em;
    align-self: center;
    text-align: center;
}

.button {
    border: none;
    border-radius: 6px;
    padding: 1em 2em;
    margin: .5em;
    color: #2e392b;
    background-color: rgb(240, 216, 191);
}

.button:hover {
    background-color: rgba(240, 216, 191, 0.4);
}

h1 {
    font-family: Mikela;
    text-align: center;
    font-size: clamp(2.25rem, 1.8539rem + 1.2676vw, 3.375rem);
}

a {
    font-family: Circular;
    text-decoration: none;
}