/* CSS Document */

/* Setup */

body {
	background: #f00;
	margin: 0;
	padding: 0;
	background-image: url("Youtube.png");
	background-repeat: no-repeat;
	background-attachment: fixed;
	background-position: 1% 1%;
	background-size: 15%;
	width: 100vw;
	height: 100vh;

}

body, html {
	overflow-x: hidden;
	max-width: 100%;
}


div{
	overflow-x: hidden;
}

.container {
	overflow: hidden !important;
	position: fixed;
	width: 100vw;
	position: relative;
}
/* Logos */







.logo {
	margin: 25vh;
	padding: 0;
	width: 25%;
	height: auto;
	display: block;
	position: absolute;
	top: 25%;
	margin-top: -12.5%;
	margin-bottom: -12.5%;
	transition: .25s cubic-bezier(0.27, -0.62, 0.49, 1.96);
	left: 25%;
	margin-left: -12.5%;
	-webkit-filter: drop-shadow(.5vw .5vw .5vw #2222225e);
  filter: drop-shadow(.5vw .5vw .5vw #2222225e);
}
.logo:hover {
	width: 26%;
	margin-left: -13%;
	margin-top: -13%;
	-webkit-filter: drop-shadow(1.5vw 1.5vw 1.5vw #2222225e);
  filter: drop-shadow(1.5vw 1.5vw 1.5vw #2222225e);
}

.logo2 {
	top: 75%;
}

.logoRight {
	left: 75%;
}

@media only screen and (min-width: 100vh) {
	.logo {
		width: 25vh;
		top: 25vh;
		margin-top: -12.5vh;
		margin-bottom: -12.5vh;
		left: 25%;
		margin-left: -12.5vh;
		-webkit-filter: drop-shadow(.5vh .5vh .5vh #2222225e);
	  filter: drop-shadow(.5vh .5vh .5vh #2222225e);
	}
	.logo:hover {
		width: 26vh;
		margin-top: -13vh;
		margin-left: -13vh;
		-webkit-filter: drop-shadow(1.5vh 1.5vh 1.5vh #2222225e);
	  filter: drop-shadow(1.5vh 1.5vh 1.5vh #2222225e);
	}

	.logo2{
		top: 75vh;
	}

	.logoRight{
		left: 75%;
	}
}





/* LogoBackgrounds */
.Youtube {
	float: left;
	width: 50%;
	height: 50vh;
	background-color: red;
	padding: 0;
	margin: 0;
	text-align: center;
	transition: 1s ease;

}


.Twitch {
	padding: 0;
	margin: 0;
	width: 50%;
	height: 50vh;
	background-color: #6441A4;
	margin-left: 50%;

}

.Instagram {
	width: 50%;
	height: 50vh;
	background-color: pink;
	padding: 0;
	margin: 0;
	float: left;
  background: linear-gradient(58.9deg, #FFD96D, #FF6F27, #FF143E, #C80090, #5654D6);
}

.Minecraft {
	width: 50%;
	height: 50vh;
	background-color: green;
	margin-left: 50%;
	background-image: url("Images/stone.jpg");
	background-size: 25%;
}




/* Trays */
.tray {
	width: 50%;
	height: 50vh;
	display: block;
	position: absolute;
	transition: 1s ease;
	margin: 0;
	background-color: #0000007d;
	opacity: 0;
}


.YoutubeTray {
	top: 0;
	left: -50%;
	float: left;
}

.TwitchTray {
	top: 0;
	left: 100%;
	float: left;
}

.InstagramTray {
	top: 50vh;
	left: -50%;
	float: left;
}

.MinecraftTray {
	top: 50vh;
	left: 100%;
	float: left;
}

.TrayHeader {
	display: block;

}



.YTHeader {
	width: 20%;
	margin: 6.5vh 40%;
}

.TwitchHeader{
	width: 15%;
	margin: 6.5vh 42.5%;
}

.twitchFrame{
	position: absolute;
	display: block;
	margin: 0;
}

.InstagramHeader{
	width: 25%;
	margin: 6.5vh 37.5%;
}

.SMPHeader {
	width: 60%;
	margin: 2.5vh 20%;
}

.discordFrame{
	width: 50%;
	height: 45%;
	margin: 0 25%;
	display: block;
	min-height: 300px;
}

.discordJoinDiv{
	background-color: #7289DA;
	width: 15%;
	text-align: center;
	display: block;
	border-radius: 1em;
	margin: 1vh 42.5%;
}
.discordJoin{
	width: 70%;
}

.xButton {
	float: right;
	width: 5vw;
	margin: 3.5vw;
	transition: .25s cubic-bezier(0.27, -0.62, 0.49, 1.96);
	-webkit-filter: drop-shadow(0.5vw 0.5vw 0.5vw #2222225e);
	filter: drop-shadow(0.5vw 0.5vw 0.5vw #2222225e);
}

.xButtonRight {
	float: left;
}

.xTwitch {
	margin: 18.5vw 3.5vw;
}



.xButton:hover{
	width: 6vw;
	margin: 3vw;
	-webkit-filter: drop-shadow(1.5vw -1.5vw 0.5vw #2222225e);
  filter: drop-shadow(1.5vw -1.5vw 0.5vw #2222225e);
  transform: rotate(90deg);
}
.xTwitch:hover {
	margin: 18vw 3vw;
}

@media only screen and (min-width: 100vh) {
	.xButton {
		width: 5vh;
		margin: 3.5vh;
		-webkit-filter: drop-shadow(0.5vh 0.5vh 0.5vh #2222225e);
		filter: drop-shadow(0.5vh 0.5vh 0.5vh #2222225e);
	}

	.xButton:hover{
		width: 6vh;
		margin: 3vh;
		-webkit-filter: drop-shadow(1.5vh -1.5vh 0.5vh #2222225e);
	  filter: drop-shadow(1.5vh -1.5vh 0.5vh #2222225e);
	  transform: rotate(90deg);
	}

	.xTwitch {
		margin: 7.5vh 3.5vh;
	}

	.xTwitch:hover {
		margin: 7vh 3vh;
	}
}