* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    scroll-behavior: smooth;
}

html {
    font-family: 'Roboto', sans-serif;
    font-size: 10px;
    background-color: #001730;
}

/* --------------Header Section-------------- */
#home {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    color: white;
}

#home div {
    width: 70%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    padding: 2rem;
}

#home div p {
    font-size: 2.4rem;
}

.name {
    position: relative;
    animation: fadeIn 1s forwards;
}

.name span {
    color:#06d6a0;
}

.name span:hover {
    animation: rainbowColor 1s infinite;
}

.introStatement {
    opacity: 0;
    position: relative;
    animation: fadeIn 1s forwards;
    animation-delay: 1.5s;
}

.homeContainer button {
    opacity: 0;
    border: .2rem solid #06d6a0;
    border-radius: 0.5rem;
    margin: 2rem 0px 0px;
    background: linear-gradient(to left, transparent 50%, #06d6a0 50%) right bottom / 202%;
    background-position: right bottom;
    transition: all 1s ease 0s;
    animation: fadeIn 3s forwards;
    animation-delay: 3s;
}

.homeContainer button a {
    text-decoration: none;
    color: white;
    font-size: 2rem;
    padding: 1rem;
    display: inline-block;
    width: 100%;
}

.homeContainer button a:hover {
    cursor: pointer;
}

.homeContainer button:hover {
    background-position: left bottom;
}

.homeContainer button i {
    color: #06d6a0;
    font-size: 2rem;
    margin: 0 .5rem 0 1rem;
}

.homeContainer button:hover i {
    animation: rainbowColor 1s infinite;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        top: -10rem;
    }
    to {
        opacity: 1;
        top: 0px;
    }
}

