:root {
	--main-blue: #4dbbff;
	--secondary-blue: #265d80;
	--secondary-blue-light: #527e99;
}
*,
html,
body {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	font-family: Arial, Helvetica, sans-serif;
}
.header {
	flex-direction: column;
	background-color: rgb(255, 255, 255);
	padding: 10px;
	color: var(--secondary-blue);
	text-align: center;
}
.header h1 {
	font-size: 60px;
}

.title {
	display: flex;
	justify-content: center;
	align-items: center;
	margin: 15px 0;
}

.header img {
	height: 60px;
	margin-right: 20px;
}
.week {
	padding: 30px;
	/* color: white; */
	position: relative;
	margin-bottom: 20px;
}

.week h2 {
	font-size: 34px;
	text-align: center;
}

.week:nth-child(odd) {
	background-color: var(--main-blue);
	/* clip-path: polygon(0 0, 100% 0, 100% 85%, 33% 85%, 33% 100%, 0 100%); */
}

.week:nth-child(even) {
	background-color: white;
	/* clip-path: polygon(0 15%, 66% 15%, 66% 0%, 100% 0%, 100% 100%, 0 100%); */
}

/* adds current week to the first week div */
.week:first-child:before {
	content: "Current Week";
	position: absolute;
	left: 0px;
	top: 0px;
	font-size: 30px;
	color: white;
	background-color: var(--secondary-blue);
	padding: 10px 15px;
}
.videos {
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: row;
	flex-wrap: wrap;
	margin: 15px auto;
}

.square {
	width: 340px;
	display: flex;
	justify-content: center;
	text-decoration: none;
	color: white;
	text-shadow: 2px 2px 2px black;
	font-size: 40px;
	margin: 10px;
	background-position: center;
	background-size: cover;
	height: 200px;
	position: relative;
	overflow: hidden;
}

.square:before {
	position: absolute;
	top: -30px;
	right: 50%;
	transform: translateY(-50%);
	content: "";
	width: 60px;
	height: 60px;
	/* background-color: red; */
	background-image: url("images/robloxLogo.png");
	background-position: center;
	background-size: contain;
	transition: top 0.15s linear;
}

.square:after {
	position: absolute;
	bottom: -30px;
	left: 51%;
	transform: translatey(50%);
	content: "Play";
	font-size: 34px;
	transition: bottom 0.15s linear;
	font-weight: bold;
	text-shadow: 2px 2px 2px black;
}

.square:hover:before {
	top: 50%;
}

.square:hover:after {
	bottom: 50%;
}
.moreSkills {
	display: flex;
	justify-content: center;
	align-items: center;
	border-top: 2px solid var(--secondary-blue);
}

.moreSkills h3 {
	font-size: 1.6rem;
	margin-right: 30px;
}

.skills {
	display: flex;
	/* flex-direction: column; */
	flex-wrap: wrap;
	/* align-items: flex-start; */
	/* height: 120px; */
	width: 850px;
}

.skillButton {
	background-color: var(--secondary-blue);
	padding: 10px;
	margin: 10px;
	display: flex;
	justify-content: center;
	align-items: center;
	color: white;
	text-decoration: none;
}

.skillButton:hover {
	background-color: var(--secondary-blue-light);
}

.terrain {
	background-image: url("images/terrain.png");
}
.toolbox {
	background-image: url("images/toolbox.jpg");
}
.weather {
	background-image: url("images/rain.jpg");
}
.snow {
	background-image: url("images/snow.jpg");
}
.text {
	display: none;
}
.raceBuild {
	background-image: url("images/RaceBuild.jpg");
}
.skybox {
	background-image: url("images/Skybox.jpg");
}
.music {
	background-image: url("images/backgroundMusic.jpg");
}
.engine {
	background-image: url("images/engine.jpg");
}
.jumpPad{
	background-image: url("images/jumpPad.jpg");
}
.moving{
	background-image: url("images/moving.jpg");
}
.slow{
	background-image: url("images/Sand.jpg");
}
.sign{
	background-image: url("images/sign.jpg");
}
.door{
	background-image: url("images/door.jpg");
}
.spring{
	background-image: url("images/spring.jpg");
}
.lights{
	background-image: url("images/lights.jpg");
}
.object{
	background-image: url("images/object.jpg");
}
.map{
	background-image: url("images/map.jpg");
}
.items{
	background-image: url("images/StartingItems.png");
}
.servo{
	background-image: url("images/servo.jpg");
}
.ship{
	background-image: url("images/ship.jpg");
}

.leader{
	background-image: url("images/leaderboard.jpg");
}
.data{
	background-image: url("images/PlayerData.jpg");
}

.playtesting{
	background-image: url("images/playtesting.jpg");
}

.leader2{
	background-image: url("images/NewLeaderboard.jpg");
}


@media (max-width: 1024px) {
	.title h1 {
		font-size: 36px;
	}
	.week {
		padding: 60px 0;
	}
	.videos {
		flex-direction: column;
	}

	.square {
		width: 100%;
		height: 250px;
		background-size: contain;
		background-position: center;
		background-repeat: no-repeat;
		background-color: var(--secondary-blue);
		margin: 10px 0;
	}
	.moreSkills {
		margin-top: 50px;
		flex-direction: column;
	}

	.skills {
		max-width: 350px;
		justify-content: center;
		flex-direction: column;
	}
	.skillButton {
		padding: 24px;
		width: 100%;
	}
}