body {
	margin: 0;
	padding: 0;
	background: linear-gradient( 0deg, rgb(7 65 88) 21.2%, rgb(126 31 120) 84.8% ) no-repeat center center fixed;
	height: 100%;
	min-height: 100dvh;
	overflow: hidden;

}
* {
	font-family: Helvetica,sans-serif;
}
:root {
	--size: 1vmin;
	--eyebrow-rotation: 8;
	--eyebrow-height: 35;
	--pupil-position-x: 1%;
	--pupil-position-y: 1%;
	--eye-size-y: 17%;
	--eye-height: 43%;
	--mouth-height: 1;
}
svg {
	width: 100%;
	height: 100%;
	position: fixed;
}
svg.star-background {
  position: absolute;
  z-index: -1;
  left: 0;
  bottom: 0;
}
section {
	padding:  100px 0;
}
#main {
	text-align: center;
	/*background: #000000;*/
}

#face_container {
	height: calc(50 * var(--size));
  width: calc(40 * var(--size));
  opacity: 0;
  transform: rotate(180deg) scale(.1);
}

.face.show {
	opacity: 1 !important;
	transform: rotate(0deg) scale(1) !important;
}

.face {
	margin: 0 auto;
  height: calc(50 * var(--size));
  width: calc(40 * var(--size));
  background: linear-gradient(90deg, 
  	rgba(128, 47, 43, 1) 0%, 
  	rgba(80, 39, 33, 1) 48%, 
  	rgba(35, 7, 5, 1) 86% 
  );
  border-radius: 60% 60% 65% 65% / 40% 40% 50% 50%;
  position: relative;
  transition: all .2s ease-in-out;
  display: inline-block;
  vertical-align: bottom;
}
.face * {
	position: absolute;
}
.face .inner-face {
	top: 12%;
  left: 3%;
  height: 58%;
  width: 94%;
	background: rgb(227 167 145);
	background: linear-gradient(
    276deg,
    rgba(179, 121, 99, 1) 25%,
    rgb(227 167 145) 54%,
    rgb(241 202 187) 80%
   );
	border-radius: 80% 60% 25% 25% / 60% 60% 40% 40%;
}
.face .eye-brows {
	top: calc(var(--eyebrow-height) * 1%);
  left: 0%;
  width: 100%;
  height: 6%;
  z-index: 11;
  transition: all .2s ease-in-out;
}
.eye-brows .left-brow {
	width: 34%;
	height: 100%;
	left: 8%;
	top: 0%;
	background-color: rgb(80 39 33);
	border-radius: 32% 80% 0% 0% / 100% 100% 0% 0%;
	transform: rotate(calc(-1deg * var(--eyebrow-rotation)));
}
.eye-brows .right-brow {
	width: 34%;
	height: 100%;
	right: 8%;
	top: 0%;
	background-color: rgb(80 39 33);
	border-radius: 80% 32% 0% 0% / 100% 100% 0% 0%;
	transform: rotate(calc(1deg * var(--eyebrow-rotation)));
}
.face #eyes {
	top: var(--eye-height);
  left: 5%;
  width: 90%;
  height: var(--eye-size-y);
  z-index: 4;
  transition: all .2s ease-in-out;
}
.face #eye_center {
	height: 0;
	width: 0;
	left: 50%;
}
.face #eyes .left-eye {
	background: #ffffff;
	width: 32%;
	height: 82%;
	left: 8%;
	top: 0%;
	border-radius: 50% 20% 20% 30% / 50% 60% 40% 30%;
	border: calc(var(--size) /4) solid #000000;
	overflow: hidden;
}
.face #eyes .right-eye {
	background: #ffffff;
	width: 32%;
	height: 82%;
	right: 8%;
	top: 0%;
	border-radius: 20% 50% 30% 20% / 60% 50% 30% 40%;
	border: calc(var(--size) /4) solid #000000;
	overflow: hidden;
}
.face .pupil {
	width: 20%;
  height: 50%;
  top: calc(-7% + var(--pupil-position-y));
	border-radius: 100%;
	z-index: 10;
	background: #000000;
	border: rgb(80 39 33) calc(var(--size) * 1.5) solid;
}
.face .left-eye .pupil{
	left: calc(30% + var(--pupil-position-x));
	transition: all .2s ease-in-out;
}
.face .right-eye .pupil{
	right: calc(30% - var(--pupil-position-x));
	transition: all .2s ease-in-out;
}
.face .left-eye .cross_eyed {
	left: 65% !important;
}
.face .right-eye .cross_eyed {
	right: 65% !important;
}
.face .nose {
	top: 55%;
  left: 41%;
  width: 20%;
  height: 43%;
  border-radius: 40% 80% 50% 50% / 50% 100% 50% 40%;
  border-right: rgb(0 30 0) calc(var(--size) / 2) solid;
  border-bottom: rgb(0 30 0) calc(var(--size) / 2) solid;
}
.face .mouth {
	background: #000000;
  width: 40%;
  height: calc(var(--mouth-height) * 1%);
  left: 27%;
  top: 77%;
  border-radius: 10% 10% 50% 50% / 20% 20% 80% 80%;
  border: calc(var(--size) * 1) solid rgb(227 167 145);
  transition: all .2s ease-in-out;
}
.form_container {
	margin-top: calc(var(--size) * 5);
	width: 100%;
	text-align: center;
	position: relative;
}
#query_container {
	background: #ff46f5;
	border: 3px solid #17bbff;
	width: width: calc(var(--size) * 80);
	display: inline-block;
	position: relative;
	border-radius: 10px 10px 0 0;
	padding:var(--size);
	box-sizing: border-box;
	pointer-events: none;
	transition: background 300ms ease-in-out;
}
#query {
	width: calc(var(--size) * 80);
	font-size: calc(var(--size) * 4);
	padding: calc(var(--size) * 2);
	font-weight: bold;
	border: none;
	pointer-events: auto;
}
.svg_button {
	position: relative;
	vertical-align: bottom;
}
#result {
	background: #ffffff;
	text-align: left;
  width: 100%;
  font-size: calc(var(--size) * 4);
  position: absolute;
  border: 1px solid #aaa;
  left: 0;
  box-sizing: border-box;
  margin-top: var(--size);
  pointer-events: auto;
}
#result ul {
  list-style-type: none;
  padding: 0;
  margin: 0;
  cursor: pointer;
}
#result ul li {
	padding: calc(var(--size) * 2);
}
#result ul .selected {
	background: #eeeeee;
}
#submit_form {
	font-size: calc(var(--size) * 4);
	border: none;
	background: transparent;
	cursor: pointer;
	padding: calc(var(--size) * 2);
	vertical-align: bottom;
	pointer-events: auto;
}
#query_container:hover {
	background:#17bbff;
}

