@import url('https://fonts.googleapis.com/css2?family=Akaya+Telivigala&display=swap');
  * { padding:0; margin:0; }
  html { font-family:'Times New Roman',Georgia; text-align:center; overflow-x:hidden; }
  body { background-color:#000000; color:#8C8C8C; }
  header { background-color:#fff; outline:0.5px solid white; font-size:18px; color:black; text-shadow:1px 1px 3px gray; padding:5px 0; }
  .menu { padding-top:15px; color:black; font-size:30px; font-weight:bold; font-family:'Verdana'; text-shadow:1px 1px 3px black; }
  .menu:hover { cursor:pointer; color:white; transition-duration:1s; transition-timing-function: ease; }
  .m { -webkit-transform:rotate(180deg); -ms-transform: rotate(180deg); transform:rotateX(180deg); }
  .menu-geral { position:absolute; width:300px; height:500px; outline:0.5px solid #333; background-color:#4D4D4D; margin-top:20px; z-index:2; display:none; }
  h2 { font-family: 'Akaya Telivigala', cursive; font-size:35px; }
  p, label, summary  { font-size:20px; }
  input:invalid {border: red 1px solid;}
  
  footer img { filter:invert(100%); }
  
  .fechar-info { padding-right:2px; font-size:30px; }
  .fechar-info:hover { color:red; cursor:pointer; }
  
  .boda-calendario { outline:1px solid #8C8C8C; /*border:0.5px solid #8C8C8C; */}
  .tamanho-data { width:15%; height:180px; font-size:82px; padding-top:30px; border-color:blue; }
  .tamanho-data:hover { background-color:#040404; color:#fff;  cursor: pointer;}
  .tamanho-semana { width:14.28%; outline:1px solid #8C8C8C;}
  .mes { outline:1px solid #8C8C8C; height:70px;  }
  .mes p { font-size:45px; }
  .mes p:hover { color:#fff; cursor:pointer; }
  .ajeitar-mes { font-size:20px; font-weight:500; cursor:pointer;}
  .ano p { font-size:50px; font-weight:900; }
  .seta-ano:hover { color:#fff; cursor:pointer; }
 /* select {padding:9px 0;width:100%;border:none;border-bottom:1px solid #ccc} */
 
 .tamanho-data-tablet  { width:14.28%; height:180px; border-color:blue; font-size:60px; padding-top:50px;}
 /*.tamanho-data-tablet p {  m } */
 .tamanho-data-tablet:hover { background-color:#040404; color:#fff; }
 
 .tamanho-data-celular  { height:80px; }
 .tamanho-data-celular p { font-size:35px; margin-top:10px; }
 .tamanho-data-celular:hover { background-color:#040404; color:#fff; }
 .tamanho-semana-celular { height:80px; }
 .tamanho-semana-celular p { font-size:30px; margin-top:20px;  }
 .mes-celular { height:40px; }
  

  
  .curr-date {
   background-color:#00f; color:#fff;
}
  .curr-date:hover {
   background-color:#009; color:#fff;
}  

  .curr-date-tablet {
   color:#fff!important;background-color:#009688!important;
}
  .curr-date-tablet:hover {
   color:#fff!important;background-color:#008073!important;
}

.calendar {
    width: 100%;
    overflow: hidden; 
}

.calendar-days {
    display: grid;
    grid-template-columns: repeat(7, auto);
    gap: 1px 0.8px;
}


.calendar-days div {
width:100%;
    position: relative;
   
}

.calendar-days div span {
    position: absolute; /* background-color:blue; ficar bonito deixar para quando tiver coerencia com os feriados e agendamentos */
}

.calendar-days div:hover span {
    transition: width 0.2s ease-in-out, height 0.2s ease-in-out;
}
.calendar-days div span:nth-child(2),
.calendar-days div span:nth-child(4) {
    width: 0;
    height: 2px;
}

.calendar-days div:hover span:nth-child(2),
.calendar-days div:hover span:nth-child(4) {
    width: 100%;
}

.calendar-days div span:nth-child(2) {
    top: 0;
    left: 0;
}

.calendar-days div span:nth-child(4) {
    bottom: 0;
    right: 0;
}

.calendar-days div:hover span:nth-child(2) {
    transition-delay: 0.2s;
}

.calendar-days div:hover span:nth-child(3) {
    transition-delay: 0.4s;
}

.calendar-days div:hover span:nth-child(4) {
    transition-delay: 0.6s;
}

/* calendario celular */
.calendar-grid {
  display:grid;
  grid-template-rows: repeat(7, 1fr);
  gap: 0;
  text-align: center;
  font-size:40px;
}

.calendar-grid  div {
  padding: 10px;
}
.prev, .next  {
  color: #333;
}

.prev:hover, .next:hover  {
  color: #404040;
}

.today {
  background-color:yellow;
  color:white;
}
.today:hover {
  background-color:#fff100;
  color:white;
}

 /* calendar juliano */

  .tamanho-data-juliano { width:15%; height:180px; font-size:40px; padding-top:56px; border-color:blue; }
  .tamanho-data-juliano:hover { background-color:#040404; color:#fff;  cursor: pointer;}
  .tamanho-semana-juliano { width:14.28%; border-color:blue; outline:1px solid #8C8C8C;}
  .tamanho-semana-juliano p { font-size:10px; padding:20px 0; }
  .mes-juliano { outline:1px solid #8C8C8C; height:70px;  }
  .mes-juliano p { font-size:45px; }
  .mes-juliano p:hover { color:#fff; cursor:pointer; }
  .ajeitar-mes-juliano { font-size:20px; font-weight:500; cursor:pointer;}
  .ano-juliano p { font-size:50px; font-weight:900; }
  .seta-ano-juliano:hover { color:#fff; cursor:pointer; }
  
  
  .curr-date-juliano {
   color:#fff!important;background-color:#ff5722!important;
}
  .curr-date-juliano:hover {
  color:#fff!important;background-color:#f44336!important;
}  

.calendar-juliano {
    width: 100%;
    overflow: hidden;
}

.calendar-days-juliano {
    display: grid;
    grid-template-columns: repeat(7, auto);
    gap: 1px 0.8px;
}

.calendar-days-juliano div {
width:100%;
    position: relative;
}

.calendar-days-juliano div span {
    position: absolute;
}

.calendar-days-juliano div:hover span {
    transition: width 0.2s ease-in-out, height 0.2s ease-in-out;
}
.calendar-days-juliano div span:nth-child(2),
.calendar-days-juliano div span:nth-child(4) {
    width: 0;
    height: 2px; 
}

.calendar-days-juliano div:hover span:nth-child(2),
.calendar-days-juliano div:hover span:nth-child(4) {
    width: 100%;
}

.calendar-days-juliano div span:nth-child(2) {
    top: 0;
    left: 0;
}

.calendar-days-juliano div span:nth-child(4) {
    bottom: 0;
    right: 0;
}

.calendar-days-juliano div:hover span:nth-child(2) {
    transition-delay: 0.2s;
}

.calendar-days-juliano div:hover span:nth-child(3) {
    transition-delay: 0.4s;
}

.calendar-days-juliano div:hover span:nth-child(4) {
    transition-delay: 0.6s;
}

  /* calendario chines */
  .tamanho-data-chines { width:14.28%; height:120px; }
  .tamanho-data-chines p {font-size:18px; padding-top:40px; }
  .tamanho-data-chines:hover { background-color:#040404; color:#fff;  cursor: pointer;}
  .tamanho-semana-chines { width:14.28%; background-color:#ffd11a; outline:1px solid #8C8C8C;}
  .tamanho-semana-chines:hover { background-color:#ffcc00;}
  .tamanho-semana-chines p { font-size:10px; padding:2px; }
  .mes-chines { outline:1px solid #8C8C8C; height:35px; }
  .mes-chines p { font-size:20px; }
  .mes-chines p:hover { color:#fff; cursor:pointer; }
  .ano-chines p { font-size:50px; font-weight:900; } 

  /* calendario judaico */
  .tamanho-data-judaico { width:14.28%; height:120px; }
  .tamanho-data-judaico p {font-size:18px; padding-top:15px; }
  .tamanho-data-judaico:hover { background-color:#040404; color:#fff;  cursor: pointer;}
  .tamanho-semana-judaico { width:14.28%; height:50px; background-color:#009; color:white; outline:1px solid #8C8C8C;}
  .tamanho-semana-judaico:hover { background-color:#00a;}
  .tamanho-semana-judaico p { font-size:11px; padding:2px; }
  .mes-judaico { outline:1px solid #8C8C8C; height:35px; }
  .mes-judaico p { font-size:20px; }
  .mes-judaico p:hover { color:#fff; cursor:pointer; }
  .ano-judaico p { font-size:50px; font-weight:900; }
  
  /* calendario islamico */
  .tamanho-data-islamico { width:14.28%; height:120px; }
  .tamanho-data-islamico p {font-size:18px; padding-top:15px; }
  .tamanho-data-islamico:hover { background-color:#040404; color:#fff;  cursor: pointer;}
  .tamanho-semana-islamico { width:14.28%; height:75px; background-color:#00843D; color:white; outline:1px solid #8C8C8C;}
  .tamanho-semana-islamico:hover { background-color:#006630;}
  .tamanho-semana-islamico p { font-size:14px; padding:2px; }
  .mes-islamico { outline:1px solid #8C8C8C; height:35px; }
  .mes-islamico p { font-size:20px; }
  .mes-islamico p:hover { color:#fff; cursor:pointer; }
  .ano-islamico p { font-size:50px; font-weight:900; }

  /* calendario etiope */
  .tamanho-data-etiope { width:14.28%; height:120px; }
  .tamanho-data-etiope p {font-size:18px; padding-top:15px; }
  .tamanho-data-etiope:hover { background-color:#040404; color:#fff;  cursor: pointer;}
  .tamanho-semana-etiope { width:14.28%; height:75px; background-color:#2D8740; color:white; outline:1px solid #8C8C8C;}
  .tamanho-semana-etiope:hover { background-color:#339949;}
  .tamanho-semana-etiope p { font-size:14px; padding:2px; }
  .mes-etiope { outline:1px solid #8C8C8C; height:35px; }
  .mes-etiope p { font-size:20px; }
  .mes-etiope p:hover { color:#fff; cursor:pointer; }
  .ano-etiope p { font-size:50px; font-weight:900; }
  
  /* calendario junche */
  .tamanho-data-juche { width:15%; height:120px; font-size:18px; padding-top:45px; border-color:blue; }
  .tamanho-data-juche:hover { background-color:#040404; color:#fff;  cursor: pointer;}
  .tamanho-semana-juche { width:14.28%; outline:1px solid #8C8C8C;}
  .tamanho-semana-juche p { color:#009; font-size:10px; padding:20px 0; }
  .mes-juche { outline:1px solid #8C8C8C; height:50px;  }
  .mes-juche p { font-size:25px; }
  .mes-juche p:hover { color:#fff; cursor:pointer; }
  .ano-juche p { font-size:50px; font-weight:900; }
  .seta-ano-juche:hover { color:#fff; cursor:pointer; }
  
  .curr-date-juche {
   color:#fff!important;background-color:#000080!important;
}
  .curr-date-juche:hover {
  color:#fff!important;background-color:#000070!important;
}  

.calendar-juche {
    width: 100%;
    overflow: hidden;
}

.calendar-days-juche {
    display: grid;
    grid-template-columns: repeat(7, auto);
    gap: 1px 0.8px;
}

.calendar-days-juche div {
width:100%;
    position: relative;
}

.calendar-days-juche div span {
    position: absolute;
}

.calendar-days-juche div:hover span {
    transition: width 0.2s ease-in-out, height 0.2s ease-in-out;
}
.calendar-days-juche div span:nth-child(2),
.calendar-days-juche div span:nth-child(4) {
    width: 0;
    height: 2px; 
}

.calendar-days-juche div:hover span:nth-child(2),
.calendar-days-juche div:hover span:nth-child(4) {
    width: 100%;
}

.calendar-days-juche div span:nth-child(2) {
    top: 0;
    left: 0;
}

.calendar-days-juche div span:nth-child(4) {
    bottom: 0;
    right: 0;
}

.calendar-days-juche div:hover span:nth-child(2) {
    transition-delay: 0.2s;
}

.calendar-days-juche div:hover span:nth-child(3) {
    transition-delay: 0.4s;
}

.calendar-days-juche div:hover span:nth-child(4) {
    transition-delay: 0.6s;
}

  /* calendario maia */
  .tamanho-data-maia-haab {width:20%; height:120px;  padding-top:5px; border-color:blue;}
  .tamanho-data-maia-haab p {font-size:25px;}
  .tamanho-data-maia-haab:hover { background-color:#040404; color:#fff;  cursor: pointer;}
  .tamanho-data-maia-tzolkin {width:33.3333%; height:180px;  padding-top:15px; border-color:blue;}
  .tamanho-data-maia-tzolkin p {font-size:20px;}
  .tamanho-data-maia-tzolkin:hover { background-color:#040404; color:#fff;  cursor: pointer;}
  
  /* calendario romano */
  .tamanho-data-romano { width:14.28%; height:120px; }
  .tamanho-data-romano p {font-size:18px; padding-top:15px; }
  .tamanho-data-romano:hover { background-color:#040404; color:#fff;  cursor: pointer;}
  .tamanho-semana-romano  {width:14.28%; height:70px; background-color:#E2001A; outline:1px solid #8C8C8C;}
  .tamanho-semana-romano p { color:#FFD400; font-size:10px; font-weight:700; padding:20px 0; }

  /* calendario asteca */
  .tamanho-semana-asteca {width:2.5%; height:120px; writing-mode: sideways-lr; font-size:100%;}
  .tamanho-data-asteca   {width:7.5%; height:120px;}
  /* .tamanho-data-asteca:hover { background-color:#040404; color:#fff;  cursor: pointer;} */
  .tamanho-data-asteca:hover {cursor: pointer;}
  .teca-1 {background-size: 100% 100%; background-repeat: no-repeat; background-image: url("https://upload.wikimedia.org/wikipedia/commons/thumb/4/47/Signo_Cipactli.png/150px-Signo_Cipactli.png");}  
  .teca-2 {background-size: 100% 100%; background-repeat: no-repeat; background-image: url("https://upload.wikimedia.org/wikipedia/commons/thumb/e/e1/Signo_Eh%C3%A9catl.png/150px-Signo_Eh%C3%A9catl.png");}
  .teca-3 {background-size: 100% 100%; background-repeat: no-repeat; background-image: url("https://upload.wikimedia.org/wikipedia/commons/thumb/4/4a/Signo_Calli.png/150px-Signo_Calli.png");}
  .teca-4 {background-size: 100% 100%; background-repeat: no-repeat; background-image: url("https://upload.wikimedia.org/wikipedia/commons/thumb/6/66/Signo_Cuetzpallin.png/150px-Signo_Cuetzpallin.png");}
  .teca-5 {background-size: 100% 100%; background-repeat: no-repeat; background-image: url("https://upload.wikimedia.org/wikipedia/commons/thumb/e/ed/Signo_C%C3%B3atl.png/150px-Signo_C%C3%B3atl.png");}
  .teca-6 {background-size: 100% 100%; background-repeat: no-repeat; background-image: url("https://upload.wikimedia.org/wikipedia/commons/thumb/5/56/Signo_Miquiztli.png/150px-Signo_Miquiztli.png");}
  .teca-7 {background-size: 100% 100%; background-repeat: no-repeat; background-image: url("https://upload.wikimedia.org/wikipedia/commons/thumb/1/1b/Signo_M%C3%A1zatl.png/150px-Signo_M%C3%A1zatl.png");}
  .teca-8 {background-size: 100% 100%; background-repeat: no-repeat; background-image: url("https://upload.wikimedia.org/wikipedia/commons/thumb/4/40/Signo_Tochtli.png/150px-Signo_Tochtli.png");}
  .teca-9 {background-size: 100% 100%; background-repeat: no-repeat; background-image: url("https://upload.wikimedia.org/wikipedia/commons/thumb/9/9d/Signo_Atl.png/150px-Signo_Atl.png");}
  .teca-10 {background-size: 100% 100%; background-repeat: no-repeat; background-image: url("https://upload.wikimedia.org/wikipedia/commons/thumb/5/52/Signo_Itzcuintli.png/150px-Signo_Itzcuintli.png");}
  .teca-11 {background-size: 100% 100%; background-repeat: no-repeat; background-image: url("https://upload.wikimedia.org/wikipedia/commons/thumb/0/0c/Signo_Ozomatli.png/150px-Signo_Ozomatli.png");}
  .teca-12 {background-size: 100% 100%; background-repeat: no-repeat; background-image: url("https://upload.wikimedia.org/wikipedia/commons/thumb/b/b4/Signo_Malinalli.png/150px-Signo_Malinalli.png");}
  .teca-13 {background-size: 100% 100%; background-repeat: no-repeat; background-image: url("https://upload.wikimedia.org/wikipedia/commons/thumb/4/45/Signo_%C3%81catl.png/150px-Signo_%C3%81catl.png");}
  .teca-14 {background-size: 100% 100%; background-repeat: no-repeat; background-image: url("https://upload.wikimedia.org/wikipedia/commons/thumb/b/b8/Signo_Oc%C3%A9lotl.png/150px-Signo_Oc%C3%A9lotl.png");}
  .teca-15 {background-size: 100% 100%; background-repeat: no-repeat; background-image: url("https://upload.wikimedia.org/wikipedia/commons/thumb/4/40/Signo_Cuauhtli.png/150px-Signo_Cuauhtli.png");}
  .teca-16 {background-size: 100% 100%; background-repeat: no-repeat; background-image: url("https://upload.wikimedia.org/wikipedia/commons/thumb/5/56/Signo_Cozcacuauhtli.png/150px-Signo_Cozcacuauhtli.png");}
  .teca-17 {background-size: 100% 100%; background-repeat: no-repeat; background-image: url("https://upload.wikimedia.org/wikipedia/commons/thumb/2/28/Signo_Ollin.png/150px-Signo_Ollin.png");}
  .teca-18 {background-size: 100% 100%; background-repeat: no-repeat; background-image: url("https://upload.wikimedia.org/wikipedia/commons/thumb/2/26/Signo_T%C3%A9cpatl.png/150px-Signo_T%C3%A9cpatl.png");}
  .teca-19 {background-size: 100% 100%; background-repeat: no-repeat; background-image: url("https://upload.wikimedia.org/wikipedia/commons/thumb/c/ce/Signo_Qui%C3%A1huitl.png/150px-Signo_Qui%C3%A1huitl.png");}
  .teca-20 {background-size: 100% 100%; background-repeat: no-repeat; background-image: url("https://upload.wikimedia.org/wikipedia/commons/thumb/e/e8/Signo_X%C3%B3chitl.png/150px-Signo_X%C3%B3chitl.png");}
  .teca-1:hover {background-image: none;}
  .teca-2:hover {background-image: none;}
  .teca-3:hover {background-image: none;}
  .teca-4:hover {background-image: none;}
  .teca-5:hover {background-image: none;}
  .teca-6:hover {background-image: none;}
  .teca-7:hover {background-image: none;}
  .teca-8:hover {background-image: none;}
  .teca-9:hover {background-image: none;}
  .teca-10:hover {background-image: none;}
  .teca-11:hover {background-image: none;}
  .teca-12:hover {background-image: none;}
  .teca-13:hover {background-image: none;}
  .teca-14:hover {background-image: none;}
  .teca-15:hover {background-image: none;}
  .teca-16:hover {background-image: none;}
  .teca-17:hover {background-image: none;}
  .teca-18:hover {background-image: none;}
  .teca-19:hover {background-image: none;}
  .teca-20:hover {background-image: none;}
  .teca-nem:hover { background-color:#040404; color:#fff; cursor: pointer; }
  
  /* calendario egipcio */
  .tamanho-data-egipcio { width:14.28%; height:120px; }
  .tamanho-data-egipcio p {font-size:18px; padding-top:15px; }
  .tamanho-data-egipcio:hover { background-color:#040404; color:#fff;  cursor: pointer;}
  .tamanho-semana-egipcio { width:14.28%; height:120px; background-color:white; color:#c09300; outline:1px solid #8C8C8C;}
  .tamanho-semana-egipcio:hover { background-color:#eee;}
  .tamanho-semana-egipcio p { font-size:14px; padding:2px; }
  .mes-egipcio { outline:1px solid #8C8C8C; height:35px; }
  .mes-egipcio p { font-size:20px; }
  .mes-egipcio p:hover { color:#fff; cursor:pointer; }
  .ano-egipcio p { font-size:50px; font-weight:900; }  
 
  /* calendario liturgico */ 
  .ciclo { width:50px; height:275px; font-size:27px; writing-mode: sideways-lr;}
  .ciclo-ciclo  { width:30px; height:275px; font-size:16px; writing-mode: sideways-lr;}
  .data-liturgica { width:84.5%; }/* precisa melhorar */
 
 
 @media only screen and (min-width: 800px) {
  .tamanho-semana-egipcio { height:80px;}
  }
  
  @media only screen and (min-width: 1000px) {
   .tamanho-data-juliano { font-size:60px; padding-top:45px; }
   .tamanho-semana-juliano p { font-size:20px; padding:10px 0; }
   .tamanho-semana-romano p { font-size:20px; padding:10px 0; font-weight:400; }
   .tamanho-semana-egipcio { height:65px;}
   .data-liturgica { width:70%; }
  }
  
  @media only screen and (min-width: 1490px) {
	.data-liturgica { width:84.5%; }
  }
	  

  @media only screen and (max-width: 500px) {
   .tamanho-data-juliano { font-size:20px; padding-top:25px; height:80px; }
   .tamanho-semana-juliano p { font-size:8px; padding:10px 0; }
   .tamanho-data-judaico p {font-size:11px; padding-top:18px; }
   .tamanho-data-romano p {font-size:11px; padding-top:18px; }
   .tamanho-data-islamico p {font-size:11px; padding-top:18px; }
  }
  
  @media only screen and (max-width: 564px) {
	  .data-liturgica { width:48%; }
  }
  
  @media only screen and (max-width: 700px) {
  .tamanho-semana-judaico p { font-size:10px; padding:1.5px; }
  .tamanho-semana-romano p { font-size:10px; padding:1.5px; }
  .tamanho-semana-islamico p { font-size:10px; padding:1.5px; }
  .tamanho-semana-asteca {font-size:50%;}
  .data-liturgica { width:55%; }
  }