/*************************************************
**************************************************

Website Name: Arcade Mayhem
Website URL: ArcadeMayhem.com
Website Author: Kevin Sobotka
Copyright 2023. All Rights Reserved.

/*----------------------------------------------
------------------------------------------------
CSS Reset
------------------------------------------------
----------------------------------------------*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}

/* HTML5 display-role reset for older browsers */

article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}

/*----------------------------------------------
------------------------------------------------
Universal Styles
------------------------------------------------
----------------------------------------------*/

/* Font and color settings */

body {
  font-family: 'Raleway', sans-serif;
  font-weight: 400;
  font-size: 1.125rem;
  line-height: 1.5;
  padding-top: 13rem;
  background-image: url(assets/web-img/bckgnd.svg);
  background-repeat: repeat;
  background-size: contain;
  background-color: #000;
}

h1 {
  font-family: 'Orbitron', sans-serif;
  font-size: 3.25rem;
  color: #fff;
}

h2 {
  font-family: 'Orbitron', sans-serif;
  font-weight: 600;
  font-size: 3.125rem;
  color: white;
}

h3 {
  font-family: 'Raleway', sans-serif;
  font-weight: bold;
  font-size: 2rem; 
  color: #fff;
}

.event-article-headline {
  font-family: 'Raleway', sans-serif;
  font-weight: 700;
  font-size: 1.4rem;
  line-height: 1.2;
  color: #fff;
}

.description {
  font-family: 'Raleway', sans-serif;
  font-weight: 400;
  font-size: 1rem;
  line-height: 1.5;
  color: #fff;
}

li {
  display: block;
  font-size: 100%;
  margin-bottom: 2rem; 
  margin-top: 2rem;
  padding-bottom: .5rem;

}

/* Grid settings */

:root {
  --step--2: clamp(0.78rem, calc(0.77rem + 0.05vw), 0.80rem);
  --step--1: clamp(0.94rem, calc(0.91rem + 0.15vw), 1.00rem);
  --step-0: clamp(1.13rem, calc(1.06rem + 0.30vw), 1.25rem);
  --step-1: clamp(1.35rem, calc(1.25rem + 0.52vw), 1.56rem);
  --step-2: clamp(1.62rem, calc(1.46rem + 0.81vw), 1.95rem);
  --step-3: clamp(1.94rem, calc(1.70rem + 1.21vw), 2.44rem);
  --step-4: clamp(2.33rem, calc(1.98rem + 1.74vw), 3.05rem);
  --step-5: clamp(2.80rem, calc(2.31rem + 2.46vw), 3.82rem);
}

:root {
  --grid-max-width: 61.25rem;
  --grid-gutter: clamp(0.31rem, calc(-0.14rem + 2.27vw), 1.25rem);
  --grid-columns: 12;
}

.u-container {
  max-width: var(--grid-max-width);
  padding-inline: var(--grid-gutter);
  margin-inline: auto;
}

.u-grid {
  display: grid;
  gap: var(--grid-gutter);
}


/* Section settings */

section, .welcome, .section-with-border {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  margin: 0rem auto; 
  max-width: 56.9rem;
  text-align: center;
  color: white;
}

.welcome {
  padding: 2rem;
  margin-top: 2rem;
  margin-bottom: 3rem;
}

.header {
  width: 58.9rem;
}

.header img {
  background-color: #000;
  display: flex;
  border: 0.25em solid white;
  align-items: center;
  justify-content: center;
  height: fit-content;
}

.section-with-border {
  padding: 1.3rem;
  margin-bottom: 3rem;
  border: 0.25em solid white;
  background-color: #000;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.game-ul {
  line-height: 3rem;
}

/*----------------------------------------------
------------------------------------------------
Header & Nav Styles
------------------------------------------------
----------------------------------------------*/

/* Nav */

.logo-nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  background-color: #000000;
  color: #fff;
  z-index: 1;
  border-bottom: 0.25rem solid #fff;
  margin-bottom: 2rem; 
}
  

.logo {
  text-align: center;
  margin-top: 0.2em;
}

.logo h1 {
  font-family: 'Orbitron', sans-serif;
  font-size: 5rem;
  font-weight: 400;
  line-height: 5rem;
  margin: 0;
}

nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: .5rem;
}

nav ul {
  display: flex;
  margin: 0;
  padding: 0;
  list-style: none;
  flex: 1;
  justify-content: center;
}

