@font-face {
      font-family: "gulim";
      src:  local("gulim"),
  url(fonts/gulim.ttf);
}

*,
*::before,
*::after {
  margin: 0;
  padding: 0;  /*모든 속성의 마진값, 패딩값이 0으로 설정되어 있음*/
  box-sizing: border-box;
  font-size: 100%;  /*모든 폰트 사이즈 동일, 기본값이 16픽셀 */
  font-family: gulim; 
  scroll-behavior: smooth;

}

html, body{
  height:  100%;
  /*background-color: *//*RGB(213, 210, 210); *//*#d4ccc9;*/
  background-color: #cbcbcb;
    -webkit-user-select: none;  /* Chrome all / Safari all */
  -moz-user-select: none;     /* Firefox all */
  -ms-user-select: none;      /* IE 10+ */
  user-select: none;  
  overflow: hidden;
}

#light_body{
	background-color: RGB(250, 249, 252);

}


#dark_body{
	background-color: #050012 /*E5E8EE*/;
}

#bw_body{
	background-color: rgb(20,20,20);
}
.disable-select {
  -webkit-user-select: none;  
  -moz-user-select: none;    
  -ms-user-select: none;      
  user-select: none;
}

/*back*/
.arrow {
  border: solid #a3a3a3;
  border-width: 0 2px 2px 0;
  display: inline-block;
  padding: 2px;
  position: absolute;
  top: 4px;
  left: 6px;
 
} 
.left {
  transform: rotate(135deg);
  -webkit-transform: rotate(135deg);
}

#back{
	position: absolute;
	top: -15px;
	right: 3px;
	width: 20px;
	height: 15px; 
	border-radius: 9%;
	border: 1px solid darkgray;
	border-bottom: transparent;
	background-color: rgba(255,255,255,0.4);
	opacity: 1;
	z-index: -1;
}

#back:hover{
	cursor: pointer;  
	background: rgba(150,150,150,0.2);
	border-bottom: transparent;

} 
#poem_back{
	position: absolute;
	top: 1px; 
	right: 3px;
	width: 20px;
	height: 15px; 
	border-radius: 9%;
	border: 1px solid darkgray;
	border-bottom: transparent;
	background-color: rgba(255,255,255,0.4);
	opacity: 1;
	z-index: -1;
}

#poem_back:hover{
	cursor: pointer;  
	background: rgba(150,150,150,0.2);
	border-bottom: transparent;

}
/*lang*/
 
#index_lang{
	height:  15px;
	position: absolute;
	top : 483px;
	left: 3px; 
	align-self: flex-start;
	flex-shrink: 0;
	z-index: 201;
}
#index_lang button{
	font-size: 9pt;
	width: 30px;  
	border: none;
} 
#index_en{
 	background: #eeeeee; 
 	position: absolute;
 	height: 15px;   
 	left: 3px;
 	opacity: 0.5;
 	border-radius: 5px;
 	box-shadow: 0 0 2px 2px #050012 inset; 
} 
#index_en:hover{
 	background: palevioletred;  
 	cursor: pointer; 
 	filter: brightness(1.3);
} 
#index_en:visited{
 	background: palevioletred;   
} 


#poem_lang{
	height:  15px;
	position: absolute; 
	left: 3px;
	z-index: 1;
	top: 502px; 
	align-self: flex-start;
	display: flex;
	flex-direction: row;
}

#poem_lang button{ 
	font-size: 9pt;
	width: 30px;   
	border-radius: 5px;   

}
#poem_en{
 	background: #eeeeee; 
 	border: 1px solid darkgray;
 	box-shadow: 0px -2px 3px 1px white inset; 
 	opacity: 0.5;
 	height: 15px; 
}

#poem_en:hover{
		background:#ff2235;
		cursor: pointer;
 }
#poem_ko{
	background:lightgray;
	border: none;
	box-shadow: 0 0 2px 2px lightgray; 
 }
#poem_ko:hover{
		background:lightgray;
		cursor: pointer;
}
#main_lang{
	height:  15px;
	position: absolute; 
	bottom: -7.5px;
	left: 3px;
	/*z-index: -1;*/ 
	align-self: flex-start;
	display: flex;
	flex-direction: row;
	margin-top: 5px;
}

#main_lang button{ 
	font-size: 9pt;
	width: 30px;   
	border-radius: 5px;  
	border: 1px solid gray;
 	opacity: 0.7;   

}

#main_en{
 
 	border: none; 
 }
#main_en:hover{ 
 		cursor: pointer;  
} 
.daylang{
  box-shadow: 1px 0 1px 1px rgba(102, 102, 105,0.4); 
  background:#FB551E; 
}
.daylang:hover{
  background:white; 

}
.nightlang{
  box-shadow: 1px 0 1px 1px rgba(255,255,255,0.4); 
  background:white; 
}

