:root{
    --white: #FFFFFF;
    --black: #000000;
    --gold: #e4b056;
    --green: #709264;
    --container-width: 1200px;
}

html{
    margin:0;
    padding:0;
    width:100%;
    height:auto;
    min-height: 100dvh;
    background: var(--black);
    color:var(--white);
    overflow-x:hidden;
    font-size: clamp(16px, 2.5vw, 1.25rem);
}

body{
    margin:0;
    padding:0;
    width:100%;
    height:auto;
    min-height:100dvh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding:2rem;
}

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

.font-header {
  font-family: "Bona Nova SC", serif;
  font-style: normal;
}

.font-body {
    font-family:sans-serif;
}

.container{
    width:100%;
    max-width: var(--container-width);
    height:auto;
    max-height:calc(var(--container-width) * 9/16);
    padding: 1rem;
    border :1px solid var(--gold);
    border-radius: .8rem;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(3,1fr);
    gap:.5rem;
    .logo{
        grid-column-start: 1;
        grid-column-end: -1;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        position: relative;
        img{
            width:90%;
            max-width:400px;
            height:auto;
            object-fit: contain;
            position:static;
        }
        @media only screen and (min-width:1024px){
            img{
            position: absolute;
            top:0;
            left:50%;
            transform: translateX(-50%) translateY(-55%);
            }
        }
    }
    .tagline{
        color: var(--gold);
        text-align: center;
        font-size: 2rem;
        font-weight: normal;
        margin:1rem auto;
    }
    .body-copy{
        grid-row-start: 2;
        grid-row-end: -1;
        grid-column-start: 1;
        grid-column-end: -1;
        text-align: center;
        font-family: sans-serif;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        a{
            padding:.8rem 2rem;
            border-radius:.8rem;
            background-color: var(--green);
            color:var(--gold);
            text-decoration: none;
            border: 2px solid transparent;
            font-size:1.25rem;
            font-weight:normal;
            display: inline-block;
            white-space: nowrap;
            margin-bottom:1rem;
            transition: color 0.5s ease-out, border-color 0.3s ease-out, background-color 0.3s ease-out;
            &:hover{
                color:var(--gold);
                background-color: var(--black);
                border-color:var(--gold);
            }
        }
        p{
            font-size:1.25rem;
            margin:0 auto 2rem;
        }
    }
}