body{background-color:#313030;color:#fff;font-family:Arial,Helvetica,sans-serif;font-size:20px}h1{color:#fff;font-size:5rem;margin-bottom:2rem}h2{display:inline-block;background-image:linear-gradient(to right,#1796d5,#37beb5);background-clip:text;-webkit-background-clip:text;color:transparent;font-size:18px}p{font-size:14px}.App{background-image:linear-gradient(to right,#37beb5,#105a8c);display:flex;flex-direction:column;align-items:center;justify-content:center;max-width:85%;margin:0 auto;padding:3rem 5rem;border-radius:4px;text-align:center;box-shadow:5px 5px 10px #0000001a;min-height:100vh}.modal-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background:#00000080;display:flex;justify-content:center;align-items:center;z-index:1000}.modal-content{background:#fff;color:#333;padding:20px;border-radius:8px;max-width:500px;width:90%;box-shadow:0 4px 6px #0000001a;position:relative}.modal-close{position:absolute;color:#333;top:10px;right:10px;background:none;border:none;font-size:1.5rem;cursor:pointer}label{display:block;margin:1rem 0}.details-btn{background-color:#37beb5;color:#f5f5f5;border:none;padding:.5rem 1rem;border-radius:4px;cursor:pointer;font-size:12px;position:absolute;bottom:10px;right:28%}input{padding:.6rem .8rem;border-radius:4px;border:none;margin-bottom:1rem}input::placeholder{font-size:18px}input[type=number]::placeholder{font-size:20px}ul{list-style-type:none;padding:0}ul li{width:300px;height:200px;position:relative}.charts-container{width:100%;display:grid;grid-template-columns:1fr 1fr;gap:.5rem;height:400px;margin:0 auto}.event{background-color:#fff;color:#333;padding:1.2rem 1.5rem;margin:1rem auto;border-radius:4px;box-shadow:4px 4px 8px #0000001a;max-width:50%}#event-list{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem}@media (max-width: 1200px){.App{max-width:90%;padding:2rem}body{font-size:14px}h1{font-size:4rem}button{font-size:20px;padding:.5rem 1rem}input{font-size:18px}input::placeholder{font-size:18px}ul li{width:100%}#event-list{display:grid;grid-template-columns:repeat(2,1fr);gap:.5rem}}@media (max-width: 768px){.App{max-width:90%;padding:2rem}h1{font-size:3rem}button{font-size:18px;padding:.4rem .8rem}input{font-size:16px}input::placeholder{font-size:16px}ul li{width:100%;height:150px}#event-list{display:grid;grid-template-columns:repeat(2,1fr);gap:0}.charts-container{display:flex;flex-direction:column;justify-content:center;align-items:center;margin:0 auto;height:auto}}@media (max-width: 480px){.App{padding:1.5rem}h1{font-size:2.5rem}button{font-size:16px;padding:.3rem .6rem}input{font-size:14px}input::placeholder{font-size:14px}}