nav li {
  margin: 0;
}

nav a {
  display: block;
  padding: 0.5em;
  color: #fff;
  text-decoration: none;
  font-family: 'Raleway', sans-serif;
  font-size: 1rem;
  border: .25em solid transparent;
}

nav .current-page {
  color: yellow;
  text-decoration: underline;
}

nav a:hover {
  background-color: #000000;
  color: yellow;
  border: .005rem solid yellow;
}

.logo-nav:hover {
  border-bottom: 0.25rem solid #fff;
}

/*----------------------------------------------
------------------------------------------------
Footer Styles
------------------------------------------------
----------------------------------------------*/

footer {
  position: static;
  width: 100%;
  padding-top: 2rem;
  padding-bottom: 2rem;
  margin-top: 2rem;
  border-top: .25rem solid white;
  background-color: #000;
  bottom: 0;
}

.footer-container {
  display: flex;
  justify-content: center;
  align-items: center;
  padding-left: 30%;
  padding-right: 30%;
  background-color: #000;
}

.footer-column {
  flex: 1;
  text-align: left;
  line-height: 2rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 0 1rem;
}

.footer-column:last-child {
  margin-right: 0;
  padding-right: 0;
}

.footer-bottom p {
  text-align: center;
  line-height: 3rem;
  padding-bottom: 2rem;
}

.description {
  font-size: 0.8rem;
  line-height: 1.2rem;
  margin-bottom: 1rem;
  text-decoration: none;
  color: white;
}

footer a:hover {
  color: yellow;
}


/*----------------------------------------------
------------------------------------------------
Extra Styles
------------------------------------------------
----------------------------------------------*/
/* Hours and Pricing */
.hourly-pricing {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}

.hourly-pricing__item {
  width: 55%;
  margin-bottom: 1rem;
  margin-right: -15%;
  margin-left: -15%;
  padding: 0;
}

.hourly-pricing__title {
  font-family: 'Raleway', sans-serif;
  font-size: 2rem;
  font-weight: bold;
  margin-bottom: 1rem;
}

.hourly-pricing__item p {
  margin-bottom: 1rem;
}

.hourly-pricing__item h3 {
  margin-bottom: 0.5rem;
}

/* Event */

.event-container {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  margin-top: 1rem;
  margin-bottom: 5rem;
  overflow-x: auto;
  white-space: nowrap;
  max-width: 100%;
  position: relative;
}

.event-item {
  text-align: center;
  margin: 0 0.5rem;
  flex-shrink: 0;
  height: 13rem;
  margin-bottom: 4rem;
  margin-right: 2rem;
}

.event-item:last-child {
  margin-right: 0;
}

.event-item img {
  width: 9.5rem;
  height: 9.5rem;
  object-fit: cover;
  border: .25rem solid white;
  margin-bottom: 0.5rem;
}

.event-article-headline {
  font-size: 1rem;
  margin-bottom: 0.25rem;
  text-align: left;
}

.description {
  font-size: 0.8rem;
  line-height: 1.2rem;
  margin-bottom: 1rem;
  overflow: hidden;
  white-space: normal;
}


.events-container {
  position: relative;
  margin-right: 2rem;
}

.event-item .description {
  text-align: left;
}

.crossout-title {
  font-size: 1rem;
  font-weight: 700;
  margin-bottom: 0.25rem;
  text-align: left;
  text-decoration: line-through;
  text-align: left;
  line-height: 1.2;
}

.crossout-description {
  font-size: 0.8rem;
  line-height: 1.2rem;
  margin-bottom: 1rem;
  text-decoration: line-through;
  text-align: left
}

.see-all-btn {
  position: absolute;
  bottom: 2rem;
  left: 2rem;
  margin-top: 1rem;
  border: 0.25rem solid white;
  padding: 0.5rem 1rem;
  text-decoration: none;
  color: white;
}

.see-all-btn:hover {
  color: yellow; 
  text-decoration: underline;
  border: 0.25rem solid yellow;
}

.section-with-border {
  position: relative;
}

/*Scroll Bar*/

/* width */
::-webkit-scrollbar {
  height: .5rem;
  width: .5rem;
}

/* Track */
::-webkit-scrollbar-track {
  background: #000000; 
}

/* Handle */
::-webkit-scrollbar-thumb {
  background: #888888; 
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
  background: #ffffff; 
}