#lang{
	height:  15px;
	position: absolute; 
	top: 483px;
	z-index: -1;
	left: 3px;
	align-self: flex-start;

}  

#lang button{ 
	font-size: 9pt;
	width: 30px;
	height: 15px;
	border-radius: 5px;  
  opacity: 0.5;
}

 
#end_lang button{ 
 	width: 30px;
	height: 15px;
	border: none; 
	border-radius: 5px;  
	background: #83AAEE;
	box-shadow: 1px 0px 1px 1px rgba(90,90,90,.5);
 }

#end_lang{
	width: 30px;
	height:  15px;
	position: absolute;  
	top: calc(483px - 15px / 2);
	left: 5px;
	z-index: -1;  
 }
#end_lang button:hover{
 		cursor: pointer;
 		background: #DADDAE;
 }

/*index.html*/
 
.content{
	width: 483px;
	height: 483px; 
	overflow: hidden;
	background-size: cover;
	padding-bottom: 45px; 

}
 

default, default_text,load{ 
	position: absolute; 
	width: 483px;
	height: 483px; 
	top:  50%;
	left: 50%;
	padding:  0vw;
	/*border-style: double;*/
	transform:  translate(-50%,-50%);
	display: flex; 
	flex-direction: column;
	margin: 0;
	text-align: center; 

}
load{ 

background: hsla(0, 0%, 0%, 1);

background: radial-gradient(circle, hsla(0, 0%, 0%, 1) 0%, hsla(0, 30%, 31%, 1) 33%, hsla(217, 36%, 86%, 1) 62%, hsla(192, 13%, 85%, 1) 83%, hsla(0, 0%, 94%, 1) 100%);

background: -moz-radial-gradient(circle, hsla(0, 0%, 0%, 1) 0%, hsla(0, 30%, 31%, 1) 33%, hsla(217, 36%, 86%, 1) 62%, hsla(192, 13%, 85%, 1) 83%, hsla(0, 0%, 94%, 1) 100%);

background: -webkit-radial-gradient(circle, hsla(0, 0%, 0%, 1) 0%, hsla(0, 30%, 31%, 1) 33%, hsla(217, 36%, 86%, 1) 62%, hsla(192, 13%, 85%, 1) 83%, hsla(0, 0%, 94%, 1) 100%);

filter: progid: DXImageTransform.Microsoft.gradient( startColorstr="#000000", endColorstr="#683838", GradientType=1 );

}

 
mist{
	width: 483px;
	height: 483px; 
	flex-shrink: 0;
	box-shadow: 0 0 5px 5px /*RGB(250, 249, 252)*/ #050012 inset;
	top:  50%;
	background-image: url('room0.png');
	padding:  0vw; 
	backdrop-filter: blur(5px);
	background: linear-gradient(73deg, rgba(15,0,10,0.4) 25%, rgba(219,212,151,0.2) 50%),
	  linear-gradient(123deg, transparent 50%,rgba(15,0,10,0.5)),
	  linear-gradient(223deg, rgba(206,216,232,0.9) 50%, transparent );
  animation: mistcolor 20s ease infinite alternate;
  background-size: 100% 200%; 

}

@keyframes mistcolor {
    0% { background-position: 0% 0%; } 
    100% { background-position: 100% 100%; }
}
 

flexbox{
	display: flex;
	width: 322px;
	height: 483px; 
	position: absolute; 
	left: 50%;
	padding:  0vw; 
	transform:  translateX(-50%);
	flex-direction: column;
	justify-content: center;  
}
#loading{
	position: absolute;
	font-family:  serif; 
	width: 100%;
	height: 100%;
	text-align: center;
	top: 50%; 
	color: white;
	z-index: 200;
	opacity: 0.7;
	font-style: italic; 
}
#loadimages{
	display: flex;  
	margin: 0;  
	width: 322px;
	height: 185.53px;
	position: relative;
	transform:  translateX(-50%);
	left: 50%; 
	padding: 0;
}
#bonbon{
	/*position: absolute; */
	width:  214.7px; 
	filter: blur(2px) ;
	/*top:  50%;
	left: 50%;
	transform:  translate(-50%,-50%);*/
}

#eye{
	/*position: absolute;*/
	width:  107.3px;  
	filter: blur(2px);
	/*top:  46%;
	left: 48%;
	transform:  translate(-50%,-50%);*/
}
 
