@font-face {
    font-family: "Thunderbolt 76";
    src: url("/media/fonts/thunderbolt76-ot-regular.otf") format("OpenType");
}

@font-face {
    font-family: "Thunderbolt 76 Italic";
    src: url("/media/fonts/thunderbolt76-ot-italic.otf") format("OpenType");
}

:root {
    --future-color: #555555;
    --past-color: #ffa500;
}

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

body {
  background: #000;
  color: #fff;
  font-family: "Thunderbolt 76", sans-serif;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

.wrapper {
  position: relative;
  width: auto;         
  max-width: 90vw;
  margin: 0 auto;      
  text-align: center;
  padding: 1em 0;      
}

#cursor {
  position: absolute;
  top: -5em;         
  left: 0;
  transform: translateX(-50%) scale(3);
  font-size: 1.8vh;
  white-space: nowrap;
}

#cursor p {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.arrow {
  margin-top: 0.2em;
  font-size: 1em;
  line-height: 1;
}

#year {
  list-style: none;
  display: flex;
  justify-content: center;  
  gap: 1.2em;              
  padding: 0 1em;          
  font-size: 2.5vh;
  user-select: none;
}

#year::-webkit-scrollbar {
  height: 6px;
}

#year::-webkit-scrollbar-thumb {
  background: rgba(255,255,255,0.2);
  border-radius: 3px;
}

.month {
  position: relative;
  flex: 0 0 auto;
  cursor: default;
  white-space: nowrap;
}

.days {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  display: none;
  list-style: none;
  background: rgba(255,255,255,0.05);
  padding: 0.5em;
  margin-top: 1em;
  border-radius: 4px;
  
  grid-template-columns: repeat(7, 1fr);
  gap: 0.3em;
  font-size: 1.6vh;
  z-index: 10;
}

.month:hover {
  color: #ffa500;
}

.month:hover .days {
  display: grid;
}

.days li {
  text-align: center;
  line-height: 1;
}

.days li.past {
  background: #171717;
  color: #ffa500;
}

.days li.future {
  color: #555;
}

@media (max-width: 500px) {
  #cursor {
    display: none;
  }

  #year {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5em;
    max-height: 90vh;
    overflow-y: auto;
    padding: 0;
  }

  .month {
    width: 100%;
    padding: 0.4em 1em;
    display: flex;
    align-items: center;
  }

  .month:hover::before {
    content: "You are here ↓";
    font-size: 2vh;
    margin-right: 0.6em;
    white-space: nowrap;
  }

  .days {
    top: 50%;
    left: 100%;
    transform: translateX(0.5em) translateY(-50%);

    grid-template-columns: repeat(1, 1fr);
  }

  .month:hover .days {
    display: grid;
  }
}