@charset "UTF-8";
/* CSS Document */

body {
	color: #ff00cc;
  	background-color: #111111;
	background-image: url("file:///Macintosh HD/Users/bmaynardG5/Documents/Work/JR Christmas Spectacular/2022/website/_assets/website-background-B.jpg");
	background-repeat: no-repeat;
	background-attachment: fixed;
	background-size: cover;
	font-family: 'Figtree', sans-serif;
	padding: 0;
	margin: 0;
}

.main-content {
	padding: 20px 60px 20px 60px;
}

.mc-pink {
	background-color: #ff00cc;
	color: #111111;
}

.mc-white {
	background-color: #ffffff;
	color: #ff00cc;
}

	html {
  scroll-behavior: smooth;
	}
	
	a:link {
  color: #ffffff;
  text-decoration: none;
	}

	a:visited {
  	color: #ffffff;
	text-decoration: none;
	}

	a:hover {
	color: #ffffff;
	}

	a:active {
	color: #ffffff;
  text-decoration: none;
	}

a.button-link:hover, a.button-link:active {
	border-bottom: none;
	text-decoration: none;
}
	
.button {
  background-color: #ff00cc;
  border: none;
  color: #111111;
  padding: 16px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 18px;
  font-weight: 800;
  line-height: 175%;
  margin: 4px 2px;
  transition-duration: 0.2s;
  cursor: pointer;
}

.button:hover {
  background-color: #ffffff;
  color: #111111;
}

.button-full {
  background-color: #ff00cc;
  border: none;
  color: #ffffff;
  padding: 16px 32px;
  text-align: center;
  text-decoration: none;
  display: block;
  width: 100%;
  font-size: 18px;
  font-weight: 800;
  line-height: 175%;
  margin: 4px 2px;
  transition-duration: 0.2s;
  cursor: pointer;
}

.button-full:hover {
  background-color: #111111;
  color: #ff00cc;
}

	p {
		font-size: 1.1vw;
		line-height: 175%;
	}

	.quote {
		font-size: 2vw;
	}

	.map-link {
  		color: #ffffff;
	}

	.copyright {
		font-size: 0.5em;
		text-align: center;
		line-height: 175%;
	}
	
	h1 {
		font-size: 8vw;
		font-weight: 400;
		line-height: 100%;
	}
	
	h2 {
		font-size: 3vw;
		line-height: 150%;
	}
	
	h3 {
		font-size: 1.5vw;
		line-height: 150%;
	}
	
.white {
	color: #ffffff;
}	

.ff-blue {
		color: #0078f7;
	}
	
	.blue {
		color: #4040FE;
	}
	
	.bg-blue {
		background-color: #4040FE;
	}
	
	.light-blue {
		color: #609ffe;
	}
	
	.pink {
		color: #f778f7; 
	}
	
	.yellow {
		color: #fe9f00;
	}
	
	.bg-yellow {
		background-color: #fe9f00;
	}
	
	.light-yellow {
		color: #fdd7a0;
	}
	
	.sky-blue {
		color: #8fcffe;
	}
	
	.red {
		color: #df5000;
	}
	
	.bg-red {
		background-color: #df5000;
	}
	
	.dark-red {
		color: #a03000;
	}
	
	.mint {
		color: #6edd8e;
	}
	
	.green {
		color: #93e500;
	}
	
	.bg-green {
		background-color: #93e500;
	}
	
	.dark-green {
		color: #48a710;
	}
	
	.bright-yellow {
		color: #e7cf20;
	}
	
hr.thick {
  	border-top: 10px solid #eeeeee;
	margin: 2em 0;
}

	img {
		width: 100%;
		height: auto;
	}

	.icon {
		width: 25%;
		height: auto;
	}
	
	.img-link {
		text-decoration: none !important;
   		border:0px !important;
	}
	
	.logo {
		padding: 4em 4em 4em 4em;
	}

.center {
	display: block;
	margin-left: auto;
	margin-right: auto;
	width: 50%;
}
	
	table {
		width: 100%;
	}
	
	th {
		padding: 0.5em 2em 0.5em 0;
		text-align: left;
		font-weight: bold;
		color: #666666;
	}
	
	td {
		padding: 0.5em 0;
	}
	
	* {
  		box-sizing: border-box;
	}

