@import url(./normalize.css);
@import url(./media.css);
@import url(./variables.css);

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html, body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  margin: 0;
  overflow: hidden;
}

body {
  background: linear-gradient(135deg, var(--bg-secondary), var(--bg-primary));
  color: var(--text-primary);
  transition: background-color 0.5s ease, color 0.5s ease;
  font-family: 'Roboto', serif;
  font-size: 1rem;
  text-align: center;
  display: flex;
  flex-direction: column;
  min-height: 100vh; 
  height: 100vh;
  padding: 1em;
  margin: 0;
  overflow-x: auto;
  position: relative; 
  z-index: 0;
  scrollbar-width: none;
  -ms-overflow-style: none; 
}

.element {
    overflow: auto;
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* IE/Edge */
}

.element::-webkit-scrollbar {
    display: none; /* WebKit браузеры */
}

.stars {
  position: fixed;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 1;
  background: transparent;
}
.star {
  position: absolute;
  border-radius: 50%;
  animation: twinkle 3s ease-in-out infinite alternate;
  width: 0.2em;
  height: 0.2em;
  background: var(--text-secondary);
}
@keyframes twinkle {
  0% { opacity: 0.2; transform: scale(0.7); }
  100% { opacity: 1; transform: scale(1.9); }
}

/*                                                                                      */

/*                                 Сождержимое                                         */

.content {
  flex: 1;
  display: grid;
  grid-template-areas: 
    "moon"
    "result"
    "calendar";
  grid-template-columns: 1fr;
  grid-template-rows: 1fr;

  width: 100%;
  height: fit-content;
  box-sizing: border-box;
  box-shadow: 0 0 3vh var(--bg-primary);
  border-radius: 3vh; 

  z-index: 4;
  overflow-x: hidden;
  overflow-y: auto;
  padding: 1em;

  justify-items: center;
  gap: 1em;
}

/*                                            Луна                                      */

.moon { 
  grid-area: moon;
  justify-self: center;

  flex: 0 0 auto;
  box-sizing: border-box;
    position: relative;
    margin: 1em auto;
    width: fit-content;
    z-index: 100;
} 

#moon { 
    width: 30vmin; 
    height: 30vmin; 
    min-width: 120px; 
    min-height: 120px; 
    border-radius: 50%; 
    background-color: #e6e6e6; 
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Ccircle cx='10' cy='15' r='6' fill='%23888'/%3E%3Ccircle cx='75' cy='20' r='4' fill='%23bbb'/%3E%3Ccircle cx='20' cy='40' r='5' fill='%23999'/%3E%3Ccircle cx='35' cy='50' r='3' fill='%23888'/%3E%3Ccircle cx='50' cy='55' r='6' fill='%23aaa'/%3E%3Ccircle cx='65' cy='60' r='4' fill='%23777'/%3E%3Ccircle cx='30' cy='70' r='5' fill='%23bbb'/%3E%3Ccircle cx='80' cy='50' r='3' fill='%23777'/%3E%3Ccircle cx='15' cy='60' r='2' fill='%23bbb'/%3E%3Ccircle cx='40' cy='35' r='12' fill='%23d6d6d6'/%3E%3Ccircle cx='60' cy='70' r='10' fill='%23cfcfcf'/%3E%3Ccircle cx='25' cy='50' r='8' fill='%23d0d0d0'/%3E%3Ccircle cx='70' cy='30' r='6' fill='%23d8d8d8'/%3E%3C/svg%3E"); 
    background-size: 100% 100%; 
    background-repeat: no-repeat; 
    box-shadow: 0 0 15px #f0f0d0; 
    animation: glow 4s ease-in-out infinite alternate; 
} 

/*                                      Данные                                          */

.result {
  grid-area: result;
  justify-self: center;

  display: grid;

  flex: 0 0 auto;
  box-sizing: border-box;
  background-color: linear-gradient(135deg, #0a0a2a3a, );
  background-image: radial-gradient(ellipse 30vmin 30vmin at top, 
    rgba(249, 249, 249, 0.671),
    rgba(255, 255, 235, 0.445), 
    rgba(10, 10, 42, 0.397),
    rgba(10, 10, 42, 0.596));
  animation: glowBackground 4s ease-in-out infinite alternate;
  animation-play-state: running, paused;

  border-radius: 1em;
  box-shadow: 0.25em 0.5em 0.75em -0.25em var(--bg-primary), -0.25em 0.5em 0.75em -0.25em var(--bg-primary), 0 0.5em 0.75em -0.25em var(--bg-primary);

  position: relative;
  padding: 0.75em;
  text-align: center;

  width: clamp(270px, 80%, 450px);
  max-width: 100%;
  height: fit-content;
  min-height: 280px;
  z-index: 5;
}


/*                        Заголовок                     */

.moon-day {
  font-size: 1.7em;
  display: flex;
  flex-direction: column;
  gap: 0.8em;
  transition: opacity 0.3s ease;
}

/*                      Описание                       */

.moon-details {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.6em;
  margin-top: 1em;
  transition: opacity 0.3s ease;
}

/*                Детали описания                      */

.moon-details .detail-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  min-height: 30px;
  padding: 0.5em 0;
  border-bottom: 0.1em dashed var(--text-primary);
}


