/* need font sizes as percentages for headings */
/* svgs with extra padding for smaller med vers */
/* no extra margin or padding added to outer widths */
/* widths need to incorporate global padding */
/* scrolling/outer widths incorporate custom scroll dim */
/* sections center */
/* all main content gets wrapped by a section */
/* need to fall back to pixel mins to avoid flipping */

@import url( "./font.css" );

* { margin: 0; padding: 0.2rem; box-sizing: border-box; font-family: "Montserrat", sans-serif; font-weight: 300; 
	border-radius: 0.5rem; transition: opacity 0.8s ease-in-out; }

*, a:focus { outline: none; }

a:link, a:visited { color: #fff; opacity: 0.8; text-decoration: none; cursor: pointer; }
a:hover { opacity: 1; }

:root { --text-color: #fff; --selector-color: #ddd; --color-animation-duration: 60s; }

html, body, footer { border: unset; border-radius: unset; }

html { width: 100dvw; height: 100dvh; padding: 0; position: fixed; font-size: 2dvh; color: var( --text-color ); 
	background-color: #fff; background-repeat: no-repeat; background-position: center center; background-size: cover; }

body { height: 100%; padding: 0; }
main { height: calc( 100% - 3.5rem ); padding: 0; position: relative; overflow: hidden; } 
main > section > menu { padding: 0; }
section { width: 100%; height: 100%; padding: 0; position: absolute; overflow-x: hidden; }
canvas { height: 100%; border: 1px solid var( --text-color ); }
footer { position: relative; }
svg { padding: 0.1rem; min-height: 2rem; vertical-align: middle; fill: none; stroke-linejoin: round; } 
polygon { stroke-linejoin: round; }
textarea { width: 100%; font-size: 0.9rem; padding: 0.9rem 0.7rem 0.1rem 0.7rem; resize: none; 
vertical-align: middle; font-family: "Montserrat"; font-weight: 500; border-width: 2px; cursor: auto; }
hr { margin: 1rem auto; padding: 0; opacity: 0.4; } 
h1 { font-size: 200% } h2 { font-size: 170% } h3 { font-size: 150% } h4 { font-size: 130% } h5 { font-size: 110% }

header menu { margin-top: 4rem; position: relative; }
header menu > ul { text-align: right; } header menu > ul > li { display: inline; position: relative; opacity: 0.7; }
header menu > ul > li::after, header menu > ul > li.menu--selected::after {
	position: absolute; top: 1rem; left: 50%; text-align: right; font-size: 2rem; content: "•"; opacity: 0; }
header menu > ul > li.menu--selected::after { opacity: 1; } header menu > ul > li:hover::after { cursor: pointer; opacity: 1; }

#container { width: 100%; height: 100%; margin: 0; padding: 0; position: absolute; top: 0; left: 0; 
	transition: left 0.8s ease-in-out; }

#background--images { width: 100%; height: 100%; position: absolute; top: 0; display: block; opacity: 0.7; z-index: -1; }
#img1, #img2, #img3, #img4, #img5, #img6, #img7, #img8, #img9, #img10 {
	width: 100%; height: 100%; position: absolute; top: 0; left: 0; }

#img1  { background-image:  url( "../images/home/1.jpg" );  animation-delay: 0s; }
#img2  { background-image:  url( "../images/home/2.jpg" );  animation-delay: 10s; }
#img3  { background-image:  url( "../images/home/3.jpg" );  animation-delay: 20s; }
#img4  { background-image:  url( "../images/home/4.jpg" );  animation-delay: 30s; }
#img5  { background-image:  url( "../images/home/5.jpg" );  animation-delay: 40s; }
#img6  { background-image:  url( "../images/home/6.jpg" );  animation-delay: 50s; }
#img7  { background-image:  url( "../images/home/7.jpg" );  animation-delay: 60s; }
#img8  { background-image:  url( "../images/home/8.jpg" );  animation-delay: 70s; }
#img9  { background-image:  url( "../images/home/10.jpg" ); animation-delay: 80s; }
#img10 { background-image:  url( "../images/home/11.jpg" ); animation-delay: 90s; }

#menu--side { width: 23rem; height: 100%; padding: 6rem 0 0 3.5rem; position: absolute; top: 0; left: -25rem;
	overflow-x: hidden; background: linear-gradient( 15deg, rgba( 255, 255, 255, 0.2 ), transparent );
	box-shadow: rgba( 0, 0, 0, 0.1 ) 10px 10px 10px 5px; transform-style: preserve-3d; perspective: 1000px; 
	transition: left 0.8s ease-in-out; overflow-x: hidden; } 