.column {
  float: left;
  width: 50%;
  padding: 10px;
}

.full {
	width: 100%;
}
	
.quarter {
  width: 25%;
}

.third {
  width: 33.33%;
}
	
.half {
  width: 50%;
}

.two-thirds {
  width: 66%;
	}
	
.three-quarters {
  width: 75%;
	}
	
	.extra-padding {
		padding: 2em;
	}

	.extra-extra-padding {
		padding: 2em 4em;
	}

	.center-padding {
	padding: 100px 0;
	}

.row:after {
  content: "";
  display: table;
  clear: both;
}

.flood-background {
	background-image: url("file:///Macintosh HD/Users/bmaynardG5/Documents/Work/JR Christmas Spectacular/2022/website/_assets/bg-tickets-flowers-C.png");
  	height: 500px;
  	background-position: center;
  	background-repeat: no-repeat;
  	background-size: contain;
	position: relative;
	padding: 4em 0;
}

@media screen and (max-width: 700px) {
  .column {
    width: 100%;
  }
}

/* NAVIAGTION */
	
ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  background-color: #ff00cc;
  overflow: hidden;
  position: -webkit-sticky; /* Safari */
  position: sticky;
  top: 0;
  font-size: 2vw;
  font-weight: bold;
  z-index: 2;
}

li {
  float: left;
}

li a {
  display: block;
  color: #ffffff;
  text-align: center;
  padding: 20px 40px 20px 40px;
  text-decoration: none;
}

li a:hover {
	  color: #111111;
}
	
.active {
  display: block;
  color: #111111;
  text-align: center;
  padding: 20px;
  text-decoration: none;
}
	
/* GRID */
	
.item1 { grid-area: image; }
.item2 { grid-area: name; }
.item3 { grid-area: stats; }
.item4 { grid-area: stats-value; }
.item5 { grid-area: family; }
.item6 { grid-area: weak; }
.item7 { grid-area: weak-value; }
.item8 { grid-area: resist; }
.item9 { grid-area: resist-value; }
.item10 { grid-area: attack; }
.item11 { grid-area: attack-value; }
.item12 { grid-area: skill; }
.item13 { grid-area: skill-value; }
.item14 { grid-area: description; }

	
.grid-container {
  display: grid;
  grid-template-columns: 50% auto auto auto;
  grid-template-areas:
    'image name name description'
	'image stats stats-value family'
	'image weak weak-value weak-value'
	'image resist resist-value resist-value'
	'image attack attack-value attack-value'
	'image skill skill-value skill-value';
  grid-gap: 0.25em;
  padding: 0.25em;
  margin: 8em 0;
}

.grid-container > div {
  background-color: #000000;
  padding: 0.5em 0.5em 0.5em 1em;
}

.scrolling-wrapper {
  overflow-x: scroll;
  overflow-y: hidden;
  white-space: nowrap;
}

.scrolling-wrapper img {
	width: 100%;
	height: auto;
}
  .card {
    display: inline-block;
	padding: 0 2em 0 2em;
  }

.scrolling-wrapper {
  -webkit-overflow-scrolling: touch;
}
	
	@media (max-width: 1280px) {
		p {
			font-size: 1em;
		}
		
		h3 {
			font-size: 1em;
		}
	}
	
@media (max-width: 700px) {
  .grid-container {
    grid-template-columns: 25% auto auto auto;
	grid-template-areas:
    'name name name name'
	'image image image image'
	'description description description description'
	'stats stats-value family family'
	'weak weak-value weak-value weak-value'
	'resist resist-value resist-value resist-value'
	'attack attack-value attack-value attack-value'
	'skill skill-value skill-value skill-value';
  }
	h1 {
		font-size: 10vw;
	}
	
	h2 {
		font-size: 6vw;
	}
	
	h3 {
		font-size: 1.5em;
	}
	
	p {
		font-size: 1em;
	}
	
	.quote {
		font-size: 1.25em;
	}
	
	.logo {
		padding: 4em 0 0 0;
	}
	
	li a {
  padding: 10px 20px 10px 20px;
	}
	
	.active {
  padding: 10px 20px 10px 20px;
	}
}