@charset "UTF-8";



/* @FONT FACE (enable the use of 'custom fonts' inside your document) */

/* 
  You can use 'fontsquirrel' (https://www.fontsquirrel.com) 
  or 'transfonter' (https://transfonter.org)
  to generate your own font for the web from .ttf or .oft files 
*/



/* GENERAL STYLES */

html {
  font-size: 18px;
  font-family: 'Arial', 'Helvetica', sans-serif;
  overflow-x:hidden;
  scroll-behavior: smooth;

}

body {
  position:relative;
  font-size: 18px;
  font-family: 'Arial', 'Helvetica', sans-serif;
  width:100%;
  height:auto;
  min-height: 100lvh;
  overflow-y:auto;
  overflow-x:hidden;
  background-color: rgba(120,205,120,1);
  background-color:rgba(0,50,0,1);
  background-color: rgba(120,165,120,1);
  background-color: rgba(220,240,220,1);
}

a {
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}



h1{
  /* h1 style */
  display: block;
  width: auto;
  font-size:1em;
  padding:0;margin:0;
  font-weight: normal;
}

h2{
  /* h2 style */
  width:30vw;
  font-size:1em;
  padding:0;margin:0;
  font-weight: normal;
  text-align: center;
  text-transform: lowercase;
  /*
  text-decoration-line: underline;
  text-decoration-style: solid;
  text-decoration-skip: none;
  text-decoration-skip-ink: none;
  text-decoration-thickness: 1em;
  text-underline-offset: -0.625em;
  */
  /*
  text-transform: lowercase;
  */
}


section a{
  letter-spacing: -0.5em;
  transition:letter-spacing 500ms cubic-bezier(0.2, 0.75, 0.45, 1.1) 0ms;*/
}
section img{
	display:block;
	margin:0;padding:0;
	transform:scale(0.75);
	transition:transform 500ms cubic-bezier(0.2, 0.75, 0.45, 1.1) 0ms;
	width:100%;
	max-width: 100%;
	height:auto;
	max-height:100%;
	object-fit: contain;
}

section a:hover{
	letter-spacing:0;
}

section a:hover img{
	transform:scale(1);
}

h3{
  /* h3 style */
}

p{
  /* paragraph style */
}

/* PAGE STYLES */

/* page structure */

div.page-wrapper {
  /* the element that 'wraps' everything */
  position: relative;
  display: block;
}

main.garden-wrapper{
	position: relative;
	display:flex;
	flex-direction: row;
	justify-content: center;
	align-content: center;
	align-items: center;
	flex-wrap: wrap;
	width: 100%;
}

nav{
	position: fixed;
	display: flex;
	width: 100%;
	height:100lvh;
	flex-direction: column-reverse;
	justify-content: space-between;
	align-items: center;
	align-content: center;
	flex-wrap: wrap;
	top:0;
	left:0;
	padding:1.5rem;
	z-index: 2;
	box-sizing: border-box;
	pointer-events: none;
}

nav *{
	display: inline-block;
	max-width: 45rem;
	margin:0;padding:0;
	text-align: center;
	pointer-events: auto;
}

nav a{
	text-transform: lowercase;
}

section{
	position: relative;
	display:block;
	width:100%;
	height:calc(100lvh - 0.25rem);
	box-sizing: border-box;
	
	
	padding:0.25rem;
	padding-top:0.25rem;
	padding-bottom:0rem;
	
}

section a{
	display: block;
}

section:last-of-type{
	height:calc(100lvh);
	padding-bottom:0.25rem;
}

section div.section-inner{
	position: relative;
	display:flex;
	flex-direction: row;
	justify-content: space-between;
	align-content: space-between;
	align-items: center;
	width:100%;
	height:100%;
	padding:1rem;
	margin:0rem;
	padding-top:5rem;
	padding-bottom:5rem;
	border:1vw ridge;
	box-sizing: border-box;
}

ul, li{
	list-style-type: none;
	margin:0;padding:0;
	pointer-events: none;
}

ul{
	width:100%;
	max-height: calc(100lvh - 2rem);
	display:flex;
	flex-direction: row;
	justify-content: space-between;
	align-content: space-around;
	align-items: center;
	flex-wrap: wrap;
	margin:max(5vw, 1rem);
}

section:nth-of-type(even) div.section-inner{
	flex-direction: row-reverse;
}

