/* Color palette */
:root {
  --gr_1: #040c06;
  --gr_2: #112318;
  --gr_3: #1e3a29;
  --gr_4: #305d42;
  --gr_5: #4d8061;
  --gr_6: #89a257;
  --gr_7: #bedc7f;
  --gr_8: #eeffcc;
  --gr_3_tr: rgba(30, 58, 41, 0.6);
}

body {
  background-image: url("./Images/Wallpaper.png");
  background-size: 1920px 1920px;
  background-color: var(--gr_6);
  background-position: 50% 50%;
  background-repeat: no-repeat;
  background-attachment: fixed;
  color: var(--gr_1);
  font-family: "Geist Pixel", sans-serif;
  font-size: 16px;
  font-weight: 400;
  font-style: normal;
  font-variation-settings:
    "ELSH" 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

header {
  display: flex;
  justify-content: center;
}

h1 {
  font-style: italic;
}

.main {
  display: flex;
  justify-content: center;
}

.hidden {
  visibility: hidden;
}

.line {
  margin-left : 20%;
  width: 60%;
  border-bottom: 2px solid;
  border-bottom-width: 80%;
  border-color: var(--gr_1);
}

.standard_container {
  margin: 4px;
  padding: 2px;
}

.side_container {
  display: flex;
  flex-direction: column;
  width: 256px;
}

.menu {
  display: flex;
  flex-direction: column;
  border-left: 2px solid;
  border-color: var(--gr_3);
}

.menu_btn {
  background-color: var(--gr_8);
  border: none;
  padding: 4px;
  text-align: left;
  font-size: 16px;
  font-family: "Geist Pixel", sans-serif;
}

.menu_btn:hover {
  background-color: var(--gr_2);
  color: var(--gr_8);
}

.menu_btn:active {
  background-color: var(--gr_1);
  color: var(--gr_8);
}

.main_body_container {
  background-color: var(--gr_5);
  border-radius: 16px;
  padding: 4px;
}

.main_body {
  background-color: var(--gr_5);
  overflow-y: scroll;
  width: 800px;
  max-height: 80vh;
  scrollbar-width: none;
  border-radius: 16px;
  transition: all 300ms ease;
}

.main_body.body_transition {
  opacity: 0;
  transition: opacity 0.3s ease;
}

.wip_long {
  padding: 16px;
}

.wip_header {
  display: flex;
  flex-direction: row;
  justify-content: center;
}

.about {
  padding: 16px;
}

.last_news {
  padding: 16px;
  background-color: var(--gr_7);
  border-radius: 16px;
  margin: 4px;
}

.news_link_container {
  display: flex;
  flex-direction: row;
}

.link_paragraph {
  margin-right: 4px;
}

.news_header {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: flex-start;
  margin-left: 8px;
}

.news_date_1 {
  background-color: var(--gr_5);
  font-size: 12px;
  padding: 4px;
  border-radius: 8px;
}

.news_date_2 {
  background-color: var(--gr_4);
  font-size: 12px;
  padding: 4px;
  border-radius: 8px;
}

.news_container_1 {
  background-color: var(--gr_6);
  padding: 8px;
  border-radius: 8px;
}

.news_container_2 {
  padding: 4px;
}

.pages_news {
  display: flex;
  justify-content: center;
  margin: 4px;
}

.page_btn_current {
  border: none;
  background-color: var(--gr_5);
  border-radius: 4px;
  font-style: bold;
  text-decoration: underline;
  transition: all 0.1s ease;
}

.page_btn_current:hover {
  font-size: 16px;
}

.page_btn {
  border: none;
  background-color: var(--gr_5);
  border-radius: 4px;
  transition: all 0.1s ease;
}

.page_btn:hover {
  font-size: 16px;
}

#articles_btn {
  display: none;
}

#games_btn {
  display: none;
}