@font-face {
		font-family: Cozette;
		src: url("./CozetteVector.ttf") format("truetype");
		/* font-weight: normal; */
		/* font-style: normal; */
}

body {
		color: var(--foreground);
		padding: 5%;
		font-family: Cozette, serif;
		font-size: 14;
		font-smooth: never;
		-webkit-font-smoothing: none;
}

* {
		background-color: var(--background);
}

/* b { */
/*     color: var(--color1); */
/* } */

i {
		color: var(--color13);
}
code {
		font-family: Cozette;
		color: var(--color1);
}

a {
		color: var(--color4);
		text-decoration: none;
}

.teeny {
		font-size: 10;
}

::marker {
		content: "-  ";
		color: var(--color4);
}

.blink {    
    animation: blink-animation 1s steps(3,start) infinite;
    -webkit-animation: blink-animation 1s steps(3, start) infinite;
}
@keyframes blink-animation {
		to {
				visibility: hidden;
		}
}
@-webkit-keyframes blink-animation {
		to {
				visibility: hidden;
		}
}

h1,
h2,
h3,
h4,
h5 {
		font-size: 14;
		margin: 0%;
}

h1 {
		color: var(--color4);
}
h1:before {
		content: "* ";
}
h2 {
		color: var(--color5);
}
h2:before {
		content: "** ";
}
h3 {
    color: #60b17c; // TODO make generalizable
}
h3:before {
		content: "*** ";
}
h4 {
		color: #adc797;
}
h4:before {
		content: "**** ";
}
h5 {
		color: #8ccba2;
}
h5:before {
		content: "***** ";
}
li > p {
		margin: 0%;
}

.flexbox {
		display: flex;
		justify-content: space-evenly;
}

.boxwrap {
		padding: 5px;
}

.box {
		outline-style: double;
		outline-offset: 10px;
		outline-color: var(--foreground);		
}

img {		
		width: 100%;
		height: auto;
		max-width: 1000px;
		/* object-fit: scale-down; */
}