/* css Zen Garden default style v1.02 */
/* css released under Creative Commons License - http://creativecommons.org/licenses/by-nc-sa/1.0/  */

/* This file based on 'Tranquille' by Dave Shea */
/* You may use this file as a foundation for any new work, but you may find it easier to start from scratch. */
/* Not all elements are defined in this file, so you'll most likely want to refer to the xhtml as well. */

/* Your images should be linked as if the CSS file sits in the same folder as the images. ie. no paths. */


/* basic elements */


@import url('https://fonts.googleapis.com/css2?family=Major+Mono+Display&family=Plus+Jakarta+Sans:wght@200&family=Press+Start+2P&display=swap');

@font-face {
	font-family: 'Nintendo2';
	src: url(/fonts/Nintendoid\ 2.ttf);
}

@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100;300;400;500;700&display=swap');



html {
	margin: 0;
	padding: 0;
}

body {
	height: 100%;
	position: absolute;
	font-family: 'Roboto Mono', monospace;
	line-height: 1.88879;
	background: url(https://zengarden.magaggie.it/immagini/stelle1.gif) repeat center center;
	margin: 0;
	padding: 0;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	touch-action: auto;
	overflow: scroll;
    -webkit-overflow-scrolling: touch;
}

/* .draggable {
	width: 500px;
	/* position: absolute;
	cursor: move; 
} */

p {
	margin-top: 1em;
	color: antiquewhite;
	font-size: 16px;
	position: relative;
}

.page-wrapper {
	display: flex;
	flex-wrap: wrap;
	flex-direction: column;
	z-index: 5;
}

/*p:hover, a:link:hover:not(footer > a):not(aside a), abbr:hover {
	color: transparent;
}

p:hover:after {
	content:'人類社会のすべての構成員の固有の尊厳と平等で譲ることのできない権利とを承認することは、正義及び平和の基礎であるので' ;
	display: block;
	position: absolute;
	top: 0;
	font-size: 1em;
	color: antiquewhite;
}
*/


a:link:not(footer > a),
abbr {
	color: fuchsia;

}

h1 {
	margin: 0;
}

header h1:hover:after {
	color: antiquewhite;
	content: '禅庭';
	display: block;
	position: absolute;
	top: 0;
	font-size: 1.2em;
	width: 10em;
	height: 2em;
	color: antiquewhite;
}

h3 {
	font-family: 'Press Start 2P', cursive;
	letter-spacing: 1px;
	margin-bottom: 0;
	font-size: 18pt;
	position: relative;
	color: antiquewhite;
	line-height: 100%;
	text-shadow: 0.06rem 0 0.06rem #ea36af, -0.125rem 0 0.06rem #75fa69;
	animation-duration: 0.01s;
	animation-name: textflicker;
	animation-iteration-count: infinite;
	animation-direction: alternate;
}

@keyframes textflicker {
	from {
		text-shadow: 2px 0 0 #ea36af, -2px 0 0 #75fa69;
	}
	to {
		text-shadow: 3px 0.5px 2px #ea36af, -1px -0.5px 2px #75fa69;
	}
}

h3:hover {
	color: transparent;
}

h3:hover:after {
	color: antiquewhite;
	content: '無視及び軽侮が、';
	display: block;
	position: absolute;
	top: 0;
	font-size: 1.2em;
	width: 10em;
	height: 2em;
	color: antiquewhite;
}

aside h3 {
	color: black;
}

aside h3:hover:after {
	color: black;
	text-shadow: none;
}


a:link {
	font-family: 'Press Start 2P', cursive;
	font-weight: bold;
	text-decoration: none;
}

a:visited {
	font-weight: bold;
	text-decoration: none;

}

a:hover,
a:focus,
a:active {
	text-decoration: underline;

}

abbr {
	font-family: 'Press Start 2P', cursive;
	border-bottom: none;
	font-weight: bold;
}


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

.preamble,
.benefits,
.participation,
.explanation,
.requirements {
	margin: 25px;
}


.intro {
	order: 2;
	display: flex;
	flex-direction: row;
	flex: 1 1 100%;
	flex-wrap: wrap;
	position: relative;
	height: auto;
	cursor: url(https://zengarden.magaggie.it/immagini/windows.png), auto;
}

header {
	display: flex;
	width: 100vw;
	flex-direction: column;
	flex: 1 1 100%;
	align-items: center;
}

header h1 {
	font-family: 'Press Start 2P', cursive;
	font-size: 3.5em;
	word-spacing: -13px;
	font-style: normal;
	font-weight: 400;
	src: url(/fonts/Nintendoid\ 1.ttf) format('ttf');
	color: fuchsia;
	display: flex;
	text-align: center;
	white-space: wrap;
	overflow: hidden;
	text-shadow: 0.06rem 0 0.06rem #ea36af, -0.125rem 0 0.06rem #75fa69;
	animation-duration: 0.01s;
	animation-name: textflicker;
	animation-iteration-count: infinite;
	animation-direction: alternate;
}

@keyframes textflicker {
	from {
		text-shadow: 2px 0 0 #ea36af, -2px 0 0 #75fa69;
	}

	to {
		text-shadow: 3px 0.5px 2px #ea36af, -1px -0.5px 2px #75fa69;
	}
}

header h2 {
	display: flex;
	flex-wrap: wrap;
	flex-direction: column;
	text-align: center;
	font-family: 'Press Start 2P', cursive;
	font-size: 1em;
	color: fuchsia;
	white-space: nowrap;
	overflow: hidden;
}

header h2:after {
	content: " by Marghecomo Calzaruta";
	color: black;
	animation: glow 1s ease-in-out infinite alternate;
}

@keyframes glow {
	from {
		text-shadow: 0 0 5px #fff, 0 0 15px #fff;
	}

	to {
		text-shadow: 0 0 5px #fff, 0 0 15px fuchsia;
	}
}

.summary {
	display: flex;
	flex-direction: column;
	flex: 1 1 100%;
	align-items: center;
}

.summary p {
	padding: 2.5em;
	font-family: 'Roboto Mono', monospace;
	font-size: 1em;
	text-align: center;
}


footer {
	font-family: 'Press Start 2P', cursive;
	display: flex;
	flex-direction: row;
	text-align: center;
	justify-content: space-evenly;
	width: 100%;
	order: 6;
}


.sidebar {
	order: 2;
	z-index: 3;
	background-color: fuchsia;
	display: flex;
	flex-direction: column;
	background-color: black;
	height: 300px;
	border: 8px solid gray;
}


.sidebar .wrapper {
	cursor: url(https://zengarden.magaggie.it/immagini/computer.png), auto;
	font-family: 'Press Start 2P', cursive;
	font-size: 0.8em;
	padding: 0px 10px;
	flex: 1 1 0%;
	user-select: text;
	overflow-y: auto;
	background: rgb(220, 220, 220);
	border-bottom: 1px solid rgb(255, 255, 255);
	border-left: 2px solid;
	border-top: 20px solid rgb(56, 23, 163);
	box-shadow: inset 0 0 5px grey;
}



.sidebar h3.select,
.sidebar h3.archives,
.sidebar h3.resources {
	overflow: hidden;
	font-size: 2em;
}


.sidebar ul {
	margin: 0;
	padding: 0;
}

.sidebar li {
	line-height: 1.3em;
	display: block;
	padding-top: 5px;
	margin-bottom: 5px;
	list-style-type: none;
}

.sidebar li a:link {
	color: fuchsia;
}

.sidebar li a:visited {
	color: rgb(255, 132, 255);
}



.extra1 {
	position: sticky;
	border: 70px solid transparent;
	border-image: linear-gradient(45deg, rgb(212, 0, 255), rgb(250, 224, 66)) 1;
	background: url(https:///22calzolari.iftscnosfapbologna.it/Esercizi/css_zen_garden/img/buddha_oro_CSS.png) no-repeat center;
	background-size: contain;
	background-position: bottom;
	height: 100vh;
	left: calc(50% - 65vh / 2);
	opacity: 0.9;
	will-change: auto;
	animation: 20s ease-in-out 2s infinite normal none running;
	animation-name: color;
	pointer-events: none;
}

@keyframes color {
	0% {
		border-image: linear-gradient(45deg, rgb(212, 0, 255), rgb(250, 224, 66)) 1
	}

	15% {
		border-image: linear-gradient(45deg, rgb(0, 8, 255), rgb(255, 98, 0)) 1
	}

	25% {
		border-image: linear-gradient(45deg, rgb(234, 128, 255), rgb(0, 229, 255)) 1
	}

	35% {
		border-image: linear-gradient(45deg, rgb(255, 0, 25), rgb(234, 0, 255))
	}

	50% {
		border-image: linear-gradient(45deg, rgb(255, 247, 0), rgb(152, 50, 203)) 1
	}

	65% {
		border-image: linear-gradient(45deg, rgb(255, 119, 0), rgb(0, 255, 251)) 1
	}

	75% {
		border-image: linear-gradient(45deg, rgb(34, 255, 0), rgb(221, 0, 255)) 1
	}

	90% {
		border-image: linear-gradient(45deg, rgb(13, 0, 255), rgb(255, 98, 0)) 1
	}

	100% {
		border-image: linear-gradient(45deg, rgb(212, 0, 255), rgb(250, 224, 66)) 1
	}
}

.extra5 {
	display: flex;
    background-color: transparent;
    position: relative;
	top: -750px;
    height: 268px;
    width: calc(100% - 69vw);
    left: calc(100% - 65vw);
	background: url(/immagini/colonna.png) no-repeat top;
  
}

.extra4 {
	background-image: url(https://zengarden.magaggie.it/immagini/nuvole.png);
	position: relative;
	cursor: url(https://zengarden.magaggie.it/immagini/planet_icon.png), auto;
	height: 600px;
	min-width: 300px;
	display: flex;
	justify-content: center;
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;
	top: -70vh;
	left: 46vh;
	margin-bottom: 0;
	transition: opacity 2s;
	z-index: 3;
}

.extra4:hover {
	opacity: 0;
}

.extra6 {
	margin-top: -732px;
	background-color: #bdbebd;
	background-image: url(data:image/png;base64,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);
}

.extra6:after {
	content: '';
	background-size: contain;
	display: flex;
	width: 180px;
	height: 66px;
	font-family: 'Press Start 2P', cursive;
	font-size: 0.5em;
	color: black;
	flex-direction: row;
	margin-left: 5px;
	margin-top: 8px;
	padding: 3px;
	z-index: 5;
	position: relative;
	overflow: hidden;
	white-space: nowrap;
	border-width: 2px;
	border-style: solid;
	border-color: rgb(241, 241, 241) white white black;
	align-items: center;
	font-size: 1.3rem;
	background: transparent url(/immagini/start-2.png) no-repeat center;
	border-top: 2px solid rgb(255, 255, 255);
	cursor: wait;

}

#zen-supporting {
	border-top: 10px solid fuchsia;
	order: 4;
	display: flex;
	align-items: stretch;
	overflow-y: hidden;
	font-size: 16px;
	flex-wrap: wrap;
	background-color: black;
	background-image: url(data:image/png;base64,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);
}


#zen-supporting footer {
	background-color: fuchsia;
	margin-bottom: 0%;
	flex: 1 1 100%;
	align-items: center;
}


#zen-supporting footer>a {
	font-family: 'Press Start 2P', cursive;
	font-size: 1em;
	display: flex;
	align-items: center;
	flex-direction: column-reverse;
}

#zen-supporting footer>a:hover {
	font-size: 2em;
	text-shadow: 0.06rem 0 0.06rem #ea36af, -0.125rem 0 0.06rem #75fa69;
	animation-duration: 0.01s;
	animation-name: textflicker;
	animation-iteration-count: infinite;
	animation-direction: alternate;
	text-decoration: none;
}


#zen-supporting footer>a:after {
	content: url(/immagini/folder.png);
	flex-direction: column;
}


#zen-requirements > p:last-of-type, #zen-requirements > p:last-of-type>* {
	font-size: 10px;
}

