/* CSS Document */
/*
Theme Name: Versus System
Theme URI: https://nintendoentertainmentsystem.com/
Author: Me
Author URI: https://nintendoentertainmentsystem.com/
Description: Custom theme for Versus System
Tags: 
Version: 1.0
Requires at least: 5.0
Tested up to: 6.9
Requires PHP: 7.4

Text Domain: nes
*/
/*   Animation test   */
@keyframes titleimg1 {
  from {
    opacity: 1;
    transform: scale(1); }
  to {
    opacity: 0;
    transform: scale(1.2); } }
@keyframes titleimg2 {
  from {
    opacity: 1;
    transform: scale(1);
    margin-top: 150px; }
  to {
    opacity: .25;
    transform: scale(1.4);
    margin-top: 0; } }
img {
  max-width: 100%;
  display: block; }

a {
  color: #008888;
  transition: all .25s;
  text-decoration: none;
  font-weight: bold; }

a:hover {
  text-decoration: underline dotted 2px;
  color: rgba(0, 136, 136, 0.75); }

h1 {
  font-family: "Silkscreen", sans-serif;
  font-weight: 400;
  font-style: normal;
  font-size: 3em;
  line-height: .8em; }

h2 {
  font-family: "Silkscreen", sans-serif;
  font-weight: 400;
  font-style: normal;
  font-size: 2.5em;
  line-height: .8em; }

