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


/* Table of Contents

Desktop (Main Styles)
1. Global Styling

2. Typography Styling

3. Mizzou Smash Logo Styling

4. Nav Styling
	4.1 Hamburger Menu Toggle
	4.2 Scroll to Top Button Styling
	4.3 Stage List Button Styling
	4.4 Location Button Styling

5. Main Styling

6. Footer Styling

------- XX Media Queries XX ---------

Mobile (991px or less)
M1. Global Styles

M2. Mizzou Smash Logo Styling

M3. Nav Styling
	M3.1 Hamburger Menu Toggle
	M3.2 Scroll to Top Button Styling
	M3.3 Stage List Button Styling
	M3.4 Location Button Styling
	M3.5 Social Media Styling
	M3.6 Nav Overlay

M5. Main Styling

M4. Footer Styling

*/




/* ---------
1. Global Styling
--------- */

html {
	font-size: 62.5%;
	overflow-x: hidden;
}

body {
	background-color: #242424;
	color: #D1D1D1;
	padding: 0;
	font-family: 'Roboto', sans-serif;
	overflow-x: hidden;
}

:focus {
	outline: none;
}

/* ---------
2. Typography Styling
--------- */

h1, h2, h3, h4, .h1, .h2, .h3, .h4 {
	font-weight: normal;
}

h1, .h1 {
	font-size: clamp(4rem, 10vw, 8rem);
	font-family: 'Oswald', 'Helvetica', 'Arial', sans-serif;
	color: #fff;
  	text-transform: uppercase;
  	line-height: 1.3;
  	text-shadow: 0 1px 1px rgba(0, 0, 0, .8);
}

h2, .h2 {
	font-size: clamp(3.5rem, 6vw, 5rem);
	font-family: 'Oswald', 'Helvetica', 'Arial', sans-serif;
	text-transform: none;
	margin-bottom: 0.5em;
	text-shadow: none;
}

h3, .h3 {
	font-size: clamp(2.5rem, 4vw, 3.5rem);
	font-family: 'Oswald', 'Helvetica', 'Arial', sans-serif;
}

h4, .h4 {
	font-size: clamp(1.5rem, 2.5vw, 2rem);
	font-family: 'Oswald', 'Helvetica', 'Arial', sans-serif;
}

p, .p {
	font-size: clamp(1.6rem, 1.25vw, 1.8rem) !important;
	font-family: 'Roboto', sans-serif;
	line-height: 1.6em;
}

ol li,
ul li {
	font-size: clamp(1.6rem, 1.25vw, 1.8rem);
}

.mizzou-gold {
	color: #F1B82D;
}

.mizzou-black {
	color: #000;
}

.mizzou-dark-grey {
	color: #242424;
}

.mizzou-light-grey {
	color: #D1D1D1;
}

.mizzou-white {
	color: #fff;
}

a {
	text-decoration: none;
}

.contrast-link-dark {
	color: #8E6B1A;
	font-weight: bold;
}

.contrast-link-dark:hover,
.contrast-link-dark:focus {
	color: #AA8221;
	text-decoration: underline;
}

.contrast-link-light {
	color: #F1F1F1;
	font-weight: bold;
}

.contrast-link-light:hover,
.contrast-link-light:focus {
	color: #fff;
	text-decoration: underline;
}

@font-face {
  	font-family: "Lemon Milk";
	src: url("../fonts/LemonMilk/LEMONMILK-BoldItalic.otf") format('opentype');
	font-style: normal;
	font-weight: normal;
}

/* ---------
3. Mizzou Smash Logo Styling
--------- */

.logo {
	margin: 0;
	padding: 0;
}

.logo li {
	list-style: none;
	display: inline-block;
}

.mizzou-smash-logo {
	max-width: 14rem;
	height: auto;
}

.logo-link:focus {
	border: 1px solid #AA8221;
	padding: 3.6em 0;
}

.mizzou-smash-logo-mobile {
	display: none;
}

/* ------------
4. Nav Styling
------------ */

.nav-container {
	background: #000;
	width: 100%;
	height: var(--header-height);
	top: 0;
	left: 0;
	padding: 0.5em 5em;
	align-items: center;
	box-sizing: border-box;
}

.logo-link:focus {
	border: 1px solid #AA8221;
}

