html {
  --naglasak: #f6f6f6;
  --blago: #949494;
  --srednje: #6d6d6c;
  --tamno: #4b4a49;

  /* Quarter colors */
  --q1-hue: 180;  /* Cyan */
  --q2-hue: 050;  /* Yellow */
  --q3-hue: 000;  /* Red */
  --q4-hue: 100;  /* Green */

  /* Month opacity levels */
  --opacity-first: 70%;
  --opacity-second: 50%;
  --opacity-third: 30%;
}

body {
  background-color: var(--blago);
  font-family: "Gotham", sans-serif;
}

#godina {
  padding: calc(100% / 365);
  display: flex;
  height: 160px;
  background-color: var(--tamno);
  container-type: inline-size;
  filter: blur(0.1px);
}

#oznake {
  padding: calc(100% / 365);
  container-type: inline-size;
}

h1,
h2,
p {
  color: var(--tamno);
}

.mjesec {
  display: flex;
  float: left;
  height: auto;
  width: calc(100% / 12);

  /* outline: 6px solid var(--srednje); */

  /* border-width: 0.2px; */
  /* border-color: var(--srednje); */
  /* border-left-color: var(--blago); */
  /* background-color: var(--srednje); */
  /* border-bottom-style: solid; */
  /* border-width: 160px; */
  /* opacity: 5%; */
}

.mjesec-label {
  display: flex;
  float: left;
  height: auto;
  width: calc(100% / 12);
  padding-top: 0.3rem;
  color: var(--tamno);
  font-size: 60%;

  /* border-left-color: var(--blago); */
  /* font-size: 8%; */
  /* padding: 1%; */
  /* background-color: var(--srednje); */
  /* border-bottom-style: solid; */
  /* border-width: 160px; */
  /* opacity: 5%; */
}

.mjesec :nth-child(1) {
  /* background-color: var(--naglasak); */
  /* opacity: 99%; */
  /* border-left-color: var(--blago); */
  /* height: 106%; */
}

/*Q*/
/* .siječanj,.veljača, .ožujak {  border-bottom-color: var(--Q1);}
.travanj, .svibanj,.lipanj {  border-bottom-color: var(--Q2);}
.srpanj, .kolovoz, .rujan {  border-bottom-color: var(--Q3);}
.listopad, .studeni,.prosinac { border-bottom-color: var(--Q4);} */

/* Quarter 1 */
.siječanj { background-color: hsla(var(--q1-hue), 60%, 60%, var(--opacity-first)); }
.veljača { background-color: hsla(var(--q1-hue), 60%, 60%, var(--opacity-second)); }
.ožujak { background-color: hsla(var(--q1-hue), 60%, 60%, var(--opacity-third)); }

/* Quarter 2 */
.travanj { background-color: hsla(var(--q2-hue), 60%, 60%, var(--opacity-first)); }
.svibanj { background-color: hsla(var(--q2-hue), 60%, 60%, var(--opacity-second)); }
.lipanj { background-color: hsla(var(--q2-hue), 60%, 60%, var(--opacity-third)); }

/* Quarter 3 */
.srpanj { background-color: hsla(var(--q3-hue), 60%, 60%, var(--opacity-first)); }
.kolovoz { background-color: hsla(var(--q3-hue), 60%, 60%, var(--opacity-second)); }
.rujan { background-color: hsla(var(--q3-hue), 60%, 60%, var(--opacity-third)); }

/* Quarter 4 */
.listopad { background-color: hsla(var(--q4-hue), 60%, 60%, var(--opacity-first)); }
.studeni { background-color: hsla(var(--q4-hue), 60%, 60%, var(--opacity-second)); }
.prosinac { background-color: hsla(var(--q4-hue), 60%, 60%, var(--opacity-third)); }

.dan {
  /* filter: blur(0.4px); */
  display: flex;
  float: left;
  width: inherit;
  height: auto;
  margin: 0px;
  padding: 0px;
  background-color: var(--srednje);
  opacity: 80%;
  border-left-style: solid;
  border-left-color: var(--blago);
  border-left-width: 0px;
  /* transition: background-color 0.05s ease-out; */
}

.subota,
.nedjelja {
  /* background-color: var(--tamno); */
  /* opacity: 99%; */
}

.dan:hover {
  background-color: var(--naglasak);
  filter: blur(2px);
}

.danas {
  background-color: var(--naglasak);
  opacity: 80%;
}

/* Tooltip */
#tooltip {
  position: fixed;
  background: var(--tamno);
  color: white;
  padding: 8px 12px;
  border-radius: 4px;
  font-size: 14px;
  pointer-events: none;
  z-index: 1000;
  opacity: 0;
  transition: 
    opacity 0.15s ease-out,
    transform 0.15s ease-out;
  box-shadow: 0px 4px 12px rgba(0,0,0,0.3);
  will-change: transform;
  transform: scale(0.95);
}

#tooltip.active {
  opacity: 0.95;
  transform: scale(1);
}

/* Remove old tooltip styles if they exist */
.custom-tooltip {
  display: none;
}

/* Styles for when the container is large */
@container (min-width: 1480px) {
  .mjesec > .dan {
    border-left-width: 0.01px;
  }
  .mjesec-label {
    font-size: 100%;
  }
  .subota,
  .nedjelja {
  background-color: var(--tamno);
  opacity: 80%;
}
}