@charset "UTF-8";

/*GLOBAL STYLES*/

body {
	background-color: #EDCBC5; 
}

#main {
	width: 100%;
	min-width: 320px;
	max-width: 1500px;
}

#logo {
	width: 50%;
	margin: 6.25em auto;
	
}

#logo img {
	width: 100%;
}

#stream {
	width: 85%;
	margin: 0 auto 5.875em auto;
}

#stream img {
	width: 100%;
}

#chatbox {
	width: 85%;
	margin: 0 auto 7.1875em auto;
	position: relative;
}

#chat {
	position: absolute;
	width: 100%;
	z-index: -1;
}

#chat img {
	width: 100%;
}

@media (min-width: 380px){
	
	#chatbox {
		margin-bottom: 10em;
	}
}

@media (min-width: 420px){
	
	#logo {
		width: 45%;
		margin-top: 7.5em;
		margin-bottom: 7.5em;
	}
	
	#logo img {
		width: 100%;
	}
	
	#stream {
		margin-bottom: 7.5em;
	}
	
	#chatbox {
		margin-bottom: 11em;
	}
}

@media (min-width: 490px){
	
	#logo {
		width: 40%;
		margin-top: 8em;
		margin-bottom: 8em;
	}
	
	#logo img {
		width: 100%; 
	}
	
	#stream {
		width: 85%;
		margin-bottom: 7.85em;
	}
	
	#stream img {
		width: 100%;
	}
	
	#chatbox {
		width: 85%;
		margin-bottom: 13.25em;
	}
	
	#chat {
		width: 100%;
	}
	
	#chat img {
		width: 100%;
	}
}

@media (min-width: 580px){
	#logo {
		width: 38%;
		margin-top: 8.75em;
		margin-bottom: 9.75em;
	}
	
	#logo img {
		width: 100%;
	}
	
	#stream {
		width: 85%;
		margin-bottom: 8.875em;
	}
	
	#stream img {
		width: 100%;
	}
	
	#chatbox {
		width: 85%;
		margin-bottom: 13.25em;
	}
	
	#chat {
		width: 100%;
	}
	
	#chat img {
		width: 100%;
	}
}

@media (min-width: 650px){
	
	#chatbox {
		margin-bottom: 14.25em;
	}
}

@media (min-width : 715px ){
	#logo {
		width: 35%;
		margin-top: 9.75em;
	}
	
	#logo img {
		width: 100%;
	}
	
	#stream {
		width: 85%;
		margin-bottom: 9.5em;
	}
	
	#chatbox {
		margin-bottom: 15.25em;
	}
}

/*TABLET SIZE*/
@media (min-width: 768px){
	
	#logo {
		width: 30%;
		margin-top: 8.4375em;
		margin-bottom: 9.375em;
	}
	
	#logo img {
		width: 100%;
	}
	
	#stream {
		width: 80%;
		margin-bottom: 11.875em;
	}
	
	#stream img {
		width: 100%;
	}
	
	#chatbox {
		width: 80%;
		margin-bottom: 14.25em;
	}
	
	#chat {
		width: 100%;
	}
	
	#chat img {
		width: 100%;
	}
}

@media (min-width: 900px){
	
	#logo {
		margin-top: 11.25em;
		margin-bottom: 11.25em;
	}
	
	#stream {
		width: 78%;
	}
	
	#stream img {
		width: 100%;
	}
	
	#chatbox {
		width: 78%;
		margin-bottom: 15.75em;
	}
	
	#chat {
		width: 100%;
	}
	
	#chat img {
		width: 100%;
	}
}

@media (min-width: 1050px){
	
	#logo {
		width: 30%;
		margin-top: 12.25em;
		margin-bottom: 12.25em;
	}
	
	#logo img {
		width: 100%;
	}
	
	#stream {
		width: 70%;
	}
	
	#stream img {
		width: 100%;
	}
	
	#chatbox {
		width: 70%;
		margin-bottom: 16.75em;
	}
	
	#chat {
		width: 100%;
	}
	
	#chat img {
		width: 100%;
	}
}

@media (min-width: 1130px){
	
	#logo {
		width: 30%;
		margin-top: 11em;
	}
	
	#logo img {
		width: 100%;
	}
	
	#chatbox {
		width: 35%;
		float: left;
		margin-top: 3em;
		margin-left: 1.5em;
		margin-bottom: 9em;
	}
	
	#chat {
		width: 100%;
	}
	
	#chat img {
		width: 100%;
	}
	
	#stream {
		width: 60%;
		float: right;
		margin-top: 6.75em;
	}
	#stream img {
		width: 100%;
	}
}

/*DESKTOP SIZE*/
@media (min-width: 1280px){
	
	#logo {
		width: 30%;
		margin-top: 11.25em;
	}
	
	#logo img {
		width: 100%;
	}
	
	#chatbox {
		width: 35%;
		float: left;
		margin-top: 5.3125em;
		margin-left: 1.5em;
		margin-bottom: 7em;
	}
	
	#chat {
		width: 100%;
	}
	
	#chat img {
		width: 100%;
	}
	
	#stream {
		width: 60%;
		float: right;
		margin-top: 10em;
		margin-right: 1em;
	}
	
	#stream img {
		width: 100%;
	}
}

@media (min-width: 1355px){
	
	#chatbox {
		width: 33%;
		margin-top: 3.3125em;
		margin-bottom: 9em;
		margin-left: 2em;
	}
	
	#stream {
		width: 58%;
		margin-top: 8.5em;
		margin-right: 2em;
	}
	
}

@media (min-width: 1500px){
	
	#logo {
		width: 28%;
	}
	
	#logo img {
		width: 100%;
	}
	
	#chatbox {
		width: 33%;
		margin-top: 1.3125em;
		margin-bottom: 11em;
		margin-left: 3em;
	}
	
	#stream {
		width: 58%;
		margin-top: 6.5em;
		margin-right: 3em;
	}
}