@font-face {
    font-family: 'Inter';
    src: url('./fonts/Inter.ttf') format('truetype-variations');
    font-weight: 100 900;
    font-style: normal;
}

@font-face {
    font-family: 'Inter';
    src: url('./fonts/Inter_18pt-Bold.ttf') format('truetype');
    font-style: normal;
    font-weight: 700;
    font-display: swap;
}

:root {
    --primary-font: 'Inter', sans-serif;
    --secondary-font: 'Inter', sans-serif;
}

body {
    margin: 0;
    font-family: var(--primary-font);
}

nav {
    background-color: white;
    display: flex;
    flex-direction: row;
    justify-content: center;
    padding: 27pt;
    padding-bottom: 22.5pt;
}

nav div {
    display: flex;
    flex-direction: row;
    justify-content: space-between; 
    width: 895pt;
    max-width: 895pt;
}

nav a {
    text-decoration: none;
} 

nav img.logo {
    width: 94px;
    height: auto;
}

nav ul {
    display: flex;
    flex-direction: row;
    list-style-type: none;
    margin: 0;
    padding: 0;
    margin-top: -1.5pt;
}

nav ul li a {
    color: black;
    margin-left: 20pt;
    text-decoration: underline;
    text-underline-offset: 5pt;
}

div.emphasis {
    margin-top: 20pt;
    margin-bottom: 20pt;
    display: flex;
    flex-direction: row;
    justify-content: center;
}

