body {
	overflow: hidden;
	background-color: #000;
	margin: 0;
	font-family: 'Courier New', monospace;
	user-select: none;

}


#container {
	touch-action: none;
	position: absolute;
	width: 100%;
	height: 80%;
	top: 10%;
}

.label {
	color: #FFF;
	padding: 4px;
	background: rgba( 0, 0, 0, .6 );
	opacity: 0;
	transition-property: opacity;
	transition-duration: 2s;
}

#page-title, #page-footer {
	color: #FFF;
	padding: 4px;
	background: rgba( 0, 0, 0, .6 );
	font-size: 35px;
	position: absolute;
	width: 100%;
	text-align: center;
	margin-top: 20px;
	z-index: 300;
}


#tile-details-container {
	position: absolute;
    width: 40%;
    background: rgba( 1, 0, 0, .6 );
    color: white;
    padding: 10px;
	display: none;
}

#tile-details, #details-sub-info {
	padding: 10px;
	font-size: 15px;
}


#details-sub-info {
	font-style: italic;
}

#page-footer {
	bottom: 0px;
	margin-bottom: 30px;
	font-size: 30px;
}

#about, #cv {
	display: inline-block;
	cursor: pointer;

	-webkit-tap-highlight-color: transparent;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;


}

#about-details {
	position: absolute;
    width: 50%;
    background: rgba(1, 0, 0, .6);
    color: white;
    padding: 10px;
    font-size: 15px;
    left: 25%;
    top: 100%;
    z-index: 300;
}

#about-overlay {
	position: absolute;
	width: 100%;
	height: 100%;
	background: rgba(1, 0, 0, .6);
	z-index: 99;
	opacity: 0;
	transition-property: opacity;
	transition-duration: 1s;
	top: 0px;
	display: none;
}

#about-close, #details-close {
	position: absolute;
    right: 5px;
    top: 5px;
    font-size: 20px;
    cursor: pointer;

    -webkit-tap-highlight-color: transparent;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
}

a {
	text-decoration: none;
	color: #c3cbe1;
	font-weight: 600;
}

#loading-overlay {
	position: absolute;
	width: 100%;
	height: 100%;
	background: rgba(0, 0, 0, 1);
	z-index: 200;
}

.loader {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  overflow: hidden;
  color: #FFF;
  background-color: #000;
}

.loader ul {
  margin: 0;
  list-style: none;
  font-size: 4vw;
  transform-style: preserve-3d;
  animation: three-dimensions-circle 10s linear infinite;
}

.loader li {
  position: absolute;
  top: 50%;
  left: 50%;
}

.loader li:nth-child(1) {
  transform: translate(-50%, -50%) rotate(36deg) translateY(-260px) rotateX(90deg);
}

.loader li:nth-child(2) {
  transform: translate(-50%, -50%) rotate(54deg) translateY(-260px) rotateX(90deg);
}

.loader li:nth-child(3) {
  transform: translate(-50%, -50%) rotate(72deg) translateY(-260px) rotateX(90deg);
}

.loader li:nth-child(4) {
  transform: translate(-50%, -50%) rotate(90deg) translateY(-260px) rotateX(90deg);
}

.loader li:nth-child(5) {
  transform: translate(-50%, -50%) rotate(108deg) translateY(-260px) rotateX(90deg);
}

.loader li:nth-child(6) {
  transform: translate(-50%, -50%) rotate(126deg) translateY(-260px) rotateX(90deg);
}

.loader li:nth-child(7) {
  transform: translate(-50%, -50%) rotate(144deg) translateY(-260px) rotateX(90deg);
}

.loader li:nth-child(8) {
  transform: translate(-50%, -50%) rotate(162deg) translateY(-260px) rotateX(90deg);
}

.loader li:nth-child(9) {
  transform: translate(-50%, -50%) rotate(180deg) translateY(-260px) rotateX(90deg);
}

.loader li:nth-child(10) {
  transform: translate(-50%, -50%) rotate(198deg) translateY(-260px) rotateX(90deg);
}

.loader li:nth-child(11) {
  transform: translate(-50%, -50%) rotate(216deg) translateY(-260px) rotateX(90deg);
}

.loader li:nth-child(12) {
  transform: translate(-50%, -50%) rotate(234deg) translateY(-260px) rotateX(90deg);
}

.loader li:nth-child(13) {
  transform: translate(-50%, -50%) rotate(252deg) translateY(-260px) rotateX(90deg);
}

.loader li:nth-child(14) {
  transform: translate(-50%, -50%) rotate(270deg) translateY(-260px) rotateX(90deg);
}

.loader li:nth-child(15) {
  transform: translate(-50%, -50%) rotate(288deg) translateY(-260px) rotateX(90deg);
}

.loader li:nth-child(16) {
  transform: translate(-50%, -50%) rotate(306deg) translateY(-260px) rotateX(90deg);
}

