@font-face{
	font-family: ubuntu;
	src: url('./fonts/Ubuntu-R.ttf') format('truetype');
	font-weight: normal;
	font-style: normal;
}

@font-face{
	font-family: ubuntu-mono;
	src: url('./fonts/UbuntuMono-R.ttf') format('truetype');
	font-weight: normal;
	font-style: normal;
}

:root {
	--dimensone-titolo: 4vw;
	--dimensione-corpo: 2vw;
	--dimensione-autore: 2vw;

	--indentazione: 4;
}


body {
	width: 100vw;
	height: 100vh;
	margin: 0;
	padding: 0;

	background: #FAFAFA;

	text-align: center;
	font-family: 'ubuntu';

}

titolo {
	position: absolute;
	top: 2vw;
	left: 50%;
	transform: translateX(-50%);
	font-size: var(--dimensone-titolo);
}

corpo {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translateY(-50%) translateX(-50%);
	width: 70%;
	font-size: var(--dimensione-corpo);
}

autore {
	position: absolute;
	bottom: 0;
	right: 0;
	font-size: var(--dimensione-autore);
	margin: 1vw;
	color: #666666;
}

autore::before {
	content: "- ";
}

ul, ol, codeblock, block {
	display: inline-block;
	width: auto;
	text-align: left;
	padding: 0;
	margin: 0;
}

li {
	margin-left: 5vw;
}


small {
	font-size: 1.25vw;
}

small p {
	margin-top: 5px;
	margin-bottom: 5px;
}

codeblock {
	font-family: 'ubuntu-mono';
	background: #EAEAEA;
	padding: 2vw 2vw 2vw 2vw;
	border-radius: 1vw;
}

code {
	font-family: 'ubuntu-mono';
	background: #EAEAEA;
	padding: 0.5vw 0.5vw 0.5vw 0.5vw;
	border-radius: 0.25vw;
}

idt {
	width: calc(var(--dimensione-corpo) / 2 * var(--indentazione));
	display: inline-block;
}

name {
	color: #111199;
	font-style: italic;
}

kw {
	color: #AA5500;
	font-weight: 600;
}

comment {
	color: #494949;
}

imgbox {
	height: calc(var(--dimensione-corpo) * 3);
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: center;
	margin-top: 1vw;
	margin-bottom: 1vw;
}

imgbox span {
	margin-top: var(--dimensione-corpo);
	margin-bottom: var(--dimensione-corpo);
}

imgbox img {
	height: 100%;
	margin-left: 2vw;
}


