body{
    overflow: hidden;
}

.content{
    display: grid;
    grid-template-columns: 60% 40%;
    grid-template-rows: 11.4rem 1fr;

    grid-template-areas: 
    'header header' 
    'left right'
}

header{
    grid-area: header;
}

#bg{
    grid-area: left;

    background: url(/Arquivos/Ilustração.svg) no-repeat top/contain;
    background-position-x: -10rem;
    animation: move 1.5s infinite alternate ease-in-out;
}
/* animação do boneco*/
@keyframes move{
    from{
        transform: translateY(-10px);
    }
}
/* parou aqui (continua no ball top e bottom no final do codigo*/

main{
    grid-area: right;

    display: flex;
    align-items: center;
    margin-top: -3rem;
}

main .container{
    width: min(36.3rem, 100%);
}

main h2{
    font-family: 'Poppins', sans-serif;
    color: var(--black);
    font-size: clamp(20px, 5vw, 2.8rem);
    margin-bottom: 2.4rem;
}


input{
    border: 0.2rem solid var(--grey-blue);
    padding: 0 1.6rem;
    outline: none;
}

input, button, .button{
    width: 100%;
    margin-bottom: 1.8rem;
}

/* Linha separadora */

.separator{
    display: flex;
    align-items: center;
}

.separator div:nth-child(2){
    color: var(--grey-blue);
    font-family: 'Poppins', sans-serif;
    font-weight: 400;
    padding: 0 1.35rem;
    line-height: 0;

    margin: 2rem 0;
}

.separator div:nth-child(1),
.separator div:nth-child(3){
    background: var(--grey-blue);
    width: 100%;
    height: 1px;
}

/* bolas no background */

.ball{
    width: 21.2rem;
    height: 21.2rem;
    background: var(--blue);
    clip-path: circle();
    opacity: 0.3;

    position: fixed;
}

.ball.top{
    top: -49rem;
    width: 66.3rem;
    height: 74.3rem;
    right: -90rem;
}

.ball.bottom{
    bottom: -10rem;
    right: -56rem;
}