:root {
	--dark: #1a090d;
	--light: #f4f1de;
	--key1: #3e6680;
	--key1t: #fff8;
	--key2: #ff6700;
	--key3: #820263;
	--key4: #20bf55;
	--main: Arial; 
}
 
html * {box-sizing: border-box;}

body {
	font-family: var(--main), system-ui,sans-serif;
	font-size: 100%;
	line-height: 130%;
	background-color: var(--light);
	color: var(--dark);
	margin: 0;
} 

header {
	display: flex;
	flex-direction: column;
	justify-content: space-around;
	min-height: 25vh;
	color: var(--light);
	background-image: url("images/can1.jpg");
	background-position: center right;
	background-size: 50%;
	background-repeat: no-repeat;
	margin: .0;
	font-family: var(--main);
	font-weight: bold;
}

.index header{
	color: var(--key1);
}

.index img {
		width: 100%;
		max-height: 45%;
	}
	
.index nav{
	display: flex;
	flex-direction: column;
	align-items: center;
	overflow: hidden;
    gap: 1em;
	margin: 0;
	line-height: 200px;
	font-size: 2em;
    color: var(--key2);
	
ul.topnav a.cer {
	background-image: linear-gradient(#0006), url("images/bowls.jpg");
	background-size: 100%;
	background-position: center;
	background-repeat: no-repeat;
}
ul.topnav a.cos {
	background-image: linear-gradient(#0006), url("images/blood1.jpg");
	background-size: 100%;
	background-position: center; 
	background-repeat: no-repeat;
}
ul.topnav a.des {
	background-image: linear-gradient(#0006), url("images/mats.jpg");
	background-size: 100%;
	background-position: center;
	background-repeat: no-repeat;
}
ul.topnav a.met {
	background-image: linear-gradient(#0006), url("images/metal.jpg");
	background-size: 100%;
	background-position: center;
	background-repeat: no-repeat;
}
ul.topnav a.oil {
	background-image:linear-gradient(#0006),  url("images/mug1.jpg");
	background-size: 110%;
	background-position: center;
	background-repeat: no-repeat;
}
ul.topnav a.pri {
	background-image: linear-gradient(#0006), url("images/bag1.jpg");
	background-size: 100%;
	background-position: center;
	background-repeat: no-repeat;
}
}

.ceramics header {
	background-image: linear-gradient(#0006), url("images/bowls.jpg");
	background-position: center right%;
	background-size: cover;
}

.cosplay header {
	background-image: linear-gradient(#0006), url("images/blood1.jpg");
	background-position: center;
	background-size: cover;
}

.design header {
	background-image: linear-gradient(#0006), url("images/mats.jpg");
	background-position: center center;
	background-size: cover;
}

.metals header {
	background-image: linear-gradient(#0006), url("images/metal.jpg");
	background-position: center;
	background-size: cover;
}

.paint header {
	background-image: linear-gradient(#0006), url("images/mug1.jpg");
	background-position: center;
	background-size: cover;
}

.print header {
	background-image: linear-gradient(#0008), url("images/bag1.jpg");
	background-position: center center;
	background-size: cover;
}

.index h1{
	color: var(--key3);
}

h1 {
	font-size: 1.5rem;
	margin: 0;
	line-height: 1em;
}

.index h2{
	font-size: 3rem;
	margin: 0;
	line-height: 1em;
	text-align: left;
}
h2 {
	font-size: 6vw;
	 margin: 0;
	 line-height: 1em; 
}

h3{
	font-size: 15vw;
	padding: 1rem;
	margin: 0 .5 0 .5;
	line-height: .5em;
	text-align: center;	
}

h4{
	font-size: 1.75em;
	color: var(--key2);
}

ul.topnav {
	list-style: none;
	padding: 0 2em;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	gap: .2em;
	width: 100vw;
}

ul.topnav li {
	border: 1px solid var(--key1);
	min-width: 9em;
	text-align: center;
	border-radius: 5px;
	overflow: hidden;
}

ul.topnav a {
	background-color: var(--key1);
	display: block;
    padding: .1em 0;
	color: var(--light);
	text-decoration: none;
}

main {
	margin: 0 2em;
}

footer {
	margin: 0 2em;
}

figure {
	display:inline-block;
    position: relative;
}

figure img {
	width: 100%;
	margin: 0;
	min-height: 250px;
}

figure figcaption {
	background-color: var(--key1t);
	line-height: 50px;
	margin: 0;
	padding: 0em .2em .1em .2em;
	width: 100%;
	position: absolute;
	bottom: 0px;
	color: var(--key3);
	font-weight: bold;
	font-size: 25px;
}

footer .tiny {
	height: 50px;
	width: auto;
	display: inline-block;
}

a.edu {
    color: var(--key3);	
	
}

@media (min-width: 500px) {
	
h1{
	font-size: 2vw;
	margin: 0;
	line-height: 1em;
}

h3{
	font-size: 10vw;
	margin: 0 .5 0 .5;
	line-height: .5em;
	text-align: center;
}
	
ul.topnav {
	display: flex;
	flex-direction: row;
	justify-content: space-around;
	}

.index header {
	margin: 1em 2em;
	background-position: center left;
	background-size: 150px;
	line-height: 120%;
	background-image: none;
}

.index h1 {
	font-size: 5rem;
	margin: 0;
	line-height: 1em;
}

.index h2 {
	font-size: 6.5rem;
	 margin-bottom: 0;
	 line-height: 1.5em;
}

.index ul.topnav{
	display: flex;
	flex-direction: row;
	padding: 0;
	justify-content:contain;
	overflow: hidden;
	margin: 0;
}

ul.topnav a.cer {
	background-image: linear-gradient(#0006), url("images/bowls.jpg");
	background-size: 165px;
	background-position: center;
	background-repeat: none;
}
ul.topnav a.cos {
	background-image: linear-gradient(#0006), url("images/blood1.jpg");
	background-size: 100px;
	background-position: center;
	background-repeat: none;
}
ul.topnav a.des {
	background-image: linear-gradient(#0006), url("images/mats.jpg");
	background-size: 275px;
	background-position: center;
	background-repeat: none;
}
ul.topnav a.met {
	background-image: linear-gradient(#0006), url("images/metal.jpg");
	background-size: 200px;
	background-position: center;
	background-repeat: none;
}
ul.topnav a.oil {
	background-image:linear-gradient(#0006),  url("images/mug1.jpg");
	background-size: 200px;
	background-position: center;
	background-repeat: none;
}
ul.topnav a.pri {
	background-image: linear-gradient(#0006), url("images/bag1.jpg");
	background-size: 300px;
	background-position: center 15%;
	background-repeat: none;
}

.index body{
	background-image: linear-gradient(#fff9), url("images/can1.jpg");
	background-color: #fff9;
	background-position: center;
	background-attachment: fixed;
	background-repeat: no-repeat;
	background-size: 50%;
}
	
	.ceramics figure {
		max-width: 25%;
	}
	
	.cosplay figure {
		max-width: 25%;
	}
	
	.design figure {
		max-width: 25%;
	}
	
	.metals figure {
		max-width: 25%;
	}
	
	.paint figure {
		max-width: 25%;
	}
	
	.print figure {
		max-width: 25%;
	}
}

@media (max-width: 1760px) and (min-width: 1200px){
	
.index ul.topnav{
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	padding: 0;
	justify-content:contain;
	overflow: hidden;
	margin: 0;
	max-width: 1160px;
}
figure {
	display:inline-block;
    position: relative;
}

figure img {
	min-width: 100%;
	max-height: 500px;
	margin: 0;
}

}

@media (max-width: 1760px){
	
.index ul.topnav{
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
}
}

@media screen and (prefers-color-scheme: dark) {
	body {
		background-color: var(--dark);
		color: var(--light);
	}
	
}