@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(0,7,63,1);
  background-color: rgba(255,160,110,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;
	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-adriana, .is-adriana div.section-inner, .is-adriana a{					border-color: AliceBlue; 			color: Aquamarine;				}
.is-antrea, .is-antrea div.section-inner, .is-antrea a{							border-color: Aqua; 					color: Azure;							}
.is-christina, .is-christina div.section-inner, .is-christina a{		border-color: CadetBlue;			color: Chartreuse;				}
.is-enola, .is-enola div.section-inner, .is-enola a{								border-color: DarkRed; 				color: DarkViolet;				}
.is-erwin, .is-erwin div.section-inner, .is-erwin a{								border-color: DarkBlue; 			color: DarkGoldenRod;			}
.is-finn, .is-finn div.section-inner, .is-finn a{										border-color: forestgreen;		color: firebrick;    			}
.is-francesco, .is-francesco div.section-inner, .is-francesco a{		border-color: floralwhite; 		color: fuchsia;						}
.is-gosha, .is-gosha div.section-inner, .is-gosha a{								border-color: Grey; 					color: greenyellow;				}
.is-isaac, .is-isaac div.section-inner, .is-isaac a{								border-color: Ivory; 					color: Indigo;						}
.is-jordy, .is-jordy div.section-inner, .is-jordy a{								border-color: Lavender; 			color: Khaki; 						}
.is-mark, .is-mark div.section-inner, .is-mark a{										border-color: MediumBlue;			color: Magenta;						}
.is-martyna, .is-martyna div.section-inner, .is-martyna a{ 					border-color: MediumSlateBlue;color: MediumSpringGreen; }
.is-mia, .is-mia div.section-inner, .is-mia a{ 											border-color: Maroon; 				color: MediumVioletRed;		}
.is-miruna, .is-miruna div.section-inner, .is-miruna a{							border-color: MidnightBlue;		color: MediumPurple;			}
.is-nana, .is-nana div.section-inner, .is-nana a{										border-color: NavajoWhite;		color: Navy;							}
.is-nora, .is-nora div.section-inner, .is-nora a{										border-color: Olive;					color: Orchid;						}
.is-sonia, .is-sonia div.section-inner, .is-sonia a{								border-color: SeaGreen;				color: slateblue;					}
.is-tosia, .is-tosia div.section-inner, .is-tosia a{								border-color: Tomato;					color: Teal;							}
.is-ye-gon, .is-ye-gon div.section-inner, .is-ye-gon 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: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-adriana div.section-inner{		border: var(--border-normal) ridge AliceBlue; 			border-radius:0rem; 	}
.is-antrea div.section-inner{			border: var(--border-thick) double Aqua; 						border-radius:2.5rem; }
.is-christina div.section-inner{	border: var(--border-normal) solid CadetBlue; 			border-radius:10rem; 	}
.is-enola div.section-inner{			border: var(--border-thin) ridge DarkRed; 					border-radius:5rem; 	}
.is-erwin div.section-inner{			border: var(--border-thin) outset DarkBlue; 				border-radius:2.5rem; }
.is-finn div.section-inner{				border: var(--border-normal) dotted forestgreen; 		border-radius:0rem; 	}
.is-francesco div.section-inner{	border: var(--border-thick) inset floralwhite; 			border-radius:25rem; 	}
.is-gosha div.section-inner{			border: var(--border-normal) outset grey; 					border-radius:10rem; 	}
.is-isaac div.section-inner{			border: var(--border-thick) groove Ivory; 					border-radius:0rem; 	}
.is-jordy div.section-inner{			border: var(--border-normal) dotted Lavender; 			border-radius:2.5rem; }
.is-mark div.section-inner{				border: var(--border-thick) double MediumBlue; 			border-radius:5rem; 	}
.is-martyna div.section-inner{		border: var(--border-thick) solid MediumSlateBlue; 	border-radius:10rem; 	}
.is-mia div.section-inner{ 				border: var(--border-normal) dotted Maroon; 				border-radius:25rem; 	}
.is-miruna div.section-inner{ 		border: var(--border-thick) ridge MidnightBlue; 		border-radius:1rem; 	}
.is-nana div.section-inner{				border: var(--border-normal) dashed NavajoWhite;		border-radius:0rem;		}
.is-nora div.section-inner{				border: var(--border-normal) solid Olive; 					border-radius:5rem; 	}
.is-sonia div.section-inner{			border: var(--border-thick) groove SeaGreen; 				border-radius:0rem; 	}
.is-tosia div.section-inner{			border: var(--border-thin) solid Tomato; 						border-radius:0rem;		}
.is-ye-gon div.section-inner{			border: var(--border-normal) double YellowGreen; 		border-radius:5rem; 	}





/* 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' */



}