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


/* =====================
   BASE APP
===================== */

* {
    box-sizing: border-box;
}


body {

    margin: 0;
    min-height: 100vh;

    background:
    linear-gradient(
        135deg,
        #111827,
        #1e3a8a
    );

    font-family: sans-serif;

    display: flex;
    justify-content: center;
    align-items: center;

    padding: 15px;

}


/* CONTAINER DO APP */

.app {

    width: 100%;
    max-width: 450px;

    background: #ffffff;

    border-radius: 28px;

    padding: 25px 20px;

    box-shadow:
    0 20px 40px rgba(0,0,0,.35);

}


/* TITULO */

h2 {

    margin-top: 0;
    margin-bottom: 25px;

    color:#1e3a8a;

    font-size: 22px;

}



/* =====================
 INPUTS
===================== */


input,
textarea {


    width:100%;

    padding:15px;

    margin-bottom:15px;

    border-radius:16px;

    border:2px solid #e5e7eb;

    background:#f9fafb;

    font-size:15px;

    font-family:inherit;

    outline:none;

    transition:.2s;

}


input:focus,
textarea:focus {

    border-color:#2563eb;

    background:white;

}


/* NUMEROS */

.grid {

    display:grid;

    grid-template-columns:1fr;

    gap:0;

}



/* =====================
 UPLOAD
===================== */


.upload {

    display:flex;

    justify-content:center;

    align-items:center;

    gap:8px;


    background:#e0e7ff;

    color:#1e40af;

    padding:15px;

    border-radius:16px;

    cursor:pointer;

    margin-bottom:20px;

}


.upload input {

    display:none;

}



/* =====================
 CANVAS
===================== */


canvas {

    width:100%;

    height:auto;

    display:block;

    border-radius:18px;

    background:black;

    box-shadow:

    0 8px 20px rgba(0,0,0,.15);

    margin-bottom:20px;

}



/* =====================
 BOTÃO
===================== */


button {


    width:100%;


    padding:17px;


    border:none;

    border-radius:18px;


    background:

    linear-gradient(
        135deg,
        #2563eb,
        #1d4ed8
    );


    color:white;


    font-size:17px;


    font-family:inherit;


    cursor:pointer;


    box-shadow:

    0 8px 15px rgba(37,99,235,.35);


    transition:.2s;


}



button:active {

    transform:scale(.97);

}



/* =====================
 DESKTOP
===================== */


@media(min-width:700px){


    .app {

        max-width:600px;

    }


    .grid {

        grid-template-columns:repeat(3,1fr);

        gap:10px;

    }

}



/* =====================
 CELULAR PEQUENO
===================== */


@media(max-width:380px){


    .app {

        padding:20px 15px;

        border-radius:22px;

    }


    h2 {

        font-size:18px;

    }


}