#zen-requirements > p:last-of-type {
	position: relative;
	top: 16px;
	left: 0.5em;
}


@media screen and (min-width: 800px) {

	#zen-supporting {
		border-top: 10px solid fuchsia;
	}

	.sidebar {
		top: 345vh;
		left: 5vw;
		z-index: 3;
		background-color: fuchsia;
		flex-direction: column;
		background-color: black;
		position: absolute;
		cursor: move;
		height: 300px;
		width: 300px;
		border: 6px solid gray;
	}


	#zen-supporting {
		order: 4;
		display: flex;
		align-items: stretch;
		overflow-y: hidden;
		font-size: 16px;
		flex-shrink: 1;
	}


	.explanation,
	.benefits,
	.requirements,
	.participation {
		flex: 1 1 40%;
		margin-right: 20px;
	}

	.extra4 {
		top: -60vh;
		left: 0vh;
	}
.extra5 {
	display: flex;
    background-color: transparent;
    position: relative;
	top: -750px;
    height: 557px;
    width: calc(100% - 73vw);
    left: calc(100% - 65vw);
	background: url(/immagini/colonna.png) no-repeat top;
}
}



@media screen and (min-width: 1000px) {

	.sidebar {
		top: 320vh;
		left: 5vw;
		z-index: 3;
		background-color: fuchsia;
		flex-direction: column;
		background-color: black;
		position: absolute;
		cursor: move;
		height: 300px;
		width: 300px;
		border: 6px solid gray;
	}

}