guide{
	position: absolute;
	word-break: keep-all;
	z-index: 200;
	width: 26vw;
	height: 10vh;
	padding: 20px;
	text-align: center;
	background-color: rgba(240,251,255,0.8);
	left: calc(50% - 13vw);
	top: calc(50% - 5vh);
	border: 1px solid black;
	font-family: serif;
	font-style: italic;
}
guide:hover{
	cursor: pointer;
	border: 1px solid black;
	box-shadow: 0 0 15px rgba(255,255,255,0.5);
}
#poem{ 
	background-color: white;   
	justify-content: stretch;
	align-content: stretch;
	/*border-style: double;*/  
 	/*text-align: center; 
	font-size: 9px;*/

}

#poem p{
	text-align: center;
	position: relative;
	color:  rgb(80,50,50);
	font-family: Times;
	letter-spacing: 1.2px;
	font-style: italic;
	bottom: 5px;
	right: 5px;
}

poem button{
	text-align: right;
} 
#poemimages{
	display: flex;  
	margin: 0;  
	width: 322px;  
	align-self: center;
	left: 50%;
	top: 50%;
	padding: 0;
	filter: grayscale(80%) brightness(10.75);
}
#poem_index_en{
	color: white;
	display: grid;
	grid-template-columns: 32fr 44fr 44fr 44fr 44fr 44fr 44fr 44fr 44fr 68fr;
	font-size: 8px;
	width: 474px;
}

#poem_index_ko{
	color: white;
	display: grid;
	grid-template-columns: 38fr 43fr 41fr 54fr 53fr 56fr 45fr 46fr 42fr 42fr;
	font-size: 8px;
	width: 480px;
}

#tableDiv{
	width: 483px;  
	height:  498px;
  position: absolute; 
  text-align: center;
  
  left: 50%;
  top:  50%;
  transform:  translate(-50%,-50%); 
  
  display: flex;
  flex-direction: column; 

}

#tableFrame{
	height:  483px;
	/*display: flex; */
	background: #cbd1d4;/*hsla(0, 0%, 0%, 1);*/

background: radial-gradient(circle, hsla(0, 0%, 20%, 1)  0%, hsla(0, 30%, 31%, 1) 33%, hsla(217, 36%, 86%, 1) 62%, hsla(192, 13%, 85%, 1) 83%, hsla(0, 0%, 94%, 1)  100%);

background: -moz-radial-gradient(circle, hsla(0, 0%, 20%, 1) 0%, hsla(0, 30%, 31%, 1) 33%, hsla(217, 36%, 86%, 1) 62%, hsla(192, 13%, 85%, 1) 83%, hsla(0, 0%, 94%, 1) 100%);

background: -webkit-radial-gradient(circle, hsla(0, 0%, 20%, 1) 0%, hsla(0, 30%, 31%, 1) 33%, hsla(217, 36%, 86%, 1) 62%, hsla(192, 13%, 85%, 1) 83%, hsla(0, 0%, 94%, 1) 100%);

filter: progid: DXImageTransform.Microsoft.gradient( startColorstr="#000000", endColorstr="#683838", GradientType=1 );

	 	box-shadow: 0 0 11px 11px  #cbd1d4/*RGB(250, 249, 252)*/ inset;

} 

#instruction{
	color: #cbd1d4;
	font-size: 7pt; 
 	font-style: italic;
 	text-align: left;  
 	margin-bottom: 5px;
  }
table{
	height: 483px;
	width: 483px;
}
th{
	font-style: italic;
	cursor: move;
	font-size: 12pt;
	background-color: RGBA(250, 249, 252,0.8); 
  box-shadow: 0 0 1px 1px RGB(250, 249, 252) inset;
 }
th span {
  color: hsla(0, 40%, 33%, 1) ; 
  text-decoration: none;
  font-family:  Times;
  font-size: 10pt;
  display: inline-block;
  transform: scale(1, .6); 
  -webkit-transform: scale(1, .6); /* Safari and Chrome */
  -moz-transform: scale(1, .6); /* Firefox */
  -ms-transform: scale(1, .6); /* IE 9+ */
  -o-transform: scale(1, .6); /* Opera */
}

td{
	font-size: 9pt;
	color: ghostwhite;
	background: rgba(30,30,30,0.8); 
 	box-shadow: 0 0 2px 1px RGB(250, 249, 252) inset;
 	font-family: gulim; 
 	opacity: 0.8;

} 
th, td{ 
	padding: 5px 4px;
	text-align: center; 
	/*word-break: break-all;*/
}
/*td:hover{
	box-shadow: 0 0 2px 3px RGB(250, 249, 252) inset;
	background: rgba(30,30,30,0.8);
}*/

