.glassCard { width: 45%; max-height: 475px; margin: 16px 0px 16px 0px; padding: 10px 20px 10px 20px; height: fit-content; background: rgba(255, 255, 255, 0.65); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); border-radius: 20px; border: 1px solid rgba(255, 255, 255, 0.3); box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.5), inset 0 -1px 0 rgba(255, 255, 255, 0.1), inset 0 0 8px 4px rgba(255, 255, 255, 0.4); overflow: scroll; } .glassCard::-webkit-scrollbar{ display: none; } .allContent{ display: flex; flex-direction: row; justify-content: center; gap: 76px; } .eventList { list-style: none; padding: 0; margin: 0; } .eventDetails { list-style: none; padding: 0; margin: 0; } .dateSelected{ font-size: 100px; } h2{ display: flex; justify-content: center; } .eventGroup{ margin: 16px 0px 16px 0px; padding: 10px 20px 10px 20px; border-radius: 20px; border: none; background: transparent; box-shadow: inset 1.25px 1.25px 1px rgba(255, 255, 255, 1), inset -1.25px -1.25px 1px rgba(255, 255, 255, 1), inset -0.25px 0.25px 1px rgba(0, 0, 0, 0.2), inset 0.25px -0.25px 1px rgba(0, 0, 0, 0.2); } @media (max-width: 768px) { .glassCard { width: 100%; margin: 0px; margin-top: 16px; margin-bottom: 16px; display: flex; flex-direction: column; } }