@media screen and (max-width: 1100px) {

	.sidebar {
		top: 340vh;
		left: 438vh;
	}

	.extra4 {
		left: 24vh;
		top: -60vh;
	}

}


@media screen and (min-width: 1200px) {

	.explanation,
	.benefits,
	.requirements,
	.participation {
		flex: 1 1 10%;
		margin-right: 20px;
	}

	#zen-supporting footer {
		background-color: fuchsia;
		margin-bottom: 0%;
		flex: 1 1 4%;
		align-items: center;
		flex-direction: inherit;
	}


	.sidebar {
		top: 400vh;
		left: 65vw;
	}
}

@media screen and (max-width: 1266px) {
	.sidebar {
		top: 383vh;
		left: 11vw;
	}
}

@media screen and (min-width: 1267px) {
	.sidebar {
		top: 390vh;
		left: 65vw;
	}

	#zen-supporting footer {
		flex-direction: column;
	}	
}

@media screen and (max-width: 1390px) {
	.extra4 {
		left: 0vh;
	}

}


@media screen and (min-width: 1500px) {
	.sidebar {
		top: 280vh;
		left: 132vh;
	}
}

@media screen and (min-width: 1780px) {

	.sidebar {
		top: 270vh;
		left: 65vw;
	}
}

@media screen and (min-width: 2000px) {

	.sidebar {
		top: 240vh;
		left: 65vw;
	}

	.extra4 {
		left: 0vh;
		top: -62vh;
	}

}

