@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: rgb(115, 7, 7);
  background-color: rgb(94, 168, 253);
}

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;
	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;
}

li a{
	border-radius: 50%;
}


/*
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-interface img, .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: 22.5vmin;
	min-height: 22.5vmin;
	max-width:17.5vmax;
	max-height: 17.5vmax;
	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-alex, .is-alex div.section-inner, .is-alex a{					border-color: AntiqueWhite; 	color: Aqua; 				}
.is-anastasia, .is-anastasia div.section-inner, .is-anastasia a{	border-color: Brown; 			color: Bisque;			 	}
.is-anita, .is-anita div.section-inner, .is-anita a{				border-color: Aquamarine; 		color: Blue;			 	}
.is-arina, .is-arina div.section-inner, .is-arina a{				border-color: BlanchedAlmond; 	color: BlueViolet;			}
.is-beena, .is-beena div.section-inner, .is-beena a{ 				border-color: Brown; 			color: Crimson;			}
.is-bente, .is-bente div.section-inner, .is-bente a{				border-color: BurlyWood; 		color: darkmagenta;		}
.is-billie, .is-billie div.section-inner, .is-billie a{				border-color: Coral; 			color: Chartreuse;			}
.is-emily, .is-emily div.section-inner, .is-emily a{				border-color: darkcyan; 		color: deeppink;			}
.is-fabian, .is-fabian div.section-inner, .is-fabian a{				border-color: floralwhite; 	color: firebrick;			}
.is-fre, .is-fre div.section-inner, .is-fre a{						border-color: ForestGreen; 	color: Fuchsia;			}
.is-issy, .is-issy div.section-inner, .is-issy a{					border-color: Indigo; 			color: Khaki;				}
.is-izabela, .is-izabela div.section-inner, .is-izabela a{			border-color: IndianRed; 		color: gold;				}
.is-k, .is-k div.section-inner, .is-k a{							border-color: lavender; 		color: hotpink;			}
.is-lara, .is-lara div.section-inner, .is-lara a{					border-color: Lime; 			color: maroon;				}
.is-laura, .is-laura div.section-inner, .is-laura a{				border-color: lightseagreen; 	color: lightcoral;			}
.is-loth, .is-loth div.section-inner, .is-loth a{					border-color: LightSalmon; 	color: lightgreen;			}
.is-milena, .is-milena div.section-inner, .is-milena a{				border-color: navy; 			color: mediumvioletred;    }
.is-pepijn, .is-pepijn div.section-inner, .is-pepijn a{				border-color: papayawhip; 		color: Peru;				}
.is-preslav, .is-preslav div.section-inner, .is-preslav a{ 			border-color: Plum; 			color: PaleGoldenRod;		}
.is-simone, .is-simone div.section-inner, .is-simone a{				border-color: SaddleBrown; 	color: springgreen;		}
.is-szofia, .is-szofia div.section-inner, .is-szofia a{				border-color: SeaGreen; 		color: slateblue;			}
.is-valentijn, .is-valentijn div.section-inner, .is-valentijn a{	border-color: Violet; 			color: wheat;				}



/* 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:100%!important;
	border-style: solid!important;
	border-width:1px!important;
	/*
	border:none!important;
	box-shadow: inset 0em 0em 10em 2em rgba(0,0,0,0.25),
							0em 0em 10em 2em rgba(0,0,0,0.25);
	*/
}

.is-alex div.section-inner{			border: var(--border-normal) dotted AntiqueWhite; 		border-radius:2.5rem; 	}
.is-anastasia div.section-inner{	border: var(--border-thick) double Brown; 				border-radius:2.5rem; 	}
.is-anita div.section-inner{		border: var(--border-normal) solid Aquamarine; 		border-radius:10rem; 	}
.is-arina div.section-inner{		border: var(--border-normal) outset BlanchedAlmond; 	border-radius:10rem; 	}
.is-beena div.section-inner{ 		border: var(--border-normal) dotted Brown; 			border-radius:25rem; 	}
.is-bente div.section-inner{		border: var(--border-thick) groove BurlyWood; 			border-radius:0rem; 	}
.is-billie div.section-inner{		border: var(--border-thick) groove Coral; 				border-radius:0rem; 	}
.is-emily div.section-inner{		border: var(--border-thin) outset DarkCyan; 			border-radius:2.5rem; 	}
.is-fabian div.section-inner{		border: var(--border-thick) groove FloralWhite; 		border-radius:0rem; 	}
.is-fre div.section-inner{			border: var(--border-normal) double ForestGreen; 		border-radius:5rem; 	}
.is-issy div.section-inner{			border: var(--border-thin) solid Indigo; 				border-radius:0rem;		}
.is-izabela div.section-inner{		border: var(--border-normal) dashed IndianRed;			border-radius:0rem;		}
.is-k div.section-inner{			border: var(--border-normal) dotted lavender; 			border-radius:0rem; 	}
.is-lara div.section-inner{			border: var(--border-thick) inset lime; 				border-radius:25rem; 	}
.is-laura div.section-inner{		border: var(--border-normal) ridge LightSeaGreen; 		border-radius:0rem; 	}
.is-loth div.section-inner{			border: var(--border-thin) solid LightSalmon; 			border-radius:0rem;		}
.is-milena div.section-inner{		border: var(--border-normal) solid navy; 				border-radius:5rem; 	}
.is-pepijn div.section-inner{		border: var(--border-thin) ridge PapayaWhip; 			border-radius:5rem; 	}
.is-preslav div.section-inner{		border: var(--border-thick) solid Plum; 				border-radius:10rem; 	}
.is-simone div.section-inner{		border: var(--border-normal) double SaddleBrown; 		border-radius:5rem; 	}
.is-szofia div.section-inner{		border: var(--border-thick) double SeaGreen; 			border-radius:5rem; 	}
.is-valentijn div.section-inner{ 	border: var(--border-thick) ridge Violet; 				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' */



}