body, section, header { display: flex; flex-direction: column; gap: 1rem; padding-top: 1rem; }
body:has(input[value="USA"]:checked) .USA,
body:has(input[value="CA"]:checked) .CA,
body:has(input[value="EU"]:checked) .EU,
body:has(input[value="IN"]:checked) .IN,
body:has(input[value="ASIA"]:checked) .ASIA,
body:has(input[value="INT"]:checked) .INT {
  display: block;
}
header {
  padding: 0 1rem; justify-content: center; align-items: center;
  details {
    background-color: var(--dark-gray); border-radius: 1rem;
    max-width: 25rem; width: 100%;
    summary {
      background-color: var(--blue); color: var(--black);
      padding: 0.25rem .5rem; border-radius: 0.5rem;
    }
    span {
      padding-left: 1rem; position: relative;
      &::before {
        content:""; display: block;
        width: 0.75rem; height: 0.75rem;
        border-radius: 1rem; background-color: var(--yellow);
        position: absolute; left: -0.4rem; top: 0.25rem;
        box-shadow: -2px 0 var(--black), 0 2px var(--black), 2px 0 var(--black), 0 -2px var(--black);
      }
    }
    h1 {
      margin: 0; padding: 0.5rem; margin-right: 0.5rem;
      a:hover { background-color: transparent;}
    }
    #countries {
      display: flex; gap: 0.5rem; flex-wrap: wrap;
      justify-content: center; margin-bottom: 1rem;
    }
    >a:last-child {
      display: block; margin: 0 auto; text-align: center;
      width: auto; background-color: var(--blue); color: var(--black) !important;
      font-size: 1rem; width: calc(100% - 1rem); margin: 0 0.5rem 0.5rem; box-sizing: border-box;
      border: none; border-radius: 0.5rem; padding: 0.5rem 1rem;
      &:hover { background-color: color-mix(in srgb, var(--light-blue), var(--blue) 50%);}
      &:active{ background-color: color-mix(in srgb, var(--dark-blue), var(--blue) 75%);}
    }
  }
  details[open] summary { border-radius: 0.5rem 0.5rem 0 0; margin-bottom: 0.5rem;}
  #stats { display: none; width: 100%; justify-content: center; align-items: center;
    flex-direction: column; gap: 1rem;
    details {
      >div {
        margin: 0 0.5rem 0.75rem;
        position: relative;
        p { margin-left: 0.5rem;}
        span { padding: 0; }
        span::before { all: unset;}
        &::before {
            content:""; display: block;
            width: 0.75rem; height: 0.75rem;
            border-radius: 1rem; background-color: var(--yellow);
            position: absolute; left: -0.9rem; top: 0.25rem;
            box-shadow: -2px 0 var(--black), 0 2px var(--black), 2px 0 var(--black), 0 -2px var(--black);
        }
      }
    }
  }
}

main {
  padding: 0 1rem;
  h2 { color: var(--blue); display: block; width: 100%; font-size: 2.25rem; }
  section {
    flex-direction: row;
    flex-wrap: wrap; gap: 1rem; justify-content: flex-start;
  }
  section:nth-child(1) {
    padding-top: 0;
    summary, button { background-color: var(--yellow); }
    button:hover { background-color: var(--light-yellow);}
    button:active { background-color: var(--dark-yellow);}
    h2 { color: var(--yellow);}
  }
  section:nth-child(2) {
    summary, button { background-color: var(--red); color: var(--white);}
    button:hover { background-color: var(--red-unsafe);}
    button:active { background-color: var(--dark-red);}
    h2 { color: var(--light-red);}
  }
  details {
    flex-basis: 100%; flex-grow: 1; display: inline-block;
    border-radius: 1rem; max-width: 20rem; margin: 0 auto;
    summary {
      background-color: var(--blue); color: var(--black);
      padding: 0.5rem 1rem; border-radius: 0.5rem;
    }
    figure { margin: 0 1rem 1rem;}
    button {
      width: 100%; background-color: var(--blue);
      display: none;
      font-size: 1rem; margin-top: 0.5rem; cursor: pointer;
      border: none; border-radius: 0.5rem; padding: 0.5rem 1rem;
      &:hover { background-color: var(--light-blue);}
      &:active { background-color: var(--blue-unsafe);}
    }
    img { width: 100%; height: auto;}
  }
  details[open] {
    background-color: var(--dark-gray);
    summary { border-radius: 0.5rem 0.5rem 0 0; margin-bottom: 1rem;}
  }
}
footer {
  background-color: color-mix(in srgb, var(--dark-gray), var(--black) 50%);
  background-image: url("../img/grid-light.png"); background-size: 0.75rem 0.75rem;
  padding: 1rem;
}