section:nth-of-type(even) div.section-inner ul{
	flex-direction: column;
	justify-content: center;
	align-content: center;
	align-items: center;
}

section:nth-of-type(3n + 3) div.section-inner{
	flex-direction: row-reverse;
}

section:nth-of-type(4n + 4) div.section-inner ul{
	flex-direction: column;
	justify-content: flex-start;
}

section:nth-of-type(5n + 5) div.section-inner{
	flex-direction: row;
}

section:nth-of-type(5n + 5) div.section-inner ul{
	flex-direction: column-reverse;
	justify-content: center;
}

li:nth-of-type(1){
	width:25%;
}

li:nth-of-type(2){
	width:50%;
}

li:nth-of-type(3){
	width:25%;
}

li:nth-of-type(4){
	width:50%;
	padding:0;
}



li *{
	pointer-events: auto;
}

li{
	/*border:1px inset white;*/
	position: relative;
	display: block;
	padding:0.5vmin;
	margin:0.5vmin;
	box-sizing: border-box;
}


/*
iframe.iframe-mini{
	position: relative;
	display: block;
	width:calc(100vw - 12rem);
	height:calc( (100vw - 12rem) * 0.66);
	transform:scale(0.2);
	margin:0;
	overflow:hidden;
	margin-top:calc(0px -  (((100vw - 12rem) * 0.66) * 0.4));
	margin-bottom:calc(0px -  (((100vw - 12rem) * 0.66) * 0.4));
	margin-left:calc(0px - ((100vw - 12rem) * 0.4));
	margin-right:calc(0px - ((100vw - 12rem) * 0.4));
	pointer-events : none;
	background-color: white;
}
*/

.is-snapshot img{
	max-width:20vmin;
	max-height:15vmin;
}

.is-snapshot img.is-code{
	max-width:20vmin;
	max-height:15vmin;
}

.is-snapshot img.is-code-negative{
	filter:contrast(200%) invert(100%);
}

.is-house img{
	max-width:25vmin;
	max-height:25vmin;
}

.is-function img{
	max-width:33vmin;
	max-height:33vmin;
}

.is-css a{
	display: flex;
	justify-content: center;
	align-content: center;
	align-items: center;
	min-width: 25vmin;
	min-height: 25vmin;
	max-width:20vmax;
	max-height:20vmax;
	aspect-ratio: 1/1;
	padding:1em;
	font-family: monospace;
	border:1px solid;
	text-align: center;
	box-sizing: border-box;
}

li.is-empty img{
	cursor: not-allowed;
	pointer-events: auto;
}


/*  THEME */

/* color styles */
.is-alexandr, .is-alexandr div.section-inner, .is-alexandr a{border-color: antiquewhite; 	color: aquamarine;	}
.is-amy, .is-amy div.section-inner, .is-amy a{				border-color: coral; 			color: aqua;		}
.is-andrei, .is-andrei div.section-inner, .is-andrei a{		border-color: aqua;				color: chocolate;	}
.is-duru, .is-duru div.section-inner, .is-duru a{			border-color: darkgoldenrod; 	color: deeppink;	}
.is-fedja, .is-fedja div.section-inner, .is-fedja a{		border-color: dodgerblue; 		color: forestgreen;	}
.is-femke, .is-femke div.section-inner, .is-femke a{		border-color: firebrick; 		color: fuchsia;		}
.is-isaac, .is-isaac div.section-inner, .is-isaac a{		border-color: indianred; 		color: indigo;		}
.is-jeungin, .is-jeungin div.section-inner, .is-jeungin a{	border-color: lightgreen; 		color: lightskyblue;}
.is-kaja, .is-kaja div.section-inner, .is-kaja a{			border-color: khaki; 			color: lightsalmon;	}
.is-khulan, .is-khulan div.section-inner, .is-khulan a{		border-color: lightseagreen; 	color: lightpink;	}
.is-lucile, .is-lucile div.section-inner, .is-lucile a{		border-color: linen; 			color: lime; 		}
.is-mani, .is-mani div.section-inner, .is-mani a{			border-color: mediumslateblue;	color: mediumvioletred;}
.is-maria, .is-maria div.section-inner, .is-maria a{ 		border-color: mediumseagreen;	color: mediumblue; }
.is-matilde, .is-matilde div.section-inner, .is-matilde a{ 	border-color: maroon; 			color: mediumspringgreen;}
.is-max, .is-max div.section-inner, .is-max a{				border-color: mediumslateblue; 	color: magenta;		}
.is-myrto, .is-myrto div.section-inner, .is-myrto a{		border-color: midnightblue;		color: mediumorchid;}
.is-nell, .is-nell div.section-inner, .is-nell a{			border-color: navajowhite;		color: navy;		}
.is-olya, .is-olya div.section-inner, .is-olya a{			border-color: olivedrab;		color: orangered;	}
.is-sam, .is-sam div.section-inner, .is-sam a{				border-color: skyblue;			color: silver;		}
.is-timmy, .is-timmy div.section-inner, .is-timmy a{		border-color: tomato;				color: teal;		}
.is-yalizah, .is-yalizah div.section-inner, .is-yalizah a{	border-color: wheat; 			color: violet;		}
.is-yoonjin, .is-yoonjin div.section-inner, .is-yoonjin a{	border-color: yellow; 			color: yellowgreen;	}

