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

@font-face{
    font-family:'Poppins-BoldItalic';
    src:url('../fonts/Poppins-BoldItalic.ttf') format('truetype');
}

body{

    font-family:'Poppins-BoldItalic',Arial,sans-serif;

    background:#eef2f6;

    min-height:100vh;

    display:flex;

    justify-content:center;

    align-items:center;

    color:#333;

}


/* Área principal */

.container{

    width:100%;
    
    height:100%;

    max-width:420px;

    margin:15px;

    background:#fff;

    border-radius:24px;

    padding:24px;

    box-shadow:
    0 8px 25px rgba(0,0,0,.10);

    display:flex;

    flex-direction:column;

    gap:18px;

}


/* Área da câmera */

canvas{
    width:60%;
    max-width:400px;
    height:auto;
    display:block;
    margin:0 auto;
    border:2px solid #ddd;
    background:#000;
}


/* Campos */

input{

    width:100%;

    padding:14px 16px;

    border:1px solid #ddd;

    border-radius:14px;

    font-size:16px;

    outline:none;

    transition:.2s;

}


input:focus{

    border-color:#1976d2;

    box-shadow:0 0 0 3px rgba(25,118,210,.15);

}


/* Botões */

button{

    width:100%;

    padding:14px;

    border:none;

    border-radius:14px;

    background:#1976d2;

    color:white;

    font-size:16px;

    font-weight:bold;

    cursor:pointer;

    transition:.2s;

}


button:hover{

    background:#1565c0;

}


button:active{

    transform:scale(.98);

}


/* Responsivo */

@media (max-width:480px){

    .container{

        margin:0;

        border-radius:0;

        min-height:100vh;

        justify-content:center;

        box-shadow:none;

    }

}