:root {
  --background-dark: #081c15;
  --text-dark: #b7e4c7;
  --background-light: #ddd;
  --text-light: #081c15;
}

.something {
  color: #081c15;
  color: #1b4332;
  color: #2d6a4f;
  color: #40916c;
  color: #52b788;
  color: #74c69d;
  color: #95d5b2;
  color: #b7e4c7;
  color: #d8f3dc;
}

body {
  margin: 0;
  padding: 0;
  font-family: sans-serif;
  scroll-behavior: smooth;
  color: var(--text-light);
  background-color: #ffffff;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100%25'%3E%3Cdefs%3E%3ClinearGradient id='a' gradientUnits='userSpaceOnUse' x1='0' x2='0' y1='0' y2='100%25' gradientTransform='rotate(187,768,359)'%3E%3Cstop offset='0' stop-color='%23ffffff'/%3E%3Cstop offset='1' stop-color='%2340916C'/%3E%3C/linearGradient%3E%3Cpattern patternUnits='userSpaceOnUse' id='b' width='2000' height='1666.7' x='0' y='0' viewBox='0 0 1080 900'%3E%3Cg fill-opacity='0.09'%3E%3Cpolygon fill='%23444' points='90 150 0 300 180 300'/%3E%3Cpolygon points='90 150 180 0 0 0'/%3E%3Cpolygon fill='%23AAA' points='270 150 360 0 180 0'/%3E%3Cpolygon fill='%23DDD' points='450 150 360 300 540 300'/%3E%3Cpolygon fill='%23999' points='450 150 540 0 360 0'/%3E%3Cpolygon points='630 150 540 300 720 300'/%3E%3Cpolygon fill='%23DDD' points='630 150 720 0 540 0'/%3E%3Cpolygon fill='%23444' points='810 150 720 300 900 300'/%3E%3Cpolygon fill='%23FFF' points='810 150 900 0 720 0'/%3E%3Cpolygon fill='%23DDD' points='990 150 900 300 1080 300'/%3E%3Cpolygon fill='%23444' points='990 150 1080 0 900 0'/%3E%3Cpolygon fill='%23DDD' points='90 450 0 600 180 600'/%3E%3Cpolygon points='90 450 180 300 0 300'/%3E%3Cpolygon fill='%23666' points='270 450 180 600 360 600'/%3E%3Cpolygon fill='%23AAA' points='270 450 360 300 180 300'/%3E%3Cpolygon fill='%23DDD' points='450 450 360 600 540 600'/%3E%3Cpolygon fill='%23999' points='450 450 540 300 360 300'/%3E%3Cpolygon fill='%23999' points='630 450 540 600 720 600'/%3E%3Cpolygon fill='%23FFF' points='630 450 720 300 540 300'/%3E%3Cpolygon points='810 450 720 600 900 600'/%3E%3Cpolygon fill='%23DDD' points='810 450 900 300 720 300'/%3E%3Cpolygon fill='%23AAA' points='990 450 900 600 1080 600'/%3E%3Cpolygon fill='%23444' points='990 450 1080 300 900 300'/%3E%3Cpolygon fill='%23222' points='90 750 0 900 180 900'/%3E%3Cpolygon points='270 750 180 900 360 900'/%3E%3Cpolygon fill='%23DDD' points='270 750 360 600 180 600'/%3E%3Cpolygon points='450 750 540 600 360 600'/%3E%3Cpolygon points='630 750 540 900 720 900'/%3E%3Cpolygon fill='%23444' points='630 750 720 600 540 600'/%3E%3Cpolygon fill='%23AAA' points='810 750 720 900 900 900'/%3E%3Cpolygon fill='%23666' points='810 750 900 600 720 600'/%3E%3Cpolygon fill='%23999' points='990 750 900 900 1080 900'/%3E%3Cpolygon fill='%23999' points='180 0 90 150 270 150'/%3E%3Cpolygon fill='%23444' points='360 0 270 150 450 150'/%3E%3Cpolygon fill='%23FFF' points='540 0 450 150 630 150'/%3E%3Cpolygon points='900 0 810 150 990 150'/%3E%3Cpolygon fill='%23222' points='0 300 -90 450 90 450'/%3E%3Cpolygon fill='%23FFF' points='0 300 90 150 -90 150'/%3E%3Cpolygon fill='%23FFF' points='180 300 90 450 270 450'/%3E%3Cpolygon fill='%23666' points='180 300 270 150 90 150'/%3E%3Cpolygon fill='%23222' points='360 300 270 450 450 450'/%3E%3Cpolygon fill='%23FFF' points='360 300 450 150 270 150'/%3E%3Cpolygon fill='%23444' points='540 300 450 450 630 450'/%3E%3Cpolygon fill='%23222' points='540 300 630 150 450 150'/%3E%3Cpolygon fill='%23AAA' points='720 300 630 450 810 450'/%3E%3Cpolygon fill='%23666' points='720 300 810 150 630 150'/%3E%3Cpolygon fill='%23FFF' points='900 300 810 450 990 450'/%3E%3Cpolygon fill='%23999' points='900 300 990 150 810 150'/%3E%3Cpolygon points='0 600 -90 750 90 750'/%3E%3Cpolygon fill='%23666' points='0 600 90 450 -90 450'/%3E%3Cpolygon fill='%23AAA' points='180 600 90 750 270 750'/%3E%3Cpolygon fill='%23444' points='180 600 270 450 90 450'/%3E%3Cpolygon fill='%23444' points='360 600 270 750 450 750'/%3E%3Cpolygon fill='%23999' points='360 600 450 450 270 450'/%3E%3Cpolygon fill='%23666' points='540 600 630 450 450 450'/%3E%3Cpolygon fill='%23222' points='720 600 630 750 810 750'/%3E%3Cpolygon fill='%23FFF' points='900 600 810 750 990 750'/%3E%3Cpolygon fill='%23222' points='900 600 990 450 810 450'/%3E%3Cpolygon fill='%23DDD' points='0 900 90 750 -90 750'/%3E%3Cpolygon fill='%23444' points='180 900 270 750 90 750'/%3E%3Cpolygon fill='%23FFF' points='360 900 450 750 270 750'/%3E%3Cpolygon fill='%23AAA' points='540 900 630 750 450 750'/%3E%3Cpolygon fill='%23FFF' points='720 900 810 750 630 750'/%3E%3Cpolygon fill='%23222' points='900 900 990 750 810 750'/%3E%3Cpolygon fill='%23222' points='1080 300 990 450 1170 450'/%3E%3Cpolygon fill='%23FFF' points='1080 300 1170 150 990 150'/%3E%3Cpolygon points='1080 600 990 750 1170 750'/%3E%3Cpolygon fill='%23666' points='1080 600 1170 450 990 450'/%3E%3Cpolygon fill='%23DDD' points='1080 900 1170 750 990 750'/%3E%3C/g%3E%3C/pattern%3E%3C/defs%3E%3Crect x='0' y='0' fill='url(%23a)' width='100%25' height='100%25'/%3E%3Crect x='0' y='0' fill='url(%23b)' width='100%25' height='100%25'/%3E%3C/svg%3E");
  background-attachment: fixed;
  background-size: cover;

  display: grid;
}

