/* ==========================================================
   JDN Font Downloader v1.0
   ========================================================== */

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

:root{

    --bg:#f5f6f8;
    --card:#ffffff;
    --text:#202124;
    --muted:#5f6368;
    --border:#e5e7eb;
    --primary:#1a73e8;
    --primaryHover:#1558b0;

}

body{

    background:var(--bg);

    color:var(--text);

    font-family:
        system-ui,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        Roboto,
        Arial,
        sans-serif;

}

/* ============================= */

.container{

    width:min(1400px,95%);

    margin:auto;

}

/* ============================= */

header{

    background:white;

    padding:30px 20px;

    border-bottom:1px solid var(--border);

}

header h1{

    font-size:32px;
    margin-bottom:12px;
    font-weight:700;

}

header p{

    color:var(--muted);

    font-size:18px;

    max-width:700px;

    line-height:1.6;

}

/* ============================= */

main{

    padding:40px 0;

}

/* ============================= */

#cards{

    display:grid;

    grid-template-columns:
        repeat(auto-fill,minmax(420px,1fr));

    gap:24px;

}

/* ============================= */

.card{

    background:var(--card);

    border-radius:14px;

    border:1px solid var(--border);

    padding:28px;

    transition:.25s;

}

.card:hover{

    transform:translateY(-4px);

    box-shadow:
        0 12px 25px rgba(0,0,0,.08);

}

/* ============================= */

.card h2{

    font-size:28px;

    margin-bottom:18px;

    font-weight:700;

}

/* ============================= */

.preview{
    margin-top:20px;
    margin-bottom:24px;
    line-height:1.45;
    word-break:break-word;

}

.preview p{

    margin-bottom:14px;

}

.preview p:first-child{
    font-size:28px;
}

.preview p:nth-child(2){

    font-size:24px;

}

.preview p:nth-child(3){

    font-size:22px;

}

.preview p:nth-child(4){

    font-size:18px;

}

/* ============================= */

.actions{

    display:flex;

}

/* ============================= */

.button{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    padding:12px 18px;

    border-radius:10px;

    background:var(--primary);

    color:white;

    text-decoration:none;

    font-weight:600;

    transition:.25s;

}

.button:hover{

    background:var(--primaryHover);

}

/* ============================= */

.loading{

    text-align:center;

    padding:80px;

    font-size:22px;

    color:var(--muted);

}

/* ============================= */

footer{

    margin-top:60px;

    padding:35px;

    text-align:center;

    color:var(--muted);

    border-top:1px solid var(--border);

    background:white;

}

/* ============================= */

@media(max-width:900px){

    #cards{

        grid-template-columns:1fr;

    }

}

/* ============================= */

@media(max-width:600px){

    header{

        padding:30px 20px;

    }

    header h1{

        font-size:32px;

    }

    .card{

        padding:20px;

    }

    .preview p:first-child{

        font-size:30px;

    }
    
.filename{

    color:#777;
    font-size:13px;
    margin-bottom:28px!important;
    font-family:monospace;

}

}