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

body{
font-family:Arial;
background:#f4f4f4;
}

header{

background:#1e293b;
color:white;

padding:25px;

}

.container{

display:grid;

grid-template-columns:
260px 1fr;

min-height:calc(100vh - 120px);

}

aside{

background:#334155;
color:white;

padding:25px;

}

aside ul{

list-style:none;

margin-top:20px;

}

aside li{

padding:15px 0;

border-bottom:1px solid rgba(255,255,255,.2);

}

main{

padding:30px;

display:grid;

gap:30px;

}

.kpis{

display:grid;

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

gap:20px;

}

.kpis article{

background:#bfdbfe;

padding:40px;

text-align:center;

font-weight:bold;

}

.grafico{

background:#fde68a;

min-height:350px;

padding:30px;

}

.tabela{

background:#bbf7d0;

min-height:350px;

padding:30px;

}

footer{

background:#1e293b;

color:white;

text-align:center;

padding:20px;

}

@media(max-width:900px){

.container{

grid-template-columns:1fr;

}

.kpis{

grid-template-columns:
1fr 1fr;

}

}