@media screen and (max-width:799px) {
.explanation::before, .participation::before, .benefits::before, .requirements::before {
	position: relative;
	content: url(/immagini/2-lingua-strana.png);
	left: 20%;
	animation: loop 6s 6s ease-in-out infinite;
}
}


@media screen and (max-width:699px) {
	.extra4 {
		left: 0vh;
		top: -58vh;
	}
}



@media screen and (max-width:599px) {
	.extra4 {
		left: 0vh;
		top: -52vh;
	}

	.extra5 {
		display: flex;
		background-color: transparent;
		position: relative;
		top: -713px;
		height: 557px;
		width: calc(100% - 64vw);
		left: 23vh;
		background: url(/immagini/colonna.png) no-repeat top;
	}
}


@media screen and (max-width:499px) {
	.extra4 {
		left: 0vh;
		top: -55vh;
	}

	.extra5 {
		display: flex;
		background-color: transparent;
		position: relative;
		top: -716px;
		height: 557px;
		left: 22vh;
		width: calc(100% - 73vw);
		margin: 0;
		background: url(/immagini/colonna.png) no-repeat top;
	}
}

@media screen and (max-width:389px) {
	.extra4 {
		left: 0vh;
		top: -56vh;
	}

	.extra5 {
		display: flex;
		background-color: transparent;
		position: relative;
		top: -715px;
		height: 557px;
		width: calc(100% - 73vw);
		left: 17vh;
		background: url(/immagini/colonna.png) no-repeat top;
	}

}

@media screen and (max-width:289px) {

	.extra4 {
		display: none;
	}

	.extra5 {
		display: flex;
		background-color: transparent;
		position: relative;
		top: -110px;
		height: 557px;
		width: calc(100% - 73vw);
		left: 13vh;
		background: url(/immagini/colonna.png) no-repeat top;
	}

	.extra6 {
		margin-top: -190px;
	}
}