.glassCard { width: 45%; max-height: 79vh; margin: 16px 0 16px 0; 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 { margin-top: 10px; padding: 0; } .dateSelected{ font-size: 100px; } h2{ font-size: 30px; display: flex; justify-content: center; } .eventGroup{ margin: 16px 0 16px 0; padding: 10px 20px 10px 20px; } .eventGroup:hover{ cursor: pointer; } .eventTitle { display: flex; flex-direction: row; justify-content: space-between; } .title { font-weight: bold; } .eventTasks { display: flex; flex-direction: row; justify-content: space-between; } @media (max-width: 768px) { .glassCard { width: 100%; margin-top: 16px; margin-bottom: 16px; max-height: 450px; display: flex; flex-direction: column; } }