@import url('https://fonts.googleapis.com/css2?family=Lobster&family=Poppins:ital,wght@0,400;0,700;1,400;1,700&display=swap');



@keyframes slideInBottom {
    0% {
        transform: translateY(-50%);
        opacity: 0;
    }

    100% {
        transform: translateY(0%);
        opacity: 1;
    }
}

.reveal {
    transform: translateY(100px);
    opacity: 0;
    transition: 0.5s all ease;
}

.reveal.active {
    transform: translateY(0);
    opacity: 1;
}

body {
    background-image: linear-gradient(to top right, #393E46, #515361);
    margin: 0px;
}

header {
    position: fixed;
    top: 0;
    z-index: 1;
    width: 75%;
}

.progressBarContainer {
    height: 8px;
    z-index: 5;
    margin-left: 33%;
}

.progressBar {
    width: 0%;
    height: 8px;
    background-color: #92DD84;
    border-radius: 10px;
}

.hero {

    text-align: center;
    color: #f7f7f7;
    padding-top: 15%;
    padding-bottom: 10%;
    animation: 1s ease 0s 1 slideInBottom;
}

.hero h1 {
    font-size: 48px;
    transition: all 1s ease;
}

.hero p {
    font-family: 'Poppins', sans-serif;
}

.button {
    font-family: 'Poppins', sans-serif;
    background-color: #92DD84;
    border-radius: 40px;
    border-style: none;
    color: #f7f7f7;
    padding: 20px;
    padding-top: 10px;
    padding-bottom: 10px;
    cursor: pointer;
    transition: all 0.6s;
}

.button:hover {
    border-radius: 10px;
    transition: all 0.6s;
}

.pressed {
    background-color: #393E46;
}

.font1 {
    font-family: 'Lobster', cursive;
}

.font2 {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

.waves {
    display: flex;
}

.Wave1 {
    width: 100%;
}

.Wave2 {
    width: 100%;
    transform: scaleX(-1);
}

/* About */

.about {
    text-align: center;
    background-color: #386475;
    margin-top: -5%;
    padding-top: 5%;
    color: #f7f7f7;
    display: flex;
    padding-left: 15%;
    padding-right: 15%;
    align-items: center;
    flex-direction: column;
}

.about h1 {
    font-family: 'Lobster', cursive;
    text-align: center;
}

.about p {
    text-align: center;
    font-family: 'Poppins', sans-serif;
    line-height: 40px;
}

.about img {
    max-width: 400px;
}

/* Skills */

.skills {
    text-align: center;
    background-color: #386475;
    margin-top: -5%;
    padding: 5%;
    padding-left: 15%;
    padding-right: 15%;
}

.skills h3 {
    color: #f7f7f7;
    font-family: 'Poppins', sans-serif;
    opacity: 0.5;
    font-size: 16px;
}

.skills h1 {
    font-family: 'Lobster', cursive;
    color: #f7f7f7;
}

.skill h3 {
    color: #f7f7f7;
    font-family: 'Poppins', sans-serif;
    transform: translateY(-150px);
    z-index: -1;
    transition: all 0.1s;
    opacity: 0;
}

.skillBoxes {
    display: flex;
    flex-direction: row;
    justify-content: space-around;
}

.skill img {
    max-width: 300px;
    z-index: 2;
    transition: all 0.3s;
    cursor: pointer;
}

.skillExpanded h3 {
    color: #f7f7f7;
    font-family: 'Poppins', sans-serif;
    transform: translateY(-50px);
    z-index: -1;
    transition: all 0.1s;
    opacity: 1;
    font-size: 24px;
}

.skillExpanded img {
    max-width: 350px;
    z-index: 2;
    transition: all 0.3s;
    cursor: pointer;
    transform: rotate(360deg);
}

/* Portfolio */

.portfolio {
    text-align: center;
    background-color: #386475;
    margin-top: -40px;
    padding-top: 0px;
    padding-left: 7%;
    padding-right: 7%;
    color: #f7f7f7;
    font-family: 'Poppins', sans-serif;
}

.portfolio h1 {
    font-family: 'Lobster', cursive;
}

.portfolioItem img {
    width: 300px;
    height: 175px;
    padding: 20px;
    border-radius: 30px;
}

.portfolioItem {
    text-align: left;
    display: flex;
    /* flex-direction: row; */
    justify-content: space-around;
    align-items: center;
}

/* Contact */

.contact {
    background-color: #386475;
    padding-top: 60px;
    color: #f7f7f7;
    text-align: center;
    padding-bottom: 20px;
    display: flex;
    flex-direction: column;
}

.contact h1 {
    font-family: 'Lobster', cursive;
}

.contact input {
    border-radius: 8px;
    border-style: none;
    min-width: 500px;
    max-width: 1000px;
    padding: 5px;
    margin: 10px;
    font-family: 'Poppins', sans-serif;
}

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

.contact textarea {
    border-radius: 8px;
    border-style: none;
    min-width: 500px;
    max-width: 1000px;
    padding: 5px;
    margin: 10px;
    font-family: 'Poppins', sans-serif;
}

.contact button {
    font-family: 'Poppins', sans-serif;
    background-color: #92DD84;
    border-radius: 40px;
    border-style: none;
    color: #f7f7f7;
    padding: 20px;
    padding-top: 10px;
    padding-bottom: 10px;
    cursor: pointer;
}

.invisible {
    display: none;
}

/* footer */

footer {
    background-color: #386475;
    color: #f7f7f7;
    text-align: center;
    margin-top: -40px;
    padding-top: 70px;
    padding-bottom: 10px;
    font-family: 'Poppins', sans-serif;
}

/* >1920px */

@media (width > 1920px) {
    .hero {
        padding-left: 32%;
        padding-right: 32%;
    }

    .about {
        padding-left: 32%;
        padding-right: 32%;
    }

    .skills {
        padding-left: 32%;
        padding-right: 32%;
    }

    .portfolio {
        padding-left: 32%;
        padding-right: 32%;
    }
}

/* 1920px */

@media (width <=1920px) {
    .hero {
        padding-left: 22%;
        padding-right: 22%;
    }

    .about {
        padding-left: 22%;
        padding-right: 22%;
    }

    .skills {
        padding-left: 22%;
        padding-right: 22%;
    }

    .portfolio {
        padding-left: 22%;
        padding-right: 22%;
    }
}

/* Tablet Portrait */

@media (width < 769px) {
    .hero {
        padding-top: 40%;
        padding-bottom: 35%;
    }

    /* About */

    .about {
        flex-direction: column;
        justify-content: center;
    }

    .about h1 {
        text-align: center;
    }

    .about p {
        text-align: center;
    }

    .about img {
        max-width: 300px;
    }

    /* Skill */

    .skills {
        padding-top: 150px;
    }

    .skill img {
        max-width: 200px;
    }

    /* Portfolio */

    .portfolio {
        padding-left: 3%;
        padding-right: 3%;
        padding-top: 10%;
    }

    /* Contact */

    .contact input {
        min-width: 70%;
    }

    .contact textarea {
        min-width: 70%;
    }
}

/* Phone Portrait */

@media (width < 376px) {
    .hero {
        padding-top: 70%;
        padding-bottom: 60%;
    }

    /* About */

    .about {
        padding-left: 7%;
        padding-right: 7%;
    }

    .about p {
        line-height: 25px;
        font-size: 13px;
    }

    /* Skill */



    /* Portfolio */

    .portfolioItem {
        flex-direction: column;
    }

    /* contact */

    .contact input {
        min-width: 90%;
    }

    .contact textarea {
        min-width: 90%;
    }

    /* Footer */

    footer p {
        font-size: 10px;
    }
}