.moon-details .detail-label {
  color: var(--text-secondary);
  font-size: 1.2em;
  justify-content: center;
}
.moon-details .detail-value {
  color: var(--text-primary);
  font-size: 1.2em;
  text-align: right;
  justify-content: center;
}

/*                                                                                      */
/*                                 Календарь                                            */

.calendar {
  grid-area: calendar;
  justify-self: center;

  flex: 0 0 auto;
  box-sizing: border-box;
  margin: 1em;
  border-radius: 1em;;
  background: none;
  box-shadow: 0.25em 0.5em 0.75em -0.25em var(--bg-primary), -0.25em 0.5em 0.75em -0.25em var(--bg-primary), 0 0.5em 0.75em -0.25em var(--bg-primary);
  position: relative;
  text-align: center;
  align-items: flex-start; 
  justify-content: center; 
  font-family: "Grill Sans", serif;
  padding: 0.5em;
  width: clamp(270px, 80%, 450px);
  height: fit-content;
  z-index: 5;
}

/*                         Ввод даты                               */

.date-input-row input[type="date"] {
  background: transparent; 
  border: none;
  background: none;
  border-radius: 1em 1em 0 0;
  width: calc(100%);
  text-align: center;
  font-size: 1.5em;
  font-family: 'Roboto', serif;
  height: 2em;
  color: var(--text-primary);
  cursor: pointer;
  outline: none;

  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

.date-input-row input[type="date"]::-webkit-calendar-picker-indicator {display: none;}
.date-input-row input[type="date"]::-moz-calendar-picker-indicator {display: none;}
.date-input-row input[type="date"]:focus {outline: none; box-shadow: none;}
.date-input-row input[type="date"]:focus-visible {outline: none; }

/*                          Заголовок (месяц, год)                        */

.calendar-header {
  background: transparent; 
  display: flex;
  justify-content: space-between;
  align-items: center;}

.calendar-nav {
  background: none;
  border: none;
  color: var(--text-primary);
  cursor: pointer;
  padding: 0.3em;
  border-radius: 0.5em;
  font-size: 2em;}

.calendar-month-year {
  font-family: 'Roboto', serif;
  font-size: 1.5em;
  flex: 1;}

/*                       Сам календарь                         */

.calendar-days {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 0}

.calendar-day {
  aspect-ratio: 1;
  margin: 0.2em;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 30%;
  cursor: pointer;
  transition: all 0.3s ease;
  font-size: 1.4em;
  opacity: 1;
  position: relative;
  z-index: 1;
}

.calendar-day::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border-radius: 30%;
  z-index: -1;
}

.calendar-day:hover::before,
.calendar-day.selected::before {
  background: linear-gradient(130deg, var(--text-secondary) 0%, transparent 40%) border-box;
}