th:hover{
	box-shadow: 0 0 2px 3px RGB(200, 209, 202) inset; 
	background: rgba(250, 249, 252,0.8);
}

 

#jeans{
	text-align: right;
	font-style: italic;
	font-size: 8pt;
	font-family: Times;
	margin: 5px;
	color: white;
}

/*main*/

#lamp{
	display: block;
	min-width: 16px;
	min-height: 16px;
 	position: absolute;
	bottom: 0px;
	width: 100%;
	font-family: Times;
	z-index: 1;
	height: 20px;
 } 
.daylamp{
  background: rgba(248,248,241,1);
  box-shadow: 0px -5px 7px rgba(255,255,255,0.8); 


}

.nightlamp{
  background: rgba(28,28,21,1);
	box-shadow: 0px -5px 7px rgba(234,236,249,0.3); 
 
}
  
layer{
	position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;  
	 
}
.nightshift{
	 background: /*rgba(234,187,145,.3);*/ #0a0a0c;
}

.nightbox{
	/*color: #afa371;*/
	/*box-shadow: 1px 1px 1px #afa371;*/
}
/*default p{
	font-size: 10pt;
	font-family: Times;
	line-height: 2;
	position: relative;
	width: 350px;
	transform: translateX(-50%);
	left:  50%;
	text-align: left;
	letter-spacing: 1px; 
	padding:  15px 0px;

}*/

.text_content{
	width: 483px;
	height: 483px; 
	overflow: hidden;
	background-size: cover;
	padding-bottom: 45px; 
	
 
}
.day{
  background: #b2b2b2;
	box-shadow: 0 0 5px 5px rgba(240,240,240,0.3) inset;

}
.night{
	background: #0a0a0c;
	box-shadow: 0 0 5px 5px rgba(140,130,100,0.2) inset;

}
#text_grid{
	word-break: keep-all;
	text-align: left;
	width: 483px;
	height: 462px;
	display: grid;
	grid-template-columns: 305px 178px;
/*	box-shadow: 0 0 15px 15px rgba(240,240,240,0.3) inset;
*/ 
}
#wall_left{
	display: flex;
	justify-content: left;
	height: 462px;
	align-items: top;
	
 }
#wall_left_image{
 	width: calc(420px / 1.5);
	height: calc(420px / 1.5);
	margin: 15px;
	
}
.wall_left_bg_day{
	background: rgba(255,255,255,0.4);
}
.wall_left_bg_night{
	background: transparent;
}
.wall_left_day{
	background: url('daytime.jpg');
	background-size: cover;
}
.wall_left_night{
	background: url('nightime.jpg');
	background-size: cover;
}
.scroll_content{
		overflow-y: visible;
}
#wall_right{
	display: grid; 
	grid-template-rows: 178px 18px auto;
	border-left: 1px solid rgba(235,240,255,0.1);
	box-shadow: 10px 0 5px 15px rgba(225,215,205,0.1);
}

#dream20210707{
	text-align: center; 
	position: relative;
	display: grid;
	grid-template-rows: 1fr 1fr;
	font-size: 8pt;
	transform: translateX(-50%);
	left:  50%; 
	padding: 5px;
 	background: rgba(0, 0, 0, .5);
 	box-shadow: 0px 0 10px 10px rgba(212,212,212,.3) inset;
 	width: 178px;
}

 
 
#text_select{
 	display: grid;
	height: inherit;
	grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
	border: 1px solid rgba(255,255,250,0.3);
}
#text_select div{
	box-shadow: 0px 0 2px 2px rgba(210,210,210,0.9) inset;
}
#text_select div:hover{
	cursor: pointer;
	background: rgba(250,250,245,0.8);
	box-shadow: 0px 0 2px 2px rgba(220,220,220,0.9) inset;
}
 
#text_scroll{
	background: rgba(230,230,230,0.3);
	height: calc(483px - 178px - 18px - 20px);
	overflow-y: scroll;
	overflow-x: hidden; 
	scrollbar-width:thin;
	   scrollbar-color: #aaa #eee;

 }
 #text_scroll::-webkit-scrollbar {
  width: 3px;
}
 #text_scroll::-webkit-scrollbar-track {
  background: #eee; 
}
 
/* Handle */
 #text_scroll::-webkit-scrollbar-thumb {
  background: #aaa; 
}

/* Handle on hover */
 #text_scroll::-webkit-scrollbar-thumb:hover {
  background: #888; 
}
 
#text_scroll p:not(#end){
	font-size: 8pt;
	line-height: 16pt;
	font-family: gulim;
	word-break: keep-all; 
	width: 178px;
	padding: 15px;
}
.text_day{
	color: #0e0e0e;
}
.text_night{
	color: #dcd7d3;
}
#easter{
	border-radius: 5%;
	width: 80px;
	height: 60px;
	background: url('bonbon.png');
	background-size: cover;
