@import "default.css";

:root {
  --block-margin: 20px;
  --block-padding: 20px;
}

/* Grid and Layout */
body {
  background-color: var(--body-background);
  background-size: cover;
  background-repeat: no-repeat;
  height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  overflow-y: scroll;
}

header,
footer,
section {
  background: var(--index-grid-background);
  backdrop-filter: blur(5px);
  padding: var(--block-padding);
  border-radius: 20px;
}

header {
  padding: calc(var(--block-padding) / 2);
}

section.block {
  width: 34%;
}

section.balance-patches-wrapper {
  width: 66%;
}

div.container {
  width: 100%;
  max-width: 1200px;
  padding: var(--block-padding);
  flex-direction: column;
}

main,
div.container {
  display: flex;
  justify-content: space-around;
  gap: var(--block-margin);
}

header h1 img {
  margin: 0 5px;
}

ul {
  padding-left: 1.2rem;
  list-style: square;
}

span.patch-date {
  white-space: nowrap;
}

footer a {
  white-space: nowrap;
}

@media only screen and (max-width: 768px) {
  header img {
    display: none;
  }

  header img.logo {
    display: inline-block;
    width: 15px;
    height: 3px;
    border-radius: 1px;
    background-color: #000;
  }

  :root {
    --block-margin: 15px;
    --block-padding: 15px;
  }

  main {
    flex-direction: column;
  }

  main section.block {
    width: 100%;
  }
}

@media only screen and (max-width: 420px) {
  header,
  header h1 {
    padding: 0 0 3px;
    background: none;
    box-shadow: none !important;
  }

  header img.logo {
    display: block;
    height: 0;
  }

  header h1 span {
    white-space: wrap !important;
  }

  :root {
    --block-margin: 10px;
  }

  body {
    background-image: none !important;
  }
}