@keyframes rainbowColor {
    0% {color:#06d6a0}
    16.66% {color:#ffff00}
    33.32% {color:#ff7f00}
    49.98% {color:#ff0000}
    66.64% {color:#9400d3}
    83.24% {color:#4b0082}
    99.9% {color:#0000ff}
}

/* --------------Navbar-------------- */
nav {
    background-color: #073b4c;
    display: flex;
    justify-content: center;
    opacity: 95%;
    position: sticky;
    top: 0;
    z-index: 5;
}

nav div button {
    background-color: transparent;
    margin: 1.8rem;
    border: none;
}

nav div button:hover {
    cursor: pointer;
}

nav div button a {
    text-decoration: none;
    color: #06d6a0;
    font-size: 1.6rem;
}

nav div button:hover a,
.active {
    color: #ffd166;
    font-weight: 700;
}

/* --------------Section Header-------------- */
.sectionHeader {
    display: flex;
    justify-content: center;
    margin: 7rem 0 7rem 0;
    position: relative;
}

.sectionHeader h1 {
    font-size: 3rem;
    color: white;
    font-weight: 400;
    background-color: #001730;
    padding: 0 1rem;
}

.line {
    border: .1rem solid #06d6a0;
    opacity: 50%;
    position: absolute;
    width: 100%;
    z-index: -1;
    top: 50%;
}

/* --------------About Section-------------- */
#about {
    display: flex;
    flex-direction: column;
}

.aboutIconContainer {
    display: grid;
    grid-template-columns: auto auto;
    margin: 0 0 10rem 0;
}

.aboutMe {
    color: white;
    font-size: 1.6rem;
    line-height: 1.3;
    margin: 2rem 0 0 15rem;
}

.aboutMe p span {
    color: #ffd166;
}

.iconContainer {
    display: grid;
    grid-template-columns: auto auto auto auto;
    grid-template-rows: 10rem 10rem;
    gap: 1rem 1rem;
    padding: 0 10rem 0 0;
}

.iconContainer div {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 0;
}

.iconContainer div i {
    font-size: 6rem;
    margin: .5rem;
    color: white;
}

.iconContainer div p {
    color: white;
    font-size: 1.2rem;
}

/* --------------Project Section-------------- */
#projects {
    display: flex;
    flex-direction: column;
}

.projectContainer {
    display: grid;
    grid-template-columns: 40rem auto;
    grid-template-rows: 25rem auto;
    margin: 0 auto 10rem auto;
    gap: 0 5rem;
}

.projectInfo {
    color: white;
    max-width: 30rem;
    margin: 5rem 0 0 10rem;
}

.projectInfo h2 {
    font-size: 2.4rem;
    margin: 0 0 1rem 0;
    font-weight: 400;
}

.projectInfo p {
    font-size: 1.6rem;
    line-height: 1.3;
}

.projectImage img {
    width: 50rem;
}

.projectContainer:nth-child(3) .projectImage img {
    box-shadow: .5rem .5rem #ef476f, -.5rem -.5rem #118ab2;
    margin: 5rem 0 0 0;
}

.projectContainer:nth-child(4) .projectImage img {
    margin: 5rem 0 0 0;
    object-fit: cover;
    height: 34rem;
}

.projectContainer:nth-child(5) .projectImage img {
    margin: 5rem 0 0 0;
    object-fit: cover;
    height: 34rem;
}

.projectLinks {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin: 3rem 0 0 15rem;
}

.projectBtn {
    border: none;
    border-radius: .5rem;
    background-color: #118ab2;
    width: 12rem;
}

.projectBtn:hover {
    transform: scale(1.10);
}

.projectBtn:nth-child(2) {
    background-color: #ef476f;
}

.projectBtn a {
    text-decoration: none;
    color: white;
    font-size: 1.6rem;
    padding: 1rem;
    display: inline-block;
    width: 100%;
}

.projectBtn a:hover {
    cursor: pointer;
}

/* --------------Contact Section-------------- */
.contactContainer form {
    display: flex;
    flex-direction: column;
    margin: 0 auto;
    width: 40rem;
}

form input,
form textarea {
    background-color: #073b4c;
    width: 40rem;
    margin: 0 0 1rem 0;
    border: none;
    font-size: 1.6rem;
    padding: 1rem;
    color: white;
    border-radius: .5rem;
    resize: none;
}

form textarea {
    height: 10rem;
}

form button {
    color: white;
    background-color: #06d6a0;
    font-size: 1.6rem;
    border: none;
    border-radius: .5rem;
    padding: 1rem 1.5rem;
    margin: 1rem 0 0 auto;
    width: fit-content;
}

form button:hover {
    cursor: pointer;
    transform: scale(1.10);
}

/* --------------Footer-------------- */
footer {
    background-color: #073b4c;
    display: flex;
    justify-content: center;
    opacity: 95%;
    margin: 3rem 0 0 0;
}

footer div p {
    color: white;
    font-size: 1.4rem;
    padding: 1rem;
}

footer div p a {
    text-decoration: none;
    color: white;
}

/* --------------For Mobile-------------- */
@media (max-width: 950px) {
    nav div button {
        background-color: transparent;
        margin: 1.8rem 1rem;
        border: none;
    }

    .aboutIconContainer {
        display: flex;
        flex-direction: column;
        align-items: center;
        margin: 0 0 5rem 0;
    }

    .aboutMe {
        font-size: 1.4rem;
        margin: 0;
        padding: 0 0 0 2rem;
    }

    .iconContainer {
        padding: 0;
        margin: 5rem 0 0 0;
    }

    .projectContainer {
        display: flex;
        flex-direction: column;
        align-items: center;
        
    }

    .projectInfo {
        margin: 0;
        max-width: 35rem;
    }

    .projectImage img {
        width: 35rem;
    }

    .projectLinks {
        margin: 5rem 0 0 0;
    }

    .contactContainer form {
        display: flex;
        flex-direction: column;
        margin: 0 auto;
        width: 35rem;
    }

    form input,
    form textarea {
        width: 35rem;
    }
}