@keyframes grazieAnim {
	0% {content: "Grazie per l'attenzione"; opacity: 1;}
	8% {content: "Grazie per l'attenzione"; opacity: 1;}
	9% {content: "Grazie per l'attenzione"; opacity: 0;}

	9.01% {content: "Thanks for your attention"; opacity: 0;}
	10% {content: "Thanks for your attention"; opacity: 1;}
	13% {content: "Thanks for your attention"; opacity: 1;}
	14% {content: "Thanks for your attention"; opacity: 0;}

	14.01% {content: "感谢您的关注"; opacity: 0;}
	15% {content: "感谢您的关注"; opacity: 1;}
	18% {content: "感谢您的关注"; opacity: 1;}
	19% {content: "感谢您的关注"; opacity: 0;}

	19.01% {content: "愛してるよ、リル"; opacity: 0;}
	20% {content: "愛してるよ、リル"; opacity: 1;}
	23% {content: "愛してるよ、リル"; opacity: 1;}
	24% {content: "愛してるよ、リル"; opacity: 0;}

	24.01% {content: "torre di controllo"; opacity: 0;}
	25% {content: "torre di controllo"; opacity: 1;}
	28% {content: "torre di controllo"; opacity: 1;}
	29% {content: "torre di controllo"; opacity: 0;}

	29.01% {content: "multumesc pentru atentie"; opacity: 0;}
	30% {content: "multumesc pentru atentie"; opacity: 1;}
	33% {content: "multumesc pentru atentie"; opacity: 1;}
	34% {content: "multumesc pentru atentie"; opacity: 0;}

	34.01% {content: "(⁠｡⁠･⁠ω⁠･⁠｡⁠)⁠ﾉ⁠♡"; opacity: 0;}
	35% {content: "(⁠｡⁠･⁠ω⁠･⁠｡⁠)⁠ﾉ⁠♡"; opacity: 1;}
	38% {content: "(⁠｡⁠･⁠ω⁠･⁠｡⁠)⁠ﾉ⁠♡"; opacity: 1;}
	39% {content: "(⁠｡⁠･⁠ω⁠･⁠｡⁠)⁠ﾉ⁠♡"; opacity: 0;}

	39.01% {content: "Gracias por su atención"; opacity: 0;}
	40% {content: "Gracias por su atención"; opacity: 1;}
	43% {content: "Gracias por su atención"; opacity: 1;}
	44% {content: "Gracias por su atención"; opacity: 0;}

	44.01% {content: "Feliz Navidad!"; opacity: 0;}
	45% {content: "Feliz Navidad!"; opacity: 1;}
	48% {content: "Feliz Navidad!"; opacity: 1;}
	49% {content: "Feliz Navidad!"; opacity: 0;}

	49.01% {content: "ध्यान देने के लिए आपको धन्यवाद"; opacity: 0;}
	50% {content: "ध्यान देने के लिए आपको धन्यवाद"; opacity: 1;}
	53% {content: "ध्यान देने के लिए आपको धन्यवाद"; opacity: 1;}
	54% {content: "ध्यान देने के लिए आपको धन्यवाद"; opacity: 0;}

	54.01% {content: "Faleminderit për vëmendjen tuaj";  opacity: 0;}
	55% {content: "Faleminderit për vëmendjen tuaj";  opacity: 1;}
	58% {content: "Faleminderit për vëmendjen tuaj";  opacity: 1;}
	59% {content: "Faleminderit për vëmendjen tuaj";  opacity: 0;}

	59.01% {content: "gratias tibi operam"; opacity: 0;}
	60% {content: "gratias tibi operam"; opacity: 1;}
	63% {content: "gratias tibi operam"; opacity: 1;}
	64% {content: "gratias tibi operam"; opacity: 0;}

	64.01% {content: "System.out.println(\"Hello, world!\");"; opacity: 0;}
	65% {content: "System.out.println(\"Hello, world!\");"; opacity: 1;}
	68% {content: "System.out.println(\"Hello, world!\");"; opacity: 1;}
	69% {content: "System.out.println(\"Hello, world!\");"; opacity: 0;}

	69.01% {content: "io metterei 10 a tutti"; opacity: 0;}
	70% {content: "io metterei 10 a tutti"; opacity: 1;}
	73% {content: "io metterei 10 a tutti"; opacity: 1;}
	74% {content: "io metterei 10 a tutti"; opacity: 0;}

	74.01% {content: "concordo"; opacity: 0;}
	75% {content: "concordo"; opacity: 1;}
	78% {content: "concordo"; opacity: 1;}
	79% {content: "concordo"; opacity: 0;}

	79.01% {content: "-[------->+<]>--.+++[->+++++<]>.+++[->+++<]>++.+[----->+<]>.--[->+++<]>+.----.--[--->+<]>-.[-->+++++++<]>.-----------.+++++++++++++.[-->+++++<]>+++.++[--->++<]>.[--->+<]>+++.-[--->+<]>-.--[--->+<]>-..+++[->+++<]>.+++++++++.[--->+<]>.--[->+++<]>+.++++++.-.---------."; opacity: 0;}
	80% {content: "-[------->+<]>--.+++[->+++++<]>.+++[->+++<]>++.+[----->+<]>.--[->+++<]>+.----.--[--->+<]>-.[-->+++++++<]>.-----------.+++++++++++++.[-->+++++<]>+++.++[--->++<]>.[--->+<]>+++.-[--->+<]>-.--[--->+<]>-..+++[->+++<]>.+++++++++.[--->+<]>.--[->+++<]>+.++++++.-.---------."; opacity: 1;}
	83% {content: "-[------->+<]>--.+++[->+++++<]>.+++[->+++<]>++.+[----->+<]>.--[->+++<]>+.----.--[--->+<]>-.[-->+++++++<]>.-----------.+++++++++++++.[-->+++++<]>+++.++[--->++<]>.[--->+<]>+++.-[--->+<]>-.--[--->+<]>-..+++[->+++<]>.+++++++++.[--->+<]>.--[->+++<]>+.++++++.-.---------."; opacity: 1;}
	84% {content: "-[------->+<]>--.+++[->+++++<]>.+++[->+++<]>++.+[----->+<]>.--[->+++<]>+.----.--[--->+<]>-.[-->+++++++<]>.-----------.+++++++++++++.[-->+++++<]>+++.++[--->++<]>.[--->+<]>+++.-[--->+<]>-.--[--->+<]>-..+++[->+++<]>.+++++++++.[--->+<]>.--[->+++<]>+.++++++.-.---------."; opacity: 0;}

	84.01% {content: "sudo rm -rf /"; opacity: 0;}
	85% {content: "sudo rm -rf /"; opacity: 1;}
	88% {content: "sudo rm -rf /"; opacity: 1;}
	89% {content: "sudo rm -rf /"; opacity: 0;}

	89.01% {content: "418 I'm a teapot"; opacity: 0;}
	90% {content: "418 I'm a teapot"; opacity: 1;}
	93% {content: "418 I'm a teapot"; opacity: 1;}
	94% {content: "418 I'm a teapot"; opacity: 0;}

	94.01% {content: "Hacked by SiegedSec"; opacity: 0;}
	95% {content: "Hacked by SiegedSec"; opacity: 1;}
	98% {content: "Hacked by SiegedSec"; opacity: 1;}
	99% {content: "Hacked by SiegedSec"; opacity: 0;}

	99.01% {content: "Grazie per l'attenzione"; opacity: 0;}
	100% {content: "Grazie per l'attenzione"; opacity: 1;}
}

grazie::before {
	content: "ciao";
	animation-name: grazieAnim;
	animation-duration: 200s;
	animation-iteration-count: infinite;
	animation-fill-mode: forwards;
}