* {
  transition: all 250ms;
  box-sizing: border-box;
}

.container {
  padding: 1em;
}

a {
  color: var(--text);
  text-decoration: none;
}

.header {
  position: fixed;
  z-index: 5;
  width: 100vw;
  background-color: #1b4332;
}

.header__container {
  align-items: center;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.logo__container {
  color: #52b788;
  display: flex;
  align-items: center;
  gap: 1em;
}

.logo__container h2 {
  margin: 0;
}

.logo__container span {
  font-size: 0.8rem;
}
.logo__container .logo {
  width: 50px;
  height: 50px;
  border-radius: 74% 26% 58% 42% / 53% 63% 37% 47%;

  object-fit: cover;
  margin: 0 auto;
  display: block;
}

.bars {
  display: block;
  background-color: #52b788;
  height: 5px;
  width: 40px;
  position: relative;
  cursor: pointer;
}

.bars:hover,
.cross:hover {
  opacity: 0.5;
}

.bars::after {
  content: "";
  height: 5px;
  width: 40px;
  background-color: #52b788;
  position: absolute;
  bottom: -0.5rem;
}

.bars::before {
  content: "";
  height: 5px;
  width: 40px;
  background-color: #52b788;
  position: absolute;
  top: -0.5rem;
}

.cross {
  display: block;
  background-color: #52b788;
  height: 5px;
  width: 40px;
  position: relative;
  cursor: pointer;
  transform: rotate(-45deg);
}

.cross::before {
  content: "";
  height: 5px;
  width: 40px;
  background-color: #52b788;
  position: absolute;
  top: -0.5rem;
  transform: rotate(90deg) translateX(20%);
}
.nav {
  padding-top: 4em;
  background-color: #1b4332;
  color: var(--text-dark);
  display: none;
  animation-name: show;
  animation-duration: 0.75s;
  height: 400px;
}

@keyframes show {
  0% {
    height: 0px;
  }

  100% {
    height: 400px;
  }
}

.nav__container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

/* header removed from html */
.nav__container h1 {
  font-size: 2rem;
  margin-bottom: 1em;
  color: #52b788;
  text-shadow: 0 1rem 4rem #d8f3dc;
}

.nav__link {
  padding: 1em;
  font-size: 1.1rem;
  border-bottom: 3px solid transparent;
  margin: 0;
}

.nav__link:hover {
  background-color: #d8f3dc24;
  cursor: pointer;
}

.nav__link.selected {
  border-color: #52b788;
  font-weight: bold;
}

.showNavBar {
  display: block;
}

/* main container */

.main {
  padding-top: 4em;
  padding-bottom: 4em;
  position: relative;
}

.section__div {
  display: none;
}

.visible {
  display: block;
}

.statistics,
.top__players > div {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
  gap: 1em;
  padding: 1em;
  padding-top: 2em;
}

.statistics > div > div {
  padding: 1em;
  text-align: center;
  border-radius: 80% 20% 27% 73% / 29% 49% 51% 71%;
  background-color: #b7e4c7;
  font-size: 0.8rem;
  box-shadow: 18.2px 16.4px 63px -30px rgba(0, 0, 0, 0.012),
    36.6px 32.9px 77.8px -30px rgba(0, 0, 0, 0.02),
    54.9px 49.4px 83.8px -30px rgba(0, 0, 0, 0.027),
    72.6px 65.4px 85.2px -30px rgba(0, 0, 0, 0.035),
    88.3px 79.5px 83.6px -30px rgba(0, 0, 0, 0.048),
    100px 90px 80px -30px rgba(0, 0, 0, 0.07);
  text-transform: uppercase;
  font-weight: bold;
  max-width: 400px;
  margin: 0 auto;
}

.statistics > div span {
  display: block;
  font-weight: bold;
  font-size: 4rem;
  margin-bottom: 0.1em;
}

.statistics > div:first-child span {
  color: #2d6a4f;
}

.statistics > div:nth-child(2) span {
  color: #5465ff;
}

.statistics > div:last-child span {
  color: #ff206e;
}

.top__players h2 {
  font-size: 3rem;
  background-image: linear-gradient(transparent 70%, #95d5b2 70%);
  text-align: center;
  padding-top: 1em;
  margin: 0;
}

.top__players > div {
  justify-content: space-around;
}

.player {
  padding: 1em;
  display: grid;
  justify-content: center;
  align-items: center;
  text-align: center;
  background-color: #40916c;
  border-radius: 100% 70% 30% 0% / 21% 79% 0% 100%;
  color: #d8f3dc;
  max-width: 300px;
  margin: 0 auto;
}

.player a {
  text-decoration: underline;
}
.player img {
  width: 100%;
  height: 200px;
  border-radius: 21% 79% 0% 100% / 100% 70% 30% 0%;
  margin-bottom: 1em;
}

.player .username {
  font-size: 0.9rem;
  font-weight: bold;
}

.player .challenges__solved {
  font-size: 2rem;
  padding: 0.2em 0;
  color: #1b4332;
  font-weight: bold;
}

.player p {
  margin: 0;
  font-size: 0.8rem;
  margin-top: -0.7em;
}

/* challenges */
.challenge__list h2 {
  font-size: 2rem;
  border-bottom: 2px solid;
  padding-bottom: 0.2em;
  margin-bottom: 0;
}

.challenge__heading {
  font-weight: bold;
  border-bottom: 1px solid #081c15;
}

.challenge__list > div {
  display: flex;
  flex-direction: column;
}

.challenge__list > div > div {
  display: flex;
  justify-content: space-between;
}

.id {
  width: 10%;
}

.name {
  width: 40%;
  align-content: flex-start;
}

.rating {
  width: 15%;
}
.solutions {
  width: 30%;
}

/* add new challenges */
#new_challenges h2 {
  font-size: 2rem;
}

#new_challenges form {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 1em;
}

