:root
{
    --green-color: #a1bda2;
    --black-color: #252e49;
    --gray-color: #999;
    --beige1-color: #f0eddb;
    --beige2-color: #fbfaf4;
    --cancel-color: #a14b5c;
}

html
{
    font-size: 62.5%;
    scroll-behavior: smooth;
}

html, body
{
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
}

body
{
    display: grid;
    grid-template-areas: 
        "header"
        "main"
        "footer"
    ;
    grid-template-columns: 1fr;
    grid-template-rows: auto 1fr auto;
    text-align: center;
    font-size: 1.6rem;
    font-family: 'Montserrat';
    color: var(--black-color);
    background-color: var(--beige2-color);
}

#header
{
    grid-area: header;
    padding: 2rem;
}

#main
{
    grid-area: main;
    padding: 2rem;
    place-content: center;
}

#footer
{
    grid-area: footer;
    padding: 2rem;
}

input, select, textarea
{
    width: 100%;
    display: flex;
    align-items: center;
    font-size: 1.6rem;
    background-color: transparent;
    outline: none;
    border: none;
    resize: none;
    box-sizing: border-box;
    -moz-appearance: none;
    -webkit-appearance: none;
}

::placeholder
{
    
}





.logo
{
    max-width: 180px;
}

.icon
{
    max-width: 64px;
}

.main-title
{
    font-size: 3.2rem;
}

.second-title
{
    font-size: 2rem;
}

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

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

.green-fill
{
    fill: var(--green-color);
}

.cancel-fill
{
    fill: var(--green-color);
}





.content-block
{
    max-width: 960px;
    margin: auto;
    text-align: left;
}





.form-container
{
    text-align: center;
}

.form
{
    max-width: 480px;
    margin: auto;
    padding: 1rem;
    display: grid;
    gap: 2rem;
}

.input-group-col
{
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 2rem;
}

.input-group-row
{
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

.input-block
{
    padding: 1.5rem 2rem;
    display: flex;
    align-items: center;
    gap: 2rem;
    font-weight: 600;
    background-color: var(--beige1-color);
    border-radius: 5rem;
}

.input-btn
{
    margin: auto;
    padding: 1.5rem 2rem;
    color: white;
    font-size: 1.6rem;
    background-color: #a1bda2;
    border: none;
    border-radius: 5rem;

    &:hover
    {
        cursor: pointer;
    }
}