.countrybox {
  background:#cfe8d4;
  color:black;
  border: 3px solid var(--border);
}
.countries {
      display:flex;
      flex-wrap:wrap;
      gap:10px;
      width:100%;
      align-items:center;
      justify-content:center;
    }
.countrybox {
  background:var(--mainbg);
  padding:10px;
  min-width:400px;
  flex:1;
  transition:0.3s;
  border-radius:5px;
}
.countrybox:hover {
  filter:brightness(1.1);
  transition:0.3s;
}
.countrybox p {
  margin:0;
}
.countrybox .header {
  display:flex;
  flex-wrap:wrap;
  font-size:1.1em;
  font-weight:bold;
  gap:10px;
  align-items: center;
}
.countrybox .flag {
  max-width:50px;
  max-height:95px;
  width: auto;
  height: auto;
}
.country.continents a {
    background: white;
    border: 2px solid lightgrey;
    color: black;
    max-width: 200px;
    text-wrap: auto;
    max-height: fit-content;
    align-self: center;
    /* min-width: 150px; */
    display: flex;
    justify-content: center;
    gap: 5px;
    place-items: center;
    background:linear-gradient(to top left, #f7f7f7, white);
}
.country.continents a.f {
  background:linear-gradient(to top left, #fff7d9, #fffbeb);
  border:2px solid #d4caa7;
  color:#453808;
  font-weight:bold;
}
.country.continents {
  justify-content:center;
}
.country.continents a img {
  max-width:50px;
  max-height:95px;
  width: auto;
  height: auto;
}
@media only screen and (max-width: 600px) {
  .countrybox {
            min-width:95%;
  }
}

.countrybox.odd {
    max-width:1000px;
  }
  .continents > .africa {
    background:linear-gradient(#996a3a,#42301b);
    color:#ded5b6;
  }
  .continents > .asia {
    background:linear-gradient(#7d0400,#38007d);
    color:#f2e7ff;
  }
  .continents > .europe {
    background:linear-gradient(#314e7d, #426e66);
    color:#e6f2ff;
  }
  .continents > .namerica {
    background:linear-gradient(#873b3d 50%,#374566 50%);
    color:#e8dbc1;
  }
  .continents > .samerica {
    background:linear-gradient(#5e2400,#401700);
    color:#fff0c2;
  }
  .continents > .oceania {
    background:linear-gradient(#0b2545,#2d81a6);
    color:#e9f1f7;
  }
  .continents > .antarctica {
    background:linear-gradient(#3a7dcf,#0e4e9c);
    color:white;
  }
  .continents {
    display:flex;
    flex-wrap:wrap;
    gap:2px;
  }
  .continents.country img {
    vertical-align:unset;
    border:2px solid black;
    border-radius:8px;
  }
  .continents > a {
    padding:5px;
    text-align:center;
        white-space: nowrap;
        text-decoration:none;
        transition:0.3s;
    flex:1;
    border-radius:3px;
  }
  .continents > a:hover {
    transition:0.3s;
    transform:scale(1.1) skew(5deg);
    box-shadow: 2px 2px 2px black;
  }
  .continents img {
  max-width:20px;
  max-height:20px;
  width: auto;
  height: auto;
  vertical-align:bottom;
}

.communism img {
  filter: brightness(150%);
}
.shintoism img {
  filter:brightness(50%);
}
.socialism img {
  filter:brightness(100%);
      filter: saturate(0.5);
}

/*religion+ideology*/
.continents > .buddhism {
    color: rgb(122, 94, 10);
    background: linear-gradient(rgb(242, 200, 102), rgb(242, 224, 102));
}
.continents > .christianity {
    color: rgb(74, 56, 41);
    background: linear-gradient(rgb(237, 234, 69), rgb(255, 253, 143));
}
.continents > .hinduism {
    color: rgb(191, 51, 46);
    background: linear-gradient(rgb(255, 215, 156), rgb(237, 207, 97));
}
.continents > .islam {
    color: rgb(46, 74, 62);
    background: linear-gradient(rgb(235, 228, 206), rgb(227, 214, 175));
}
.continents > .judaism {
    color: white;
    background: linear-gradient(rgb(2, 0, 120), #020126);
}
.continents > .shintoism {
    color: white;
    background: linear-gradient(rgb(222, 39, 22), rgb(255, 148, 140));
}
.continents > .sikhism {
    color: rgb(3, 56, 130);
    background: linear-gradient(rgb(255, 178, 130), rgb(255, 214, 189));
}
.continents > .taoism {
    color: white;
    background: linear-gradient(rgb(5, 5, 5), rgb(38, 38, 38));
}
.continents > .liberalism {
    color: rgb(207, 231, 255);
    background: linear-gradient(rgb(19, 106, 193), rgb(36, 138, 240));
}
.continents > .monarchism {
    color: rgb(150, 119, 26);
    background: linear-gradient(rgb(250, 192, 0), rgb(255, 248, 209));
}
.continents > .socialism {
    color: rgb(255, 230, 230);
    background: linear-gradient(rgb(201, 91, 91), rgb(227, 113, 113));
}
.continents > .communism {
    color: white;
    background: linear-gradient(rgb(204, 0, 0), rgb(140, 13, 13));
}
.continents > .fascism {
    color: rgb(227, 195, 148);
    background: linear-gradient(rgb(138, 107, 62), rgb(79, 60, 32));
}
.continents > .anarchism {
    color: black;
    box-sizing: border-box;
    background: white;
    border-width: 2px;
    border-style: solid;
    border-color: black;
    border-image: initial;
}
.continents > .nationalism {
    color: white;
    background: linear-gradient(rgb(255, 102, 179), rgb(255, 20, 146));
}
.fatbox:not(:first-child) {
  margin-top:10px;
}
.fatbox {
  padding:10px;
  box-sizing: border-box;
  border-radius:5px;
}
.fatbox summary {
  cursor:pointer;
}
.fatbox.africa {
  background:#faf1d4;
}
.fatbox h2 {
  text-align:center;
}
.fatbox.africa h2 {
  color:#48341d;
}
.fatbox.asia {
  background:#f1e8ff;
}
.fatbox.asia h2 {
  color:#39007b;
}
.fatbox.europe {
  background:#e6f2ff;
}
.fatbox.europe h2 {
  color:#32507c;
}
.fatbox.namerica {
  background:#e8dbc1;
}
.fatbox.namerica h2 {
  color:#873b3d;
}
.fatbox.samerica {
  background:#ffecbe;
}
.fatbox.samerica h2 {
  color:#5d2400;
}
.fatbox.oceania {
  background:#e2ecf2;
}
.fatbox.oceania h2 {
  color:#0b2646;
}