#border, #top, #bottom, #left, #right {
	background: #ef4260;
	position: fixed;
	}

	#left, #right {
		top: 0; bottom: 0;
		width: 30px;
		}
		#left { left: 0; }
		#right { right: 0; }
		
	#top, #bottom {
		left: 0; right: 0;
		height: 30px;
		}
		#top { top: 0; }
		#bottom { bottom: 0; }

.clear-parent {
  overflow: hidden;
}




.home {
	width: 55%;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -40%);
	cursor: pointer;
}

.letter {
	float: left;
	width: 16.6%;

	}

img {
	width: 100%;
	height: auto;
}


.page-n, .page-a, .page-b, .page-i, .page-l, .page-a2 {
	display: none;
	color: white;
	font-family: 'Quicksand', sans-serif;
	font-weight: 300;
	font-size: 30px;
	letter-spacing: .5px; 
	text-align: center;
	position: absolute;
	top: 20%;
	width: 15%;
	transform: translate(5%, 15%);
	

}

@media (max-width: 768px) {
  .page-n, .page-a, .page-b, .page-i, .page-l, .page-a2 {
    font-size: 10px;
    top: 15%;
    width: 25%;
    transform: translate(5%, 10%);
  }
}

/* Adjust text size and position for even smaller screens */
@media (max-width: 480px) {
  .page-n, .page-a, .page-b, .page-i, .page-l, .page-a2 {
    font-size: 8px;
    top: 10%;
    width: 35%;
    transform: translate(5%, 5%);
  }
}