*{
    padding: 0;
    margin: 0;

}

body{
    background: #5096f1;
    background-size: 150% 150%;
    background-position: 0% 50%;
    background-repeat: no-repeat;
    animation: bgmove 18s linear infinite;
    background-image: url(assets/fundo.webp);

}

@keyframes bgmove{
    0% {background-position: 0% 50%;}
    50% {background-position: 100% 50%;}
    100% {background-position: 0% 50%;}
}

#wrapper{
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    width: 100vw;
    height: 100vh;

    h1{
        font-size: clamp(20px, 5vw, 32px);
        text-align: center;
        color: #807f7f;
        font-weight: 600;

    }

}

.start{
    font-size: clamp(30px, 3vw, 40px);
    color: #FAD777;
    text-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);
}

#central{
    margin-top: 3vh;
    display: flex;
    width: 90%;
    align-items: center;
    border: 1px solid rgba(255,255,255, 0.2);
    color: white;
    height: auto;
    padding: 2rem 1rem;
    border-radius: 15px;
    box-sizing: border-box;

    background: rgba(255,255,255, 0.10);
    box-shadow: 0px 8px 32px 0 rgba(0,0,0,0.37);
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
}

#formulario{
    display: flex;
    flex-direction: column;
    margin: 0 auto;
    gap: 0.6rem;
    width: 100%;

    p{
        text-align: center;
        font-size: clamp(22px, 2vw, 30px);
    }

    label{
        margin-top: 1rem;
        font-size: clamp(20px, 2vw, 26px);
        font-weight: 600;
    }

    input{
        margin-top: 0.4rem;
        padding: 0.4rem;
        font-size: clamp(14px, 2vh, 18px);
        font-family: Verdana, sans-serif;
        border: 1px solid rgb(131, 129, 129);
        border-radius: 10px;
    }

    img{
        display: flex;
        justify-content: center;
        align-items: center;
        margin: 0 auto;
    }

    .btn-submit{
        border: none;
        width: 50%;
        border-radius: 20px;
        height: 3rem;
        margin: 0 auto;
        margin-top: 1.5rem;
        font-family: Verdana, sans-serif;
        font-size: clamp(25px, 4vw, 30px);
        font-weight: 500;
        box-shadow: 0 6px 20px rgba(0, 0, 0, 0.30);
        transition: .3s;
    }

    .btn-submit:hover{
        cursor: pointer;
        box-shadow: 0 8px 18px rgba(0, 0, 0, 0.50);
        transform: translateY(-4px);

    }
}

#previa{
    margin: 0 auto;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    
    h1{
        font-size: clamp(30px, 3vw, 40px);
        color: #FAD777;
        text-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);
    }


    #cartao{
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        text-align: center;
    }

        #foto-perfil{
            display: flex;
            justify-content: center;
            align-items: center;
            width: 260px;
            height: 300px;
            border-radius: 100px;
            margin: 40px auto;
            box-shadow:
            0 4px 10px rgba(0, 0, 0, 0.25),
            0 0 10px rgba(120, 170, 220, 0.25);
            background-position: center;
            background-size: cover;
            background-repeat: no-repeat;
        }
        
        #dados-cartao{
            display: flex;
            flex-direction: column;
            gap: 1rem;

            .info{
                display: flex;
                text-align: center;
                justify-content: center;
                align-items: center;
                font-size: clamp(20px, 2vw, 28px);
            }
        }

        .label-cartao{
            color: black;
            font-size: clamp(20px, 2vw, 28px);
        }

        .dados{
            display: flex;
            justify-content: center;
            align-items: center;

        }
        
    
    
}

@media(min-width: 540px){

    #central{
        width: 80%;
    }

    #formulario{
        width: 90%;
    }
}

@media(min-width: 720px){

    #central{
        width: 65%;
    }

    #formulario{
        width: 80%;
    }
}

@media(min-width: 920px){

    #central{
        width: 50%;
    }

    #formulario{
        width: 75%;
    }
}

@media(min-width: 1280px){

    #formulario{
        width: 65%;
    }
}

@media(min-width: 1530px){

    #central{
        width: 35%;
    }

    #formulario{
        width: 65%;
    }
}