body{
	background-color: purple;
	background-image: url(img/bg.png);
	image-rendering: pixelated;
	background-size: fit;
	background-position: center center;
	background-repeat: repeat-y;
	height: 100vh;
	
	line-height: 1.3;
	font-size: 18pt;
	
	font-family: /*Futura, Futura-Medium,*/Trebuchet MS,Arial,sans-serif;
	color: #111111;
	
	display: block;
	word-wrap: normal;
    white-space: normal;
}

header{
	background-color: rgba(128, 0, 128, 0.9);
	image-rendering: auto;
}
header a:hover{
	color: rgb(255, 0, 255);
}

/* Handle */
::-webkit-scrollbar-thumb {
  background: rgb(220,0,220);
  /*border-radius: 12px;*/
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
  background: rgb(255,10,255);
}


.things-bg{
	background-image: url(img/things.png);
	background-size: 900px;
	background-attachment: fixed;
	background-position: center 0;
}

/*
.things-bg{
	background-image: url(img/things.png);
	background-size: 20%;
	
	position: fixed;
	top: 50%;
	right: 50%;
	bottom: 0;
	left: 0;
	
	width: 200vh;
	height: 100vh;
	max-height: 100%;
	
	z-index: -3;
	transform: translateZ(-20px) scale(3);
	perspective: 50px;
	height: 100vh;
	overflow-x: hidden;
	overflow-y: hidden;
}

.parallax {
  perspective: 1px;
  height: 100vh;
  overflow-x: hidden;
  overflow-y: auto;
}
.parallax__layer {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}
.parallax__layer--base {
  transform: translateZ(0);
}
.parallax__layer--back {
  transform: translateZ(-1px);
}
*/

.mw-logo-container{
	height: 250px;
	max-width: 90%;
	margin-left: auto;
	margin-right: auto;
	padding: 5px;
}
.mw-logo{
	background-image: url(img/logo.png);
	background-repeat: no-repeat;
	background-size: contain;
	background-position: center center;
	
	height: 100%;
	image-rendering: pixelated;
	object-fit: contain;
}

.mobile-show{
	display: none;
}

.content{
	background-color: rgba(26, 0, 26, 0.8);
	color: white;
	image-rendering: auto;
	border-radius: 0px;
	font-size: 12pt;
}

.content-slim{
	width: 700px;
	margin-left: auto;
	margin-right: auto;
	max-width: 100%;
}

.auto-resizable {
  max-width: 100%;
  margin: 0px auto;
}

.auto-resizable > div {
  position: relative;
  padding-bottom: 56.25%;
  height: 0px;
}

.auto-resizable iframe {
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
}

.steam-embed iframe{
	width: 646px;
	height: 190px;
}

.steam-text{
	background-color: #5324ab;
	display: none;
}
.steam-text a{
	color: white;
}

.float-character{
	
}
.float-character img{
	width: auto;
	height: 325px;
}
.float-character-mobile{
	margin-top: 55px;
	text-align: center;
	width: 100%;
	max-width: 500px;
	margin-left: auto;
	margin-right: auto;
}
.float-character-mobile img{
	width: 30%;
	height: auto;
}

button{
	background-color: purple;
	border-radius: 10px;
	border: none;
	color: white;
	padding: 10px;
}

.screenshots{
	overflow: auto;
	align-items: center;
	justify-content: center;
	flex-direction: row | column;
	flex-wrap: wrap;
	gap: 10px;
	
	display: flex;
}

.screenshots img{
	width: 40%;
	height: auto;
}

.social-link-button{
	border-radius: 10px;
	width: 380px;
	max-width: 90%;
	text-align: center;
	font-weight: bold;
	
	margin-top: 55px;
	margin-bottom: 55px;
	padding-top: 15px;
	padding-bottom: 15px;
	padding-left: 10px;
	padding-right: 10px;
	margin-left: auto;
	margin-right: auto;
}

.discord-link{
	background-color: #5865F2;
}
.discord-link a{
	color: white;
}
.patreon-link{
	background-color: #f96854;
}
.patreon-link a{
	color: white;
}

.team-section{
	max-width: 820px;
	width: 100%;
	margin-left: auto;
	margin-right: auto;
	
	overflow: auto;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
	
	display: flex;
	gap: 10px;
}

.team-member-container{
	max-width: 400px;
	width: 90%;
	margin: auto;
	background-color: rgb(90,30,90);
	margin-bottom: 15px;
	min-height: 150px;
	height: 150px;
	overflow: hidden;
}
.team-member-container .profile-pic{
	float: right;
	image-rendering: pixelated;
}
.team-member-container .profile-pic img{
	height: 100%;
	width: auto;
}
.team-member-info{
	text-align: left;
	margin: 5px;
	float: left;
	width: calc(100% - 160px);
}
.team-member-info .name{
	font-size: 16pt;
}
.team-member-info .role{
	min-height: 63px;
}
.team-member-info .role ul{
	list-style-position: inside;
	padding-inline-start: 0;
	margin-block-start: 0;
	margin-block-end: 0;
}

.team-member-info .socials-box{
	background-color: rgb(160,30,160);
	margin-top: 10px;
	border-radius: 12px;
	width: calc(100% - 0px);
	/*min-width: 150px;*/
	height: 20px;
	color: white;
	text-align: center;
	
	padding-top: 10px;
	padding-bottom: 10px;
	padding-left: 0px;
	padding-right: 0px;
}

.socials-box img{
	height: 100%;
	width: auto;
	margin-left: 5px;
	margin-right: 5px;
}

footer{
	background-color: rgba(128, 0, 128, 0.9);
	image-rendering: auto;
}

/* when mobile */
@media (max-width:1000px){
	.main-container{
		background-size: 700px;
		background-attachment: scroll;
	}
	.screenshots img{
		width: 100%;
		max-width: 613px;
	}
	.team-member-container{
		width: 100%;
	}
	.mobile-hide{
		display: none;
	}
	.mobile-show{
		display: block;
	}
}

@media (max-width:370px){
	.team-member-info{
		float: left;
		display: inline;
	}
	
	.profile-pic{
		left: 50%;
	}
}