:root {
  --top-height: 60vh;
  --top-width: 100vw;
  --bottom-height:60vh;
  --bottom-width: 100vw;
}


html, body {
  margin: 0;
  padding: 0;
  font-family: "Roboto Flex";
}
canvas {
  border-radius: 20px;
  box-shadow: inset 2px 1px 10px 2px black, 
	           0 0 2px 1px black;
}

#top-wall {
	height: var(--top-height);
	background: rgba(70,70,70,1);
	position: relative;
}
#top-wall .sheen-effect {
	width: 100%;
    height: 100%;
	background: linear-gradient(217deg, rgba(255,0,0,.3), rgba(255,0,0,0.1) 70.71%),
		linear-gradient(127deg, rgba(0,255,0,.3), rgba(0,255,0,0.1) 70.71%),
		linear-gradient(336deg, rgba(0,0,255,.3), rgba(0,0,255,0.1) 70.71%);
/*    background: radial-gradient(circle, rgba(0,212,255,1) 0%, rgba(25,73,150,1) 100%);*/

}

#door-frame {
	width: calc(var(--top-width) * 0.15 );
	height: calc(var(--top-height) * 0.9);
	position: absolute;
    bottom: 0;
    left: calc(var(--top-width) * 0.15);
	border-right: solid 1px black;
	border-left: solid 1px black;
	border-top: solid 1px black;
	border-radius: 5px;
}

#door-light {
	background-color: yellow;
	width: 100%;
	height: 100%;
	box-shadow: 1px 300px 300px 5px yellow,2px 15px 24px 2px black;
	border-radius: 5px;
} 

#door-bulb {
	position: absolute;
	width: calc(calc(var(--top-width) * 0.15 ) * 0.25);
	height: calc(calc(var(--top-width) * 0.15 ) * 0.25);
	left: 50%;
	top: 10px;
	border-radius: 50%;
	border-color: rgba(41,41,41,1.00);
/*	background-color: rgba(0,0,0,0.1);*/
	background: rgb(255,255,255);
    background: radial-gradient(circle, rgba(255,255,255,1) 0%, rgba(243,247,5,1) 97%, rgba(252,254,126,1) 100%);
	transform: translateX(-50%);
}
.flex-container {
	display: flex;
	flex: wrap;
}


.flex-container.one {
	height:400px;
	box-shadow: 0 -50px 30px 10px white;
}

.scale-container {
  position: absolute;
  top: 35%;
  z-index: 10;
  left: 50%;
}
.grid-container {
	width: 750px;
	height: 500px;
	background-color: rgba(160,160,160,1);
	border-radius: 20px;
	box-shadow: inset 0px 0px 20px 0px rgba(0,0,0,1),
		        0 0 2px gray;
}

.grid {
	display: grid;
/*
	grid-template-columns: 25px 1fr 25px 87.5px; 
	grid-template-rows: 25px 87.5px 87.5px 87.5px 87.5px 25px; 
*/
	grid-template-columns: 30px 1fr 30px 110px; 
	grid-template-rows: 30px 110px 110px 110px 110px 30px; 
	gap: 0px 0px; 
	grid-template-areas: 
		"top-border top-border top-border top-border"
		"left-border tv right-border knob-one"
		"left-border tv right-border knob-two"
		"left-border tv right-border speaker"
		"left-border tv right-border speaker"
		"bottom-border bottom-border bottom-border bottom-border"; 
	width: 100%;
	height: 100%;
}

.grid > * {
	position: relative;
}

.picture-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	grid-template-rows: 1fr 1fr;
	gap: 0 10px;
	width: 100%;
	height: 100%;
}

.picture-grid img {
	width: 50%;
}

.tv { 
	grid-area: tv;
	width: 100%;
	height: 100%;
}
.knob-one { 
	grid-area: knob-one;
}
.knob-two {
	grid-area: knob-two;
}
.speaker {
	grid-area: speaker;
	padding-right:25px;
}
.top-border { 
	grid-area: top-border;
}
.bottom-border {
	grid-area: bottom-border; 
}
.left-border {
	grid-area: left-border; 
}
.right-border { 
	grid-area: right-border;
}


.knob {
 	width: 80%;
	height: 80%;
	border-radius: 50%;
	background-color: rgba(30,30,30,1);
}

