@import url("./css/kelvingrove-regular.css");

:root {
    --primary-brand: #42210B;
    --brand-analogous-green: #423D0B;
    --brand-analogous-brown: #420B10;
    --brand-monochromatic: #6E3712;
    --brand-natural-orange: #d97738;
    --brand-natural-offwhite: #fff5e9;
    --brand-natural-grey: #dfe0df;
    --brand-matching-brown: #54433a;
    --brand-matching-tan: #bca79c;
    --brand-matching-darkgreen: #00493f;
    --brand-matching-green: #367a6f;
    --brand-squash-green: #004e4e;
    --brand-squash-purple: #622a5c;
    --brand-grayfriends-brown: #54433a;
    --brand-grayfriends-tan: #bca79c;
    --brand-dotting-tan: #bca79c;
    --brand-dotting-darkgreen: #0c3015;
    --brand-dotting-green: #a0afa1;
    --brand-threedom-green: #005b48;
    --brand-threedom-blue: #383b7a;
    --brand-highlight-orange: #e27126;
    --brand-highlight-grey: #dfe0df;
    --brand-highlight-brown: #402E32;
}


body {
    background-color: var(--brand-dotting-darkgreen);
    height: 100vh;
    width: 100vw;
    margin: 0px;
    padding: 0px;
}

main {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
}

footer {
    margin-top: 30px;
    font-family: 'Kelvingrove-Regular';
}


.logo-full {
    width: 70%;
    max-width: 780px;
    height: auto;
}

h1 {
    font-size: 1.5rem; 
    font-family: 'Kelvingrove-Regular';
    text-align: center;
}

h2 {
    font-size: 1.0rem; 
    font-family: 'Kelvingrove-Regular';
    text-align: center;
}

h3 {
    font-size: 0.75rem; 
    font-family: 'Kelvingrove-Regular';
    text-align: center;
}

.content {
    background-color: var(--brand-dotting-tan);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 80vw;
    min-width: 300px;
    max-width: 800px;
    height: 100%;
    padding-bottom: 40px;
}

.content>div {
    max-width: 400px;
    margin: 10px 30px;
}
.content p {
    text-align: center;
}

.terms {
    max-width: 600px;
    padding: 20px 40px;
}

.terms p {
    text-align: justify;
}

.embedded {
    background-color: var(--brand-dotting-tan);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding-bottom: 40px;
}

.embedded iframe {
    background-color: var(--brand-dotting-tan);
    border: none;
    padding: 5px;
    min-width: 400px;
    width: 100%;
    max-width: 600px;
}

/* Tablet */
@media (min-width: 768px) {
    h1 {
        font-size: 2.0rem;
    }
    h2 {
        font-size: 1.5rem;
    }

    h3 {
        font-size: 1.5rem;
    }

}

/* Desktop */
@media (min-width: 1024px) {
    h1 {
        font-size: 2.5rem;
    }

    h2 {
        font-size: 2.0rem;
    }

    h3 {
        font-size: 1.5rem;
    }

}