:root {
			--background: #16161D;
			--text: #DCD7BA;
			--action: #FF5D62;
			--gray: #9CA6A6;
		}
		
		@font-face {
			font-family: "CaskadiyaCove";
			src: url("./font.ttf") format("truetype");
			font-display: fallback;
		}

		@font-face {
			font-family: "Mattone";
			src: url("./mattone_black.otf") format("opentype");
			font-display: fallback;
	  }


		@font-face {
			font-family: "Barlow";
			src: url("./barlow.ttf") format("truetype");
			font-display: fallback;
		}
		@font-face {
			font-family: "BarlowBold";
			src: url("./barlow_bold.ttf") format("truetype");
			font-display: fallback;
		}

		@keyframes float {
			0% {
			    transform: translateY(5px);
			}

			50% {
			    transform: translateY(-5px);
			}

			100% {
			    transform: translateY(5px);
			}
	  }

		@keyframes reduced-float {
			0% {
			    transform: translateY(2px);
			}

			50% {
			    transform: translateY(-2px);
			}

			100% {
			    transform: translateY(2px);
			}
	  }

	  html {
	  	scroll-behavior: smooth;
	  }
		
		body {
			margin: 0;
			background: var(--background);
			color: var(--text);
			max-width: 800px;
			margin: auto;
			font-family: "Barlow", sans-serif;
			padding-bottom: 100px;

			background: repeating-radial-gradient(#16161D 0 0.0001%, #26262D 0 0.0002%) 60% 60%/3000px 3000px,  repeating-conic-gradient(#16161D 0 0.0001%, #26262D 0 0.0002%) 40% 40%/2000px 3000px;
			background-blend-mode: soft-light; 		
		}

		b, strong {
			font-family: "BarlowBold", sans-serif;
			font-weight: bold;
		}
		del {
			font-style: italic;
			text-decoration: line-through;
			color: var(--gray);
			font-family: "Barlow", sans-serif;			
		}
		blockquote {
		  border-left: 6px double var(--text);
		  margin: 5px;
		  padding-left: 10px;
		}
		hr {
			border:unset;
			border-top: 3px dotted var(--gray);
		}
		.pic {
			display: flex;
		  flex-direction: column;
		  width: min-content;
		  max-width: 80%;
		}
		.pic > img {
			box-shadow: 6px 6px var(--action);
  		margin-bottom: 10px;
		}
		a {
			color: var(--action);
		}
		a:hover, a:active, a:focus {
			background: var(--action);
			color: var(--background);
			text-decoration: none;
			font-family: "BarlowBold", sans-serif;
			font-weight: bold;
		}
		h3 {
			margin: 2px 0;
			font-family: "BarlowBold", sans-serif;
			font-weight: bold;
		}
		ul {
			padding: 0 0 0 20px;
		  margin: 0;
		}
		pre.giallo {
			font-family: "CaskadiyaCove", monospace;
			padding: 10px;
			border-left: 6px double var(--action);
			background-color: #1F1F28 !important;
		}
		code:not(.giallo code) {
			background: #1F1F28;
			padding: 2px 4px;
			border-left: 2px double var(--action);
			border-right: 2px double var(--action);
			margin: 0 2px;
		}
		.caption {
			color: var(--gray);
			font-style: italic;
			font-size: 12px;
			display: inline-block;
			padding: 5px 0;
		}
		.title {
			font-family: "Mattone", sans-serif;
			font-weight: bold;
			text-align: center;
			margin: 25px 0;
		}
		.title > i {
			font-style: normal;
			animation: 3s float ease-in-out infinite;
			display: inline-block;
		  min-width: 10px;
		}
		@media (prefers-reduced-motion: reduce) {
			.title > i {
				animation: 10s reduced-float ease-in-out infinite;
			}
		}
		.title > i:nth-child(4n + 1) {
			animation-delay: -2.25s;
		}

		.title > i:nth-child(4n + 2) {
			animation-delay: -1.5s;
		}

		.title > i:nth-child(4n + 3) {
			animation-delay: -0.75s;
		}
		.grid {
			display: grid;
			grid-template-columns: repeat(var(--columns), 1fr)
		}
		@media screen and (width >= 600px) {
			.grid {
				--columns: 6;
			}
		}

		@media screen and (width < 600px) and (width >= 400px) {
			.grid {
				--columns: 2;
			}
		}
		@media screen and (width < 400px) {
			.grid {
				--columns: 1;
			}
		}
		.cell {
			border: 6px double var(--action);
			width: auto;
			height: auto;
			background: var(--background);
			align-content: center;
			position:relative;
			grid-column: span min(var(--column-span, 1), var(--columns, 1));
			padding: 10px;
		}
		.n4ta {
			text-align:center;
			font-family: "CaskadiyaCove", monospace;
			width: fit-content;
			font-size: 12px;
			margin: auto;
		}
		.botanycell::after {
		  content: '';
		  width: 100%;
		  height: var(--water);
		  position: absolute;
		  left: 0;
		  bottom: 0;
		  background: var(--action);
		  mix-blend-mode: difference;
		  pointer-events: none;
		}
		.badgecell {
			display:flex;
			flex-wrap: wrap;
			justify-content: space-around;
		}
		.badgecell > a{
			margin: 5px;
			transition: 0.3s cubic-bezier(0.68, 1, 0.33, 1);
			image-rendering: pixelated;
			position: relative;
			height: fit-content;
			outline: var(--action) double 0px;
			background: none !important;
			rotate: 1.5deg;
			z-index: 100;

		}

		.badgecell > a > img{
			display: block;
		}

		.badgecell > a:hover{
			transition: 0.3s cubic-bezier(0.33, 1, 0.68, 1);
			transform: scale(1.35);
			filter: brightness(1.1);
			background: none;
			rotate: 0deg !important;

		}
    .badgecell > a:active, .badgecell > a:focus{
			transition: 0.3s cubic-bezier(0.33, 1, 0.68, 1);
			transform: scale(2.5);
			outline: var(--action) double 3px;
			box-shadow: 0px 0px 20px 10px var(--background);
			rotate: 0deg !important;
			z-index: 101;
		}

		.badgecell > a:before {
		  width: 100%;
		  height: 100%;
		  content: '';
		  display: block;
		  position: absolute;
		  background: transparent;
		  background: linear-gradient(135deg, rgba(250, 250, 250, 0) 60%, rgba(250, 250, 250, 1) 65%, rgba(255, 255, 255, 0) 70%, rgba(255, 255, 255, 0.48) 75%, rgba(255, 255, 255, 1) 80%, rgba(255, 255, 255, 0.52) 85%, rgba(255, 255, 255, 0) 90%);
		  mix-blend-mode: plus-lighter;
		  opacity: .3;
		  background-position-x: -110px;
		  background-size: 125% 125%;
		  background-repeat: no-repeat;
		}
		.badgecell > a:hover:before {
		  transition: .5s cubic-bezier(0.22, 1, 0.36, 1);
		  transition-delay: 0.2s;
		  background-position-x: 0px;
		}

		.badgecell > a::after {
		  scale: 0;
		  transition: 0.3s cubic-bezier(0, 0.55, 0.45, 1) scale;
		  content: var(--info);
		  position: absolute;
		  top: 0;
		  left: -20%;
		  font-size: x-small;
		  background: var(--background);
		  border: 2px double var(--action);
		  transform: translateY(-110%) rotate(5deg);
		  width: 140%;
		  color: var(--text);
		  padding: 5px;
		  box-sizing: border-box;
		  text-align: center;
		  font-family: Barlow;
		  word-wrap: anywhere;
		  pointer-events: none;
		  box-shadow: 0px 0px 10px 5px var(--background);
			z-index: 10;
		}

		.badgecell > a:hover::after {
			z-index: -1;
		  scale: 1;
		}
		
		.badgecell > a:nth-child(7n+1){
			margin: 1px;
			rotate: 2.6deg;
		}

		.badgecell > a:nth-child(7n+2){
			margin: 7px;
			rotate: -2.4deg;
		}

		.badgecell > a:nth-child(7n+3){
			margin: 2px;
			rotate: -1.7deg;
		}

		.badgecell > a:nth-child(7n+4){
			margin: 4px;
			rotate: 0deg;
		}

		.badgecell > a:nth-child(7n+5){
			margin: 1px;
			rotate: -0.3deg;
		}

		.badgecell > a:nth-child(7n+6){
			margin: 5px;
			rotate: 1.3deg;
		}

		.badgecell > .caption, .badgecell > h3, .badgecell > pre {
			width: 100%;
			padding: 0 5%;
			margin: 5px 0;
		}

		.plant {
			font-family: "CaskadiyaCove";
			text-align: left;
			width: fit-content;
			margin: auto;
		}

		.biglinkthink {
	    text-align: center;
	    text-decoration: none;
	    width: fit-content;
	    display: block;
	    margin: auto;
	  }

	  .biglinkthink > span {
	    display:block;
	  }
	  .biglinkthink > span:first-child {
	    font-family: 'Mattone';
	    font-size: 4em;
	    color: var(--text);
	  }
	  .biglinkthink:hover, .biglinkthink:focus {
	    background: unset;
	  }
	  .biglinkthink:hover > span:first-child, .biglinkthink:focus > span:first-child, .biglinkthink:active > span:first-child {
	    color: var(--action);
	  }
	  .biglinkthink:hover > span:not(:first-child), .biglinkthink:focus > span:not(:first-child), .biglinkthink:active > span:not(:first-child) {
	    background: var(--action);
	  }