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

body{

background:#10131a;

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

display:flex;
justify-content:center;
align-items:center;

height:100vh;

color:white;
}

.graphCard{

width:min(1000px,95vw);

background:#181c25;

padding:30px;

border-radius:18px;

box-shadow:0 20px 60px rgba(0,0,0,.4);
}

h1{

text-align:center;

margin-bottom:20px;
}

canvas{

width:100%;

height:550px;

display:block;
}

.legend{

display:flex;

justify-content:center;

gap:40px;

margin-top:25px;

font-size:18px;
}

.legend span{

display:inline-block;

width:40px;

height:4px;

margin-right:8px;

border-radius:4px;

vertical-align:middle;
}

.green{
background:#5DD95D;
}

.orange{
background:#E67619;
}