html, body {
  margin: 0;
  padding: 0;
  overflow: hidden; /* disables scroll completely */
  height: 100%;
  width: 100%;
}

/*body {
  font-family: "HomemadeApple-Regular", cursive;
  margin:0;
}*/


#info {
  display: none;
}

.info-button {
  position: fixed;
  top: 20px;
  left: 20px;
  z-index: 10001;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: black;
  color: white;
  font-family:"BricolageGrotesque48pt-Regular", Arial, Helvetica, sans-serif;
  font-size: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.info-panel {
  position: fixed;
  top: 0;
  left: 0;
  width: 25%;
  height: 100vh;
  background: white;
  font-style: normal;
  font-family:"BricolageGrotesque48pt-Regular", Arial, Helvetica, sans-serif;
  font-size: 13px;
  padding-left: 26px;
  padding-right: 35px;
  padding-top: 50px;
  z-index: 10000;
  transform: translateX(-100%);
  transition: transform 0.3s ease;
}

.info-panel h2 {
  margin-top: 60px;
  font-family: "Cedarville-Cursive", cursive;
  font-size: 24px;
}

.info-panel h3 {
  margin-top: 60px;
  font-family: "Cedarville-Cursive", cursive;
  font-size: 24px;
}

#info:checked ~ .info-panel {
  transform: translateX(0);
}

.instruction{
  position:fixed;
  top:0;
  margin-top: 12px;
  left:50%;
  transform: translate(-50%, -50%);
  font-family: "Cedarville-Cursive", cursive;
  font-size: 13px;
  /*font-style:italic;*/
  color:#7b7b7b
}

.map-wrapper {
  transition: filter 0.3s ease;
  z-index: 500;
}

#info:checked ~ .map-wrapper {
  filter: blur(6px);
}

.overlay {
  position: fixed;
  inset: 0;
  background: #ff4fa8;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
  z-index: 999;
}

#info:checked ~ .overlay {
  opacity: 0.1;
  pointer-events: auto;
}


.area-grid{
  display:grid;
  grid-template-columns: repeat(40,1fr);
  grid-auto-rows: 70px;
  padding-bottom: 100px;
}


.place1{
  grid-column: 31/span 8;
  grid-row: 2/span 3;
  border: 2px solid black;
}

.place2{
  grid-column: 9/span 12;
  grid-row: 7/span 5;
  border: 2px solid black;
}

.place3{
  grid-column: 8/span 17;
  grid-row: 5/span 1;
  border: 2px solid black;
  border-right: none;
}

.place4{
  grid-column: 25/span 3;
  grid-row: 5/span 1;
  border: 2px solid black;
  border-left: none;
  border-bottom: none;
}

.place5{
  grid-column: 25/span 3;
  grid-row: 6/span 2;
  border: 2px solid black;
  border-top: none;
  border-bottom: none;
}

.place6{
  grid-column: 25/ span 3;
  grid-row: 8/ span 1;
  border: 2px solid black;
  border-top: none;
  border-right: none;
}

.place7{
  grid-column: 28/ span 7;
  grid-row: 8/span 1;
  border: 2px solid black;
  border-left: none;
  border-right: none;
}

.place8{
  grid-column: 35/span 3;
  grid-row: 8/span 1;
  border: 2px solid black;
  border-left: none;
  border-bottom: none;
}

.place9{
  grid-column: 35/span 3;
  grid-row: 9/span 3;
  border: 2px solid black;
  border-top: none;
}

.place10{
  grid-column: 3/span 2;
  grid-row: 6/span 7;
  border: 2px solid black;
}


.dot-grid {
  grid-column: 1 / -1;
  grid-row: 1 / -1;

  display: grid;
  grid-template-columns: repeat(80, 19px);
  grid-template-rows: repeat(140, 15px);

  z-index: 3; 
}


.dot {
  width: 12px;
  height: 12px;
  background: #ff4fa8;
  border-radius: 50%;
  justify-self: center;
  align-self: center;
  pointer-events: auto; 
  cursor: pointer;
  overflow:visible;
}

