/* From the :root element you can easily change the colors of the design, its size and so on. */
:root {

  /* You can change the font family in the whole design here. (You need to add the font family to the codes.) */
  --font_family: 'Poppins', sans-serif;

    /* You can change the font size here, is proportional to all texts. */
    --font_size: 16px;

    /* You can change the background color by typing the color code. (If you do not enter a background-image image, the background-color will be active.) */
    --background_color: #000;
    --background_image: url("");

    /* You can change the frame thickness and color of the picture by typing the number of pixels and the color code. */
    --image_border_color: #1f232e;
    --image_border_px: 3px;

    /* You can change the width and size of the picture by typing the number of pixels. */
    --image_width: 140px;
    --image_height: 140px;

    /* You can change the colors of the title and description section by typing the color codes. */
    --title_color: #fff;
    --description_color: #fff;

    /* You can change the colors of social media icons by changing the color code. */
    --svg_color: #fff;

    /* You can change the background, text color and active color of the menu by changing the color codes. */
    --menu_background_color: #1d1e24;
    --menu_text_color: #fff;
    --menu_active_text_color: #d7e04f;

    /* You can change the button's background, text color and active color by changing the color codes. */
    --button_background_color: #1d1e24;
    --button_text_color: #fff;
    --button_text_hover_color: #d7e04f;

    /* You can change the background, text color and active color of the text field by changing the color codes. */
    --textarea_background_color: #1d1e24;
    --textarea_text_color: #fff;
    --textarea_link_text_color: #d7e04f;

    /* You can change the background, text color and active color of the footer area by changing the color codes. */
    --footer_background_color: #1d1e24;
    --footer_text_color: #fff;
    --footer_link_text_color: #d7e04f;
  }


  .container {
    display: block;
    max-width: 100vw!important;
  }
  /* Basic Codes */

  img.icon {
    height: 50px;
    float: left;
  }


  h2.header {
    display: block;
    font-weight: 600;
    color: cornsilk;
    z-index: 1;
  }

  a {
    color: white;
    text-decoration: none;
    font-weight: 400;
    text-align: center;
  }


  li.li-header {
    font-weight: 800;
    list-style: none;
  }

  img.logo-turtle {
    background-color: lightcyan!important;
  }

  h3.no {
    color: white;
    text-align: center;
  }

  .main_text_item.descriptions {
    background-color: white;
    color: black;
    border-style: solid;
    border-width: 5px;
    border-color: dodgerblue;
  }

  ul.amenities-list {
    list-style: disc;
    text-align: left;
    padding: 2vw;
  }

  p.no {
    color: white;
    text-align: center;
  }

  div.gallery {
    border: 1px solid #ccc;
  }

  div.gallery:hover {
    border: 1px solid #777;
  }

  div.gallery img {
    width: 100%;
    height: auto;
  }

  div.desc {
    padding: 15px;
    text-align: center;
  }

  * {
    box-sizing: border-box;
  }

  section#photos {
    margin: 25px;
  }

  .responsive {
    padding: 0 6px;
    float: left;
    width: 24.99999%;
  }

  .centered {
    text-align: center;
    margin: 24px;
    width: 100vw;
  }

  .white {
    color: white;
  }

  @media only screen and (max-width: 700px) {
    .responsive {
      width: 49.99999%;
      margin: 6px 0;
    }
  }

  @media only screen and (max-width: 500px) {
    .responsive {
      width: 100%;
    }
  }

  .clearfix:after {
    content: "";
    display: table;
    clear: both;
  }

  body {
    font: var(--font_size) var(--font_family);
    font-weight: 400;
    line-height: 1.5;
    background: var(--background_color) var(--background_image) no-repeat center;
     background-size: cover;   
  }

  .flex_column_center {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
  }


  /* Logo, Title and Description Codes */

  .header_img {
    padding-top: 1em;
  }

  .header_img img {
    height: var(--image_height);
    width: var(--image_width);
    border: var(--image_border_px) solid var(--image_border_color);
    border-radius: 50%;
    margin-bottom: 0.5em;
  }

  .header_text h1 {
    color: var(--title_color);
    font-size: 2em;
    max-width: 80vw;
    text-align: center!important;
    z-index: 1;
    text-shadow: 2px 3px black;
    line-height: normal;
    
  }

  .header_text h2 {
    color: var(--title_color);
    font-size: 1.2em;
    max-width: 80vw;
    text-align: center!important;
    z-index: 1;
    text-shadow: 2px 3px black;
    line-height: normal;
    
  }

  /* Social Media Icons Codes */

  .header_svg_list {
    padding-top: 1em;
  }

  .header_svg_item {
    width: 2.1em;
    height: 2.1em;
    cursor: pointer;
  }

  .header_svg_item + .header_svg_item {
    margin-left: 1em;
  }

  .header_svg_item svg {
    fill: var(--svg_color);
  }

  /* Menu Codes */

  #header_nav_menu_item_1 {
    color: var(--menu_active_text_color);
  }

  #header_nav_menu_item_2,
  #header_nav_menu_item_3 {
    color: var(--menu_text_color);
  }


  .header_nav_menu_list {
    padding-top: 1em;
    margin-left: 1em;
    margin-right: 1em;
  }

  .header_nav_menu_item {
    color: var(--menu_text_color);
    background-color: var(--menu_background_color);
    text-align: center;
    list-style-type: none;
    cursor: pointer;
    padding: 0.5em;
    border-radius: 0.3em;
    cursor: pointer;
    transition: 0.10s ease;
    font-size: 1.1em;
  }

  .header_nav_menu_item + .header_nav_menu_item {
    margin-left: 0.4em;
  }

  /* Menu Container Codes */

  main {
    margin-bottom: auto;
  }

  #main_section_container_2, #main_section_container_3 {
   display: none;
  }

  .main_a_item {
    margin-top: 1em;
    text-decoration: none;
  }

  .main_text_item {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--button_text_color);
    background-color: var(--button_background_color);
    width: 41em;
    margin-top: 1em;
    padding: 0.8em;
    border-radius: 0.3em;
    min-height: 3.7em;
    text-align: center;
  }

  .main_button_item {
    color: var(--button_text_color);
    background-color: var(--button_background_color);
    width: 80vw;
    border-radius: 1em;
    min-height: 3.7em;
    text-align: center;
    cursor: pointer;
  }

  .main_small_a_item {
    margin-top: 1em;
    text-decoration: none;
  }

  .main_small_a_item + .main_small_a_item {
    margin-left: 10px;
  }

  .main_small_button_item:hover,
  .main_button_item:hover {
    color: var(--button_text_hover_color);
    transform: scale(1.02);
    transition: 0.10s ease;
  }

  .main_small_button_item {
    color: var(--button_text_color);
    background-color: var(--button_background_color);
    width: calc(41em / 2 - 5px);
    border-radius: 1em;
    min-height: 3.7em;
    text-align: center;
    cursor: pointer;
  }

  /* Footer Codes */

  .footer_div_item {
    color: var(--footer_text_color);
    background: var(--footer_background_color);
    padding: 1em;
    margin-top: 1.5em;
  }

  .footer_a_item {
    color: var(--footer_link_text_color);
    text-decoration: none;
  }

  /* Responsive Codes */

  @media (max-width: 768px) { 
    .main_text_item {
      width: 92vw;
    }

    .main-link {
        text-align: center;
    }

    .main_small_button_item {
      width: calc(92vw / 2 - 5px);;
    }
  }




  /**/


  #monthAndYear{
    font-size: 40px;
  }
  table{
    width: 84%;
    margin: 0 auto;
  }

  th, td{
    width: 12%;
    border: 1px solid black;
  }
  tr{
    height: 50px;
    border: 1px solid black;
  }
  thead tr{
    height: 30px;
  }
  .otherDay {
    font-weight: 100;
    font-style: italic;
    width: 10vw;
    min-width: 10vw;
    color: gray;

  }

  .day {
    width: 10vw;
    min-width: 10vw;

  }



  .box {
    float: left;
    height: 20px;
    width: 20px;
    margin-bottom: 15px;
    border: 1px solid black;
    clear: both;
  }

  .boxtext {
    text-align: initial;
  }

  .red {
    background-color: red;
  }


  .createEl{
    margin: 20px;
  }
  .events{
    cursor: pointer;
  }
  .events:hover{
    background-color: rgb(240, 240, 240);
  }
  .eventTime{
    display: inline;
    font-style: italic;
    color: gray;
  }
  .eventTitle{
    display: inline;
    color: blue;
  }
  #eventPopUp{
    height: 30%;
    width: 20%;
    position: absolute;
    left: 30%;
    top: 20%;
    background-color: white;
    border-radius: 10px;
    border: 1px solid black;
    z-index: 100;
    color: black;
    padding: 20px;
  }
  #popHeading{
    font-size: 30px;
    padding-left: 30px;
    padding-right: 30px;
    padding-top: 10px;
    margin-top: 10px;
    padding-bottom: 30px;
    margin-bottom: 0px;
  }
  #popDetails{
    margin-top: 0px;
    padding-right: 30px;
    padding-left: 30px;
    padding-top: 10px;
    padding-bottom: 40px;
  }
  #deleteEvent{
    float: right;
  }

  #editEvent{
    float: left;
  }

  #prevBtn, #nextBtn{
    border-radius: 20px;
    font-size: 20px;
    background-color: blue;
  }
  #createEventBtn{
    margin-left: 10%;
    margin-right: 10%;
  }
  button {
    background-color: blue; 
    border: none;
    color: white;
    padding: 10px 25px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    cursor: pointer;
    border-radius: 5px;
  }

  input{
    height: 25px;
    border: 1px solid rgba(0, 0, 17, 0.363);
  }
  .editEl{
    margin: 5px;
  }
  #editTime{
    margin-bottom: 10px;
  }



  .image1-container {
    display: inline-block;
    text-align: center;
  }

  .image1 {
    max-width: 90vw; /* Tamaño máximo de la imagen */
    max-height: auto;
    border-radius: 15px;

  }

  .images {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  }

  .image {
  flex: 0 0 calc(25% - 10px); /* 4 imágenes por fila, 10px de espacio entre ellas */
  margin: 2px; /* Espacio entre imágenes */
  }

  .banner {
  background-position: bottom;
  background-repeat: no-repeat;
  background-position-x: center;
  background-size: auto;
  z-index: -1;
  }


  .main-link {
    text-align: center;
      margin: 1% 0px;
  }

  .main-link a{
    color: white;
  }

  h2 {
    display: inline-block;
    text-align: center!important;
    left: 50%;
    width: 100%;
    z-index: 1;
  }

  p {
    display: inline-block;
    text-align: center!important;
    left: 50%;
    width: 100%;
  }
  .daySelect {
    background-color: green;
  }
  .oldDay {
    background-color: darkslategray !important;
    color: gray;
    font-style: oblique;
}
  th, td {
    width: 10vw !important;
}

tr {
    height: 5vh!important;
}
.grayedOut {
  background-color: gray !important;
  color: #ccc;
  cursor: default;
}

.notCurrentMonth{
  background-color: #000000;
  color: #202020;
  cursor: default;
}