/* Games */
.games-container {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 1rem;
  margin-bottom: 5rem;
  white-space: nowrap;
  overflow-x: none;
  overflow-y: none;
  max-width: 100%;
  position: relative;
  flex-wrap: wrap;
}

.game-item {
  text-align: left;
  margin: 0 0.5rem;
  flex-shrink: 0;
  width: 12rem;
  height: 20rem;
  margin-bottom: 4rem;
  margin-right: .5rem;
  font-family: 'Orbitron', sans-serif;
  font-weight: bold;
  font-size: 1.5rem;
  transition: all 0.2s ease-in-out;
}

.game-item p  {
  color: white;
}

.game-item:last-child {
  margin-right: 0;
}

.game-item img {
  width: 12.188rem; 
  height: 16.188rem;
  object-fit: cover;
  transition: all 0.2s ease-in-out;
}

.game-item:hover {
  transform: scale(102%);
  }


.game-item img:hover {
  border: .25rem solid white;
}

.description {
  line-height: -2rem;
  margin-bottom: 1rem;
}

.game-item .description {
  text-align: left;
}

.see-all-btn {
  position: absolute;
  bottom: 2rem;
  left: 2rem;
  margin-top: 1rem;
  border: 0.25rem solid white;
  padding: 0.5rem 1rem;
  text-decoration: none;
  color: white;
}

.see-all-btn:hover {
  color: yellow;
  text-decoration: underline;
  border: 0.25rem solid yellow;
}

.section-with-border {
  position: relative;
}

/*----------------------------------------------
------------------------------------------------
Break Point Styles
------------------------------------------------
----------------------------------------------*/

/*///////// Tablet Breakpoints /////////*/

@media (min-width: 768px) and (max-width: 1323px) {
.logo-nav {
margin-bottom: 1.5rem;
}

.logo h1 {
font-size: 4rem;
line-height: 4rem;
}
h2 {
  font-size: 2.5rem;
}
body {
  margin-top: -1.5rem;
}

li {
  display: block;
  font-size: 90%;
  margin-bottom: 2rem; 
  margin-top: 2rem;
  padding-bottom: .5rem;

}
/* Footer */

.footer-container {
justify-content: center;
padding-left: 1rem;
padding-right: 1rem;
}

.footer-column {
display: none;
}

.footer-column:last-child {
margin-right: auto;
padding-right: 0;
display: block;
text-align: center;
}

.footer-container {
flex-wrap: wrap;
justify-content: center;
text-align: center;
padding: 1rem;
}

.footer-column:nth-child(1),
.footer-column:nth-child(2),
.footer-column:nth-child(3) {
display: none;
}

.footer-column:last-child {
text-align: center;
}

/* Extra */

.hourly-pricing {
  flex-wrap: wrap;
  }
  .hourly-pricing__item {
  width: 100%;
  margin-bottom: 1rem;
  }
  .hourly-pricing__title {
  font-size: 1.5rem;
  margin-bottom: 0.5rem;
  }
  .event-item {
  width: 8rem;
  margin-right: 0.5rem;
  }
  .event-item img {
  width: 8rem;
  height: 8rem;
  }
  .event-article-headline {
  font-size: 0.8rem;
  margin-bottom: 0.25rem;
  }
  .description {
  font-size: 0.7rem;
  line-height: 1rem;
  margin-bottom: 0.5rem;
  }
  .crossout-title {
  font-size: 0.8rem;
  margin-bottom: 0.25rem;
  }
  .crossout-description {
  font-size: 0.7rem;
  line-height: 1rem;
  margin-bottom: 0.5rem;
  }
  .games-container {
  justify-content: center;
  }
  .game-item {
  width: 10rem;
  height: 18rem;
  margin-right: 0.5rem;
  margin-bottom: 2.5rem;
  font-size: 1.2rem;
  }

  .game-item img {
    width: 10rem;
    height: 14rem;
  }
  
  .description {
  line-height: 1.5rem;
  }
  section, .welcome, .section-with-border {
  max-width: 45rem;
  transition: max-width 0.5s ease-in-out;
  }
  .header img {
  width: 100%;
  height: auto;
  transition: width 0.5s ease-in-out;
  }

    /* See All Button */
    .see-all-btn {
      justify-content: center;
      margin: -1rem -1rem;
      }

  /* Section */
  section, .welcome, .section-with-border {
  width: 70%;
  transition: max-width 0.5s ease-in-out;
  }
  
  .section-with-border {
  padding: 0.75rem;
  padding-bottom: 4rem;
  margin-top: 1rem;
  margin-bottom: 1.5rem;
  }
  
  .welcome {
  padding: 1.5rem;
  margin-top: 1.5rem;
  margin-bottom: 2rem;
  }
  

  /* Header */
  .header {
  margin-top: -1rem;
  }
  
  .header img {
  width: 100%;
  height: auto;
  }
}