h1 span {
  color: rgba(180,180,180,1);
  font: 6px Monaco, MonoSpace;
  height: 200px;
  position: absolute;
  width: 20px;
  left: 0;
  top: 0;
  transform-origin: bottom center;
}

.char1 { transform: rotate(6deg); }
.char2 { transform: rotate(12deg); }
.char3 { transform: rotate(18deg); }
.char4 { transform: rotate(18deg); }
.char5 { transform: rotate(18deg); }

.inner-knob {
	position: absolute;
    top: 0;
    left: 0;
    transform: translate(50%,50%);
	width:40%;
	height:40%;
	border-radius: 50%;
	background-color: rgba(30,30,30,1);
	box-shadow: -5px 2px 3px 2px rgba(100,100,100,1);
}

/* p5 canvas location*/
.grid > #tv {
  background-color: grey;
  max-height: 100%;
  overflow: hidden;
}

.tv-screen {
	position: absolute;
    background: rgb(253,251,252);
    background: radial-gradient(circle, rgba(253,251,252,0) 0%, rgba(253,251,252,0.1) 76%, rgba(80,80,80,0.7) 100%);
	width: 100%;
	height: 100%;
	top: 0;
    left: 0;
	border-radius: 20px;
	z-index: 11;
}


#middle-floor {
	height: var(--bottom-height);
	width: var(--bottom-width);
	background: rgb(38,38,38);
    background: linear-gradient(349deg, rgba(38,38,38,0) 0%, rgba(61,26,49,1) 51%, rgba(17,66,36,1) 73%, rgba(0,0,0,0.1) 100%);

}

#floor {
    width: 100%;
    height: 100%;
}

.crease {
/*  background: linear-gradient(120deg, rgba(226, 195, 124, 0) 0%, rgba(254, 211, 113, 0.04374425551470584) 31%, rgba(255, 204, 115, 1) 54%, rgba(255, 197, 117, 0.28464061405812324) 75%, rgba(226, 198, 130, 0) 100%);*/
  position: relative;
  border-top: 4px solid rgba(225,225,225,0.2);
}

.service-block {
        position: relative;
    }

    .service-block .line-one {
        background: rgb(226, 195, 124);
        background: linear-gradient(120deg, rgba(226, 195, 124, 0) 0%, rgba(254, 211, 113, 0.04374425551470584) 31%, rgba(255, 204, 115, 1) 54%, rgba(255, 197, 117, 0.28464061405812324) 75%, rgba(226, 198, 130, 0) 100%);
        height: 5px;
        margin-bottom: 5px;
    }

    .service-block .line-two {
        background: rgb(226, 195, 124);
        background: linear-gradient(120deg, rgba(226, 195, 124, 0) 0%, rgba(233, 215, 134, 0.04374425551470584) 21%, rgba(237, 198, 131, 1) 54%, rgba(231, 209, 145, 0.28464061405812324) 82%, rgba(226, 198, 130, 0) 100%);
        height: 5px;
        margin-bottom: 5px;
    }

    .service-block .line-three {
        background: rgb(226, 195, 124);
        background: linear-gradient(120deg, rgba(226, 195, 124, 0) 0%, rgba(231, 168, 63, 0.16419243478641454) 17%, rgba(228, 167, 63, 1) 54%, rgba(217, 160, 50, 0.32105517988445376) 79%, rgba(226, 198, 130, 0) 100%);
        height: 5px;
        margin-bottom: 5px;
    }

    .service-block .service-title {
        font-size: 5vw;
        font-weight: 200;
        position: absolute;
        top: -100px;
        text-shadow: 0px 0px 10px white, 0 0 2px rgb(90, 90, 90);
        background-color: rgba(50, 50, 50, 0.3);
        padding: 0 100px;
        color: white;
		margin-left: 30px;
    }

.service-title-small {
	display: none;
}

.title {
	height: 350px;
}

.grid-for-header {
	display: grid;
	grid-template-columns: 1fr 2fr;
}

.grid-for-header #normalcy-description {
	font-size: 1.5rem;
}

.grid-for-header.two {
	margin-top:-100px;
}

.reversed {
	grid-template-columns: 2fr 1fr;
	margin-top: 220px;
	margin-bottom: 220px;
}

.grid-item:nth-child(2n+1) {
	display: flex;
	justify-content: center;
	align-items: center;
}

.grid-item h1 {
	text-align: center;
	font-size: 2.5vw;
	text-shadow: -1px -1px 2px rgba(145, 138, 143, 0.15);
}