div.emphasis a {
    color: white;
    /* Gradient light blue to dark blue */
    background: linear-gradient(330deg, #2d5f88, #44a6d3);
    padding: 15pt;
    padding-left: 20pt;
    padding-right: 20pt;
    border-radius: 10pt;
    text-decoration: none;
    font-weight: bold;
    /* Box shadow light gray down right */
    box-shadow: 2pt 2pt 0pt 0pt rgb(184, 192, 204);
    font-size: 16pt;
}

section {
    margin: 0;
} 

aside img {
    width: 100%;
    height: auto;
}

summary {
    font-family: sans-serif;
}

section.title-section {
    background: linear-gradient(135deg, #4682B4, #5AC8FA);
    color: white;
    min-height: 840px;
    display: flex;
    flex-direction: row;
    justify-content: center;
    padding-top: 60pt;
}

section.title-section article {
    margin-top: 60pt;
    max-width: 455pt;
}

section.title-section h1 {
    font-size: 60pt;
    margin-bottom: 10pt;
    line-height: 1.1;
    font-weight: 700;
    letter-spacing: 0;
    font-style: normal;
    margin-right: 34pt;
}


section.title-section summary {
    font-size: 12pt;
    font-weight: 325;
    max-width: 280pt;
    margin-top: 15pt;
    margin-bottom: 20pt;
}

section.title-section button {
    background-color: transparent;
    color: white;
    border: 1pt solid white;
    border-radius: 5pt;
    margin-top: 20pt;
    padding: 12pt;
    padding-left: 55pt;
    padding-right: 55pt;
    font-size: 12pt;
    cursor: pointer;
    margin: 0;
}

section.description-section {
    background: #C6E2FF;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    padding-top: 60pt;
}

section h2 {
    font-size: 26pt;
    font-weight: 700;
    margin-bottom: 20pt;
    margin-bottom: 40pt;
}

section.description-section article {
    max-width: 300pt;
    margin-left: 80pt;
}

section.description-section.last {
    padding-bottom: 60pt;
}

section.description-section.last article {
    max-width: 250pt;
    margin-left: 0pt;
    margin-right: 70pt;
}

section.about-section {
    background: white;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

section.about-section article {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    width: min(895pt, 90%);
    padding-top: 60pt;
    padding-bottom: 60pt;
}

section.about-section h2 {
    font-size: 36pt;
    font-weight: 700;
    margin-bottom: 20pt;
    margin: 0;
}

section.about-section article aside {
    width: 400pt;
    font-family: sans-serif;
}

.summary {
    font-family: sans-serif;
}

section.projects-section {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

section.about-section img {
    width: min(895pt, 94%);
}

section.projects-section ul {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
}

section.projects-section li {
    width: min(920pt, 94%);
    display: flex;
    flex-direction: row;
    margin-top: 47pt;
}

section.projects-section h2 {
    width: min(920pt, 94%);
    text-align: left;
    font-size: 36pt;
    font-weight: 700;
    margin-bottom: 20pt;
    margin: 0;
    margin-top: 116pt;
}

section.projects-section h3 {
    font-size: 18pt;
}

section.projects-section ul {
    display: flex;
    flex-direction: column;
    list-style-type: none;
    margin: 0;
    padding: 0;
} 

section.projects-section summary {
    margin-right: 90pt;
    width: 380pt;
}

section.contact-section {
    display: flex;
    flex-direction: row;
    justify-content: center;
    margin-top: 80pt;
    margin-bottom: 90pt;
}

section.contact-section article {
    width: 470pt;
}

section.contact-section h2 {
    font-size: 36pt;
    margin-bottom: 15pt;
}

section.contact-section summary {
    width: 200pt;
    margin-bottom: 18pt;
}

section.contact-section p {
    font-family: sans-serif;
    margin-top: 5pt;
    margin-bottom: 5pt;
}

section.contact-section .social-media {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    width: 90pt;
    margin-top: 20pt;
}

section.contact-section form {
    display: flex;
    flex-direction: column;
    margin-top: 20pt;
}

section.contact-section form label {
    font-size: 12pt;
    margin-top: 18pt;
}

section.contact-section form input, section.contact-section form textarea {
    padding: 12pt;
    font-size: 12pt;
    border: solid 1pt rgb(184, 192, 204);
    border-radius: 5pt;
    width: 455pt;
    font-family: sans-serif;
    box-sizing: border-box;
}

section.contact-section form button {
    display: inline;
    background-color: #4682B4;
    color: white;
    border: 1pt solid #4682B4;
    border-radius: 3pt;
    margin-top: 20pt;
    padding: 12pt;
    font-size: 12pt;
    cursor: pointer;
    width: 102pt;
    font-weight: 700;
}

footer {
    background-color: #C6E2FF;
    display: flex;
    flex-direction: row;
    justify-content: space-evenly;
    align-items: baseline;
    padding-top: 40pt;
    padding-bottom: 70pt;
}

footer div {
    width: 920pt;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: baseline;
    padding-right: 60pt;
    box-sizing: border-box;
}

footer h4 {
    font-size: 13.5pt;
    font-weight: 600;
    margin-bottom: 15pt;
}

footer form {
    display: flex;
    flex-direction: column;
}

footer form input {
    padding: 12pt;
    font-size: 12pt;
    border: solid 1pt rgb(184, 192, 204);
    border-radius: 5pt;
    width: 320pt;
    font-family: sans-serif;
}

footer form button {
    display: inline;
    background-color: #4682B4;
    color: white;
    border: 1pt solid #4682B4;
    border-radius: 3pt;
    margin-top: 10pt;
    padding: 12pt;
    font-size: 12pt;
    cursor: pointer;
    width: 102pt;
    font-weight: 500;
}

footer h5 {
    font-size: 13.5pt;
    font-weight: 600;
    margin-bottom: 10pt;
}

footer .standards div {
    display: flex;
    width:160pt;
}

footer .standards div img {
    width: 18pt;
    height: auto;
    margin-right: 5pt;
}


/* MOBILE RESPONSIVE */
@media only screen and (max-width:950px) {
    html, body {
        max-width: 100%;
        overflow-x: hidden;
    }

    section {
        display: flex;
        flex-direction: column;
        padding-left: 10pt;
    }

    section.title-section {
        display: flex;
        flex-direction: column;
        align-items: center;
        padding-top: 0;
    }

    section.title-section h1 {
        font-size: 28pt;
        margin-right: 0;
    }

    section.title-section img {
        width: min(90%, 900px);
    }

    section.title-section article {
        margin-bottom: 20pt;
        margin-top: 0;
    }

    section.title-section aside img {
        width: 96%;
        
    }

    section.description-section {
        display: flex;
        flex-direction: column;
        align-items: center;
        padding-top: 0;
    }

    section.description-section.first {
        flex-direction: column-reverse;
    }

    section.description-section article, section.description-section.last article {
        margin-left: 0;
        margin-right: 0;
        width: 90%;
    }

    section.description-section aside img {
        margin-left: 0;
        margin-right: 0;
        width: 95%;
        margin-top: 10pt;
    }

    section.about-section article {
        display: flex;
        flex-direction: column;
        align-items: start;
        padding-bottom: 10pt;
    }

    section.about-section article h2 {
        text-align: left;
    }

    section.about-section article aside {
        margin-top: 50pt;
        width: min(90%, 700px);
    }

    section.about-section img {
        width: min(90%, 700px);
    }

    section.projects-section h2 {
        margin-top: 60pt;
        font-size: 30pt;
    }

    section.projects-section li {
        flex-direction: column;
        align-items: start;
    }

    section.projects-section li summary {
        margin-right: 0;
        margin-bottom: 10pt;
        width: 90%;
    }

    section.projects-section li img {
        width: min(95%, 700px);
    }

    section.contact-section {
        display: flex;
        flex-direction: column;
        align-items: center;
        margin-top: 60pt;
        margin-bottom: 60pt;
    }

    section.contact-section article, section.contact-section aside {
        width: 90%;
    }
    
    section.contact-section form input, section.contact-section form textarea {
        width: 100%;
    }

    footer {
        padding-top: 0;
        padding-bottom: 0;
    }

    footer div {
        display: flex;
        flex-direction: column;
        align-items: start;
        padding-right: 0;
        margin: 20pt;
    }

    footer form input {
        width: 90%;
    }

    footer .standards div {
        display: flex;
        flex-direction: row;
        align-items: center;
    }
}

/* FADE IN AND MOVE UP ANIMATION */
.animated {
    opacity: 0;
    transform: translateY(25%);
    animation: fadeInUp 0.6s ease-out forwards; /* Trigger animation */
}

/* Define keyframes for the fade-in and translation effect */
@keyframes fadeInUp {
    0% {
        opacity: 0;
        transform: translateY(20%);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}