body {
  margin: 0;
  padding: 0;
  color: black;
  font-size: 12.8pt;
  font-family: "Bellefair", sans-serif, system-ui;
}

button {
  width: 200px;
  box-shadow: inset 0px 0px 18px 0px blue;
  border-radius: 30px;
  color: white;
}

button:disabled:not([class]) {
  box-shadow: inset 0px 0px 8px 0px cyan;
  background-color: darkgreen;
  opacity: 0.88;
}

button img {
  height: 4.8em;
}

button .grid {
  grid-column-gap: 0;
}

div[id$="info"] {
  /* Initially hide all info divs */
  display: none;
}

img {
  border-radius: 10px;
}

/*  style for paragraph tags */
p {
  color: black;
}

h1,
h2 {
  font-size: 1.4em;
  margin-left: 10px;
  /* font-family: "IM Fell English", sans-serif, system-ui; */
}

h1 {
  margin-top: 0px;
}

small {
  font-size: 0.8em;
}

table {
  background-color: white;
  padding: 4px;
  border-radius: 8px;
}

th,
td {
  padding-left: 30px;
}

table.diff th,
table.diff td {
  padding-left: 10px;
}

.absolute {
  position: absolute;
  color: lightyellow;
}

.attribution-link {
  font-weight: bold;
}

.chevron {
  position: relative;
  margin-left: 45%;
  font-size: x-large;
}

.grid {
  align-items: center;
}

.grid > div:nth-child(2) {
  text-align: left;
}

.icon-button {
  width: 40px;
}

.period {
  position: absolute;
  top: 2px;
}

.right-text {
  position: absolute;
  bottom: 8px;
  right: 8px;
}

#button-grid {
  position: absolute;
  top: 50%;
  transform: translate(38px, -50%);
  grid-template-columns: 1fr;
}

#button-grid > div:first-child {
  margin-bottom: 20px;
}

#button-grid .icon-button {
  margin-left: 16px;
}

#info-panel {
  position: absolute;
  top: 8px;
  left: 248px;
  width: 360px;
  height: 48px;
  padding: 4px;
  background: rgba(238, 238, 238, 0.92);
  transition:
    width 2s,
    height 2s;
  z-index: 2;
  overflow: hidden;
  border-radius: 4px;
  cursor: pointer;
  container-type: size;
}

#info-panel p {
  color: black;
  margin: 0 10px;
}

#info-panel.open {
  height: 216px;
}

#info-panel #glyph {
  position: absolute;
  top: 12px;
  right: 12px;
}

#intro {
  position: absolute;
  top: 48px;
  right: 48px;
  width: 84%;
  padding-top: 12px;
  padding-left: 12px;
  z-index: 10;
  grid-template-columns: 20fr 1fr;
  background: rgba(238, 238, 238, 0.9);
  box-shadow: inset 0px 0px 20px 0px green;
  border-radius: 8px;
  opacity: 1;
  transition:
    height 1s ease,
    top 1s ease,
    opacity 1s ease;
}

#intro.hidden {
  top: -100vh;
  height: 0;
  opacity: 0;
}

#intro-close {
  position: absolute;
  top: 8px;
  right: 8px;
}

#legend-panel {
  position: absolute;
  bottom: 28px;
  right: 28px;
  z-index: 2;
  width: 114px;
  height: 161px;
  background: rgba(218, 218, 218, 0.94);
  transition: /* this is the time it takes for the container to transition */
    width 2s,
    height 2s;
  padding: 4px;
  border-radius: 7px;
}

#legend-panel .legend-item {
  padding-left: 4px;
  font-size: 18px;
}

/* Legend colors */
#legend-panel #forest {
  color: #229352;
}
#shrub {
  color: #74d64b;
}
#deforest {
  color: red;
}
#farm {
  color: #fffdcd;
}
#nonveg {
  color: black;
}
#water {
  color: #2532e3;
}

#map {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 100%;
}

/* Hide Wiki attribution */
@container (max-height: 168px) {
  .right-text {
    display: none;
  }
}

/* Button intro animation */
@keyframes highlightPulse {
  0% {
    box-shadow: inset 0px 0px 10px 0px blue;
    transform: scale(1);
  }
  50% {
    box-shadow: inset 0px 0px 8px 0px cyan;
    transform: scale(1.18);
  }
  100% {
    box-shadow: inset 0px 0px 10px 0px blue;
    transform: scale(1);
  }
}

.button-highlight {
  animation: highlightPulse 3s ease-in-out infinite;
  transition:
    transform 160ms ease,
    box-shadow 160ms ease;
}

@media (max-width: 1600px) {
  #intro {
    width: 68%;
  }
}

/* Small screen */
@media (max-width: 768px) {
  body {
    font-size: 11pt;
  }

  h1 h2 {
    font-size: 1.18em;
  }

  /* Hide images */
  button img {
    display: none;
  }

  /* Condense buttons */
  button {
    font-size: 1em;
    width: 124px;
  }

  button .grid > div:nth-child(2) {
    text-align: center;
  }

  .absolute {
    display: none;
  }

  .icon-button {
    width: 36px;
  }

  /* Reposition buttons */
  #button-grid {
    top: auto;
    bottom: 28px;
    transform: translate(18px);
    grid-row-gap: 0;
  }

  #button-grid button:has(div) {
    padding-top: 0px;
  }

  #button-grid button:last-of-type {
    margin-top: 18px;
  }

  #button-grid > div:first-child {
    margin-bottom: 0;
  }

  #button-grid .icon-button {
    margin-left: 0;
    margin-right: 8px;
  }

  /* Reposition info panel */
  #info-panel {
    height: 46px;
    width: 328px;
    top: 4px;
    right: 4px;
    left: auto;
    padding: 3px;
  }

  #info-panel.open {
    height: 190px;
  }

  #intro {
    top: 1%;
    right: 1%;
    left: 1%;
    width: 98%;
  }

  #intro .has-tooltip:hover .tooltip,
  .has-tooltip:focus-within .tooltip {
    opacity: 1;
    pointer-events: auto;
    transform: translate(12px, -50%) scale(1);
  }

  #intro-close {
    top: 4px;
    right: 4px;
  }

  /* Condense legend */
  #legend-panel {
    right: 8px;
    padding: 2px;
    width: 80px;
    height: 114px;
  }

  #legend-panel .legend-item {
    padding-left: 4px;
    font-size: 0.88em;
  }
}

/* Smaller screen */
@media (max-width: 600px) {
  h1 h2 {
    font-size: 1.1em;
  }

  #button-grid {
    transform: translate(8px);
  }

  #legend-panel {
    padding: 2px;
  }
}

/* Tiny screen */
@media (max-width: 420px) {
  #info-panel {
    top: 1%;
    left: 1%;
    right: 1%;
    width: 98%;
  }

  #intro-close {
    width: 30px;
    height: 30px;
    font-size: 0.68em;
  }
}

/* Tall screen */
@media (min-height: 1200px) {
  #info-panel {
    top: 18px;
    right: 18px;
  }
}

/* Short screens */
@media (max-height: 800px) {
  #intro {
    right: 1%;
    left: auto;
  }
}

@media (max-height: 480px) {
  #legend-panel {
    right: 48px;
  }
}