/* Fonts */
@import url('https://fonts.googleapis.com/css2?family=Raleway:ital,wght@0,400;0,700;0,900;1,400&family=Teko:wght@400;600&display=swap');
@import url('https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css');
/*
font-family: 'Teko', sans-serif; <-- Menus
font-family: 'Raleway', sans-serif; <-- Body
*/


/* Body */
* {
	box-sizing: border-box;
}
body {
	margin:  0;
	font-family: 'Raleway', sans-serif;
	background-repeat: no-repeat;
	background-size: 100% auto;
}

/* Key Visual */

#keyvisual {
	height: 100vh;
	width:  100vw;
	position: relative;
	box-sizing: border-box;
}

#adults-only {
	position: absolute;
	top: 2.5%;
	right: 2.5%;
	width: 5em;
	display: block;
}

#social {
	position: absolute;
	top: 7em;
	right: 2.5%;
}


#branding {
	width:  100%;
	display:  flex;
	justify-content:  space-between;
	align-items: flex-end;
	position: absolute;
	bottom: 0;
	padding:  2em;
}

#mglogo,
#brandlogo {
	width: 15%;
}
#branding img {
	width: 100%;
}

#gamelogo {
	width: 100%;
	position: absolute;
	bottom:  15%;
	text-align: center;
}
#gamelogo img {
	width:  30%;
	display: inline;
}

/* Announcement Banner */
#banner { 
	background-color: #ee3496;

	padding: .5em 10em .5em 10em;
	text-align: center;
	display: inline-block;
	position: absolute;
	top: 4em;
	left: -10em;
	text-transform: uppercase;
	text-decoration: none;
	color: #fff;
	font-weight: bold;
	 -webkit-transform: rotate(-45deg);
	 transform: rotate(-45deg);
	 -webkit-box-shadow: 5px 5px 5px 0px rgba(0,0,0,0.25);
	-moz-box-shadow: 5px 5px 5px 0px rgba(0,0,0,0.25);
	box-shadow: 5px 5px 5px 0px rgba(0,0,0,0.25);
	transition: 300ms;
} 

#banner:hover,
#banner:active,
#banner:focus {
	background-color: #ffffff;
	color: #ee3496;
	transition: 300ms;
}	

/* Description Section */

h1 {

}
h2 {
	border-bottom:  1px solid #000000;
}

main {
	display: flex;
	width:  100vw;
	postion: relative;
	max-width: 1000px;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 5em;
	background-color: rgba(255,255,255,.75);
	-webkit-box-shadow: 0px 0px 5px 0px rgba(255,255,255,.75);
	-moz-box-shadow: 0px 0px 5px 0px rgba(255,255,255,.75);
	box-shadow: 0px 0px 5px 0px rgba(255,255,255,.75);
	
}

main #description {
	padding: 2em;
}

#video {
	position: relative;
	padding-bottom: 56.25%;
	padding-top: 25px;
	height: 0;
	margin-bottom: 1em;
}

#video iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

#gallery {
	display: flex;
	flex-wrap: wrap;
	justify-content:  space-between;
	align-items: flex-start;
}
#gallery a {
	width: 33%;
	position: relative;
	background-color: #ee3496;
	text-decoration: none;
	margin-bottom: .5em;
}
#gallery img {
	width: 100%;
	margin-bottom: -.25em;
	padding: 0;
	opacity: 1;
}

#gallery a:hover {
	-webkit-box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.75);
	-moz-box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.75);
	box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.75);
	transition: 300ms;
}

.nsfw::before {
	content: '18+';
	color: #ffffff;
	font-family: 'Teko', sans-serif;
	font-weight:  600;
	text-align: center;
	width: 100%;
	margin: 0;
	padding: 0;
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	font-size: 1.5em;
}

#gallery .nsfw img {
	opacity: .25;
	filter:  blur(5px);
}

#copyright {
	text-align: center;
}

/* Lightbox */

#lightbox a {
	z-index: 100;
	background: rgba(0,0,0,.75);
	position: fixed;
	height: 100vh;
	width: 100vw;
	top: 0;
	right: 0;
	display: none;
	text-align: center;
}

#lightbox a:target {
	display: block;
}

#lightbox a img {
	max-width: 75vw;
	margin: 0;
	position: relative;
	top: 50%;
	transform: translateY(-50%);
	-webkit-box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.75);
	-moz-box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.75);
	box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.75);
}

/* Data Sheet */

aside {
	flex: 0 0 20em;
	padding: 1em;
}
aside img {
	width: 100%;
}

dl, dt, dd {}

dt {
	font-family: 'Teko', sans-serif;
	font-weight:  600;
}

dt:first-child {
	font-size: 1.5em;
}

dt::after {
	content: ': ';
	font-weight: 400;
}

dt:first-child::after {
	content: '';
}

aside > a {
	color: inherit;
	text-decoration: none;
	font-family: 'Teko', sans-serif;
	font-weight:  600;
	text-align: center;
	font-size: 1.25em;
	display: block;
	width: 100%;
	background-color: #ffffff;
	color: #ee3496;
	border:  3px solid #ee3496;
	margin-top: .5em;
	padding: .5em;

}

aside > a:hover {
	background-color: #ee3496;
	border:  3px solid #ee3496;
	color: #ffffff;
	transition: 300ms;
}

/* Shadows */

#footer,
#video,
aside img {
	-webkit-box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.75);
	-moz-box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.75);
	box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.75);
}

/* Age Gate
  --------------------------------------------- */  
#bodywrap {
	margin:  0;
	font-family: 'Raleway', sans-serif;
	background-repeat: no-repeat;
	background-size: 100% auto;
}

#agegate {
  	display:  block;
  	top: 0;
  	left:  0;
  	height: 100vh;
  	width:  100vw;
  	position:  fixed;
  	background-color:  rgba(0,0,0,.75);
  	color:  black;
  	z-index:  100;
  	text-align: center;
  }

#agegate > div {
	text-align: center;
	margin: 0;
	margin-left: 25%;
  position: relative;
  top: 50%;
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
  background-color: white;
  width:  50%;
  border-radius: 2em;
  padding: 2em;
}

#agegate p {
	margin-bottom: 2em;
}

#agegate label,
#agegate a {
	background-color: #ee3496;
	color:  white;
	text-decoration:  none;
	padding:  1em 2em;
	border-radius: 1em;
	cursor: pointer;
}

#agegate a {
	background-color:  grey;
}

#agecheck {
	display:  none;
}

#agecheck:not(:checked) ~ #bodywrap {
	filter: blur(1rem);

}
#agecheck:checked + #agegate {
	display: none;
}

@media (max-aspect-ratio: 1/1) {

  main {
    flex-wrap: wrap;
  }
  aside {
    order: -1;
    margin-left: auto;
    margin-right: auto;
  }
}