#menu--side ul { position: relative; left: -2rem; } #menu--side ul > li { list-style: none; }

#modal--outer { width: 100%; height: 100%; position: absolute; top: 0; left: 0; z-index: -1; background-color: rgba( 0, 0, 0, 0.7 ); }
#modal--inner { width: 60%; max-width: 800px; max-height: 80%; padding-right: 1rem; position: absolute; top: 50%; left: 50%; 
	transform: translate( -50%, -50% ); overflow: hidden; background-color: var( --text-color ); color: var( --selector-color ); }

#modal--close { margin: 1rem 1rem 0 0; text-align: right; }
#modal--content { max-height: calc( 80dvh - 10rem ); margin: 0.5rem; padding: 0 1rem; position: relative; overflow-x: hidden; }
#modal--display { margin: 1rem auto; max-width: 10dvw; }
#modal--button-close { width: 7rem; margin: 1rem; display: inline-block; background-color: var( --selector-color ); 
						color: var(--text-color ); }

#logo { width: 100%; height: 3rem; position: absolute; top: 2rem; left: 1rem; font-size: 2rem; z-index: 1; } 
#logo > div { display: inline-block; }
#title { text-align: center } #controls { display: none; }

.text--select-off { -webkit-user-select: none; user-select: none; }

.container { width: 100%; height: 100%; } .container--half { width: calc( 50% - 0.6rem ); height: 50%; }

.button { display: inline-block; padding: 0.7rem 1rem; margin: 1rem 0.5rem; }

.field { margin: 0.25rem 0; }
.field--multiline { min-height: 10rem; height: 50%; overflow-x: hidden; overflow-y: scroll; }
.field--multiline:hover::-webkit-scrollbar { width: 2rem; height: 2rem; cursor: pointer; }