nav {
	max-width: 1440px;
	justify-content: space-between;
}

.main-nav {
	margin: auto 0;
	padding: 0;
	display: flex;
}

.main-nav li {
	list-style: none;
	margin: 0 1.5em;
	font-size: 1rem !important;
}

.main-nav li:nth-child(2) {
	margin-right: 1em;
	padding-right: 2.5em;
	border-right: 1px solid #F1B82D;
}

.main-nav li:nth-child(2) a,
.main-nav li:first-child a {
	font-size: 1.8rem;
	line-height: 2.78;
}

.main-nav li:nth-child(7),
.main-nav li:last-child {
	display: none;
}

.main-nav a {
	line-height: 2.78;
	color: #F1B82D;
	text-transform: capitalize;
	text-decoration: none;
	font-size: 1.8rem;
	display: block;
}

.main-nav a:focus {
	background: #BB8E25;
	border-radius: 8px;
}

.main-nav a:focus span {
	color: #000;
}

.main-nav span {
	border-radius: 8px;
	padding: 0.8em;
	color: #F1B82D;
	transition: all 0.3s;
}

.main-nav span:hover {
	background: #F1B82D;
	color: #000;
}

.main-nav span.active {
	background: #D1A029;
	color: #000;
}

.main-nav .stage-list-icon {
	max-width: 30px;
	padding-right: 0.5em;
}

.main-nav .black-stage-list-icon {
	object-fit: contain;
	opacity: 0;
	transition: opacity 0.3s;
}

.main-nav li:first-child .black-stage-list-icon {
	opacity: 1;
}

.sub-nav {
	display: none;
}

/* -----------
4.1 Hamburger Menu Toggle
------------ */

.menu-toggle {
	color: #F1B82D;
	float: right;
	padding: 0 0.6em;
	line-height: 2.175;
	font-size: 2.6rem;
	cursor: pointer;
	display: none;
}

.menu-toggle-icon {
    line-height: 2.175 !important;
}

/* -------------
4.2 Scroll to Top Button Styling
------------- */

#scrollToTop {
	position: fixed;
	right: 1.2em;
	bottom: 1.2em;
	width: 6rem;
	height: 6rem;
	display: inline-block;
	vertical-align: middle;
	transform: perspective(1px) translateZ(0);
	border-radius: 50%;
	border: none;
	background: #fff;
	box-shadow: 0rem 0.4rem 1.2rem rgb(0 0 0 / 30%);
	outline: none;
	cursor: pointer;
	transition: transform 0.2s;
	z-index: 990;
}

#scrollToTop:hover,
#scrollToTop:focus,
#scrollToTop:active {
	transform: scale(1.1);
}

#scrollToTop span {
	color: #000;
	font-size: 3rem;
	transition: all 0.15s;
}

/* -------------
4.3 Stage List Button Styling
------------- */

.stage-list-button {
	position: fixed;
	right: 0.4em;
	bottom: 0.4em;
	width: 6rem;
	height: 6rem;
	font-size: 2.8rem;
	border-radius: 50%;
	border: none;
	background: #F1B82D;
	box-shadow: 0rem 0.4rem 1.2rem rgb(0 0 0 / 30%);
	outline: none;
	z-index: 3;
	display: none;
}

.stage-list-button:active {
	background: #D1A029;
}

.stage-list-button img {
	width: 100%;
	height: auto;
}

/* -------------
4.4 Location Button Styling
------------- */

.location-button {
	float: right;
	margin: 9.6px 0;
	padding: 8px 10px;
	font-size: 1.4rem;
	outline: none;
	background: #F1B82D;
	color: #000;
	border-radius: 8px;
	border: none;
	display: none;
}

/* ------------------
5. Main Styling
------------------ */