body {
  margin: 0;
  overflow-x: hidden;
  font-family: "Familjen Grotesk", sans-serif;
  font-optical-sizing: auto;
  font-weight: normal;
  font-style: normal;
  background-color: #fafafa;
  color: #282828; }

.menu {
  display: inline-flex;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: .75rem; }
  .menu li:not(:last-of-type):after {
    content: "//";
    margin: 0 1em; }

.col2 {
  column-count: 2;
  column-gap: 3rem;
  column-rule: 3px dotted #ebebeb; }
  .col2 p:first-of-type, .col2 h2:first-of-type, .col2 h3:first-of-type {
    margin-top: 0; }
  .col2 p:last-of-type {
    margin-bottom: 0; }
  .col2 p {
    break-inside: avoid; }

.wide {
  margin: auto -8rem; }

.fullborder {
  padding: 1rem 19rem;
  position: relative;
  width: 98vw;
  left: calc(-49vw + 50%); }

.full {
  padding: 1rem 19rem !important;
  position: relative;
  width: 100vw;
  left: calc(-50vw + 50%); }

.rounded, .rounded-wrapper img {
  border-radius: 10%; }

.intro {
  color: #008888;
  text-transform: uppercase;
  font-weight: bold;
  font-size: 1.2em;
  line-height: 1em; }

.asidebox {
  padding-top: 3rem;
  margin-top: 3rem;
  padding-bottom: 3rem;
  margin-bottom: 3rem; }
  .asidebox h3 {
    font-family: "Silkscreen", sans-serif;
    font-weight: normal;
    margin: 0 0 .5rem;
    line-height: 1em; }
  .asidebox h3::before {
    content: "";
    display: inline-block;
    height: .5em;
    width: .5em;
    margin: 0 .25em 0 0;
    background-color: red;
    vertical-align: middle; }
  .asidebox .asidesub {
    font-family: "Roboto Condensed", sans-serif;
    font-optical-sizing: auto;
    font-weight: normal;
    font-style: normal;
    line-height: 1.1em; }

/*   WP misc.   */
.wp-block-media-text {
  margin-bottom: 1em; }

.wp-block-gallery {
  padding: 1em 0; }

/*padding doesn't interfere with left/right margin*/
figcaption {
  font-weight: bold;
  font-size: .75em;
  font-family: "Roboto Condensed";
  color: #008888; }

header {
  padding: 2rem 25rem;
  color: white;
  background: #008888;
  background: linear-gradient(0deg, #41a5a5 0%, #008888 100%);
  min-height: 550px; }
  @media (max-width: 1299px) {
    header {
      padding: 2rem 8rem; } }
  @media (max-width: 980px) {
    header {
      padding: 2rem 5rem; } }
  @media (max-width: 781px) {
    header {
      padding: 2rem; } }
  header a {
    color: white; }
  header a:hover {
    color: rgba(255, 255, 255, 0.75); }
  header .menu-main-menu-container {
    z-index: 10;
    position: relative; }
  header .imgtest {
    width: 1200px;
    height: auto;
    max-width: inherit;
    position: absolute;
    left: -100px;
    animation: titleimg1;
    animation-timeline: scroll(root); }
  header .imgtest:nth-of-type(2) {
    width: 1400px;
    /*opacity: .8 temp*/
    z-index: 4;
    animation: titleimg2;
    animation-timeline: scroll(root);
    margin-top: 250px; }
  header .sprite {
    z-index: 3;
    position: absolute;
    top: -12rem;
    width: 800px; }
  header .header-icon {
    z-index: 10;
    width: 200px;
    height: 160px;
    display: flex;
    background-image: url("images/dpad.svg");
    position: absolute;
    top: 100px;
    right: 25rem;
    background-position: top right;
    background-repeat: no-repeat;
    background-size: 120px;
    align-items: end;
    /*fix this with real title images*/ }
    header .header-icon small {
      width: 100px;
      line-height: 1em; }

.homepage header {
  background: none; }

footer {
  color: white;
  padding: 2rem 25rem;
  background-color: #008888;
  display: grid;
  grid-template-columns: 3fr 4fr 4fr;
  font-size: .75em;
  height: 20rem;
  position: fixed;
  bottom: 0;
  z-index: -1;
  align-content: end; }
  @media (max-width: 1299px) {
    footer {
      padding: 2rem 8rem; } }
  @media (max-width: 980px) {
    footer {
      padding: 2rem 5rem; } }
  @media (max-width: 781px) {
    footer {
      padding: 2rem; } }
  footer a {
    color: white;
    font-weight: normal; }
  footer a:hover {
    color: rgba(255, 255, 255, 0.75); }
  footer .logo img {
    display: inline-block;
    vertical-align: middle; }
  footer .logo .dpad {
    width: 25%;
    margin-right: .5rem; }
  footer .logo .logotext {
    opacity: .5;
    width: 50%;
    transition: all .25s; }
  footer .logo .logotext:hover {
    opacity: 1; }
  footer .search {
    text-align: right; }
    footer .search input {
      background-color: rgba(255, 255, 255, 0.25);
      border: none;
      text-transform: uppercase;
      padding: .5em;
      color: #004b4b; }

.homefooter {
  background-color: inherit;
  height: inherit;
  position: relative;
  bottom: inherit;
  z-index: 0; }

.top {
  height: 0;
  border-width: 3rem 100vw 0 0;
  border-style: solid;
  border-color: #41a5a5 #fafafa #fafafa #41a5a5; }

.bottom {
  height: 0;
  border-width: 3rem 100vw 0 0;
  border-style: solid;
  border-color: transparent #008888 #008888 transparent;
  margin: 0 0 0 -25rem; }

/*   Home Page   */
.homepage {
  background: #008888;
  background: linear-gradient(0deg, #41a5a5 0%, #008888 100%);
  min-height: 100vh;
  color: white; }
  .homepage a {
    color: white; }
  .homepage a:hover {
    color: rgba(255, 255, 255, 0.75); }

.home-grid {
  padding: 2rem 25rem;
  display: grid;
  grid-template-areas: "main main main main" "story2 story3 story4 story5";
  grid-gap: 2rem;
  grid-template-columns: repeat(4, 1fr);
  font-size: .8em; }
  @media (max-width: 1299px) {
    .home-grid {
      padding: 2rem 8rem; } }
  @media (max-width: 980px) {
    .home-grid {
      padding: 2rem 5rem; } }
  @media (max-width: 781px) {
    .home-grid {
      padding: 2rem; } }
  .home-grid .newsbox {
    display: grid;
    grid-template-areas: "thumb" "text";
    grid-gap: 1rem;
    grid-template-rows: max-content;
    /*...watch, temp fix*/
    transition: .5s all; }
    .home-grid .newsbox .thumb {
      grid-area: thumb;
      border-radius: 10%;
      overflow: hidden;
      aspect-ratio: 1.2/1; }
      .home-grid .newsbox .thumb img {
        height: auto;
        transition: all .25s;
        transform: scale(1.5);
        object-fit: cover;
        height: 100%; }
      .home-grid .newsbox .thumb img:hover {
        transform: scale(1.25); }
    .home-grid .newsbox .thumb:hover {
      border-radius: 0; }
    .home-grid .newsbox .text {
      grid-area: text;
      padding: 0 1rem 0; }
    .home-grid .newsbox h3 {
      margin: 0;
      font-size: 1rem; }
    .home-grid .newsbox p {
      margin: 0; }
    .home-grid .newsbox .long-intro, .home-grid .newsbox .category {
      display: none; }
  .home-grid .newsbox:nth-of-type(1) {
    grid-area: main;
    grid-template-areas: "text thumb";
    grid-template-columns: 1fr 1fr;
    grid-gap: 3rem;
    font-size: 1rem; }
    .home-grid .newsbox:nth-of-type(1) p {
      margin: inherit; }
    .home-grid .newsbox:nth-of-type(1) .text {
      padding: 0;
      align-content: center; }
    .home-grid .newsbox:nth-of-type(1) .short-intro {
      font-size: 1.5em;
      margin-top: 1em;
      line-height: 1em;
      font-weight: bold; }
    .home-grid .newsbox:nth-of-type(1) .long-intro {
      display: block; }
    .home-grid .newsbox:nth-of-type(1) h3 {
      font-size: 4em;
      line-height: .8em;
      font-family: "Roboto", sans-serif;
      font-optical-sizing: auto;
      font-weight: 100;
      font-style: normal;
      font-variation-settings: "wdth" 100;
      text-transform: uppercase; }
      .home-grid .newsbox:nth-of-type(1) h3 a {
        font-weight: 100; }
      .home-grid .newsbox:nth-of-type(1) h3 a:hover {
        text-decoration: none; }
    .home-grid .newsbox:nth-of-type(1) .category {
      display: inline-flex;
      margin-bottom: 1em; }
      .home-grid .newsbox:nth-of-type(1) .category a {
        font-weight: normal; }
    .home-grid .newsbox:nth-of-type(1) .category::before {
      display: inline-block;
      width: 0.5em;
      height: 0.5em;
      background-color: red;
      content: "";
      margin-right: 0.5em;
      align-self: center; }
  .home-grid .newsbox:nth-of-type(2) {
    grid-area: story2; }
  .home-grid .newsbox:nth-of-type(3) {
    grid-area: story3; }
  .home-grid .newsbox:nth-of-type(4) {
    grid-area: story4; }
  .home-grid .newsbox:nth-of-type(5) {
    grid-area: story5; }

/*   Secondary Pages   */
article {
  padding: 2rem 25rem;
  background-color: #fafafa;
  line-height: 1.5em;
  position: relative;
  margin-bottom: 10rem;
  padding-bottom: 0 !important;
  padding-top: 5rem !important; }
  @media (max-width: 1299px) {
    article {
      padding: 2rem 8rem; } }
  @media (max-width: 980px) {
    article {
      padding: 2rem 5rem; } }
  @media (max-width: 781px) {
    article {
      padding: 2rem; } }
  article .wrapper {
    margin: 0 auto;
    width: 700px; }
  article h1 {
    margin: 0; }
  article h1::before, article h2::before {
    content: "";
    display: inline-block;
    height: .25em;
    width: .25em;
    margin: 0 .25em .125em .125em;
    background-color: red;
    vertical-align: middle; }
  article .subhead {
    font-family: "Roboto Condensed", sans-serif;
    font-optical-sizing: auto;
    font-weight: normal;
    font-style: normal;
    color: #008888;
    font-size: 1.5em; }
    article .subhead p {
      margin-bottom: 0; }

.cover .wp-block-media-text__content {
  font-family: "Roboto Condensed", sans-serif;
  font-optical-sizing: auto;
  font-style: normal;
  font-variation-settings: "wdth" 100;
  border-left: 3px dotted white;
  padding-left: 1rem !important;
  margin-left: 1rem; }
  .cover .wp-block-media-text__content h4 {
    font-family: "Silkscreen", sans-serif;
    font-weight: normal;
    margin: 0; }
  .cover .wp-block-media-text__content p {
    margin-bottom: 0; }