home_css.css

.top_page {
	min-height:100vh;
	/*background:yellow;*/
}
.home_gradient {
	position:absolute;
	height:830px;
	width:100%;
	left:0px;
	top:0px;
	z-index:-1;
}
.home_left {
	position:relative;
	float:left;
	width:30%;
	top:160px;
}
.logo_left {	
	position:relative;
	left:100px;
	height:280px;
	width:auto;
}
.Add_to_Discord_btn_mobile {display:none;}
.Join_server_btn_mobile {display:none;}
.Add_to_Discord_btn {
	position:relative;
	padding:13px;
	background:black;
	color:white;
	font-size:30px;
	border-radius:40px;
	top:70px;
	left:100px;
	width:250px;
	text-align:center;
	transition:0.7s;
	display:block;
}
.Add_to_Discord_btn:hover {
	background:#00AEEF;
	transition:0.7s;
	box-shadow: 1px 1px 2px transparent, 0 0 25px white, 0 0 5px white;
}
.Join_server_btn {
	position:relative;
	padding:13px;
	margin-top:10px;
	background:black;
	color:white;
	font-size:30px;
	border-radius:40px;
	top:70px;
	left:85px;
	width:280px;
	text-align:center;
	transition:0.7s;
	display:block;
}
.Join_server_btn:hover {
	background:#00AEEF;
	transition:0.7s;
	box-shadow: 1px 1px 2px transparent, 0 0 25px white, 0 0 5px white;
}
.home_text_right {
	position:relative;
	top:180px;
	right:220px;
	float:right;
	color:white;
	font-size:white;
	font-size:30px;
	width:55%;
	margin-bottom:300px;
}
.bottom_page {
	position:relative;
	min-height:100vh;
	width:90%;
	overflow-x:hidden;
	margin: 0 auto;
	z-index:40;
}
.commands_text {
	font-size:40px;
	font-weight:bold;
	text-align:center;
	margin-top:-10px;
	margin-bottom:80px;
	text-decoration:underline;
	text-underline-position: under;
	z-index:41;
}
.command_showcase_container {
	display:grid;
	grid-template-columns: auto auto; /*2 columns*/
	grid-template-rows: auto auto; /*2 ROWS*/
	gap:20px 0px; /*Vertical Horizontal*/
	position:relative;
	justify-items: center;
	align-items: center;
}
.command_container {
	background: #36393F;
	height:auto;
	width:600px;
	border-radius:40px;
}
.right_move_up {
	position:relative;
}
.right_move_up:nth-child(2) {top:-160px;} /*world*/
.right_move_up:nth-child(4) {top:-320px;} /*cases <country>*/
.right_move_up:nth-child(6) {top:-510px;} /*news*/
.right_move_up:nth-child(8) {top:-700px;} /*preventions*/
.right_move_up:nth-child(10) {top:-600px;} /*preventions*/
.command_name {
	color:white;
	font-size: 35px;
	text-align:center;
}
.about_command {
	color:white;
	font-size: 20px;
	text-align:center;
}
.image_of_command {
	position:relative;
	width:95%;
	height:auto;
	border-radius: 16px;
	display: block;
	margin-left: auto;
	margin-right: auto;
	margin-bottom:30px;
}
.video {
	width:600px;
	height:400px;
}
.bottom_page_gradient {
	transform: rotate(180deg);
	width:100vw;
	height:500px;
	position:absolute;
	margin-top:-500px;
	z-index:-1;
}
@media only screen and (max-width: 1550px) { 
	.home_text_right {
		top:140px;
		width:50%;
		right:100px;
	}
}
@media only screen and (max-width: 1400px) { 
	.bottom_page {
		width:100%;
	}
	.command_container {
		background: #36393F;
		height:auto;
		width:590px;
		border-radius:40px;
	}
}
@media only screen and (max-width: 1250px) { 
	.home_text_right {
		top:140px;
		width:55%;
		right:60px;
	}
	.bottom_page {
		width:98%;
	}
	.command_container {
		width:500px;
	}
	.right_move_up:nth-child(2) {top:-140px;} /*world*/
	.right_move_up:nth-child(4) {top:-280px;} /*cases <country>*/
	.right_move_up:nth-child(6) {top:-440px;} /*news*/
	.right_move_up:nth-child(8) {top:-600px;} /*preventions*/
	.right_move_up:nth-child(10) {top:-560px;} /*preventions*/
	.video {
		width:500px;
		height:350px;
	}
}
@media only screen and (max-width: 1090px) { 
	.home_text_right {
		top:140px;
		width:55%;
		right:60px;
	}
}
/*Layout changes*/
@media only screen and (max-width: 1070px) { 
	.home_gradient {
		height:1050px;
	}
	.home_left {
		float:none;
		width:100%;
		top:160px;
	}
	.logo_left{
		margin: 0 auto;
		left:0px;
		display: block;
		margin-left: auto;
		margin-right: auto;
		width:200px;
		height:auto;
	}
	.home_text_right {
		width:90%;
		float:none;
		right:0px;
		margin:0 auto;
		top:150px;
	}
	.Add_to_Discord_btn {display:none;}
	.Join_server_btn {display:none;}

	.Add_to_Discord_btn_mobile {
		display:inline;
		position:relative;
		padding:13px;
		background:black;
		color:white;
		font-size:30px;
		border-radius:40px;
		top:170px;
		left:50px;
		width:250px;
		text-align:center;
		transition:0.7s;
	}
	.Add_to_Discord_btn_mobile:hover {
		background:#00AEEF;
		transition:0.7s;
		box-shadow: 1px 1px 2px transparent, 0 0 25px white, 0 0 5px white;
	}
	.Join_server_btn_mobile {
		display:inline;
		position:relative;
		padding:13px;
		margin-top:10px;
		background:black;
		color:white;
		font-size:30px;
		border-radius:40px;
		top:170px;
		left:85px;
		width:280px;
		text-align:center;
		transition:0.7s;
	}
	.Join_server_btn_mobile:hover {
		background:#00AEEF;
		transition:0.7s;
		box-shadow: 1px 1px 2px transparent, 0 0 25px white, 0 0 5px white;
	}
	.bottom_page {
		top:300px;
	}
	.command_showcase_container {
		grid-template-columns: auto; /*2 columns*/
		gap:20px 0px; /*Vertical Horizontal*/
	}
	.command_container {
		height:auto;
		width:630px;
		border-radius:40px;
	}
	.video {
		width:600px;
	}
	.right_move_up:nth-child(2) {top:0px;} /*world*/
	.right_move_up:nth-child(4) {top:0px;} /*cases <country>*/
	.right_move_up:nth-child(6) {top:0px;} /*news*/
	.right_move_up:nth-child(8) {top:0px;} /*preventions*/
	.right_move_up:nth-child(10) {top:0px;} /*preventions*/
	
	.bottom_page_gradient {
		height:500px;
		margin-top:-300px;
	}
}
@media only screen and (max-width: 850px) { 
	.home_gradient {
		height:1100px;
	}
	.bottom_page {
		top:300px;
	}
	.command_container {
		height:auto;
		width:580px;
		border-radius:40px;
	}
	.video {
		width:560px;
	}
	.bottom_page_gradient {
		height:800px;
		margin-top:0px;
	}
}
@media only screen and (max-width: 680px) { 
	.Add_to_Discord_btn_mobile {
		display:block;
		left:0px;
		margin: 0 auto;
	}
	.Join_server_btn_mobile {
		display:block;
		left:0px;
		top:180px;
		margin: 0 auto;
	}
	.home_gradient {
		height:1380px;
	}
	.bottom_page {
		top:480px;
	}
	.command_container {
		height:auto;
		width:500px;
		border-radius:40px;
	}
	.video {
		width:480px;
	}
	.bottom_page_gradient {
		height:500px;
		margin-top:0px;
	}
}
@media only screen and (max-width: 555px) {
	.home_gradient {
		height:1480px;
	}
	.bottom_page {
		top:400px;
	}
	.command_container {
		height:auto;
		width:400px;
		border-radius:40px;
	}
	.video {
		width:400px;
		height:300px;
	}
	.bottom_page_gradient {
		height:500px;
		margin-top:0px;
	}
}
@media only screen and (max-width: 455px) {
	.home_gradient {
		height:1280px;
	}
	.bottom_page {
		top:500px;
	}
	.want_to {
		font-size:30px;
	}
	.home_text_right {
		font-size:25px;
	}
	.Add_to_Discord_btn_mobile {
		padding:13px;
		font-size:27px;
		top:170px;
		width:250px;
	}
	.Join_server_btn_mobile {
		padding:13px;
		margin-top:10px;
		font-size:27px;
		top:170px;
		width:280px;
	}
	.command_container {
		height:auto;
		width:350px;
		border-radius:40px;
	}
	.video {
		width:350px;
		height:300px;
	}
	.bottom_page_gradient {
		height:600px;
		margin-top:0px;
	}
	.command_name {
		font-size:28px;
	}
	.about_command {
		font-size:20px;
	}
}
@media only screen and (max-width: 390px) {
	.logo_left{
		width:160px;
		height:auto;
		top:-20px;
	}
	.home_gradient {
		height:1380px;
	}
	.command_container {
		height:auto;
		width:340px;
		border-radius:40px;
	}
	.video {
		width:340px;
		height:280px;
	}
	.bottom_page_gradient {
		height:600px;
		margin-top:0px;
	}
	.command_name {
		font-size:28px;
	}
	.about_command {
		font-size:20px;
	}
}
@media only screen and (max-width: 376px) {
	.bottom_page {
		top:450px;
	}
	.command_container {
		height:auto;
		width:320px;
		border-radius:40px;
	}
	.video {
		width:320px;
		height:280px;
	}
	.bottom_page_gradient {
		height:550px;
		margin-top:0px;
	}
}
@media only screen and (max-width: 355px) {
	.bottom_page {
		top:400px;
	}
	.command_container {
		height:auto;
		width:95%;
		border-radius:20px;
	}
	.command_name {
		font-size:24px;
	}
	.about_command {
		font-size:18px;
	}
	.video {
		width:95%;
		height:auto;
	}
	.bottom_page_gradient {
		height:550px;
		margin-top:0px;
	}
}