@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@200;400&family=WindSong&display=swap');


html {
    --color-one: black;
    --color-one-inv: white;
    /* --color-two: rgba(102, 153, 204); */
    --color-two: #b9aa90;
    --color-one-inv: white;
}

body {
    margin:unset;
    font-family: 'Montserrat', Verdana, Geneva, sans-serif;
    font-size: 18px;

    color: var(--color-one, black);
    background-color: var(--color-one-inv, white);

    position: relative;
}

.frame {
    margin: auto;
    padding: 0 2rem;
    box-sizing: border-box;
    max-width: 1920px;
}

img {
    height: inherit;
    max-height: inherit;
    width: auto;
}


a {
    text-decoration: unset;
    color: inherit;
}


[hidden] {
    display:none !important;
}
.spacing {
    margin: 2rem auto;
}

.h100 {
    height: calc(100vh - env(safe-area-inset-bottom) - env(safe-area-inset-top));
}

.w100 {
    width: calc(100vw - env(safe-area-inset-left) - env(safe-area-inset-right));
    margin:auto;
}

.row {
    display:flex;
    flex-direction: row;
    flex-wrap: wrap;
}

.center-h {
    margin: auto;
}

.center-container {
    display: flex;
    justify-content: center; /* Center horizontally */
    align-items: center; /* Center vertically */
}


tbc-header {
    position: relative;
    top: 0;
    z-index: 99;
}

tbc-header::before {
    position: absolute;
    content:"";
    display:block;
    left:0;
    width:100%;
    height:100%;
    background-color: var(--color-two, black);
}

/** MOBILE */
@media only screen and (max-width: 500px ) {
    body {
        font-size: 14px;
    }
    .hideMobile {
        display:none;
    }
    .col-2 {
        grid-template-columns: 1fr;
    }
    .col-2>*{
        text-align: center;
        margin: auto;
    }
    .btn {
        padding: 0.5rem 1rem;
    }
    .frame {
        padding: 0 1rem;
    }
}