/* border styles */
:root{
	/*
	--border-thin: max(0.225vw, 1.5px);
	--border-normal: max(0.275vw, 2px);
	--border-thick: max(0.4vw, 2.5px);
	*/
	--border-thin: 1px;
	--border-normal: 1px;
	--border-thick: 1px;
}

div.section-inner{
	border-radius:0rem!important;
	border-style: solid!important;
}

.is-alexandr div.section-inner{	border: var(--border-normal) ridge antiquewhite; 		border-radius:0rem; 	}
.is-amy div.section-inner{		border: var(--border-thick) double coral; 				border-radius:2.5rem; 	}
.is-andrei div.section-inner{	border: var(--border-normal) solid aqua; 				border-radius:10rem; 	}
.is-duru div.section-inner{		border: var(--border-thin) ridge darkgoldenrod; 		border-radius:5rem; 	}
.is-fedja div.section-inner{	border: var(--border-thin) outset dodgerblue; 			border-radius:2.5rem; 	}
.is-femke div.section-inner{	border: var(--border-normal) dotted firebrick; 			border-radius:0rem; 	}
.is-isaac div.section-inner{	border: var(--border-thick) inset indianred; 			border-radius:25rem; 	}
.is-jeungin div.section-inner{	border: var(--border-normal) outset lightgreen; 		border-radius:10rem; 	}
.is-kaja div.section-inner{		border: var(--border-thick) groove khaki; 				border-radius:0rem; 	}
.is-khulan div.section-inner{	border: var(--border-normal) dotted lightseagreen; 		border-radius:2.5rem; 	}
.is-lucile div.section-inner{	border: var(--border-thick) double linen; 				border-radius:5rem; 	}
.is-mani div.section-inner{		border: var(--border-thick) solid mediumslateblue; 		border-radius:10rem; 	}
.is-maria div.section-inner{ 	border: var(--border-normal) dotted mediumseagreen; 	border-radius:25rem; 	}
.is-matilde div.section-inner{ 	border: var(--border-thick) ridge maroon; 				border-radius:1rem; 	}
.is-max div.section-inner{		border: var(--border-normal) dashed mediumslateblue; 	border-radius:0rem;		}
.is-myrto div.section-inner{	border: var(--border-normal) solid midnightblue; 		border-radius:5rem; 	}
.is-nell div.section-inner{		border: var(--border-thick) groove navajowhite; 		border-radius:0rem; 	}
.is-olya div.section-inner{		border: var(--border-thin) solid olivedrab; 			border-radius:0rem;		}
.is-sam div.section-inner{		border: var(--border-normal) double skyblue; 			border-radius:5rem; 	}
.is-timmy div.section-inner{	border: var(--border-thick) ridge tomato; 				border-radius:25rem; 	}
.is-yalizah div.section-inner{	border: var(--border-normal) dotted wheat; 				border-radius:2.5rem; 	}
.is-yoonjin div.section-inner{	border: var(--border-thick) inset yellow; 				border-radius:1rem; 	}



/* WEBSITE MEDIA QUERIES */

/* styles for 'mobile', screen sizes up to 779px, should covers 'mobile' and 'tablet' */

@media (max-width: 779px) {

  /* your 'mobile' overriding css properties here, remember about the 'cascade' */



}