@font-face {
    font-family: 'Merriweather-SemiBold';
    src: url("Merriweather_Sans/static/MerriweatherSans-SemiBold.ttf");
}
@font-face {
    font-family: 'Merriweather-Bold';
    src: url("Merriweather_Sans/static/MerriweatherSans-Bold.ttf");
}
@font-face {
    font-family: 'Merriweather';
    src: url("Merriweather_Sans/static/MerriweatherSans-Regular.ttf");
}
@font-face {
    font-family: 'Merriweather-Light';
    src: url('Merriweather_Sans/static/MerriweatherSans-Light.ttf');
}

/* RESET / BASE */
html, body {
    margin: 0;
    padding: 0;
    min-height: 100vh;
    max-width: 100vw;
    box-sizing: border-box;
    overflow-x: hidden;
}

section {
    width: 100%;
}


/* HOME */
#home {
    height: 100vh;
    box-sizing: border-box;
}

#home-container {
    width: 100%;
    height: 100%;
    position: relative;
}

#home-background {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

#one-liner-container {
    display: flex;
    position: absolute;
    background-color: #253031;
    width: 35em;
    height: fit-content;
    top: 11em;
    z-index: 10;
    border-top-right-radius: 2em;
    border-bottom-right-radius: 2em;
    box-shadow: .0em .0em .9em .0006em #253031;
}

#one-liner {
    color: #EED6D5;
    font-size: 1.5em;
    line-height: 1.45em;
    padding: 1em;
    font-family: "Merriweather-Light";
}

#contact-form-title {
    font-size: 1em;
}

#one-liner-tag {
    display: flex;
    width: 3em;
    background-color: #FED13D;
    height: auto;
}

/* SERVICES */
#service-info {
    display: flex;
    width: fit-content;
    max-width: 90%;
    margin: 1em 0em;
    font-size: 1.3em;
    font-family: "Merriweather-Light";
    text-align: start;
    letter-spacing: 2%;
    word-spacing: 5%;
    line-height: 125%;
    gap: 1.2em;
}
.service-info-boxes {
    border-radius: .5em;
    width: 27em;
    background-color: #F37B18;
    padding: 1em;
    box-shadow: .0em .0em .2em .006em #6d7071;
}
#service-nav-button-box {
    display: flex;
    width: 100%;
    justify-content: flex-end;
}
#service-nav-button {
    background-color: #253031;
    color: #F2F1ED;
    padding: .3em;
    font-size: 2em;
    text-decoration: none;
    border-radius: .4em;
    box-shadow: .0em .0em .2em .006em #6d7071;
    width: 5em;
}
#service-nav-button:hover {
    background-color: #F37B18;
    color: #f2f2f2;
    box-shadow: .0em .0em .1em .006em #6d7071;
}
/* PROJECTS */
#project-card-container {
    display: flex;
    justify-content: space-evenly;
    gap: 1.7em;
    margin-top: 1em;
    flex-wrap: wrap;
    height: auto;
}

.project-cards {
    display: flex;
    width: 20em;
    height: 18em;
    padding: 1em;
    background-color: #253031;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border-radius: 1em;
    position: relative;
    transition: padding 1s ease-in-out;
    box-shadow: .0em .0em .2em .006em #6d7071;

}
.project-image-overlay {
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: inherit;
    background-color: #F37B18;
    color: #F2F1ED;
    font-size: 3em;
    opacity: 0;
    will-change: opacity;
    transition: opacity 1s ease-in-out;
}
.project-card-image {
    display: flex;
    width: inherit;
    height: inherit;
    object-fit: cover;
    border-radius: inherit;
    will-change: opacity;
    transition: opacity 1s ease-in-out;
}
.project-cards:hover .project-card-image {
    opacity: 0.3;
}
.project-cards:hover .project-image-overlay {
    opacity: 0.6;
}

/* About */
#about-info-box {
    display: flex;
    width: 30em;
    max-width: 90%;
    height: 15em;
    background-color: #F37B18;
    margin: 1em auto;
    font-size: 1.3em;
    font-family: "Merriweather-Light";
    justify-content: center;
    letter-spacing: 2%;
    word-spacing: 5%;
    line-height: 125%;
    gap: 1.2em;
    border-radius: .8em;
    box-shadow: .0em .0em .2em .006em #6d7071;

}
#about-info {
    display: flex;
    justify-content: flex-start;
    padding: 1em;
}

/* Sections */
.info-sections{
    display: flex;
    box-sizing: border-box;
    min-height: 50vh;
    justify-content: center;
    align-items: center;
    background-color: #F2F1ED;
}
.info-section-boxes{
    min-height: 50vh;
    width: 77em;
    max-width: 90%;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 2em 0em 2em;
}
.info-section-box-boxes {
    display: flex;
    width: 100%;
    flex-direction: column;
    align-items: center;
}
.title-wrapper {
    display: flex;
    width: 100%;
    justify-content: flex-start;
}
.section-titles {
    color: #253031;
    width: fit-content;
    font-size: 3em;
    font-family: "Merriweather-Bold";
    line-height: 95%;
}
.section-title-underlines {
    display: flex;
    width: 100%;
    height: .19em;
    background-color: #F37B18;
    border-radius: .07em;
}