.form__element {
  gap: 0.5em;
  font-size: 1.1rem;
  align-items: center;
  display: flex;
  flex-direction: column;
  align-items: stretch;
}

.form__element input,
.form__element textarea {
  padding: 0.5em;
  font-size: 1.1rem;
  resize: none;
  border-radius: 0.5rem;
  border: 1px solid #081c15;
}

button {
  padding: 0.7em 5em;
  font-weight: bold;
  font-size: 1.2rem;
  background-color: #1b4332;
  color: #b7e4c7;
  border: 2px solid;
  border-radius: 0.5rem;
}

button:hover {
  background-color: transparent;
  color: #1b4332;
  cursor: pointer;
}

/* users */
.user__list h2 {
  font-size: 2rem;
  border-bottom: 2px solid;
  padding-bottom: 0.2em;
  margin-bottom: 0;
}

.user__list > div {
  display: flex;
  flex-direction: column;
}

.user__list_heading {
  font-weight: bold;
  border-bottom: 1px solid #081c15;
}

.user__list_heading,
.user__list_user {
  display: flex;
  justify-content: space-between;
}

.user__list_user .id {
  width: 5%;
}
.user__list_user .ranking {
  width: 10%;
}

.user__list_user .country {
  width: 30%;
}
.user__list_user .username,
.user__list_user .solved__challenges {
  width: 20%;
}