.main-header-home {
  	padding-top: 14em;
  	height: 73rem;
    background: linear-gradient(#F1B82D, transparent 90%),
			    linear-gradient(0deg, #242424, transparent),
			    #ffa949 url('../images/background-images/mizzou-campus.webp') no-repeat center;

  	background-size: cover;
}

.main-header-pr {
  	padding-top: 14em;
  	height: 73rem;
    background: linear-gradient(#F1B82D, transparent 90%),
			    linear-gradient(0deg, #242424, transparent),
			    #ffa949 url('../images/background-images/mizzou-tiger-background.webp') no-repeat center;

  	background-size: cover;
}

.subtitle {
	color: #fff;
  	font-size: max(1.4rem, 1.8rem);
  	text-transform: capitalize;
  	letter-spacing: .065em;
  	font-weight: 200;
	font-style: italic;
  	padding-bottom: 0.8em;
}

.arrow {
	margin: 3em 0 0 0;
	font-size: 4.8rem;
	color: #fff;
}

.ban-rules {
	padding: 2em;
	border: 1px solid #D1D1D1;
}

.white-bg {
	background: #fff;
	color: #242424;
}

/* 5.? Stages */

.stage-list-graphic {
	max-width: 1440px;
	background: #9D771B url("../images/logos-and-icons/mizzou-tiger-transparent.png") no-repeat center;
	background-size: cover;
	border-radius: 25px;
}

.stage-list-graphic h1 {
	font-size: 7rem;
}

.ruleset-box {
	background: #242424;
	border-radius: 25px;
	color: #D1D1D1;
	padding: 2em;
}

.divider {
    width: 70%;
    height: 10px;
	margin: 0 auto;
    position: relative;
    background: #FFF;
}

.divider:after {
    content: "";
    position: absolute;
    left: -10px;
    bottom: 0;
    width: 0;
    height: 0;
    border-right: 10px solid #FFF;
    border-top: 5px solid transparent;
    border-bottom: 5px solid transparent;
}

.divider:before {
    content: "";
    position: absolute;
    right: -10px;
    bottom: 0;
    width: 0;
    height: 0;
    border-left: 10px solid #FFF;
    border-top: 5px solid transparent;
    border-bottom: 5px solid transparent;
}

.stage-name {
	font-family: 'Lemon Milk';
	font-style: italic;
	font-weight: bolder;
	font-size: 2.75rem;
	color: #FFF;
	text-shadow: 0 2px 2px rgba(0, 0, 0, 1);
	text-align: center;
	margin: 0;
}

.stage {
	display: flex;
  	justify-content: center;
  	align-items: center;
	height: 150px;
}

.battlefield {
	background: url("../images/stages/battlefield.webp") no-repeat center;
	background-size: contain;
}

.final-destination {
	background: url("../images/stages/final-destination.webp") no-repeat center;
	background-size: contain;
}

.pokemon-stadium-2 {
	background: url("../images/stages/pokemon-stadium-2.webp") no-repeat center;
	background-size: contain;
}

.smashville {
	background: url("../images/stages/smashville.webp") no-repeat center;
	background-size: contain;
}

.town-and-city {
	background: url("../images/stages/town-and-city.webp") no-repeat center;
	background-size: contain;
}

.kalos {
	background: url("../images/stages/kalos.webp") no-repeat center;
	background-size: contain;
}

.small-battlefield {
	background: url("../images/stages/small-battlefield.webp") no-repeat center;
	background-size: contain;
}

.yoshis-story {
	background: url("../images/stages/yoshis-story.webp") no-repeat center;
	background-size: contain;
}

.smash-ball img {
	max-width: 350px;
	opacity: 0.1;
}

.trophy img {
	max-width: 300px;
}

.ultimate-banner {
	width: 100%;
	background: #F1B82D;
	color: #000;
	text-align: center;
	font-style: italic;
}

.melee-banner {
	width: 100%;
	background: #000;
	color: #F1B82D;
	text-align: center;
	font-style: italic;
}

.ultimate-banner h2,
.ultimate-banner h3,
.melee-banner h2,
.melee-banner h3,
.stage-list-graphic h1 {
	font-family: 'Lemon Milk';
}

.melee-pr .container {
	padding: 6rem 0;
}

.ultimate-pr-background {
	background-image: url("../images/background-images/ultimate-pr-background.webp");
	background-repeat: no-repeat;
	background-attachment: fixed;
	background-size: cover;
}

.ultimate-pr-background .container {
	max-width: 1440px;
}

.first-place img {
	max-width: 355px;
}

.second-place img,
.third-place img {
	max-width: 330px;
}

.second-place,
.third-place {
	padding-top: 2.5em;
}

.pr-bottom {
	padding: 0 3em;
}

.pr-bottom img {
	max-width: 250px;
	transform: rotate(-45deg);
	padding: 2em;
}

.pr-bottom-bsection {
	margin: -8em 0 0 0;
}

.honorable-mention {
	float: right;
	margin: -13em 5em 0 auto;
}

.honorable-mention img {
	max-width: 180px;
}

.container-xl {
	max-width: 1440px;
	padding: 3em 0 7em 0;
}

.melee-fox {
	max-width: 300px;
}


/* ------------------
6. Footer Styling
------------------ */

footer {
	width: 100%;
	background: #F1B82D;
	padding: 0;
	border-top: 4rem solid #D1A029;
}

footer p {
	font-size: 2rem;
	color: #000;
}

footer ul {
	margin: 1em auto;
	padding: 0 1.4em;
}

footer li {
	display: inline-block;
	margin-bottom: 1.5em;
}

footer a {
	font-size: 3rem;
	width: 6rem;
	margin: 0 0.25em 0 0; 
	color: #000; 
	text-decoration: none !important; 
	background: #fff;
	padding: .5em;
	text-align: center;
	border-radius: 50%;
	transition: all 0.3s;
}

footer a:hover,
footer a:focus {
	color: #fff;
	background: #000;
}

.copyright {
	font-size: 1.4rem !important;
}


/* ---------------------------------------------
XX Media Queries XX
--------------------------------------------- */


@media (max-width: 1300px) {
	.nav-container {
		padding: 0.4em 2em;
	}
	
	.main-nav li {
		margin: 0 0.25em;
	}
	
	.stage-list-graphic h1 {
		font-size: 5rem;
	}
	
	.second-place,
	.third-place {
		padding-top: 1em;
	}
	
	.honorable-mention {
		margin: -12em 3em 0 auto;
	}
	
	.first-place img {
		max-width: 280px;
	}
	
	.second-place,
	.third-place {
		padding-top: 3em;
	}
	
	.second-place img,
	.third-place img {
		max-width: 250px;
	}
	
	.pr-bottom img {
		max-width: 200px;
	}
	
	.honorable-mention img {
		max-width: 150px;
	}
}

@media (max-width: 991px) {
	
	/* ----------------
	M1. Global Styling
	------------------ */
	
	body {
		--header-height: 5.6rem;
		
		margin: var(--header-height) 0 0 0;
	}
	
	/* -------------------
	M2. Mizzou Smash Logo Styling 
	-------------------- */
	
	.logo {
		display: none;
	}
	
	.mizzou-smash-logo-mobile {
		display: inline-block;
		max-width: 6rem;
		padding: 4.25px 0 4.25px 1.25em;
	}
	
	
	/* -------------------
	M3. Nav Styling 
	-------------------- */
	
	.nav-container {
		position: fixed;
		padding: 0;
		z-index: 999;
	}
	
	.nav-container nav {
		display: block;
		position: fixed;
		z-index: 999;
		width: 28rem;
		height: 100vh;
		background: #3E3E3E;
		margin-top: 0;
		top: 0;
		right: -28rem;
		transition: ease 0.5s;
		opacity: 1;
	}
	
	nav.active {
		right: 0;
		box-shadow: -0.5rem 0 2rem 1.5rem rgba(0,0,0, 0.5);
		z-index: 3;
	}
	
	.main-nav {
		display: block;
		width: 100%;
		margin: 1em 0;
	}
	
	.main-nav li:first-child,
	.main-nav li:nth-child(2) {
		display: none;
	}
	
	.main-nav li:nth-child(3) {
		margin-top: 1rem;
	}
	
	.main-nav li:nth-child(6) {
		margin: 0 0.25em 1rem;
	}
	
	.main-nav li:nth-child(7),
	.main-nav li:last-child {
		display: block;
		margin: 0;
	}
	
	.main-nav li:nth-child(7) {
		padding: 0.5rem 0.25rem;
		border-top: 1px solid #D1D1D1;
	}
	
	.main-nav li:last-child {
		padding: 0.5rem 0.25rem;
		border-bottom: 1px solid #D1D1D1;
	}
	
	.main-nav a:focus {
		background: #3E3E3E;
		border-radius: 0px;
	}

	.main-nav a:focus span {
		color: #F1B82D;
	}
	
	.main-nav span {
		color: #D1D1D1;
	}
	
	.main-nav span.active,
	.main-nav span:hover {
		background-color: #3E3E3E;
		color: #F1B82D;
	}
	
	.sub-nav {
		display: block;
		margin: 1rem 0.25rem 0;
		padding: 1.44rem;
	}
	
	/* -------------------
	M3.1 Scroll to Top Button Styling 
	-------------------- */
	
	#scrollToTop {
		display: none;
	}
	
	/* -------------------
	M3.2 Stage List Button Styling 
	-------------------- */
	
	.stage-list-button {
		display: block;
	}
	
	/* -------------------
	M3.3 Hamburger Menu Toggle 
	-------------------- */
	
	.menu-toggle {
		display: block;
	}
	
	/* -------------------
	M3.4 Location Button Styling 
	-------------------- */
	
	.location-button {
		display: block;
	}
	
	/* -------------------
	M3.5 Social Media Styling 
	-------------------- */
	
	.follow-us {
		color: #D1D1D1;
		font-size: 1.8rem !important;
	}
	
	.social-media-mobile {
		width: 240px;
		padding: 0;
		text-align: center;
	}
	
	.social-media-mobile li {
		display: inline-block;
		margin-bottom: 15px !important;
	}
	
	.social-media-mobile a {
		font-size: 3rem;
		width: 5rem;
		margin: 0 0.5em 0 0; 
		color: #000000; 
		text-decoration: none; 
		background: #D1D1D1;
		padding: .33em;
		text-align: center;
		border-radius: 50%;
	}
	
	/* -------------------
	M3.6 Nav Overlay
	-------------------- */
	
	.nav-overlay {
		position: fixed;
		top: 0;
		left: 0;
		width: 100vw;
		height: 100vh;
		background: rgba(0,0,0, 0.4);
		visibility: hidden;
		opacity: 0;
		z-index: 2;
		transition: all 0.5s ease;
	}
	
	.nav-open .nav-overlay {
		visibility: visible;
		opacity: 1;
	}
	
	/* -------------------
	M5. Main Styling
	-------------------- */
	
	/* -------------------
	M5.? Stages
	-------------------- */
	
	.stage-list-graphic {
		background: #9D771B;
	}
	
	.ruleset-box img {
		max-width: 375px;
	}
	
	.divider {
		width: 90%;
	}
	
	.stage {
		height: 225px;
	}
	
	.main-header-home,
	.main-header-pr,
	.main-header-events,
	.main-header-contact {
		padding-top: 5em;
  		height: 35rem;
	}
	
	.smash-ball img {
		max-width: 200px;
	}
	
	.trophy img {
		max-width: 250px;
	}
	
	.second-place,
	.third-place {
		padding-top: 5em;
	}
	
	.pr-bottom {
		margin: 5em 0 0 0;
	}
	
	.pr-bottom img {
		max-width: 225px;
	}
	
	#pr-last {
		margin: -4em 0 0 0;
	}
	
	.pr-bottom-tsection,
	.pr-bottom-bsection {
		margin: 0;
	}
	
	.container-xl {
		padding: 5em 0 6em 0;
	}
	
	.melee-fox {
		max-width: 250px;
	}
	
	/* -------------------
	M6. Footer Styling
	-------------------- */
	
	footer a {
		font-size: 2rem;
		width: 4rem;
	}
	
}

@media (max-width: 768px) {
	.stage-list-graphic {
		border-radius: 0px;
	}
	
	.stage-name {
		font-size: 3.25rem;
	}
}

@media (max-width: 576px) {
	.ruleset-box img {
		max-width: 250px;
	}
	
	.stage {
		height: 140px;
	}
	
	.stage-name {
		font-size: 2rem;
	}
	
	.main-header-home,
	.main-header-pr,
	.main-header-events,
	.main-header-contact {
		height: 28rem;
	}
	
	.ultimate-pr-background {
		background: none;
	}
	
	.pr-bottom {
		margin: -4em 0 0 0;
		padding: 0 3em; 
	}
	
	.pr-bottom img {
		max-width: 200px;
	}
	
	.honorable-mention {
		margin-right: 1em;
	}
}

@media (max-width: 425px) {
	.stage {
		height: 120px;
	}
}