style.css

/***********************************/
/* GLOBAL */
/***********************************/
canvas {
	position: absolute;
	z-index: 2;
	display: none;
}
#main {
	display: initial;
}
html {
	background-color: #000;
	width: 100%;
	height: 100%;
}
body {
	position: relative;
	margin: 0;
	width: 1500px;
	height: 599px;
	/* background-image: url("../assets/marioBG2.png");
	background-position-y: -245px;
	background-size: 1500px 844px;
	background-repeat: no-repeat;
	border-radius: 10px; */
}

/* BACKGROUND / GROUND */
#foreground {
	position: absolute;
	top: 468px;
	width: 1500px;
	/* border-top: 1px solid black; */
}
#background {
	position: absolute;
	width: 1500px;
	height: 599px;
	background-image: url("img/marioBG2.png");
	background-position-y: -245px;
	background-size: 1500px 844px;
	background-repeat: no-repeat;
	/* border-radius: 10px; */
}
/***********************************/
/* CUBES / PLATFORM */
/***********************************/
.cube {
	position: absolute;
	width: 40px;
	height: 40px;
	border-radius: 5px;
	border: 2px solid black;
	background-color: #8dc63f;
	overflow: visible;
}
.break {
	background-color: #b87333;
}
#cube1 {
	top: 300px;
	left: 500px;
}
#cube2 {
	top: 300px;
	left: 544px;
}
#cube3 {
	top: 300px;
	left: 588px;
}
#cube4 {
	top: 300px;
	left: 632px;
}
#cube5 {
	top: 300px;
	left: 676px;
}
#cube6 {
	top: 300px;
	left: 720px;
}
#cube7 {
	top: 300px;
	left: 764px;
}
#cube8 {
	top: 300px;
	left: 808px;
}
#cube9 {
	top: 300px;
	left: 852px;
}
/***********************************/
/* ICONS */
/***********************************/
#linkedin {
	z-index: 0;
	position: absolute;
	top: -2px;
	left: -2px;
	width: 40px;
	height: 40px;
	border: 2px solid black;
	border-radius: 5px;
}
#linkedinLink {
	display: none;
	position: fixed;
	top: 20px;
	left: 20px;
	border: 2px solid black;
	border-radius: 5px;
	cursor: pointer;
}
#in {
	z-index: 0;
	display: initial;
	top: -2px;
	left: -2px;
	/* top: 0px;
	left: 0px; */
	border-radius: 5px;
	border: 2px solid black;
}
#cvlink {
	display: none;
	position: fixed;
	top: 20px;
	left: 80px;
	border-radius: 5px;
	border: 2px solid black;
	cursor: pointer;
}
#cv {
	z-index: 0;
	display: initial;
	top: -2px;
	left: -2px;
	/* top: 0px;
	left: 0px; */
	border-radius: 5px;
	border: 2px solid black;
}
#folderlink {
	display: none;
	position: fixed;
	top: 20px;
	left: 140px;
	border-radius: 5px;
	border: 2px solid black;
	cursor: pointer;
}
#folder {
	z-index: 0;
	display: initial;
	top: -2px;
	left: -2px;
	/* top: 0px;
	left: 0px; */
	border-radius: 5px;
	border: 2px solid black;
}

/***********************************/
/* NINTENDO CONTROLS */
/***********************************/

#right {
	background-image: url("img/rightbutton.png");
	background-size: 75px 60px;
	width: 75px;
	height: 60px;
	bottom: 95px;
	left: 135px;
}
#left {
	background-image: url("img/leftbutton.png");
	background-size: 75px 60px;
	width: 75px;
	height: 60px;
	bottom: 95px;
	left: 40px;
}
#top {
	background-image: url("img/topbutton.png");
	background-size: 60px 75px;
	width: 60px;
	height: 75px;
	bottom: 135px;
	left: 95px;
}
#down {
	background-image: url("img/downbutton.png");
	background-size: 60px 75px;
	width: 60px;
	height: 75px;
	bottom: 40px;
	left: 95px;
}
#A {
	background-image: url("img/A.png");
	background-size: 75px 75px;
	width: 75px;
	height: 75px;
	bottom: 40px;
	right: 120px;
}
#B {
	background-image: url("img/B.png");
	background-size: 75px 75px;
	width: 75px;
	height: 75px;
	bottom: 95px;
	right: 40px;
}
#right,
#left,
#top,
#down {
	display: none;
	user-select: none;
	opacity: 0.4;
	position: absolute;
	z-index: 10;
}
#A,
#B {
	display: none;
	opacity: 0.4;
	border-radius: 50%;
	z-index: 10;
}

/***********************************/
/* RESPONSIVE */
/***********************************/
/* controls for tablets / mobile */
@media screen and (max-height: 1024px) and (max-width: 1024px) {
	#right,
	#left,
	#top,
	#down {
		position: fixed;
		display: initial;
	}
	#A,
	#B {
		position: fixed;
		display: initial;
	}
}
@media screen and (max-width: 400px) {
	#right {
		bottom: 75px;
		left: 115px;
	}
	#left {
		bottom: 75px;
		left: 20px;
	}
	#top {
		bottom: 115px;
		left: 75px;
	}
	#down {
		bottom: 20px;
		left: 75px;
	}
	#A {
		bottom: 20px;
		right: 100px;
	}
	#B {
		bottom: 75px;
		right: 20px;
	}
}

@media screen and (min-height: 599px) {
	html {
		display: flex;
		justify-content: center;
		align-items: center;
	}
	#folderlink,
	#cvlink,
	#linkedinLink {
		position: fixed;
		margin-top: 20px;
	}
}
@media screen and (min-width: 1500px) {
	html {
		display: flex;
		justify-content: center;
		align-items: center;
	}
	#folderlink,
	#cvlink,
	#linkedinLink {
		position: fixed;
	}
}
@media screen and (min-height: 599px) and (min-width: 1500px) {
	html {
		display: flex;
		justify-content: center;
		align-items: center;
	}
	#folderlink,
	#cvlink,
	#linkedinLink {
		position: absolute;
		margin-top: 0;
	}
	#background {
		border-radius: 20px;
	}
	#linkedinLink {
		margin-left: 0;
	}
}