@charset "UTF-8";
/*
    Theme Name: Vibraspark!
	  Author: Nei "Neilly" Yoshikawa
*/

/* poppins-regular - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: "Poppins";
  font-style: normal;
  font-weight: 400;
  src: url("./fonts/poppins-v21-latin-regular.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* m-plus-2-regular - japanese_latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: "M PLUS 2";
  font-style: normal;
  font-weight: 400;
  src: url("./fonts/m-plus-2-v14-japanese_latin-regular.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* zen-maru-gothic-regular - japanese_latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: "Zen Maru Gothic";
  font-style: normal;
  font-weight: 400;
  src: url("./fonts/zen-maru-gothic-v17-japanese_latin-regular.woff2")
    format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

:root {
  --background: #fefefe;
  --light-transparent: #fcfcfccc;
  --light-shade: #f6f6f3;
  --light-accent: #eda200;
  --main-brand: #d31072;
  --dark-accent: #018639;
  --dark-shade: #184ca3;
  --void-shade: #111111;
  font-size: 16px;
  font-family: "M PLUS 2", "Helvetica Neue", Helvetica, Arial, sans-serif;
  background-color: var(--background);
  color: var(--void-shade);
}

footer {
  background: var(--background);
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 2em;
  padding-top: 2em;
  padding-bottom: 4em;
  width: 100%;
  line-height: 1.5em;
  overflow-x: hidden;
  font-family: "Poppins", "Zen Maru Gothic";
}

footer a {
  color: #77778a;
}

footer a:hover {
  color: var(--main-brand);
}

footer #footer-wrapper {
  display: grid;
  grid-template-rows: 2rem auto;
  grid-template-columns: repeat(12, 1fr);
  gap: 1rem 2rem;
  width: 100%;
  max-width: 70em;
  padding: 2rem;
}

footer #footer-brand {
  font-size: 1.15em;
  font-family: "Poppins";
  grid-column: 1 / 4;
  color: var(--void-shade);
  text-decoration: none;
}

footer #list-pages-index {
  grid-row: 2 / 4;
  grid-column: 1 / 4;
  list-style: none;
}

footer ul#footer-play-now {
  grid-row: 1 / 4;
  grid-column: 4 / 7;
  list-style: none;
  font-size: 0.9em;
}

footer ul#footer-categories {
  grid-row: 1 / 3;
  grid-column: 7 / 10;
  list-style: none;
  font-size: 0.9em;
}

footer ul#footer-play-now ul,
footer ul#footer-categories ul {
  list-style: none;
  margin-left: 1em;
}

footer #footer-profile {
  font-family: "Poppins", "Zen Maru Gothic";
  grid-row: 3 / 4;
  grid-column: 7 / 13;
  text-align: end;
  align-self: self-end;
}

footer #footer-profile > p:nth-of-type(1) {
  font-size: 1.15em;
  font-weight: bold;
}

footer #footer-profile > p:nth-of-type(2) {
  font-size: 1em;
  font-family: "Poppins";
}

footer #footer-copyright {
  font-size: 0.7em;
}

@media screen and (max-width: 768px) {
  footer #footer-wrapper {
    gap: 1rem 0;
  }
  
  footer a#footer-brand{
    grid-column: 1 / 5;
	grid-row: 1 / 2;
  }
  
  footer nav#list-pages-index{
    grid-column: 5 / 13;
	grid-row: 1 / 2;
  }

  footer ul#footer-play-now{
    grid-column: 2 / 13;
    grid-row: 2 / 3;
  }
  
  footer ul#footer-categories{
    grid-column: 2 / 13;
    grid-row: 3 / 4;
  }
  
  footer #footer-profile {
    grid-column: 1 / 13;
    grid-row: 4 / 5;
    text-align: left;
  }
}

@media screen and (max-width: 640px) {
  footer #footer-wrapper {
	padding: 1rem;
  }
}

@media screen and (max-width: 480px) {
  :root {
    font-size: 14px;
  }
}