.grid-item p {
	font-size: 26px;
}

.grid-item.right:nth-child(2n) {
	display: flex;
	justify-content: center;
	align-items: center;
}

.grid-item.right p {
	font-size: 26px;
}
 #services {
	display: flex;
	flex-wrap: wrap;
	margin: 100px auto;
}

#services .service {
	flex: 26%;
	max-width: 75%;
	border: 1px solid rgba(150, 150, 150, 1);
	margin: 0px 10px 10px 0px;
	position: relative;
	border-radius: 2px;
	box-shadow: 0px 0px 6px darkgray;
}

#services .service::before {
	content: "";
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	background-color: rgba(255, 255, 255, 0);
	/* Initially transparent */
	transition: background-color 0.3s ease;
	/* Add a smooth transition effect */
	pointer-events: none;
	/* Allow interactions with elements beneath the overlay */
}

#services .service.four-wide {
	flex: 15%;
	max-width: 70%;
	border: 1px solid rgba(150, 150, 150, 1);
	margin: 0px 10px 10px 0px;
	position: relative;
	border-radius: 2px;
	box-shadow: 0px 0px 6px darkgray;
}

#services .service.four-wide::before {
	content: "";
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	background-color: rgba(255, 255, 255, 0);
	/* Initially transparent */
	transition: background-color 0.3s ease;
	/* Add a smooth transition effect */
	pointer-events: none;
	/* Allow interactions with elements beneath the overlay */
}


#services .service:hover::before {
	background-color: rgba(145, 138, 143, 0.15);
	transition: background-color 0.3s ease;
}


#services .service .image {
	width: 100%;
}

#services .service .image img {
	object-fit: cover;
	width: 100%;
}

footer {
	min-height: 170px;
	color: rgba(236,213,134,1);
	text-transform: uppercase;
	text-align: center;
	padding-top: 30px;
	background: rgba(50,50,50,1);
}


@media screen and (max-width: 1500px) {
	#door-frame {
	width: calc(var(--top-width) * 0.2);
	}
	.scale-container {
		left: 25%;
	}
}

@media screen and (max-width: 1100px) {
	#door-frame {
	width: calc(var(--top-width) * 0.27);
    }
}

@media screen and (max-width: 1000px) {
	.scale-container {
		left: 10%;	
	}
	.grid-container {
		scale: 0.9;
	}
	#door-frame {
	    width: calc(var(--top-width) * 0.3);
    }
}

@media screen and (max-width: 800px) {
	#door-frame {
		width: calc(var(--top-width) * 0.4);
	}
	
	#door-bulb {
		width: calc(calc(var(--top-width) * 0.15 ) * 2);
		height: calc(calc(var(--top-width) * 0.15 ) * 2);
		top: 5px;
	}
	.scale-container {
		left: 4%;	
	}
	.grid-container {
		scale: 0.8;
	}
	
	.grid-for-header {
		display: block;
		margin-top:50px;
	}
	
	.grid-for-header.reversed {
		display: block;
		margin-top: 50px;
	}
	
	section.title {
		height: 50px;
	}
	.service-title {
		font-size: 5rem;
	}
	
	

}

@media screen and (max-width: 700px) {
	.grid-container {
		scale: 0.75;
	}
	.scale-container {
		left: -5%;	
	}
}

@media screen and (max-width: 600px) {
	#door-frame {
		width: calc(var(--top-width) * 0.50);
	}
	.grid-container {
		scale: 0.5;
	}
	.scale-container {
		left: -10%;	
	}
}

@media screen and (max-width: 500px) {
	#door-frame {
		width: calc(var(--top-width) * 0.55);
	}
	.scale-container {
		left: -25%;
	}
}

@media screen and (max-width: 450px) {
	.scale-container {
		left: -35%;
	}
}

@media screen and (max-width: 400px) {
	.scale-container {
		left: -50%;
	}
		#door-frame {
		width: calc(var(--top-width) * 0.60);
	}
}

@media screen and (max-width: 350px) {
	.scale-container {
		left: -65%;
	}
	.grid-container {
		scale: 0.4;
	}
}

/*
@media screen and (max-width: 700px) {
	#door-frame {
			display: none;
    }

	.grid {
		overflow: scroll;
	}

	
	.grid-container {
		left: 0;
		top: 7.5%;
	}
}
*/