.dot83,
.dot84,
.dot85,
.dot86,
.dot87,
.dot88,
.dot89,
.dot90,
.dot91,
.dot92,
.dot93,
.dot94,
.dot95,
.dot96,
.dot97,
.dot98,
.dot99,
.dot100,
.dot101,
.dot102,
.dot103,
.dot104,
.dot105,
.dot106,
.dot107,
.dot108,
.dot109,
.dot110 {
  background:#263be0;
}

.newdot {
  width: 18px;
  height: 18px;
  background: #ff4fa8;
  border-radius: 50%;
  justify-self: center;
  align-self: center;
  pointer-events: none; 
  cursor: pointer;
  overflow:visible;
  display:none;
  z-index:40000;
}

.newdot83,
.newdot84,
.newdot85,
.newdot86,
.newdot87,
.newdot88,
.newdot89,
.newdot90,
.newdot91,
.newdot92,
.newdot93,
.newdot94,
.newdot95,
.newdot96,
.newdot97,
.newdot98,
.newdot99,
.newdot100,
.newdot101,
.newdot102,
.newdot103,
.newdot104,
.newdot105,
.newdot106,
.newdot107,
.newdot108,
.newdot109,
.newdot110 {
  background:#263be0;
  display: none;
  pointer-events:none;
}

.dot_me {
  width: 12px;
  height: 12px;
  background: #263be0;
  border-radius: 50%;
  justify-self: center;
  align-self: center;
  pointer-events: auto; 
  cursor: pointer;
}


.dot:hover{
  background:#fff87b !important;
}


.dot:hover::before{
  content: attr(data-word);
  position: fixed;
  left:50%;
  top:15%;
  transform: translate(-50%, -50%);
  font-family: "BricolageGrotesque48pt-Regular", Arial, Helvetica, sans-serif;
  font-size: 54px;
  font-style: normal;
  color: #000;
  z-index: 1002;
  pointer-events: none;
}

.dot:hover::after {
  content: attr(data-date) " — " attr(data-time);
  position: fixed;                
  left: 50%;
  top: 21%;
  transform: translate(-50%, -50%);
  font-family: "Cedarville-Cursive", cursive;
  font-size: 12px;
  font-style: normal;
  color: #000;
  z-index: 1002;
  pointer-events: none;           
}
     

.dot::after { 
  opacity: 0; transition: opacity 500ms ease; 
}

.dot:hover::after {
  opacity: 1;
  transition: opacity 500ms ease;
}

#dot-click1,
#dot-click2,
#dot-click3,
#dot-click4,
#dot-click5,
#dot-click6,
#dot-click7,
#dot-click8,
#dot-click9,
#dot-click10,
#dot-click11,
#dot-click12,
#dot-click13,
#dot-click14,
#dot-click15,
#dot-click16,
#dot-click17,
#dot-click18,
#dot-click19,
#dot-click20,
#dot-click21,
#dot-click22,
#dot-click23,
#dot-click24,
#dot-click25,
#dot-click26,
#dot-click27,
#dot-click28,
#dot-click29,
#dot-click30,
#dot-click31,
#dot-click32,
#dot-click33,
#dot-click34,
#dot-click35,
#dot-click36,
#dot-click37,
#dot-click38,
#dot-click39,
#dot-click40,
#dot-click41,
#dot-click42,
#dot-click43,
#dot-click44,
#dot-click45,
#dot-click46,
#dot-click47,
#dot-click48,
#dot-click49,
#dot-click50,
#dot-click51,
#dot-click52,
#dot-click53,
#dot-click54,
#dot-click55,
#dot-click56,
#dot-click57,
#dot-click58,
#dot-click59,
#dot-click60,
#dot-click61,
#dot-click62,
#dot-click63,
#dot-click64,
#dot-click65,
#dot-click66,
#dot-click67,
#dot-click68,
#dot-click69,
#dot-click70,
#dot-click71,
#dot-click72,
#dot-click73,
#dot-click74,
#dot-click75,
#dot-click76,
#dot-click77,
#dot-click78,
#dot-click79,
#dot-click80,
#dot-click81,
#dot-click82,
#dot-click83,
#dot-click84,
#dot-click85,
#dot-click86,
#dot-click87,
#dot-click88,
#dot-click89,
#dot-click90,
#dot-click91,
#dot-click92,
#dot-click93,
#dot-click94,
#dot-click95,
#dot-click96,
#dot-click97,
#dot-click98,
#dot-click99,
#dot-click100,
#dot-click101,
#dot-click102,
#dot-click103,
#dot-click104,
#dot-click105,
#dot-click106,
#dot-click107,
#dot-click108,
#dot-click109,
#dot-click110,
#dot-click111,
#dot-click112,
#dot-click113,
#dot-click114,
#dot-click115,
#dot-click116,
#dot-click117,
#dot-click118,
#dot-click119,
#dot-click120,
#dot-click121,
#dot-click122,
#dot-click123,
#dot-click124,
#dot-click125,
#dot-click126,
#dot-click127,
#dot-click128,
#dot-click129,
#dot-click130,
#dot-click131,
#dot-click132,
#dot-click133,
#dot-click134,
#dot-click135,
#dot-click136,
#dot-click137,
#dot-click138,
#dot-click139,
#dot-click140,
#dot-click141,
#dot-click142,
#dot-click143,
#dot-click144,
#dot-click145,
#dot-click146,
#dot-click147,
#dot-click148,
#dot-click149,
#dot-click150,
#dot-click151,
#dot-click152,
#dot-click153,
#dot-click154,
#dot-click155 {
  display: none;
}