/*///////// Mobile & Tablet In-Between Breakpoints /////////*/
@media (max-width: 1167px) {
  body {
    font-size: 1.2rem;
    transition: opacity 0.5s ease-in-out;
    margin-top: -1.5rem;
    background-image: linear-gradient(to bottom, rgba(0,0,0,0.7), rgba(0,0,0,0.7)), url(assets/web-img/bckgnd.svg);
  }

.hourly-pricing {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  text-align: center;
  width: 100%;
}

.hourly-pricing__item {
  width: 55%;
  margin: 1rem 0;
  padding: 0;
}

.hourly-pricing__item p {
  font-size: 1rem;
  line-height: 1.2rem;
}

.hourly-pricing__title {
  margin-bottom: 1rem;
}

.header {
  margin-top: -4rem;
  }
  
  .header img {
  width: 100%;
  height: auto;
  }

  ul,
  ol {
    flex-direction: column;
    
  }
  
  li {
    display: block;
    font-size: 80%;
    margin-bottom: 2rem; 
    margin-top: 2rem;
    padding-bottom: .5rem;

  }
  /* Section */
  section, .welcome, .section-with-border, .header {
    max-width: 65%;
    transition: max-width 0.5s ease-in-out;
    }

  .section-with-border {
    padding-bottom: 2rem;
      }

    /* Game */

  .game-container {
    display: flex;
    justify-content: center;
    overflow-x: auto;
    height: 100%;
    }
    
    .game-ul {
    width: 100%;
    padding: 0;
    display: flex;
    }
    
    .game-li {
    flex: 0 0 auto;
    margin-right: 1rem;
    }
    
    .game-item {
   margin-bottom: 2.5rem;
      }
      
    .game-item img {
    width: auto;
    }
    
     /* See All Button */
  .see-all-btn {
    justify-content: center;
    margin: -1rem -1rem;
    }

    /* Description */
    .description {
    font-size: 0.484rem;
    line-height: 1rem;
    margin-bottom: 0.25rem;
    transition: font-size 0.3s ease-in-out, line-height 0.3s ease-in-out;
    }

 /* Nav */
 
.logo-nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1rem;
  padding: 1rem;
}

.logo {
  text-align: center;
}

.logo h1 {
  font-size: 1.5rem;
  line-height: 3rem;
}

nav {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  background-color: black;
  outline: 0.25rem solid white;
}

nav.show {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  padding: 0;
}

nav ul {
  flex-direction: column;
  justify-content: flex-start;
  align-items: stretch;
  margin-top: 1rem;
}

nav li {
  margin: 0;
}

nav a {
  display: block;
  padding: 0.5em;
  color: #fff;
  text-align: center;
  text-decoration: none;
  font-size: 1.2rem;
  border: 0.25em solid transparent;
}

.hamburger {
  display: block;
  cursor: pointer;
  margin-right: 1rem;
  padding: 1rem;
  position: relative;
  z-index: 1;
}

.hamburger .line {
  width: 24px;
  height: 3px;
  background-color: #fff;
  margin: 4px 0;
  transition: all 0.2s ease-out;
}

.hamburger.open .line:nth-child(1) {
  transform: rotate(45deg) translate(6px, 6px);
}

.hamburger.open .line:nth-child(2) {
  opacity: 0;
}

.hamburger.open .line:nth-child(3) {
  transform: rotate(-45deg) translate(6px, -6px);
}
}

/*///////// Mobile Breakpoints /////////*/

