html {
  --body-color: #000000;
  /* Black background */
  --header-color: #00ff00;
  /* Neon green for header */
  --header-button: #33ff33;
  /* Lighter green for buttons */
  --color-weekdays: #33ff33;
  /* Neon green for weekdays */
  --box-shadow: #00ff00;
  /* Green box shadow */
  --hover: #131313;
  /* Dark hover state */
  --current-day: #00ff15;
  /* Darker shade for current day */
  --event-color: #b3ff00;
  /* Yellow for events */
  --modal-event: #333333;
  /* Dark grey for modal */
  --color-day: #131313;
  /* Dark color for day */
}

body {
  display: flex;
  margin-top: 50px;
  justify-content: center;
  background-color: var(--body-color);
  font-family: 'Courier New', Courier, monospace;
  /* Monospace font */
}

button {
  width: 75px;
  cursor: pointer;
  box-shadow: 0px 0px 2px var(--box-shadow);
  border: none;
  outline: none;
  border-radius: 5px;
  color: var(--header-color);
  background-color: #333333;
  font-size: 24px;
}

#header {
  padding: 10px;
  color: var(--header-color);
  font-size: 26px;
  font-family: 'Courier New', Courier, monospace;
  display: flex;
  justify-content: space-between;
}

#container {
  width: 770px;
}

#weekdays {
  width: 100%;
  display: flex;
  color: var(--color-weekdays);
}

#weekdays div {
  width: 100px;
  padding: 10px;
}

#calendar {
  width: 100%;
  margin: auto;
  display: flex;
  flex-wrap: wrap;
}

.day {
  width: 100px;
  padding: 10px;
  height: 100px;
  cursor: pointer;
  box-sizing: border-box;
  background-color: var(--color-day);
  margin: 5px;
  box-shadow: 0px 0px 3px var(--box-shadow);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  border-radius: 15%;
  color: #33ff33;
  /* Neon green text */
}

.day:hover {
  background-color: #00000057;
}

.event {
  font-size: 10px;
  padding: 3px;
  background-color: var(--event-color);
  color: rgb(0, 0, 0);
  font-weight: bold;
  border-radius: 5px;
  max-height: 55px;
  overflow: hidden;
}

.padding {
  cursor: default !important;
  background-color: var(--body-color) !important;
  box-shadow: none !important;
}

#newEventModal,
#deleteEventModal {
  display: none;
  z-index: 20;
  padding: 25px;
  background-color: var(--modal-event);
  box-shadow: 0px 0px 3px black;
  border-radius: 5px;
  width: 350px;
  top: 100px;
  left: calc(50% - 175px);
  position: absolute;
  font-family: 'Courier New', Courier, monospace;
}

#eventTitleInput {
  padding: 10px;
  width: 100%;
  box-sizing: border-box;
  margin-bottom: 25px;
  border-radius: 3px;
  outline: none;
  border: none;
  box-shadow: 0px 0px 3px gray;
}

#eventTitleInput.error {
  border: 2px solid red;
}

#cancelButton,
#deleteButton {
  background-color: var(--header-color);
}

#saveButton,
#closeButton {
  background-color: var(--header-button);
}

#eventText {
  font-size: 14px;
  color: #33ff33;
  /* Neon green text */
}

#modalBackDrop {
  display: none;
  top: 0px;
  left: 0px;
  z-index: 10;
  width: 100vw;
  height: 100vh;
  position: absolute;
  background-color: rgba(0, 0, 0, 0.8);
}

/* CSS for the Event Details Overlay */
#eventDetailsOverlay {
  display: none;
  /* Hidden by default */
  position: fixed;
  /* Stay in place */
  z-index: 1;
  /* Sit on top */
  left: 0;
  top: 0;
  width: 100%;
  /* Full width */
  height: 100%;
  /* Full height */
  overflow: auto;
  /* Enable scroll if needed */
  background-color: rgba(0, 0, 0, 0.4);
  /* Black w/ opacity */
}

#eventDetailsContent {
  background-color: #b3ff00;
  margin: 15% auto;
  /* 15% from the top and centered */
  padding: 20px;
  border: 1px solid #000000;
  width: 80%;
  /* Could be more or less, depending on screen size */
  border-radius: 10px;
}

/* Your existing CSS goes here */

/* Responsive styling for screens less than 768px wide */
@media (max-width: 768px) {
  body {
    flex-direction: column;
    align-items: center;
  }

  #container {
    width: 95%;
    /* Adjust width for smaller screens */
  }

  #header {
    flex-direction: column;
    align-items: center;
  }

  #weekdays div, .day {
      width: calc(100% / 10); 
      height: 80px; 
  }

  #weekdays div {
    font-size: 14px;
    /* Adjust font size for smaller screens */
  }


  #calendar {
    flex-direction: row;
    flex-wrap: wrap;
  }

  .event {
    font-size: 8px;
    /* Smaller font size for events */
  }

  #newEventModal,
  #deleteEventModal {
    width: 90%;
    /* Adjust modal width */
    left: 5%;
    /* Center modal */
    top: 10%;
  }

  #eventDetailsOverlay {
    padding: 10px;
  }

  #eventDetailsContent {
    width: 70%;
  }

  .day{
    padding: 1%;
  }


}