.letter_a,
.letter_b,
.letter_c,
.letter_d,
.letter_e,
.letter_f,
.letter_g,
.letter_h,
.letter_i,
.letter_j,
.letter_k,
.letter_l,
.letter_m,
.letter_n,
.letter_o,
.letter_p,
.letter_q,
.letter_r,
.letter_s,
.letter_t,
.letter_u,
.letter_w,
.letter_y,
.letter_z{
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: #8731ff;
  opacity: 40%;
  z-index: 10000;
  display: none;
  pointer-events:none;
  justify-self: center;
  align-self: center;
}

.people,
.travel,
.food,
.objects,
.events,
.emotions,
.art{
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: #c5ff24;
  opacity:50%;
  z-index: 9998;
  display: none;
  pointer-events:none;
  justify-self: center;
  align-self: center;
}

.syn{
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: #34ddff;
  opacity:40%;
  z-index: 9996;
  display: none;
  pointer-events:none;
  justify-self: center;
  align-self: center;
}

.legend {
  position: fixed;
  bottom: 20px;
  right: 340px;
  display: flex;
  flex-direction: column; /* stack items vertically */
  gap: 16px;
  z-index: 2000;
  display: none;
}


.legend-item {
  display: flex;
  align-items: center;
  gap: 12px; /* space between dot and label */
}

.legend-dot.alliteration { 
  background-color: #8731ff; 
  width: 15px;
  height: 15px;
  border-radius: 50%;
  opacity:40%;
  flex-shrink: 0;       /* prevents dot from shrinking */
}
.legend-dot.thematic { 
  background-color: #c5ff24; 
  width: 15px;
  height: 15px;
  border-radius: 50%;
  opacity:50%;
  flex-shrink: 0;
}
.legend-dot.syntagmatic { 
  background-color: #34ddff; 
  width: 15px;
  height: 15px;
  border-radius: 50%;
  opacity:40%;
  flex-shrink: 0;
}

/* label alignment */
.legend-label {
  text-align: left;
  font-family: "BricolageGrotesque48pt-Regular", Arial, Helvetica, sans-serif; 
}

/* Tooltip */
.legend-item {
  position: relative; /* for tooltip */
}

.legend-item::after {
  content: attr(data-tooltip);
  position: absolute;
  right: 110%;           /* tooltip appears to the right of the dot-label row */
  background-color: #acacac;
  color: #fff;
  padding: 4px 6px;
  font-family: "BricolageGrotesque48pt-Regular", Arial, Helvetica, sans-serif; 
  font-size: 12px;
  border-radius: 7px;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s;
}

.legend-item:hover::after {
  opacity: 1;
}