/* This is the theming for the entire website basically */
body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
    background-color: #0d0e10;
    background-image: url('main-pics/background.jpeg');
    background-repeat: no-repeat;
    background-position: right bottom;
    background-attachment: fixed;
    font-size: 110%;
    color: #fff;
    opacity: 0.8;
}

/* This is the background image and formatting for the header part of the site */
header {
    padding: 20px;
    text-align: center;
    height: 300px; 
    background-image: url('main-pics/header.jpeg');
    font-size: 160%;
    background-size: cover;
    position: relative;
}

/* This is for the words to show up in front of the logo */
/* z-index and position are important here */
#headline h1 {
  z-index: 2;
  position: relative;
  color: #ccff00; 
  text-shadow: black 0.1em 0.1em 0.2em;
}

/* This is for the logo to be formatted correctly */
/* z-index and position are important here */
#headline img {
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%); 
  object-fit: cover;
  z-index: 1;
}

/* Mostly for the right column headers to look nice */
h2{
  text-align: center;
}

/* Part of the navigation styling */
nav {
    background-color: #28615d; 
    padding: 10px;
    font-size: 150%;
}

nav ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    text-align: center;
}

nav ul li {
    display: inline;
    margin-right: 20px;
}

/* Yes I took some inspiration from Pacific case study here */
nav a { text-decoration: none;
        transition: ease-out color 2s;
}

nav a.active { 
  text-decoration: underline;
}
  

nav a:link{ color: #ccff00; }

nav a:visited{ color: #ffe69c;}

nav a:hover{ color: #A52A2A; }

/* This theming was to hopefully give it that card look for the page itself. Slight transparency applied for style. */
.container {
    display: flex;
    flex-wrap: wrap;
    padding: 20px;
    padding-left: 100px;
    padding-right: 100px;
    opacity: 0.99;
}

.index img{
  height: 300px;
  width: 400px;
}

/* the main "card style" columns for the main content of the page*/
.column {
    flex: 1;
    padding: 20px;
    background-color: #4c4c4c; 
    border-radius: 10px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);}

.left-column {
    order: 1;
    font-size: 140%
}

/* Specific theme for pictures on Games and Merch page */
.left-column-merch img {
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 50%;
}

.right-column {
    order: 2;
    font-size: 140%;
}

.right-column li{
  text-decoration: underline;
}

/* I wanted a way to have my call to contact me look a certain way */
.contact-hero {
    display: flex;
    flex-wrap: wrap;
    padding: 20px;
    padding-left: 100px;
    padding-right: 100px;
    opacity: 0.99;
    font-size: 120%;
}

/* This is general styling to match the header */
p a:link{ color: #ccff00; }

p a:visited{ color: #ffe69c}

p a:hover{ color: #A52A2A }

.contact-hero a:link{ color: #ccff00; }

.contact-hero a:visited{ color: #ffe69c}

.contact-hero a:hover{ color: #A52A2A }



.contact-form {
  width: 350px;
  margin: auto;
  padding: 20px;
  border-radius: 4px;
  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
}

form {
  margin: 0;
}

label {
  display: block;
  margin: 10px 0;
}

input[type="text"],
input[type="tel"],
input[type="email"] {
  width: 100%;
  padding: 8px;
  border: none;
  background-color: #f4f4f4;
  border-radius: 2px;
  outline: none;
  box-sizing: border-box;
}

textarea {
  width: 100%;
  height: 100px;
  padding: 8px;
  border: none;
  background-color: #f4f4f4;
  border-radius: 2px;
  outline: none;
  box-sizing: border-box;
}

textarea:focus, input[type="text"]:focus, input[type="tel"]:focus, input[type="email"]:focus {
  background-color: #e0e0e0;
}

button[type="submit"] {
  width: 100%;
  padding: 8px;
  background-color: #4CAF50;
  color: #fff;
  border: none;
  border-radius: 2px;
  cursor: pointer;
}

table {
  display: block;
  width: auto;
  border: 1px solid #ccc;
  margin-left: auto;
  margin-right: auto;
  position: relative;
  overflow: auto;
}
th, td {
  width: auto;
  text-align: center;
  font-size: 0.7em;
  border: 1px solid #ccc;
  padding: 5px;
}
th {
  background-color: #bada55;
}

/* Explained in a comment on Events, but I show a table until you get to mobile resolution. Then show an unordered list */
.hid-events {
  display: none;
}

/* Positioning and zoom feature on the map for the store*/
.map-container {
  width: 100%; 
  height: 0; 
  padding-bottom: 56.25%; 
  margin: auto;
  position: relative;
  overflow: hidden;
}

.map-container img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .5s ease;
}

.map-container:hover img{
    transform: scale(1.2);
}

.left-column iframe{
  margin: auto;
  display: block;
  height: 100%;
  width: 100%;
}

/* main is for zooming in pictures on the home page*/
.main {
transition: transform .5s ease;
}

.main:hover {
transform: scale(1.4);
}

/* We hide the calendar on the Events page, and we provide a list of events instead */
@media (max-width: 1024px){
.container { 
    flex-direction: column;
    padding-left: 5%;
    padding-right: 5%;
  }
nav ul {display: flex; flex-direction: column; padding-top: 1em;}
nav ul li {border-bottom: none;}
.map { padding-top: 50%;}
table {display: none;}
.hid-events {display: flex;}
.hid-events li {text-decoration: underline;}
.index img { 
  display: block;
  margin-left: auto;
  margin-right: auto;
  }
}

