/* =====================================
   CERTIFICAAT
   ===================================== */

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

body{
    margin:0;
    font-family:"Segoe UI",Arial,sans-serif;
    background:#e5e7eb;
}

/* NAAM INVULLEN */

.namebox{
    max-width:600px;
    margin:30px auto;
    padding:30px;

    text-align:center;

    background:white;
    border-radius:16px;
    box-shadow:0 4px 18px rgba(0,0,0,.15);
}

.namebox h2{
    margin-bottom:20px;
    color:#0f172a;
}

.namebox input{
    width:100%;
    padding:14px;

    font-size:18px;

    border:1px solid #cbd5e1;
    border-radius:10px;
}

.namebox button,
.buttonbar button{
    margin-top:18px;

    background:#2563eb;
    color:white;

    border:none;
    border-radius:10px;

    padding:14px 24px;

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

    cursor:pointer;
    transition:.2s;
}

.namebox button:hover,
.buttonbar button:hover{
    background:#1d4ed8;
}

/* KNOPPEN */

.buttonbar{
    text-align:center;
    margin:25px;
}

/* CERTIFICAAT */

.certificate{
    position:relative;

    width:900px;
    min-height:620px;

    margin:40px auto;
    padding:60px;

    background:white;

    border:10px solid #0f172a;

    box-shadow:0 10px 30px rgba(0,0,0,.20);

    overflow:hidden;
}

/* WATERMERK */

.watermark{
    position:absolute;

    top:180px;
    left:-120px;

    width:1200px;

    text-align:center;

    font-size:42px;
    font-weight:bold;

    color:rgba(37,99,235,.10);

    transform:rotate(-28deg);

    z-index:0;
}

/* INHOUD */

.content{
    position:relative;
    z-index:1;

    text-align:center;
}

.content h1{
    color:#0f172a;
    margin-bottom:10px;
}

.content h2{
    color:#2563eb;
    margin-bottom:20px;
}

.subtitle{
    font-size:22px;
    color:#2563eb;
    margin-bottom:40px;
}

.text{
    font-size:20px;
    line-height:1.6;
}

.student{
    margin:30px 0;

    font-size:30px;
    font-weight:bold;

    color:#111827;
}

/* DETAILS */

.details{
    margin-top:40px;

    background:#f1f5f9;

    padding:20px;

    border-radius:12px;

    text-align:left;
}

.details h3{
    margin-bottom:12px;
    color:#0f172a;
}

.details p{
    margin-bottom:8px;
    color:#334155;
}

/* VAARDIGHEDEN */

.skillsbox{
    margin-top:25px;

    background:white;

    border-left:6px solid #2563eb;
    border-radius:12px;

    padding:18px;
}

.skillsbox h3{
    margin-bottom:12px;
    color:#0f172a;
}

.skillsbox ul{
    margin-left:22px;
}

.skillsbox li{
    margin-bottom:8px;
    color:#334155;
}

/* PRINT */

@media print{

    .namebox,
    .buttonbar{
        display:none;
    }

    body{
        background:white;
    }

    .certificate{
        margin:0;
        width:100%;
        border-width:8px;
        box-shadow:none;
    }

}

/* RESPONSIVE */

@media (max-width:950px){

    .certificate{
        width:95%;
        padding:35px;
    }

    .student{
        font-size:24px;
    }

    .watermark{
        width:900px;
        left:-180px;
        font-size:32px;
    }

}