/* -- VARIABLES -- */
:root {
    --hero-height: 95vh;

    --inner-padding: 1.2rem;

    --button-font-size: 0.8rem;
    --button-font-weight: 500;

    --form-response-height: 3vh;

    --corners: 4px; /*container corners*/
    --corner-radius: 2px; /*button corners*/

    --nav-standard-height: 6.5vh;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
    overflow-x: hidden;
    overflow-y: scroll;
    height: 100vh;
}


body {
    font-family: "Ubuntu", serif;
    line-height: 1.4;
    margin: 0;
    padding: 0;
    color: var(--body-text-color);
}


/* -- OTHER -- */
.separator {
    height: 4px;
    background: var(--primary-color);
    width: 100%;
    margin-bottom: 0.35rem;
}
#project-separator {
    margin-bottom: 15px;
}

.margin-element {
    position: absolute;
    bottom: -3.5vh;
    height: 7.5vh;
    /* border: 2px solid blue; */
}


/* -- CONTAINERS -- */
.container {
    margin-bottom: 8rem;
    max-width: 1100px;
    padding-left: 1rem;
    padding-right: 1rem;
    
    /*border: 2px solid orange;*/
}

#contact {
    margin-bottom: 0.5rem;
}

section h2 {
    margin: 0;
    font-size: clamp(20px, 5vw, 1.4rem);
}
  

.footer-container {
    display: flex;
    align-items: center;
    justify-content: center;

    z-index: 500;
    width: 100vw;
    background-color: var(--primary-color);


}

/* -- FOOTER -- */
footer {
    display: grid;
    grid-template-areas: 
               "f-social f-social f-farewell f-farwell"
               "f-social f-social f-text f-text"
               "f-email f-email f-email f-email"
               "f-copyr f-copyr f-copyr f-logo";

    color: var(--text-color);

    width: clamp(300px, 95vw, 900px);
    padding: 0.5rem;
    padding-top: 1.2rem;
}

.footer-email {
    grid-area: f-email;
    font-size: clamp(10px, 3vw, 13px);
    margin-top: 2rem;
    padding-left: 5px;
    margin-bottom: 0.5rem;
    margin-left: -4.5px;
}

.footer-logo {
    grid-area: f-logo;
    display: flex;
    justify-content:flex-end;
    align-items: flex-end;

    padding-bottom: 0.2rem;

    width: 100%;
    /* border: 2px solid blue; */
}

.footer-logo img {
    height: clamp(2rem, 3vw, 40px);
    /* border: 2px solid purple; */
}

footer h3 {
    display: none;
    color: var(--demo-color);
    font-size: clamp(15px, 1.2vw, 2rem);
    grid-area: f-header;
}

footer h4 {
    color: var(--accent-color);
    font-size: clamp(15px, 1.2vw, 2rem);
    grid-area: f-farewell;
}


.footer-msg {
    font-size: clamp(12px, 3.2vw, 14px);
    grid-area: f-text;
    margin-bottom: 0.2rem;
    padding-left: 0.5rem;
    max-width: clamp(100px, 50vw, 300px);
    /* border: 2px solid green; */
}

.social-links {
    grid-area: f-social;
}

.copyright {
    display: flex;
    justify-content: start;
    align-items: flex-end;

    font-size: clamp(11px, 1.2vw, 0.8rem);

    width: 100%;
    margin-top: 1rem;
    grid-area: f-copyr;
}

/*small Laptops and Larger Tablets */
@media (min-width: 1024px) { /*768*/

    .footer {
        grid-template-areas: 
        "f-social f-social f-farewell f-farwell"
        "f-email f-email f-text f-text"
        ". . f-text f-text"
        "f-copyr f-copyr f-copyr f-logo";
    }
    

    .footer-email {
        margin-top: 0.25rem;
    }
}