@import './aside.css';
@import './main.css';

@font-face {
	font-family: 'DM Sans';
	src: url(../fonts/DMSans-Regular.ttf);
	font-weight: normal;
}

@font-face {
	font-family: 'DM Sans';
	src: url(../fonts/DMSans-Bold.ttf);
	font-weight: 700;
}

/** Reset */
* {
	box-sizing: border-box;
	font-family: 'DM Sans', sans-serif;
}
html,
body {
	font-size: 16px;
	margin: 0;
	padding: 0;
	min-height: 100vh;
	width: 100%;
	height: 100%;
}

body {
	background-color: #fff;
	background-image: radial-gradient(
			ellipse at bottom,
			#fafafa 5%,
			transparent 60%
		),
		linear-gradient(136deg, transparent, #eee 290%),
		linear-gradient(115deg, #fafafa, transparent 40%),
		linear-gradient(180deg, transparent 0, #ddd 70%),
		radial-gradient(ellipse at -70% -180%, transparent 80%, #eee 0),
		radial-gradient(ellipse at bottom, #71c7ee 40%, transparent 80%),
		radial-gradient(ellipse at 5% 340%, transparent 80%, #ddd 0);
	background-repeat: no-repeat;
	color: #555;
}

/** Layout **/
/* body { display: flex; flex-direction: column; } */
section.contents {
	flex: 1 1 auto;
	flex-direction: row;
	display: flex;
	height: 100%;
}

/** Title */
h1 {
	font-weight: 700;
	font-size: 2rem;
	padding: 0;
	line-height: 0.9em;
	letter-spacing: -2px;
	margin: 0;
	position: fixed;
	width: 100%;
	border-bottom: 1px solid #999999;
	z-index: 99;
}

/** Controls for the demo (left column) */
#demo_controls {
	/* background: linear-gradient(
		90deg,
		rgba(255, 255, 255, 1) 10%,
		rgba(255, 255, 255, 0) 100%
	); */
	padding: 40px 20px 0px 20px;
	z-index: 10;
	width: 20rem;
}
#demo_controls fieldset {
	padding: 0;
	border: none;
	width: 100%;
}
#demo_controls fieldset .tight {
	width: 50%;
	float: left;
}
#demo_controls legend {
	text-align: center;
	font-size: 20px;
	line-height: 40px;
	margin-bottom: 3px;
}
#demo_controls #interop .interop {
	width: 100%;
	position: relative;
}

#demo_controls #interop .interop label {
	width: 55px;
	margin-right: 5px;
	color: #333333;
}
#demo_controls #interop .interop input {
	margin: 0;
}
#demo_controls select.screen {
	display: block;
	padding: 4px;
	text-align: center;
	width: 7rem;
	margin-bottom: 10px;
}
#demo_controls input,
#rotation {
	display: block;
	max-width: 6.25rem;
	width: 100%;
	margin: 0 0 10px 0;
	text-align: center;
}
/** Keep controls that  */
#demo_controls .tight.speical input {
	margin: 0px;
}
#demo_controls input[type='button'] {
	line-height: 10px;
	font-size: 14px;
	border-radius: 15px;
	border: 1px solid #aaa;
	/* border-style: outset; */
	background-color: #fff;
	height: 30px;
	color: #555;
	transition: all 100ms ease-in-out;
	cursor: pointer;
}
#demo_controls input[type='button']:disabled {
	background-color: #f1f1f1;
	opacity: 0.5;
	cursor: default;
	pointer-events: none;
}
#demo_controls input[type='button']:hover {
	border-color: #1c68d4;
	background-color: #1c68d4;
	color: white;
}
#demo_controls input[type='button']:active {
	border-color: #1c68d4;
	background-color: #1c68d4;
	color: white;
}

#demo_controls input#value {
	width: 100%;
	font-size: 2rem;
	line-height: 2rem;
	max-width: calc(100% - 6.25rem);
}

#demo_controls input#increment {
	position: absolute;
	right: 0;
	bottom: 0;
	width: 5rem;
}
#demo_controls input#increment:disabled {
	cursor: default !important;
	pointer-events: none;
	background: #f1f1f1 !important;
	opacity: 0.5;
}

#demo_controls:disabled {
	pointer-events: none;
	opacity: 0.5;
}

/** The style for the DIV where flutter will be rendered, and the CSS fx */
#set_target {
	border: 1px solid #aaa;
	width: 20rem;
	height: 30rem;
	border-radius: 0px;
	transition: all 150ms ease-in;
	min-height: 200px;
}
#set_target.resize {
	width: 30rem;
	height: 20rem;
}

#set_target.spin {
	animation: spin 6400ms ease-in-out infinite;
}

#set_target.shadow {
	position: relative;
}
#set_target.shadow::before {
	content: '';
	position: absolute;
	display: block;
	width: 100%;
	height: 1px;
	background-color: black;
	border-radius: 50%;
	z-index: -1;
	transform: rotateX(80deg);
	box-shadow: 0px 0px 20px 12px rgba(0, 0, 0, 25%);
	left: 0;
	top: calc(100% - 1px);
}
#set_target.mirror {
	-webkit-box-reflect: below 0px
		linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.4));
}

@keyframes spin {
	0% {
		transform: perspective(1000px) rotateY(0deg);
		animation-timing-function: ease-in;
	}
	15% {
		transform: perspective(1000px) rotateY(165deg);
		animation-timing-function: linear;
	}
	75% {
		transform: perspective(1000px) rotateY(195deg);
		animation-timing-function: linear;
	}
	90% {
		transform: perspective(1000px) rotateY(359deg);
		animation-timing-function: ease-out;
	}
	100% {
		transform: perspective(1000px) rotateY(359deg);
		animation-timing-function: linear;
	}
}

/** "Handheld"/Device mode container */
#handheld {
	opacity: 1;
	transition: opacity 200ms ease-out;
	overflow: hidden;
	display: flex;
	justify-content: center;
	align-items: center;
}
#handheld::before {
	content: '';
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	background: url(../assets/bg.png) no-repeat;
	background-size: 100% auto;
	background-position: center;
	opacity: 1;
	transition: opacity 200ms ease-out;
}

#handheld.hidden::before,
#handheld.hidden::after {
	opacity: 0;
}

#set_target.handheld {
	transform: rotateX(0) rotateY(0) rotateZ(-30deg);
}

.imageAttribution {
	position: absolute;
	bottom: 6px;
	right: 6px;
	font-size: 10px;
}
.imageAttribution,
.imageAttribution a {
	color: #fff;
}

@media screen and (max-width: 80rem) {
	#set_target.handheld {
		transform: rotateX(0) rotateY(0) rotateZ(-30deg) scale(0.7);
	}
}

@media screen and (max-width: 63rem) {
	#set_target {
		width: 80%;
		height: 15rem;
	}
	#set_target.resize {
		width: 15rem;
		height: 10rem;
	}
	#demo_controls {
		width: 100% !important;
		padding: 0;
	}
	#demo_controls input {
		margin: 0 0 5px 0;
	}
}

@media screen and (max-width: 300px) {
	#demo_controls input {
		width: 4.8rem !important;
	}
}

@media screen and (max-height: 45rem) {
	#set_target {
		width: 80%;
		height: 90%;
	}
	#set_target.resize {
		width: 90%;
		height: 80%;
	}
}