/* Theme colors */
:root {
	--brown: #654c28;
	--yellow: #fcff96;
	--white: #ffffff;

	--background-color: var(--white);
	--background-color-alt: var(--yellow);

	--text-color: var(--brown);
	--text-color-light: color-mix(in srgb, var(--text-color) 50%, transparent);
	--text-color-alt: var(--brown);

	--text-color-link: var(--text-color);
	--text-color-link-active: var(--text-color-light);
	--text-color-light-link-active: var(--text-color);
	--text-color-link-visited: var(--text-color);

	--syntax-tab-size: 2;
}

/* Fan shananigans */
:root{
    --rpm: 0;
    --rotationoffset: calc((var(--rpm ) * (var(--rpm )) / 100000 * 5));
	--fanspeed: calc(60s / var(--rpm));
	--fanblur: calc(((var(--rpm) / 100) * .5vmin) - 0.05vmin);
}
/* Global stylesheet */
* {
	box-sizing: border-box;
}
/* Layout */
html, body{
    margin: 0;
}
body{
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    background: var(--background-color-alt);
}
.wrapper{
    position: relative;
    width: 100vmin; /* Set the width to 100% of the smaller viewport dimension */
    height: 100vmin;
}

.container{
    padding: 5em;
    width: 100%;
    height: 100%;
    display: block;
    position: absolute;
    top: 0;
    left: 0;
}

.fan {
	fill: var(--text-color-light);
    width: 100%;
    height: 100%;
    display: block;
}
.container:nth-of-type(2){
    /* display: none; */
    -ms-transform: rotate(calc( var(--rotationoffset) * -1deg ));
    -moz-transform: rotate(calc( var(--rotationoffset) * -1deg ));
    -webkit-transform: rotate(calc( var(--rotationoffset) * -1deg ));
    -o-transform: rotate(calc( var(--rotationoffset) * -1deg ));
    transform: rotate(calc( var(--rotationoffset) * -1deg ));
}

.container:nth-of-type(3){
    /* display: none; */
    -ms-transform: rotate(calc( var(--rotationoffset) * -2deg ));
    -moz-transform: rotate(calc( var(--rotationoffset) * -2deg ));
    -webkit-transform: rotate(calc( var(--rotationoffset) * -2deg ));
    -o-transform: rotate(calc( var(--rotationoffset) * -2deg ));
    transform: rotate(calc( var(--rotationoffset) * -2deg ));
}
.container:nth-of-type(4){
    /* display: none; */
    -ms-transform: rotate(calc( var(--rotationoffset) * -4deg ));
    -moz-transform: rotate(calc( var(--rotationoffset) * -4deg ));
    -webkit-transform: rotate(calc( var(--rotationoffset) * -4deg ));
    -o-transform: rotate(calc( var(--rotationoffset) * -4deg ));
    transform: rotate(calc( var(--rotationoffset) * -4deg ));
}
.container:nth-of-type(5)){
    /* display: none; */
    -ms-transform: rotate(calc( var(--rotationoffset) * -8deg ));
    -moz-transform: rotate(calc( var(--rotationoffset) * -8deg ));
    -webkit-transform: rotate(calc( var(--rotationoffset) * -8deg ));
    -o-transform: rotate(calc( var(--rotationoffset) * -8deg ));
    transform: rotate(calc( var(--rotationoffset) * -8deg ));
}

/* favicon */

@-webkit-keyframes rotating /* Safari and Chrome */ {
	from {
		-webkit-transform: rotate(0deg);
		-o-transform: rotate(0deg);
		transform: rotate(0deg);
	}
	to {
		-webkit-transform: rotate(360deg);
		-o-transform: rotate(360deg);
		transform: rotate(360deg);
	}
}
@keyframes rotating {
	from {
		-ms-transform: rotate(0deg);
		-moz-transform: rotate(0deg);
		-webkit-transform: rotate(0deg);
		-o-transform: rotate(0deg);
		transform: rotate(0deg);
	}
	to {
		-ms-transform: rotate(360deg);
		-moz-transform: rotate(360deg);
		-webkit-transform: rotate(360deg);
		-o-transform: rotate(360deg);
		transform: rotate(360deg);
	}
}

.fan {
	-webkit-animation: rotating var(--fanspeed) linear infinite;
	animation: rotating var(--fanspeed) linear infinite;
	-webkit-filter: blur(var(--fanblur));
    filter: blur(var(--fanblur));
}