#confirm-popup {
  display: none; justify-content: center; align-items: center;
  position: fixed; top: 0; left: 0;
  width: 100vw; height: 100vh;
  background-color: color-mix(in srgb, var(--black), transparent 25%);
  details {
    background-color: var(--dark-gray); border-radius: 1rem;
    width: 90%; max-width: 30rem; height: auto;
    margin: 0 1rem; padding: 0;
    summary {
      background-color: var(--blue); color: var(--black);
      padding: 0.5rem 1rem; border-radius: 1rem 1rem 0 0;
      display: flex; align-items: center; justify-content: space-between;
      button {
        display: flex; justify-content: center; align-items: center;
        height: 2rem; margin: 0.25rem 0;aspect-ratio: 1/1; cursor: pointer;
        background-color: var(--light-blue);
        border: none; border-radius: 0.5rem; padding: 0.5rem;
        &:hover { background-color: color-mix(in srgb, var(--light-blue), var(--white) 50%); }
        &:active { background-color: color-mix(in srgb, var(--light-blue), var(--blue) 50%); }
      }
    }
    figure {
      margin: 1rem; height: 100%;
      figcaption>p { text-align: center; margin: 1rem 0;}
      table {
        width: 100%;
        td:first-child { text-align: right; }
        td:last-child { padding-left: 1rem; }
        tr:nth-child(2)>* { padding-bottom: 0.25rem;}
        tr:last-child {
          position: relative;
          >* { padding-top: 0.5rem;}
          &::after {
            content: ""; display: block; position: absolute;
            width: 100%; height: 0.25rem;
            border-top: 2px solid var(--light-gray);
            left: 0; top: 0;
          }
        }
      }
      figcaption>input {
        display: flex; justify-content: center; align-items: center;
        width: 100%; margin: 0.5rem 0 0; cursor: pointer;
        background-color: var(--blue);
        border: none; border-radius: 0.5rem; padding: 0.75rem 0.5rem;
        &:hover { background-color: color-mix(in srgb, var(--light-blue), var(--blue) 50%); }
        &:active { background-color: color-mix(in srgb, var(--blue-unsafe), var(--blue) 50%); }
      }
    }
  }
}
/* Big mobile */
@media screen and (min-width: 25rem) {
  header { padding: 1rem 2rem 0; }
  main {
    padding: 0 2rem 1rem;
    h2 { font-size: 2.5rem; }
    details { flex: 0 0 calc(50% - 0.5rem); margin: 0; max-width: 100%; }
  }
  footer { padding: 2rem; }
}
/* Tablet */
@media screen and (min-width: 40rem) {
  header {
    flex-direction: row;
    #stats { width: 30%; min-width: 12rem; max-width: 20rem;}
  }
  main {
    h2 {font-size: 2.75rem;}
    details { flex: 0 0 calc(33% - 0.625rem); }
  }
  #confirm-popup>details { max-width: 35rem; }
}
/* Desktop */
@media screen and (min-width: 67rem) {
  main {
    h2 {font-size: 3rem;}
    details { flex: 0 0 calc(25% - 0.75rem); }
  }
  #confirm-popup>details { max-width: 40rem; }
}
/* BIG Desktop */
@media screen and (min-width: 90rem) {
  main details { flex: 0 0 calc(20% - 0.875rem); max-width: 20rem; }
}