.hl {
	font-weight: bold;
}
u {
	text-decoration: none;
	font-weight: bold;
}
#speech-bubble {
	visibility: hidden;
	opacity: 0;
	display: inline-block;
	position: absolute;
	top: 10px;
	left: 10px;
  background: #ffffff;
  color: #FFFFFF;
  font-size: 1rem;
  vertical-align: top;
  text-align: left;
  max-width: 0;
  border-radius: 12px;
  padding: 0px;
  box-sizing: border-box;
  border-top: #000000 solid 3px;
  border-right: #000000 solid 8px;
  border-bottom: #000000 solid 8px;
  border-left: #000000 solid 3px;
  z-index: 10000;
  transition: all .4s ease-in-out;
}
@media screen and (min-width: 1024px) {
	#speech-bubble {
		left: calc(10px + 15vw);
	}
}
#speech-bubble.show{
	padding: 10px;
	visibility: visible;
	opacity: 1;
  width: auto;
  width: 300px;
  max-width: 92%;
  max-height: 200px;
  overflow: auto;
  transition: all .4s ease-in-out, color .4s ease-in-out .3s;
  color: #000000;
  margin-bottom: 100px;
}
.fade-in-text {
  display: inline-block;
  white-space: pre-wrap;
  overflow: hidden;
  animation: reveal 5s steps(60) forwards;
}

@keyframes reveal {
  from {
    width: 0;
  }
  to {
    width: 100%;
  }
}
/*@media screen and (min-width: 426px) {
	#speech-bubble:after {
	  content: '';
	  position: absolute;
	  display: block;
	  width: 0;
	  z-index: 1;
	  border-style: solid;
	  border-width: 12px 0 0 12px;
	  border-color: #ffffff transparent transparent transparent;
	  top: 100%;
	  right: 10px;
	  margin-right: -1px;
	}
	#speech-bubble:before {
		content: '';
	  position: absolute;
	  width: 0;
	  z-index: 0;
	  border-style: solid;
	  border-width: 23px 0 0 28px;
	  border-color: #000000 transparent transparent transparent;
	  top: 100%;
	  right: 3px;
	  margin-right: 1px;
	  display: block;
	}
}*/

@media screen and (max-width: 425px) {
	#query {
		width: 90%;
		font-size: 1rem;
		padding: 10px;
		font-weight: bold;
		border: none;
	}
	#result {
	  font-size: 1rem;
	  margin-top: 10px;
	}
	.form_container {
		margin-top: calc(var(--size) * 5);
		width: 100%;
		text-align: center;
		position: relative;
	}
	#query_container {
		width: 100%;
		padding:10px;
	}
}

.stars {
	transform-origin: center center;
}
.stars-sm-no-rotate {
	fill: #ffffffaa;
}
.stars-sm {
	fill: #ffffff55;
	animation: stars-sm-rotate 1000s infinite linear;
}
.stars-md {
  fill: #ffffff88;
  animation: stars-md-rotate 400s infinite linear;
}
.sun {
  height: 100%; 
  width: 100%;
  y: 0; 
  x: 0; 
  fill: url(#solarGradient);
}

@keyframes stars-sm-rotate {
	from {
		transform: scale(1.25) rotate(-45deg) translate(300px, -50px);
	}
	to {
		transform: scale(1.25) rotate(-405deg) translate(300px, -50px);
	}
}
@keyframes stars-md-rotate {
	from {
		transform: scale(1.75) rotate(-45deg) translate(300px, -50px);
	}
	to {
		transform: scale(1.75) rotate(-405deg) translate(300px, -50px);
	}
}