* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: var(--font-general);
  background: url(../images/bg.jpg);
}

p,
h1,
h2,
h3,
h4,
a,
button {
  margin: 0;
  color: var(--blue-200);
  text-decoration: none;
}

ol,
ul,
li {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

ol {
  margin: 10px 0;
}

/* Flex globals */
.row {
  display: flex;
  flex-direction: row;
}

.column {
  display: flex;
  flex-direction: column;
  flex: 1;
}

/* Grid template and globals */
.container-with-news {
  display: grid;
  /* text-align: center; */
  grid-template-columns: 0.7fr 1fr 1fr 1fr 0.95fr;
  grid-template-areas:
    "header header header header header"
    "nav nav nav nav nav"
    /* "sidebar-left news news news sidebar-right" */
    "sidebar-left main main main sidebar-right"
    "sidebar-left left-extra-content middle-extra-content right-extra-content sidebar-right"
    "footer footer footer footer footer";
  grid-gap: var(--spacing-l);
}

/* Grid template and globals */
.container {
  display: grid;
  /* text-align: center; */
  grid-template-columns: 0.7fr 1fr 1fr 1fr 0.95fr;
  grid-template-areas:
    "header header header header header"
    "nav nav nav nav nav"
    "sidebar-left main main main sidebar-right"
    "sidebar-left left-extra-content middle-extra-content right-extra-content sidebar-right"
    "footer footer footer footer footer";
  grid-gap: var(--spacing-l);
}

.episode-container {
  grid-template-areas:
    "header header header header header"
    "nav nav nav nav nav"
    "sidebar-left episode episode episode sidebar-right"
    "footer footer footer footer footer";
  grid-gap: var(--spacing-l);
}

.anime-page-container {
  grid-template-areas:
    "header header header header header"
    "nav nav nav nav nav"
    "sidebar-left main main main sidebar-right"
    "footer footer footer footer footer";
  grid-gap: var(--spacing-l);
}