:root{
    --primary:#0061ff;
    --primary-dark:#0045b5;
    --secondary:#f5f7fa;
    --text:#333;
    --light:#ffffff;
}
*{
    box-sizing:border-box;
    margin:0;
    padding:0;
}
body{
    font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
    line-height:1.6;
    color:var(--text);
    background:var(--secondary);
}
header{
    background:linear-gradient(120deg,var(--primary),var(--primary-dark));
    color:var(--light);
    padding:1.5rem 1rem;
}
header h1{
    font-size:1.4rem;
    margin-bottom:0.25rem;
    line-height:1.3;
}
header h2{
    font-size:0.85rem;
    font-weight:400;
    opacity:.9;
}
nav ul{
    list-style:none;
    display:flex;
    flex-wrap:wrap;
    gap:.5rem;
    margin-top:1rem;
}
nav a{
    color:var(--light);
    text-decoration:none;
    padding:.4rem .8rem;
    border-radius:.3rem;
    transition:background .2s;
}
nav a:hover,nav a.active{
    background:rgba(255,255,255,.15);
}

main{
    display:grid;
    grid-template-columns:1fr;
    gap:2rem;
    padding:2rem 1rem;
    max-width:1200px;
    margin:auto;
}
@media (min-width:768px){
    main{
        grid-template-columns:3fr 1fr;
    }
}
aside{
    background:var(--light);
    padding:1.5rem;
    border-radius:.5rem;
    box-shadow:0 2px 4px rgba(0,0,0,.05);
}
.events h3{
    margin-bottom:1rem;
    font-size:1.1rem;
    color:var(--primary-dark);
}
.events article{
    margin-bottom:1rem;
}
.events time{
    font-weight:600;
    display:block;
}
section{
    background:var(--light);
    padding:1.5rem;
    border-radius:.5rem;
    box-shadow:0 2px 4px rgba(0,0,0,.05);
}
section h2{
    color:var(--primary-dark);
    margin-bottom:1rem;
}
footer{
    text-align:center;
    padding:2rem 1rem;
    background:#1b1b1b;
    color:var(--light);
    margin-top:2rem;
}
footer a{
    color:var(--light);
    text-decoration:none;
    margin:0 .5rem;
}