.loader li:nth-child(17) {
  transform: translate(-50%, -50%) rotate(324deg) translateY(-260px) rotateX(90deg);
}

.loader li:nth-child(18) {
  transform: translate(-50%, -50%) rotate(342deg) translateY(-260px) rotateX(90deg);
}

.loader li:nth-child(19) {
  transform: translate(-50%, -50%) rotate(360deg) translateY(-260px) rotateX(90deg);
}

.loader li:nth-child(20) {
  transform: translate(-50%, -50%) rotate(378deg) translateY(-260px) rotateX(90deg);
}

.loader li:nth-child(21) {
  transform: translate(-50%, -50%) rotate(396deg) translateY(-260px) rotateX(90deg);
}

@keyframes three-dimensions-circle {
  0% {
    transform: rotateX(-100deg) rotate(0);
  }
  100% {
    transform: rotateX(-100deg) rotate(360deg);
  }
}


 @media (max-width: 920px) {
	body {
		font-family: "Oswald", sans-serif;
			font-optical-sizing: auto;
			font-weight: 200;
			font-style: normal;
	}
	#page-title, #page-footer {
		font-size: 18px;
	}

	#about-details{
		width: 80%;
		left: 10%;
	}

	#about-close, #details-close {
		width: 90%;
	    text-align: right;
	    position: relative; 
	    right: 0; 
	    top: 0; 	
	}

	.loader ul {
		font-size: 9vw;
	}

	.loader li:nth-child(1) {
	  transform: translate(-50%, -50%) rotate(36deg) translateX(200px) rotateY(90deg);
	}

	.loader li:nth-child(2) {
	  transform: translate(-50%, -50%) rotate(54deg) translateX(200px) rotateY(90deg);
	}

	.loader li:nth-child(3) {
	  transform: translate(-50%, -50%) rotate(72deg) translateX(200px) rotateY(90deg);
	}

	.loader li:nth-child(4) {
	  transform: translate(-50%, -50%) rotate(90deg) translateX(200px) rotateY(90deg);
	}

	.loader li:nth-child(5) {
	  transform: translate(-50%, -50%) rotate(108deg) translateX(200px) rotateY(90deg);
	}

	.loader li:nth-child(6) {
	  transform: translate(-50%, -50%) rotate(126deg) translateX(200px) rotateY(90deg);
	}

	.loader li:nth-child(7) {
	  transform: translate(-50%, -50%) rotate(144deg) translateX(200px) rotateY(90deg);
	}

	.loader li:nth-child(8) {
	  transform: translate(-50%, -50%) rotate(162deg) translateX(200px) rotateY(90deg);
	}

	.loader li:nth-child(9) {
	  transform: translate(-50%, -50%) rotate(180deg) translateX(200px) rotateY(90deg);
	}

	.loader li:nth-child(10) {
	  transform: translate(-50%, -50%) rotate(198deg) translateX(200px) rotateY(90deg);
	}

	.loader li:nth-child(11) {
	  transform: translate(-50%, -50%) rotate(216deg) translateX(200px) rotateY(90deg);
	}

	.loader li:nth-child(12) {
	  transform: translate(-50%, -50%) rotate(234deg) translateX(200px) rotateY(90deg);
	}

	.loader li:nth-child(13) {
	  transform: translate(-50%, -50%) rotate(252deg) translateX(200px) rotateY(90deg);
	}

	.loader li:nth-child(14) {
	  transform: translate(-50%, -50%) rotate(270deg) translateX(200px) rotateY(90deg);
	}

	.loader li:nth-child(15) {
	  transform: translate(-50%, -50%) rotate(288deg) translateX(200px) rotateY(90deg);
	}

	.loader li:nth-child(16) {
	  transform: translate(-50%, -50%) rotate(306deg) translateX(200px) rotateY(90deg);
	}

	.loader li:nth-child(17) {
	  transform: translate(-50%, -50%) rotate(324deg) translateX(200px) rotateY(90deg);
	}

	.loader li:nth-child(18) {
	  transform: translate(-50%, -50%) rotate(342deg) translateX(200px) rotateY(90deg);
	}

	.loader li:nth-child(19) {
	  transform: translate(-50%, -50%) rotate(360deg) translateX(200px) rotateY(90deg);
	}

	.loader li:nth-child(20) {
	  transform: translate(-50%, -50%) rotate(378deg) translateX(200px) rotateY(90deg);
	}

	.loader li:nth-child(21) {
	  transform: translate(-50%, -50%) rotate(396deg) translateX(200px) rotateY(90deg);
	}

	@keyframes three-dimensions-circle {
	  0% {
	    transform: rotateY(-100deg) rotate(0);
	  }
	  100% {
	    transform: rotateY(-100deg) rotate(360deg);
	  }
	}
		
}

@media (max-height: 750px) {
	#tile-details{
		overflow: scroll;
    	height: 240px;
	}

	#about-details {
		overflow: scroll;
    	height: 500px;
	}


}