@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;
  color: rgba(235,235,235,1);
  background-color: rgba(35,15,35,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-bengi, .is-bengi div.section-inner, .is-bengi a{				border-color: blueviolet; 		color: burlywood;				}
.is-daniel, .is-daniel div.section-inner, .is-daniel a{			border-color: darkturquoise; 	color: darkviolet;				}
.is-david, .is-david div.section-inner, .is-david a{				border-color: deeppink;				color: dodgerblue;				}
.is-eva, .is-eva div.section-inner, .is-eva a{							border-color: forestgreen; 		color: fuchsia;						}
.is-iloy, .is-iloy div.section-inner, .is-iloy a{						border-color: indigo; 				color: indianred;					}
.is-jasna, .is-jasna div.section-inner, .is-jasna a{				border-color: firebrick; 			color: goldenrod;					}
.is-jennie, .is-jennie div.section-inner, .is-jennie a{			border-color: lavenderblush;	color: lightsteelblue;    }
.is-jerome, .is-jerome div.section-inner, .is-jerome a{			border-color: lightgreen; 		color: lightskyblue;			}
.is-julia-f, .is-julia-f div.section-inner, .is-julia-f a{	border-color: lightcyan; 			color: lightsalmon;				}
.is-julia-j, .is-julia-j div.section-inner, .is-julia-j a{	border-color: linen; 					color: lime;						  }
.is-julia-n, .is-julia-n div.section-inner, .is-julia-n a{	border-color: lightseagreen; 	color: lightpink; 				}
.is-klara, .is-klara div.section-inner, .is-klara a{				border-color: lightyellow;		color: lightcoral;				}
.is-layoung, .is-layoung div.section-inner, .is-layoung a{ 	border-color: limegreen;			color: lavender; 					}
.is-luca, .is-luca div.section-inner, .is-luca a{ 					border-color: lightblue; 			color: lawngreen;					}
.is-mara, .is-mara div.section-inner, .is-mara a{						border-color: mediumslateblue;color: magenta;						}
.is-mart, .is-mart div.section-inner, .is-mart a{						border-color: midnightblue;		color: mediumorchid;			}
.is-nastya, .is-nastya div.section-inner, .is-nastya a{			border-color: navy;						color: navajowhite;				}
.is-olin, .is-olin div.section-inner, .is-olin a{						border-color: olive;					color: orangered;					}
.is-pola, .is-pola div.section-inner, .is-pola a{						border-color: pink;						color: palegreen;					}
.is-prem, .is-prem div.section-inner, .is-prem a{						border-color: palegoldenrod;	color: plum;							}
.is-roxee, .is-roxee div.section-inner, .is-roxee a{				border-color: rebeccapurple; 	color: red;							  }
.is-sia, .is-sia div.section-inner, .is-sia a{							border-color: seagreen; 			color: salmon;				  	}
.is-simone, .is-simone div.section-inner, .is-simone a{			border-color: sandybrown; 		color: slateblue;					}
.is-yicheng, .is-yicheng div.section-inner, .is-yicheng a{	border-color: yellowgreen; 		color: yellow;						}

/* 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-bengi div.section-inner{		border: var(--border-normal) ridge blueviolet; 			border-radius:0rem; 	}
.is-daniel div.section-inner{		border: var(--border-thick) double darkturquoise; 	border-radius:2.5rem; }
.is-david div.section-inner{		border: var(--border-normal) solid deeppink; 				border-radius:10rem; 	}
.is-eva div.section-inner{			border: var(--border-thin) ridge forestgreen; 			border-radius:5rem; 	}
.is-iloy div.section-inner{			border: var(--border-thin) outset indigo; 					border-radius:2.5rem; }
.is-jasna div.section-inner{		border: var(--border-normal) dotted firebrick; 			border-radius:0rem; 	}
.is-jennie div.section-inner{		border: var(--border-thick) inset lavenderblush; 		border-radius:25rem; 	}
.is-jerome div.section-inner{		border: var(--border-normal) outset lightgreen; 		border-radius:10rem; 	}
.is-julia-f div.section-inner{	border: var(--border-thick) groove lightcyan; 			border-radius:0rem; 	}
.is-julia-j div.section-inner{	border: var(--border-normal) dotted linen; 					border-radius:2.5rem; }
.is-julia-n div.section-inner{	border: var(--border-thick) double lightseagreen; 	border-radius:5rem; 	}
.is-klara div.section-inner{		border: var(--border-thick) solid lightyellow; 			border-radius:10rem; 	}
.is-layoung div.section-inner{ 	border: var(--border-normal) dotted limegreen; 			border-radius:25rem; 	}
.is-luca div.section-inner{ 		border: var(--border-thick) ridge lightblue; 				border-radius:1rem; 	}
.is-mara div.section-inner{			border: var(--border-normal) dashed mediumslateblue;border-radius:0rem;		}
.is-mart div.section-inner{			border: var(--border-normal) solid midnightblue; 		border-radius:5rem; 	}
.is-nastya div.section-inner{		border: var(--border-thick) groove navy; 						border-radius:0rem; 	}
.is-olin div.section-inner{			border: var(--border-thin) solid olive; 						border-radius:0rem;		}
.is-pola div.section-inner{			border: var(--border-normal) double pink; 					border-radius:5rem; 	}
.is-prem div.section-inner{			border: var(--border-thick) ridge palegoldenrod; 		border-radius:25rem; 	}
.is-roxee div.section-inner{		border: var(--border-normal) dotted rebeccapurple; 	border-radius:2.5rem; }
.is-sia div.section-inner{			border: var(--border-thick) inset seagreen;					border-radius:1rem; 	}
.is-simone div.section-inner{		border: var(--border-thick) inset sandybrown; 			border-radius:1rem; 	}
.is-yicheng div.section-inner{	border: var(--border-thick) inset yellowgreen; 			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' */



}