/* ==============================
   Imported Fonts
============================== */
@import url('https://fonts.googleapis.com/css2?family=Josefin+Sans:ital,wght@0,100..700;1,100..700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Cardo:ital,wght@0,400;0,700;1,400&display=swap');

/* ==============================
   Root Variables
============================== */
:root{
    --primary-font: "Josefin Sans", serif;
    --secondary-font: "Cardo", serif;
}

/* opening text */
.opening-text{
    float: left;
    width: 100%;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 90px 0 0 0;
}

.opening-text p{
    width: 80%;
    font-family: var(--primary-font);
    font-size: 12pt;
    color: #000;
}

/* contact form */
.contact-form{
    float: left;
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin: 30px 0;
}

.contact-form form{
    width: 80%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.contact-form label{
    float: left;
    width: 100%;
    font-family: var(--secondary-font);
    font-size: 12pt;
    font-style: italic;
}

.contact-form input{
    float: left;
    width: 100%;
    background: #fff;
    border: 1px solid #000;
    padding: 5px;
    font-family: var(--secondary-font);
    font-size: 12pt;
    color: #000;
    margin: 0 0 10px;
}

.contact-form textarea{
    float: left;
    width: 100%;
    background: #fff;
    border: 1px solid #000;
    padding: 5px;
    font-family: var(--secondary-font);
    font-size: 12pt;
    color: #000;
}

.contact-form button{
    width: 50%;
    margin: 50px 0 0;
    background: #fff;
    border: 1px solid #000;
    padding: 5px 0;
    font-family: var(--secondary-font);
    font-size: 14pt;
    font-style: italic;
    color: #000;
    transition: all .3s ease-in;
    cursor: pointer;
}

.contact-form button:hover{
    background: #000;
    color: #fff;
}

.alternate-method{
    float: left;
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin: 0 0 30px 0;
}

.alternate-method p{
    width: 80%;
    text-align: center;
    font-family: var(--primary-font);
    font-size: 12pt;
    color: #000;
    margin: 0 0 20px;
}

.alternate-method a{
    text-align: center;
    width: 80%;
    font-family: var(--primary-font);
    font-size: 12pt;
    color: #000;
    margin: 0 0 2.5px 0;
}

.footer{
    width: 100%;
    position: relative;
    bottom: 0;
}

@media (min-width: 550px){
    .contact-form button{
        width: 205px;
    }
}

@media (min-width: 769px){
    .contact-form form{
        width: 615px;
    }

    .footer{
        width: 100%;
        position: fixed;
        bottom: 0;
    }
}