* {
    box-sizing: border-box;
}


body {

    margin:0;

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

    background:#0f172a;

    color:#e5e7eb;

}



.container {

    max-width:1200px;

    margin:40px auto;

    padding:20px;

}



h1 {

    font-size:32px;

    margin-bottom:30px;

}



h2 {

    margin-top:40px;

    color:#f8fafc;

}




.cards {

    display:grid;

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

    gap:20px;

}



.card {

    background:#1e293b;

    border-radius:16px;

    padding:25px;

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

}



.card h2 {

    font-size:36px;

    margin:0;

    color:#38bdf8;

}



.card p {

    margin-top:10px;

    color:#94a3b8;

}




#events {

    display:flex;

    flex-direction:column;

    gap:12px;

}




.event {

    background:#1e293b;

    padding:18px;

    border-radius:12px;

}



.event-title {

    font-weight:bold;

    font-size:18px;

}



.event-time {

    color:#94a3b8;

    font-size:14px;

    margin-top:5px;

}





table {

    width:100%;

    border-collapse:collapse;

    margin-top:20px;

    background:#1e293b;

    border-radius:12px;

    overflow:hidden;

}



th {

    text-align:left;

    padding:15px;

    color:#94a3b8;

    border-bottom:1px solid #334155;

}



td {

    padding:15px;

    border-bottom:1px solid #334155;

}



tr:last-child td {

    border-bottom:none;

}



.status {

    padding:5px 10px;

    border-radius:20px;

    background:#064e3b;

    color:#6ee7b7;

    font-size:13px;

}



@media(max-width:700px){

    .cards{

        grid-template-columns:1fr;

    }

}

.modal {

    display:none;

    position:fixed;

    inset:0;

    background:rgba(0,0,0,.6);

    justify-content:center;

    align-items:center;

}


.modal-content {

    background:#1e293b;

    padding:30px;

    border-radius:20px;

    width:420px;

    max-height:80vh;

    overflow-y:auto;

    color:white;

}

#closeModal {

    float:right;

    cursor:pointer;

    font-size:20px;

}

.search{

    width:100%;
    padding:16px;

    margin-bottom:20px;

    background:#1e293b;

    border:1px solid #334155;

    border-radius:14px;

    color:white;

    font-size:18px;

    outline:none;

}


.search::placeholder{

    color:#94a3b8;

}