.calendar-day:hover,
.calendar-day.selected {
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(130deg, #ffffffad 0%, transparent 40% ) border-box !important;
  border-radius: 40%;
  cursor: pointer;
  font-size: 1.5em;
}

.calendar-day.today {    
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(130deg, var(--text-primary) 0%, transparent 40% ) border-box;
  border-radius: 40%;
  cursor: pointer;
  font-size: 1.5em;
}
.calendar-day.other-month { opacity: 0.1; pointer-events: none; border: none; background: none;}

/*                                                             */

/*                              Подвал                          

footer {
  background: linear-gradient(135deg, #0a0a2a9c, #0a0a2a3a);
  padding: 1em;
  text-align: center;
  box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.3);
  z-index: 5;
  width: 100%;
}

.footer-text {
  font-family: 'Roboto', serif;
  color: var(--text-primary);
  margin: 0;
  font-size: 1em;
}

.responsive-icon {
  height: 3em;
  margin: 0 0.5em; 
  transition: transform 0.3s ease;
}

.responsive-icon:hover { transform: scale(1.1); }

.main::-webkit-scrollbar { width: 6px; }
.main::-webkit-scrollbar-track { background: transparent; }
.main::-webkit-scrollbar-thumb {
  background: var(--accent);
  border-radius: 3px;
}
.main::-webkit-scrollbar-thumb:hover {
  background: var(--accent-light);
}

-----------------------------------*/

@media (min-width: 850px) {
  .content {
    grid-template-areas: 
      "moon result"
      "moon calendar ";
    grid-template-columns: auto 1fr;
    grid-template-rows: 1fr 1fr;
    align-items: center;
    justify-content: center;
    gap: 1em;
    overflow: hidden;
    padding: 1.5em;
  }
  
  .moon {
    grid-row: span 2;
    justify-self: center;
    align-items: center;
    margin-left: 2em;
    
  }

  #moon { 
    width: 33vw; 
    height: 33vw; 
    min-width: 120px; 
    min-height: 120px; 
    border-radius: 50%; 
    background-color: #e6e6e6; 
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Ccircle cx='10' cy='15' r='6' fill='%23888'/%3E%3Ccircle cx='75' cy='20' r='4' fill='%23bbb'/%3E%3Ccircle cx='20' cy='40' r='5' fill='%23999'/%3E%3Ccircle cx='35' cy='50' r='3' fill='%23888'/%3E%3Ccircle cx='50' cy='55' r='6' fill='%23aaa'/%3E%3Ccircle cx='65' cy='60' r='4' fill='%23777'/%3E%3Ccircle cx='30' cy='70' r='5' fill='%23bbb'/%3E%3Ccircle cx='80' cy='50' r='3' fill='%23777'/%3E%3Ccircle cx='15' cy='60' r='2' fill='%23bbb'/%3E%3Ccircle cx='40' cy='35' r='12' fill='%23d6d6d6'/%3E%3Ccircle cx='60' cy='70' r='10' fill='%23cfcfcf'/%3E%3Ccircle cx='25' cy='50' r='8' fill='%23d0d0d0'/%3E%3Ccircle cx='70' cy='30' r='6' fill='%23d8d8d8'/%3E%3C/svg%3E"); 
    background-size: 100% 100%; 
    background-repeat: no-repeat; 
    box-shadow: 0 0 15px #f0f0d0; 
    animation: glow 4s ease-in-out infinite alternate; 
} 
  
  .result {
    grid-column: 2;
    grid-row: 1;
    justify-self: center;
    align-self: center;
    padding: 1em;
    box-shadow: 0.5em 1em 1.5em -0.5em var(--bg-primary), -0.5em 1em 1.5em -0.5em var(--bg-primary), 0 1em 1.5em -0.5em var(--bg-primary);
    background-image: radial-gradient(ellipse 45vmin 50vmin at bottom left, 
    rgba(249, 249, 249, 0.671),
    rgba(255, 255, 235, 0.445), 
    rgba(10, 10, 42, 0.397),
    rgba(10, 10, 42, 0.596));
  }
  
  .calendar {
    justify-self: center;
    grid-column: 2;
    grid-row: 2;
    height: fit-content;
    align-self: flex-end;
    max-height: 100%;
    padding: 0.5em;
    box-shadow: 0.5em 1em 1.5em -0.5em var(--bg-primary), -0.5em 1em 1.5em -0.5em var(--bg-primary), 0 1em 1.5em -0.5em var(--bg-primary);
    background-image: radial-gradient(ellipse 45vmin 65vmin at top left, 
    rgba(249, 249, 249, 0.671),
    rgba(255, 255, 235, 0.445), 
    rgba(10, 10, 42, 0.397),
    rgba(10, 10, 42, 0.596));
      animation: glowBackground 4s ease-in-out infinite alternate;
      animation-play-state: running, paused;
  }
}

/* Стили для очень маленьких экранов (например, iPhone SE) */
@media (max-width: 400px) {
  .content {
    padding: 0.5em;
    gap: 0.5em;
  }

  .result, .calendar {
    width: clamp(250px, 95%, 450px);
    padding: 0.5em;
  }

  .result {
    box-shadow: 0.15em 0.3em 0.5em -0.15em var(--bg-primary), -0.15em 0.3em 0.5em -0.15em var(--bg-primary), 0 0.3em 0.5em -0.15em var(--bg-primary);
    min-height: 250px;
  }
  
  .calendar {
    box-shadow: 0.15em 0.3em 0.5em -0.15em var(--bg-primary), -0.15em 0.3em 0.5em -0.15em var(--bg-primary), 0 0.3em 0.5em -0.15em var(--bg-primary);
    margin: 0.5em;
  }
  
  .moon {
    margin: 0.5em auto;
  }
  
  .moon-details .detail-label,
  .moon-details .detail-value {
    font-size: 1em;
  }
  
  .calendar-nav {
    font-size: 1.5em;
  }
  
  .calendar-month-year {
    font-size: 1.2em;
  }
  
  .calendar-day {
    font-size: 1.2em;
    margin: 0.1em;
  }
  
  .moon-day {
    font-size: 1.5em;
  }
  
  body {
    padding: 0.5em;
  }
}