.user__list_user a {
  text-decoration: underline;
}

.footer {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 1em;
  background-color: #1b4332;
  color: #52b788;
  z-index: 5;
}

.footer span {
  display: inline-block;
  width: 100%;
}

@media (min-width: 800px) {
  .form__element {
    flex-direction: row;
  }

  .form__element label {
    width: 30%;
  }

  .form__element input,
  .form__element textarea {
    width: 70%;
  }

  .main__container {
    width: 100%;
  }
  .nav {
    display: none;
    min-width: 300px;
    max-width: 300px;
    height: 100vh;
    left: -50%;
  }

  .nav__container {
    justify-content: flex-start;
    align-items: stretch;
  }

  .showNavBar {
    display: block;
    position: fixed;
    z-index: 4;
    left: 0;
  }

  @keyframes show {
    0% {
      left: -50%;
    }

    100% {
      left: 0;
    }
  }

  .nav__link {
    border: none;
    border-left: 3px solid transparent;
  }

  .logo__container {
    grid-template-columns: 0.5fr 3fr;
  }
}

@media (min-width: 1150px) {
  body {
    grid-template-columns: 300px minmax(850px, 1fr);
    grid-template-rows: auto auto auto;
    gap: 0;
    grid-template-areas:
      "header header"
      "nav body"
      "footer footer";
  }

  .header {
    grid-area: header;
  }

  .nav {
    display: block;
    height: 100vh;
    position: fixed;
    z-index: 4;
    left: 0;
    grid-area: nav;
    background-color: #081c15;
  }

  .toggle_menu_bar {
    display: none;
  }

  .main {
    grid-area: body;
    min-height: 100vh;
  }

  .footer {
    grid-area: footer;
  }
}