.dropdown--arrow { width: 3rem; height: 3.1rem; padding-top: 0.9rem; position: absolute; top: 0.3rem; right: 0.3rem;
	text-align: center; border: unset; border-radius: 0; border-left: 1px solid var( --text-color ); z-index: 1;
}
.dropdown { width: calc( 100% - 0.6rem ); min-height: 10rem; max-height: 50%; padding: 0.2rem;
	position: absolute;	top: 4.2rem; left: 0.3rem; opacity: 0; overflow-x: hidden; z-index: 1;
}
.dropdown--value { padding: 0.5rem 1rem; font-size: 0.9rem; cursor: pointer; color: var( --selector-color ); }
.dropdown--value:hover { background-color: var( --selector-color ); color: #fff; }
.dropdown:hover::-webkit-scrollbar { width: 2rem; height: 2rem; }

.width--svg-25 { width: 7.25rem; padding: 0.25; }

.width--unset { width: unset; } .width--auto { width: auto; } .width--min { width: 1rem }
.width--25 { width: calc( 25% - 0.6rem ); } .width--30 { width: calc( 30% - 0.6rem ); } 
.width--50, .width--half { width: calc( 50% - 0.6rem ); } .width--65 { width: calc( 65% - 0.6rem ); } 
.width--70 { width: calc( 70% - 0.6rem ); } .width--80 { width: calc( 80% - 0.6rem ); } 
.width--90 { width: calc( 90% - 0.6rem ); } 

.height--unset { height: unset; } .height--25 { height: calc( 25% - 0.6rem ); }  .height--30 { height: calc( 30% - 0.6rem ); } 
.height--50 { height: calc( 50% - 0.6rem ) } .height--70 { height: calc( 70% - 0.6rem ); } 
.height--90 { height: calc( 90% - 0.6rem ); } .height { height: 100%; }

.margin--none { margin: 0; } .margin--less { margin: 0.5rem; } .margin { margin: 1rem; } 
.margin--top-less { margin-top: 0.5rem; } .margin--top { margin-top: 1rem; } .margin--top-some { margin-top: 2rem; }
.margin--top-more { margin-top: 3rem; } 
.margin--bottom { margin-bottom: 1rem; } .margin--bottom-more { margin-bottom: 3rem; }
.margin--left { margin-left: 1rem; } .margin--left-some { margin-left: 2rem; } 
.margin--right { margin-right: 1rem; } .margin--auto { margin: auto; }  

.padding--none { padding: 0; } .padding--less { padding: 0.5rem; } .padding { padding: 1rem; } 
.padding--top-less { padding-top: 0.5rem; } .padding--top { padding-top: 1rem; } .padding--top-some { padding-top: 2rem; }
.padding--top-more { padding-top: 3rem; } .padding--bottom { padding-bottom: 1rem; } 
.padding--bottom-some { padding-bottom: 2rem; } .padding--some { padding: 2rem; } .padding--more { padding: 3rem; } 
.padding--left-none { padding-left: 0; } .padding--right-none { padding-right: 0; }
.padding--left { padding-left: 1rem; } .padding-right { padding-right: 1rem; }

.display--none { display: none; }
.block { display: block; } .inline--only { display: inline; } .inline { display: inline-block; } 
.relative { position: relative; } .absolute { position: absolute; } 
.visible { visibility: visible; opacity: 1; } .hidden { visibility: hidden; opacity: 0; }
.scroll--none { overflow: hidden; } .scroll { overflow-x: hidden; } .overflow--unset { overflow-x: unset; }
.front { z-index: 1; } .back { z-index: -1; }
.left { text-align: left; } .center { text-align: center; } .right { text-align: right; }
.vertical-align--unset { vertical-align: unset; }
.top { vertical-align: top; } .bottom { vertical-align: bottom; } .middle { vertical-align: middle; }
.center--vertical { position: absolute; left: 50%; top: 42%; transform: translate( -50%, -42% ); }

.rotate--90 { transform: rotate( 90deg ); } .rotate--180 { transform: rotate( 180deg ); }
.rotate--270 { transform: rotate( 270deg ); }
.rotate--90-ccw { transform: rotate( 90deg ); } .rotate--90-cw { transform: rotate( -90deg ); }

.svg--fill { fill: #fff; } .svg--reg { fill: var( --text-color ); } .svg--inv { fill: none; }
.svg--inv-outer { fill: rgba( 255, 255, 255, 0.01 ); stroke: #fff; stroke-width: 0.5; }
.svg--color { fill: var( --selector-color ); } .svg--color-stroke { stroke: var( --selector-color ); }

.icon--small { width: 2.4rem; padding: 0.25rem; vertical-align: middle; }
.icon--medium { width: 3rem; vertical-align: middle; } 
.font--small { font-size: 0.8rem } .font--medium { font-size: 1.1rem }

.background--white { background-color: rgba( 255, 255, 255, 0.9 ); }
.background--image { width: 100%; height: 100%; position: absolute; top: 0; left: 0;
	background-size: cover; background-position: center; background-repeat: no-repeat; opacity: 0.9; animation: fade 100s infinite; }

.background-color--cycle { color: #fff; animation: var( --color-animation-duration ) infinite backgroundColorCycle; }
.color--cycle { animation: var( --color-animation-duration ) infinite colorCycle; } 
.font--white { color: #fff; } .font--color { color: var( --selector-color ); } 
.fade-in { animation: 10s ease infinite fadeOutInOut; } 

.bold { font-weight: 500; } .italic { font-style: italic; } .underline { text-decoration: underline; }
.border--none { border: unset; } .border--circle { padding: 1rem; margin: 1rem; border: 2px solid #fff; border-radius: 50%; }
.border--color { border: 1px solid var( --selector-color ); } .opacity--half { opacity: 0.5; }

.cursor:hover { cursor: pointer; } .clickable { opacity: 0.8; cursor: pointer; } .clickable:hover { opacity: 1; }

.back--none { background-color: rgba( 0, 0, 0, 0 ); color: #fff; border: none; }
.back--shade { background-color: rgba( 0, 0, 0, 0.1 ); color: #fff; border: 1px solid rgba( 0, 0, 0, 0.1 ); }
.back--light { background-color: rgba( 255, 255, 255, 0.1 ); color: #fff; border: 1px solid #fff; }
.back--inv   { background-color: var( --text-color ); color: var( --selector-color ); }
.back--inv-color { background-color: var( --selector-color ); color: var(--text-color );  }
.back--color { background-color: rgba( 255, 255, 255, 0.9 ); color: var( --selector-color ); 
	border: 2px solid var( --selector-color ); }

::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background-color: rgba( 0, 0, 0, 0.1 ); -webkit-box-shadow: inset 0 0 4px rgba( 0, 0, 0, 0.1 ); }
::-webkit-scrollbar-thumb {
	background-color: rgba( 0, 0, 0, 0.2 ); -webkit-box-shadow: inset 0 0 4px rgba( 0, 0, 0, 0.1 ); cursor: pointer; }
::-webkit-scrollbar-thumb:window-inactive { background-color: rgba( 0, 0, 0, 0.1 ); }

input[ type="range" ], input[ type="range" ]::-webkit-slider-runable-track, 
input[ type="range" ]::-webkit-slider-thumb, input[ type="range" ]::-webkit-slider-thumb:hover {
	-webkit-appearance: none; appearance: none; box-shadow: inset 0 0 4px rgba( 0, 0, 0, 0.1 ); border: unset;}
input[ type="range" ], 
input[ type="range" ]::-webkit-slider-runable-track { width: 100%; height: 0.5rem; background: rgba( 0, 0, 0, 0.1 ); }
input[ type="range" ]::-webkit-slider-thumb {
	width: 1rem; height: 1rem; border-radius: 50%; background: rgba( 255, 255, 255, 0.7 ); cursor: pointer; }
input[ type="range" ]::-webkit-slider-thumb:hover { background: rgba( 255, 255, 255, 1 ); }

@keyframes fadeOutInOut { 0% { opacity: 0; } 50% { opacity: 1; } 100% { opacity: 0; } }

@keyframes backgroundColorCycle {
	0%	{ background-color: rgba( 102, 0, 0, 0.85 ); }		15% { background-color: rgba( 169, 78, 4, 0.85 ); }
	30%	{ background-color: rgba( 162, 148, 42, 0.85 ); }	45% { background-color: rgba( 10, 132, 30, 0.85 ); }
	60%	{ background-color: rgba( 0, 75, 149, 0.85 ); }		75% { background-color: rgba( 9, 4, 97, 0.85 ); }	
	90%	{ background-color: rgba( 66, 26, 106, 0.85 );}	   100% { background-color: rgba( 102, 0, 0, 0.85 ); } 
}

@keyframes colorCycle {
	 0%	{ color: rgba( 102, 0, 0, 1 );     fill: rgba( 102, 0, 0, 1 );    border-color: rgba( 102, 0, 0, 0.3 ); }
	 15% { color: rgba( 169, 78, 4, 1 );   fill: rgba( 169, 78, 4, 1 );   border-color: rgba( 169, 78, 4, 0.3 ); }
	 30% { color: rgba( 162, 148, 42, 1 ); fill: rgba( 162, 148, 42, 1 ); border-color: rgba( 162, 148, 42, 0.3 ); }
	 45% { color: rgba( 10, 132, 30, 1 );  fill: rgba( 10, 132, 30, 1 );  border-color: rgba( 10, 132, 30, 0.3 ); }
	 60% { color: rgba( 0, 75, 149, 1 );   fill: rgba( 0, 75, 149, 1 );   border-color: rgba( 0, 75, 149, 0.3 ); }
	 75% { color: rgba( 9, 4, 97, 1 );     fill: rgba( 9, 4, 97, 1 );     border-color: rgba( 9, 4, 97, 0.3 ); }
	 90% { color: rgba( 66, 26, 106, 1 );  fill: rgba( 66, 26, 106, 1 );  border-color: rgba( 66, 26, 106, 0.3 ); }
	100% { color: rgba( 102, 0, 0, 1 );    fill: rgba( 102, 0, 0, 1 );    border-color: rgba( 102, 0, 0, 0.3 ); }
}
/*
@media screen and ( width <= 100dvh ) { html { font-size: 2dvw; } .width--50 { width: calc( 50% * 1.2dvh ); min-width: 320px } }
@media screen and ( width > 100dvh ) { main { max-width: 1100px; margin: 0 auto; } .width--50 { max-width: 550px; } }
@media screen and ( width > 100dvh ) { main { .width--50 { max-width: 60dvh; } }
@media screen and ( height > 900px and width > 100dvh ) { html { font-size: 16px; } }
@media screen and ( height < 500px ) { html { font-size: 10px; } }
@media screen and ( height < 500px ) and ( width < 600px ) { .width--50 { width: 90% } }
*/
@media screen and ( width > 100dvh and height > 850px ) { 
	html { font-size: 16px; } menu .width--50 { width: 532px; margin: 0 calc( ( 100% - 532px ) * 0.5 ); } }
@media screen and ( width > 80dvh ) { 
	main { max-width: 1100px; margin: 0 auto; }
	menu .width--50 { width: calc( 59dvh - 0.6rem ); margin: 0 calc( ( 100% - 59dvh - 0.6rem ) * 0.5 );  } }
@media screen and ( width <= 80dvh ) { 
	html { font-size: 2.4dvw; } menu .width--50 { width: calc( 59dvh - 0.6rem ); 
	margin: 0 calc( ( 100% - 59dvh - 0.6rem ) * 0.5 ); } }
@media screen and ( height <= 400px ) { html { font-size: 8px; } 
	menu .width--50 { width: 232px; margin: 0 calc( ( 100% - 232px ) * 0.5 ); } }