background-clip: padding-box;
	border-style: double;
	border-color: #bbbaa7;
 font-family: Times;
	color: #e9e9eb;
	font-style: italic;
	margin-top: 10px;
	text-align: center;
	vertical-align: middle;
line-height: 60px;
} 
.easter_day{
	box-shadow: 0 0 3px 3px #aaa inset;

}
.easter_night{
		box-shadow: 0 0 3px 3px #4d4d4e inset;

}
#easter:hover{
	cursor: pointer;
	border-color: #888;
	color: #cccba7;
 
}
#mags{
	/*width: 322px;*/  
	height:  483px;
	/*margin: 118px 0px;*/
	transform: translateX(-50%);
	left:  50%;
	position: relative;
	background-size: cover; 
 
 }


default_grid{ 
	position: absolute; 
	width: 483px;
	height: 100vh;  
	left: 50%;
	padding:  0vw;
	/*border-style: double;*/
	transform:  translateX(-50%);
	display: grid; 
	grid-template-rows: calc(50vh - 483px / 2) 483px calc(50vh - 483px / 2);
	margin: 0;
	text-align: center; 
	 

}
 
 .content_grid{
	width: 483px;
	height: 483px; 
	overflow: hidden;
	background-size: cover; 
  /*background-color: #ccc;*/
   /*box-shadow: 0 0 3px 3px rgba(245,248,240,0.5); */
}

 #index_grid{
	width: 483px;  
 	height: 483px;
	/*margin: 118px 0px;*/
	transform: translate(-50%,-50%);
	left:  50%;
	top: 50%;
	position: relative;
	background-size: cover;
	/*display: grid;
	grid-template-rows: 1fr 3fr 1fr;
	grid-template-columns: 18fr 25fr 13fr 8fr 9fr;*/
	display: flex;
	flex-direction: column;
	align-content: center;
	justify-content: center;
 	box-shadow: 0 0 1px 1px #cccccc inset;
 	/*background-color: rgba(0,0,0,0.5);*/
 
 }
 
 #main_grid{
 	width: 483px;  
 	height: 483px;
	/*margin: 118px 0px;*/
	transform: translate(-50%,-50%);
	left:  50%;
	top: 50%;
	position: relative;
	background-size: cover;
	display: grid;
 	grid-template-rows: 3fr 2fr 3fr 19px;
	grid-template-columns: 9fr 10fr 9fr;

 	box-shadow: 0 0 1px 1px #cccccc inset;
 }
 
.links{
 	font-size: 12pt; 
	display: flex; 
	color: #444;
	align-items: center;
	justify-content: center;
	width: 200px;
 	place-self: center;
	padding: 5px; 
	border-bottom: 1px solid rgba(0,0,0,0.3);
 	/*box-shadow: 15px 0px 10px 0px #ccc inset, 0px 0px 3px 3px rgba(240,240,240,0.9) inset;
  */
}
.links p{
	transform: scaleX(0.7);
	font-family:  serif;
	display: inline-block; 
	font-size: 12pt;

} 

.links:hover{
	/*box-shadow: 0 0 5px rgba(0,0,0,0.5); */
	background-color: RGBA(200, 200, 202,.8) ;
	cursor: pointer;
	color: rgba(0,0,255,0.8);

}

.item{
	border-right: 1px soild black;
	/*border-bottom: 1px solid black;*/
}

.item_edges{
	border-right: none;
}
.item_edges2{
	border-bottom: none;
}
.item_edges3{
	border: none;
}

/*dream*/
 #dream2{
   	display: grid;
 	grid-template-rows: 1fr 1fr;
   }

.dream_bg{
	backdrop-filter: blur(6px) sepia(0.5);

}

 
.no{
	background: white;
	border-top: 1px solid black;
	border-bottom: 1px solid black;
	font-size: 8pt;
	font-family: Times;
	font-style: italic;
}
 
 

/*
 .dayimage{
 	  box-shadow: 0 0 5px 5px RGB(250, 249, 252) inset;

 }
 .nightimage{
  	box-shadow: 0 0 5px 5px #666669 inset;

 }  */
.roomimage{
	border:1px solid black;
}
.roomimage:hover{
	cursor: pointer;
}


/*light switch*/

/* The switch - the box around the slider */
.switch {
  position: relative;
  display: inline-block;
  width: 40px;
  height: 16px; 
  top: 2px;
}
.nightswitch{
	color: rgba(234, 236, 249,0.3);
	border-color: rgba(255,255,255,0.3);
}
.dayswitch{
	border-color: rgba(0,0,0,0.2);
}
/* Hide default HTML checkbox */
.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}
 
