@import url('https://fonts.googleapis.com/css2?family=Libre+Baskerville:ital,wght@0,400;0,700;1,400&family=Luckiest+Guy&family=Raleway:ital,wght@0,100..900;1,100..900&family=Roboto:ital,wght@0,100..900;1,100..900&display=swap');

@import url('https://fonts.googleapis.com/css2?family=Basic&family=DM+Serif+Text:ital@0;1&family=Open+Sans:ital,wght@0,300..800;1,300..800&display=swap');

*{
    box-sizing: border-box
}

html{
    font-size: 62.5%;
}

body{
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    justify-content: stretch;
    background-color: #ffffff;
}

/* Header */

header{
    display: flex;
    flex-direction: column;
    justify-content: stretch;
    align-items: stretch;
    gap: 1.5rem;
    background-image: url('img/Header_Background.png');
    background-size: cover;
    background-repeat: no-repeat;
    background-position: 75% 50%;
    padding: 8rem 2.5rem;
    font-family: 'Open Sans';
    font-size: 1.6rem;
    font-weight: 400;
    color: #ffffff;
}

.h1-lucky{
    font-family: 'Luckiest Guy';
    font-size: 3.2rem;
    font-weight: normal;
    margin: 0;
}

.btn-area{
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 1.5rem;
}

.btn-white, .btn-black{
    border: none;
    padding: 1.6rem;
    height: 5.4rem;
    width: 100%;
    border-radius: 2.7rem;
    font-size: 1.6rem;
    font-family: 'Open Sans';
}

.btn-white{
    background-color: #ffffff;
    color: #000000;
}

.btn-black{
    background-color: #000000;
    color: #ffffff;
}

/* Main */
main{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: stretch;
    font-family: 'Open Sans';
    font-size: 1.6rem;
    font-weight: 400;
}

main h1{
    margin: 0;
    font-size: 2.4rem;
    font-weight: 800;
}

.container, .resume-container{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.container{
    padding: 3rem 3rem;
    gap: 1.5rem;
}

main .container:nth-child(even){
    background-color: #f6f6f6;
}

/* Footer */

footer{
    background-color: #23272A;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 4.75rem;
    border: none;
}

/* Responsividade */
@media screen and (min-width: 431px) {
    header{
        align-items: center;
        background-position: center center;
        background-size: cover;
    }
    
    header .h1-lucky{
        font-size: 4rem;
    }
    
}

@media screen and (min-width: 650px){
    header .h1-lucky{
        font-size: 5.6rem;
        text-align: center;
    }

    header p{
        margin: 0 19%;
        text-align: center;
    }

    .btn-area{
        flex-direction: row;
        align-self: stretch;
    }

    .btn-area button{
        flex-basis: content;
    }
    
    #section-1, #section-2, #section-3{
        flex-direction: row;
    }
    
    #section-2 img{
        order: 1;
    }
}

@media screen and (min-width: 800px){
    #section-1 h1, #section-2 h1, #section-3 h1{
        font-size: 4rem;
    }
    
    #section-1 .resume-container, #section-2 .resume-container, #section-3 .resume-container{
        width: 34.8rem;
    }

    #section-1 img, #section-2 img, #section-3 img{
        width: 60.7rem;
    }
    
    #section-4 p{
        max-width: 80.2rem;
    }

    #section-4 .h1-lucky{
        max-width: 50rem;
        text-align: center;
        font-size: 4rem;
    }

    #section-4 img{
        width: 78.4rem;
    }

    .btn-area{
        margin: 0 10%;
    }

    footer img{
        width: 23rem;
    }
}