*{
    box-sizing:border-box;
}

body{
    margin:0;
    padding:40px 20px;

    background-color:#F6F4E8;

    background-image:
        radial-gradient(
            rgba(0,0,0,0.2) 1px,
            transparent 1px
        );

    background-size:6px 6px;

    color:#0A0A0A;

    font-family:'Inter',sans-serif;
}

.contenedor{
    width:100%;
    max-width:1000px;
    margin:0 auto;
}

h1{
    margin:0 0 30px 0;
    text-align:center;
    font-size:32px;
    font-weight:700;
}

form{
    display:flex;
    gap:10px;
    margin-bottom:50px;
    flex-wrap:wrap;
}

input[type="text"]{
    flex:1;
    min-width:220px;

    padding:18px 20px;

    border:1px solid #0a0a0a;
    border-radius:12px;

    font-size:18px;

    font-family:'Inter',sans-serif;

    background:#fff;
}

button{
    padding:18px 30px;

    border:1px solid #0a0a0a;
    border-radius:12px;

    background:#20D6B3;

    color:#0a0a0a;

    cursor:pointer;

    font-size:16px;
    font-weight:600;

    font-family:'Inter',sans-serif;

    transition:0.2s;
}

button:hover{
    opacity:0.9;
}

.fuente{
    background:#ffffff;

    border:1px solid #0a0a0a;
    border-radius:18px;

    padding:20px;

    margin-bottom:5px;

    box-shadow:0 2px 10px rgba(0,0,0,0.05);
}

.nombre-fuente{
    font-size:14px;
    font-weight:700;

    margin-bottom:18px;

    color:#666;

    text-transform:uppercase;
    letter-spacing:1px;
}

.preview{
    font-size:48px;
    line-height:1.3;
    word-break:break-word;
}

@media (max-width:768px){

    body{
        padding:20px 15px;
    }

    h1{
        font-size:26px;
    }

    form{
        flex-direction:column;
    }

    button{
        width:100%;
    }

    .preview{
        font-size:34px;
    }

}


@font-face{

    font-family:'font_9b5953cc6eca9918b6229e8185b74f29';

    src:url('../fuentes/Blacksword.woff2')

    format('woff2');

    font-display:swap;
}


@font-face{

    font-family:'font_b628afd2a2235a8c8acbbdd9daffb37f';

    src:url('../fuentes/adelia.woff2')

    format('woff2');

    font-display:swap;
}