@media (max-width: 767px) {
  body {
    background-image: none;

  }
  
  h1 {
    font-size: 2.3rem;
   padding-bottom: .5rem;
  }
  
  h2 {
    font-size: 2rem;
  }
  
  ul,
  ol {
    flex-direction: column;
    
  }
  
  li {
    display: block;
    font-size: 70%;
    margin-bottom: 2rem; 
    margin-top: 2rem;
    padding-bottom: .5rem;

  }

  .section-with-border {
    padding-bottom: 2.5rem;
      }

  /* Nav */

  .logo-nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
    padding: 1rem;
  }
  
  .logo h1 {
    font-size: 1.5rem;
    line-height: 3rem;
    align-items: center;
  }
  
  nav {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    background-color: black;
    outline: 0.25rem solid white;
  }
  
  nav.show {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    padding: 0;
  }
  
  nav ul {
    flex-direction: column;
    justify-content: flex-start;
    align-items: stretch;
    margin-top: 1rem;
  }
  
  nav li {
    margin: 0;
  }
  
  nav a {
    display: block;
    padding: 0.5em;
    color: #fff;
    text-align: center;
    text-decoration: none;
    font-size: 1.2rem;
    border: 0.25em solid transparent;
  }
  
  .hamburger {
    display: block;
    cursor: pointer;
    margin-right: 1rem;
    padding: 1rem;
    position: relative;
    z-index: 1;
  }
  
  .hamburger .line {
    width: 24px;
    height: 3px;
    background-color: #fff;
    margin: 4px 0;
    transition: all 0.2s ease-out;
  }
  
  .hamburger.open .line:nth-child(1) {
    transform: rotate(45deg) translate(6px, 6px);
  }
  
  .hamburger.open .line:nth-child(2) {
    opacity: 0;
  }
  
  .hamburger.open .line:nth-child(3) {
    transform: rotate(-45deg) translate(6px, -6px);
  }
  
  /* Footer */
  .footer-container {
    flex-wrap: wrap;
    justify-content: center;
    padding: 1rem;
  }
  
  .footer-column:nth-child(1),
  .footer-column:nth-child(2),
  .footer-column:nth-child(3) {
    display: none;
  }
  
  .footer-column:last-child {
    text-align: center;
  }

/* Extra */

/* Hourly Pricing */

.hourly-pricing {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  text-align: center;
  width: 100%;
}

.hourly-pricing__item {
  width: 55%;
  margin: 1rem 0;
  padding: 0;
}

.hourly-pricing__item p {
  font-size: 1rem;
  line-height: 1.2rem;
}

.hourly-pricing__title {
  margin-bottom: 1rem;
}
  /* Event */

  .event-container {
  overflow-x: scroll;
  margin-bottom: 3rem;
  }
  
  .event-item {
  width: 6.5rem;
  font-size: 0.423rem;
  margin-right: 1.25rem;
  transition: width 0.3s ease-in-out, margin-right 0.3s ease-in-out;
  }
  
  .event-item img {
  width: 100%;
  height: 6rem;
  }
  
  .crossout-title, .event-article-headline, h4{
  font-size: 0.8rem;
  transition: font-size 0.3s ease-in-out;
  }
  
  .crossout-description, .description{
  font-size: 0.8rem;
  line-height: 1.1rem;
  transition: font-size 0.3s ease-in-out, line-height 0.3s ease-in-out;
  }
  
  /* Game */
  .game-container {
  display: flex;
  justify-content: center;
  overflow-x: auto;
  }
  
  .game-ul {
  width: 100%;
  padding: 0;
  display: flex;
  }
  
  .game-li {
  flex: 0 0 auto;
  margin-right: 1rem;
  }

  .game-item {
  margin-bottom: 3.5rem;
    }
    
    
  .game-item img {
  width: auto;
  }
  

  /* Description */
  .description {
  font-size: 0.484rem;
  line-height: 1rem;
  margin-bottom: 0.25rem;
  transition: font-size 0.3s ease-in-out, line-height 0.3s ease-in-out;
  }
  
  /* Section */
  section, .welcome, .section-with-border, .header {
  max-width: 80%;
  transition: max-width 0.5s ease-in-out;
  }
  
  .section-with-border {
  padding: 1.75rem;
  margin-top: 1rem;
  margin-bottom: 1.5rem;
  }
  
  .welcome {
  padding: 1.5rem;
  margin-top: 1.5rem;
  margin-bottom: 2rem;
  }
  
  /* See All Button */
  .see-all-btn {
  justify-content: center;
  margin: -1rem -1rem;
  }
  
  /* Header */
  .header {
  margin-top: -3.5rem;
  }
  
  .header img {
  width: 100%;
  height: auto;
  }
}