input:checked + .slider {
  background-color: #333333;

}

input:focus + .slider {
  box-shadow: 0 0 1px gold;
}

input:checked + .slider:before {
  -webkit-transform: translateX(24px);
  -ms-transform: translateX(24px);
  transform: translateX(24px);
  background-color: #111;
	border: 1px solid rgba(234, 236, 249,0.5);
	box-shadow: 0 0 1px rgba(234, 236, 249,0.5);
}

/* The slider */
.slider {
  position: absolute;
  border-style: double; 
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  -webkit-transition: .4s;
  transition: .4s;
}

.slider:before {
  position: absolute;
  border: 1px rgba(0,0,0,0.2);
  border-style: double;
  content: "";
  height: 12px;
  width: 8px;
  left: 1px;
  bottom: 0px;
  background-color: #eee;
  -webkit-transition: .4s;
  transition: .4s;
} 

#randomSentences1{  
	text-align: left;  
	margin: 15px 0px; 
	align-self: flex-start; 
	transform: scaleX(0.6);
	min-height: 80px;
	max-width: 322px;
	align-content: flex-start;
  word-break: keep-all;

 	}
#randomSentences1 span, #randomSentences2 span{ 
	font-family: gulim;
	font-size: 9pt;

	letter-spacing: 1px; 
}
 
#randomSentences2{ 
 	text-align: right; 
 	margin: 15px 0px; 
 	align-self: flex-end;  
 	align-content: flex-start;
 	transform: scaleX(0.6);
 	min-height: 80px;
 	word-break: keep-all;
  max-width: 322px;
 
}
#randomSentences3{  
	text-align: left;  
	margin:   0px; 
	align-self: center; 
	transform: scaleX(0.6);  
  word-break: keep-all;

 	}

#randomSentences4{ 
 	text-align: right; 
 	margin:   0px;  
 	align-content: flex-start;
 	transform: scaleX(0.6); 
 	word-break: keep-all; 
 
}

#randomSentences3 span, #randomSentences4 span{ 
	font-family: gulim;
	font-size: 9pt;
  color: rgba(255,255,255,0.6);
	letter-spacing: 1px; 
}

#die{
	font-family: Times;
	font-size: 11pt;
	margin: 120px 0;
	font-style: italic;
 	filter: blur(1px);
 	border: none;
	padding: 6px;
	transition: all 1s ease-in-out;


} 

.daybutton{
	background:linear-gradient(180deg, #BFC4C3, #EAE1E1,#BFC4C3);
 		
	color: blue;
}
.nightbutton{
	background:linear-gradient(180deg, #444d4d,#333);
 	color: #ffde0a;
}
 
 


/*end*/
.credits{
	background-color: white;
	border-style: double;
 
 }
 work_title{
 	font-family: gulim;
 }
#moon{
	filter: saturate(30%) brightness(2.0);
	opacity: 0.9;
	box-shadow: 0px 0px 15px 15px white inset;
	position: absolute;
	width: calc(483px * 0.2);
 height: calc(483px * 0.15);
	top: 20px;
	left: -20px;

}
#gw{ 
	color: inherit;
	font-size: 8pt;
	font-style: italic;
	border-bottom: 1px solid lightgray;
}
#gw:hover, #tabledragger:hover{
	color: lightgray;
}
#credits_text{
	height: 313px; 
}
#credits_text p{
	background: rgba(230, 230, 238, .1);
	font-family: serif;
 	position: absolute;
	top: 20px;
	left: 20px;
	color: rgba(255,255,245,1);
	width: calc(483px * 0.39);
	text-align: left;
	text-shadow: 1px 0px 0px rgb(100,100,100);
	background-clip: text; 
	box-shadow: 0 0 5px 1px white inset;

}
ko{
	font-size: 12px;
	font-family: serif;
}
#tabledragger{
	text-decoration: underline;
	font-style: italic;
	color: inherit;
}
#mailme{
	text-decoration: none;
	font-family: serif;
}
#mailme:hover{
	color: red;
}
#dial_box{
	position: absolute;
	bottom: 50px;
	right: 19px;
	background-color: black;
	opacity: 1;
 	background-position: center;
	width: calc(284px / 880 * 483);
	height:calc(330px / 880 * 483);
	box-shadow: 0 0 5px 6px white inset;

}	
#callmebutton{
	border-radius: 100%;
	width: calc(100px / 880 * 483);
	height: calc(54px / 880 * 483);
	border: 1px solid rgba(246,220,234);
	position: absolute;
	bottom: 10px;
	right: 69px;
	background: rgb(255,254,250);
	font-family: serif;
	font-style: italic;
	color: blue;
	font-size: 9pt;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-content: center;
}

 /*car*/
