/*=============================
   Color Variables (transparent/black is a placeholder)
=============================*/
:root {
    --main: #2b6cb0;
    --secondary: #63b3ed; /*Lighter version of main*/
    --accent-1: #38b2ac;
    --accent-2: #ed8936;
    --text: #fff;
}

/*=============================
   Background + Text Colors
=============================*/
.main-bg {
    background-color: var(--main);
}

.secondary-bg {
    background-color: var(--secondary);
}

.accent-1 {
    background-color: var(--accent-1);
}

.accent-2 {
    background-color: var(--accent-2);
}

.text {
    color: var(--text);
}

/*=============================
   Header
=============================*/
.header {
    /*Flexbox settings*/
    display: flex;
    align-items: center;
    justify-content: center;

    /*Background color (transparent by default)*/
    background-color: transparent;
    
    /*Text and Padding settings*/
    text-align: center;
    font-size: clamp(1rem, 2.5vw, 5rem);
    min-height: 1.5rem;
    padding: 0.5rem 0;
    margin: 0;
    font-family: "Montserrat", sans-serif;
}

.header h1 {
    margin: 0;
}

/*=============================
Text size and font formatting
=============================*/
.header-text
{
    font-size: clamp(3rem, 2vw, 5rem);
    font-family: "Montserrat", sans-serif;
}
.subheading-text
{
    font-size: clamp(2rem, 1.5vw, 3rem);
    font-family: "Montserrat", sans-serif;
}
.body-text
{
    font-size: clamp(1rem, 1.4vw, 1.3rem);
    font-family: "Inter", sans-serif;
}
.centered-text
{
    text-align: center;
}
#text
{
    min-height: 1.3rem;
}
.width-100
{
    width: 98vw;
}
main
{
    margin: 0px;
    min-height: 30rem;
    height: auto;
}