{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

@font-face {
	font-family: 'StudioSim';
	src: url('studio-sim.woff2') format('woff2');
}

body {
    font-family: 'StudioSim', sans-serif;
    background-color: #1a1a1a;
    color: white;
    overflow: hidden;
}

h1 {
	font-size: 1000%
}

p {
	font-size: 500%
}

.parallax-wrapper {
    height: 100vh;
    overflow-x: hidden;
    overflow-y: auto;
    perspective: 10px; /* Creates the 3D space */
}

.parallax-header {
    height: 100vh;
    justify-content: center;
    align-items: center;
    transform-style: preserve-3d;
    z-index: -10;
}

.layer {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: top center;
	background-repeat: no-repeat;
}

/* Formula for Scale: 1 + (translateZ * -1) / perspective 
   This keeps the image looking its original size while moved back.
*/

.layer-bg {
    background-image: url('bg_sky.png'); 
    transform: translateZ(-40px) scale(5); 
	image-rendering: pixelated;
}

.layer-beach {
    background-image: url('bg_beach.png');
    transform: translateZ(-30px) translateY(1%) scale(4); 
	image-rendering: pixelated;
}

.layer-fair {
    background-image: url('bg_fair.png');
    transform: translateZ(-25px) translateY(25%) scale(3.5);
	image-rendering: pixelated;
}


.layer-casino {
    background-image: url('bg_casino.png');
    transform: translateZ(-20px) translateY(-25%) scale(3);
	image-rendering: pixelated;
}


.layer-art {
    background-image: url('bg_art.png');
    transform: translateZ(-20px) translateY(5%) scale(3);
	image-rendering: pixelated;
}

.layer-zoo {
    background-image: url('bg_zoo.png');
    transform: translateZ(-15px) translateY(15%) scale(2.5);
	image-rendering: pixelated;
}

.layer-sewer {
    background-image: url('bg_sewer.png');
    transform: translateZ(-10px) translateY(20%) scale(2);
	image-rendering: pixelated;
}

.layer-title-world {
    background-image: url('title_world.png');
    transform: translateZ(-5px) translateY(-10%) translateX(20%) scale(.6);
	image-rendering: pixelated;
	filter: drop-shadow(0 0 10px rgba(0, 0, 0, 0.8));
	background-size: contain;
	background-repeat: no-repeat;
    background-position: center;
}

.layer-title-gnar {
    background-image: url('title_gnar.png');
    transform: translateZ(-19px) translateY(-100%) scale(1.2);
	image-rendering: pixelated;
	filter: drop-shadow(0 0 10px rgba(0, 0, 0, 0.8));
	background-size: contain;
	background-repeat: no-repeat;
    background-position: center;
}

.layer-road {
    background-image: url('bg_road.png');
    transform: translateZ(0) translateY(0%); /* Moves at normal speed */
	image-rendering: pixelated;
}


.title {
    font-size: 5rem;
    text-shadow: 2px 2px 10px rgba(0,0,0,0.5);
    transform: translateZ(-5px) scale(1.5);
}

.content {
    background: #111111;
    margin-top: 0;
    padding: 3rem;
    position: relative;
	transform: translateZ(0) translateY(0%);
}

.grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 20px;
    margin-top: 2rem;
}

.item {
    background: #333;
    padding: 2rem;
    text-align: center;
    border-radius: 8px;
}