.car_content{
	width: 483px;
	height: 483px; 
	overflow-y: visible;
	background-size: cover;
	padding-bottom: 45px; 

}

#car_number{
	height: 483px; 
	display: grid;
	grid-template-rows: 30fr 4fr 6fr;
}

#car_picture{
	box-shadow: 0 0 11px   RGBA(250, 240, 255,0.9) inset;
	background: rgba(0,0,0,0.6);
 }

#stage{
 	background: rgba(255,255,240,0.3);
  box-shadow: 0 0 15px  /*RGB(250, 249, 252)*/ rgba(217, 191, 89,0.5);
 	backdrop-filter: blur(1px);
 	display: grid;
 	grid-template-rows: 6fr 1fr;
 	
 }

 #equation{
 	font-family: Times;
 	color: blue;
 	place-self: center;
 	letter-spacing: 5px;
 	transform: scaleX(0.6) rotate(1deg);
 }

 .puzzle_index span{
 	font-size: 8pt;
 	transform: scaleX(0.7);
 	font-family: sans-serif;
 	text-align: center;
 	font-style: italic;
 } 
 #text_puzzle{
 	display: grid;
 	grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
 	grid-template-rows: 1fr 1fr 1fr ;
 	flex-shrink: 0; 
 	background-size: cover;
 	font-size: 9pt;
 	text-align: center; 
 	background-color: rgba(140,130,140,0.3);
 } 
 .puzzle_piece{
 	background: transparent;
 }
 .puzzle_piece:hover{ 
 	background: rgba(200,200,100,0.9);
 	cursor: pointer;

 }

/*end*/


#ending{
 	overflow-y: hidden;
 	padding:  0vw; 
 }
 
 .number{
 	border-radius: 15px;
 	border-style: double;
 	border: 1px solid #666;
 	background-color: rgb(240,240,245);

 }
 .number:hover{ 
 	cursor: pointer;
 	background-color: rgb(250,246,245);

  
 } 
.content_phone{
	width: 483px;
	height: 483px; 
	overflow: hidden;
	background-size: cover;
	padding-bottom: 45px; 
background: hsla(55, 21%, 68%, 1);

background: radial-gradient(circle, hsla(55, 21%, 68%, 1) 0%, hsla(0, 0%, 71%, 1) 34%);

background: -moz-radial-gradient(circle, hsla(55, 21%, 68%, 1) 0%, hsla(0, 0%, 71%, 1) 34%);

background: -webkit-radial-gradient(circle, hsla(55, 21%, 68%, 1) 0%, hsla(0, 0%, 71%, 1) 34%);

filter: progid: DXImageTransform.Microsoft.gradient( startColorstr="#BEBB9C", endColorstr="#B4B4B4", GradientType=1 ); 
animation: phonecolor 10s ease infinite alternate;
  background-size: 130% 100%; 

}

@keyframes phonecolor {
    0% { background-position: 0% 0%; } 
    100% { background-position: 130% 100%; }
}

#phone{
 	text-align: center; 
	position: relative;
	transform: translateX(-50%);
	left:  50%; 
	padding: 5px;
 	background: rgba(0, 0, 0, .3);
 	/*border-style: double;*/
}

#phonescreen{
 	text-align: center;
	position: relative;
	height: 35px; 
	padding:   5px;
	transform: translateX(-50%);
	left:  50%; 
 	background:black;
 	box-shadow: 0 0 5px 5px black inset ;
	word-wrap: break-word;
	color: white;
	font-family: serif;
	filter: blur(1px); 

}
#dial{
	text-align: center;
	position: relative;
	font-size: 12pt;
	transform: translateX(-50%);
	left:  50%; 
	font-family:  serif;
 	line-height: 1.0;
 }
#keypad{
	display: flex;
	flex-direction: column;
	margin:   5px 0px;
}

#keypad button{
	width:  18px; 
	padding:  1px;
	box-shadow: 0 0 5px 2px #828282 inset, 0 0 3px 5px #dcdcdc inset;
	margin:  2px;
	border: none; 
 }
#keypad button:hover{
	box-shadow: 0 0 5px 2px #828282 inset, 0 0 3px 5px #bcbcbc inset;
	 
 }
#callbutton{ 
 	position: relative; 
	font-family: Times;
	color: rgba(20,60,240,0.9);
	font-style: italic;
	box-shadow: 0 0 3px 3px #828282 inset, 0 0 3px 5px #dccccc inset;
	border: none; 
 	padding: 2px;
 	border-radius: 13px; 
  background-color: rgb(240,230,245);
} 
#callbutton:hover{
	cursor: pointer;
	background-color: blue;
	color: rgb(240,230,245);
}

/*mobile*/

@media ( max-width: 414px ) {

	body{
		width: 100vw;
		height: 100vh;
		position: absolute;
		top: 0;
		left: 0;
	}
	default{
		width: 100vw;
		height: 100vw;
	}
	#maintext{
		width: 100vw;
		height: 100vw;
	}
	#phone{
	width: 100vw;
	height: 400px; 
	text-align: center; 
  position: absolute;
  left: 0;
 	margin: 0px 0px;
 	transform: translate(0,0);
 	/*border-style: double;*/
}
	#phonescreen{
	height:  100px; 
	width: calc(15vw * 3 + 5px * 3);
	text-align: center;
	position: relative;
	transform: translateX(-50%);
	left:  50%; 
 	background:black;
 	margin-top: 5px;
	box-shadow: 0 0 5px 5px black, -5px -5px 5px black;
	word-wrap: break-word;
	color: white;
}
	#keypad{
		text-align: center;

	}
	#keypad button{
	width:  15vw;
	height: 10vw;
	padding:  5px;
	margin:  5px;
}
	#callbutton{
		position: relative;
		bottom: 0px;
	}
  
  layer{
  	position: absolute;
  	left: 0;
  	top: 0;
  	transform: translate(0,0);
  	width: 100vw;
  	height: 100vh;
  }
  default_grid{
  	width: 100vw;
  	position: absolute;
  	left: 0;
  	top: 0;
  	transform: translate(0,0);
  	grid-template-rows: calc(50vh - 100vw / 2) 100vw calc(50vh - 100vw / 2);

  	height: 100vh;
  }
  .content_grid{
  	transform: translate(0,0);
  	width: 100vw; 
  	height: 100vw;
  	left: 0;

  }
  #index_grid{
	width: 100vw;   
	/*margin: 118px 0px;*/
	transform: translate(-50%,-50%);
	left:  50%;
	top: 50%;
	position: relative;
	background-size: cover;
	 
	box-shadow: 0 0 5px 5px #cccccc inset;

 }
 	#main_lang{
 		top: calc(50vh + 50vw);

 }
  #load,poem{
  	width: 100vw;
  	height: 100vw;
  	position: absolute;
  	top: calc(50vh - 100vw / 2);
  	left: 0;
  	transform: translate(0,0);
  }
  .content, .content_phone{
  	width: 100vw;
  	height: 100vw;
  	position: absolute;
   	left: 0;
  	transform: translate(0,0);
  	top: 0;
  }
  mist{
  	width: 100vw;
  	height: 100vw;
  	position: absolute;
  	top:0;
  	left: 0;
  	transform: translate(0,0);
  }
 
  flexbox{
  	height: 100vw;
  	width: 100vw;
  	transform: translate(-50%,-50%);
  	position: absolute;
  	top:50vw;
  	left: 50vw;
  } 
  #randomSentences1, #randomSentences2{
   	min-height: calc(50vw - 152 / 2);
  }
  #loadimages{
  	width: calc(100vw / 3 * 2);
  }
  #bonbon{
  	width: calc(100vw / 9 * 4);
  }
  #eye{
  	width: calc(100vw / 9 * 2);
  }
 	#index_lang{
 		top: 100vw;

 	}
 	/*poem*/
 	#instruction{
 		color: pink;
 	}
 	#tableDiv{
 		position: absolute;
 		width: 100vw;
 		height: 100vw;
 	}
  table { 
  width: 100vw;
  height: 100vw; 

  }
  th{
  	font-size: 8pt;
  }
  td{
  	text-orientation: sideways-right;
  	font-size: 6pt;
  } 

  #poem_lang{
	height:  15px;
	position: absolute; 
	left: 3px;
	z-index: 1;
	top: calc(100vw + 15px + 5px); 
	align-self: flex-start;
	display: flex;
	flex-direction: row;
}

	/*car*/

	#car_number{
	height: 100vw; 
	display: grid;
	grid-template-rows: 30fr 4fr 6fr;
	}
  
  /*main*/
  default_text{
  	width: 100vw;
		height: 100vh; 
  }
  .text_content{
	width: 100vw;
	height: 100vh; 
	overflow: hidden;
	background-size: cover;
	padding-bottom: 45px; 
	background: white;

}


#maintext{
	word-break: keep-all;
	text-align: left;
	width: 100vw;
	height: 100vh;
	overflow-y: visible;
 } 
}