:root {
	--sign:crimson;
	--card:url(https://upload.wikimedia.org/wikipedia/commons/b/b5/Labyrinthodon_Mivart.png);
	--card2:url(https://upload.wikimedia.org/wikipedia/commons/b/b5/Labyrinthodon_Mivart.png);
	--card3:url(https://upload.wikimedia.org/wikipedia/commons/b/b5/Labyrinthodon_Mivart.png);
}

body {
	font-family: proxima-nova-condensed, sans-serif;
	font-size:18px;
	font-weight:400;
	line-height:1.2em;
	text-transform: uppercase;
	color:#444;
	letter-spacing:0.03em;

	overflow-x:hidden;
}

a {
	color:#986546;
	text-decoration:none;
	font-style:italic;
}

a:hover {
	text-decoration:underline;
	font-style:normal;
}

img {
	width:100%;
}

h1 {
	display:inline;
}

.emoji {
	font-family: Segoe UI Emoji;
}

.symbol {
	font-family: Segoe UI Symbol;
}


#main {
	display:flex;
	flex-wrap:wrap;
	grid-gap:10px;
	padding:10px;

	/*background:#ebccce;*/
	background:#fcfcfc;
}

.box {
	border:1px solid #444;
	border-radius:20px;
	padding:18px;

	/*min-width:22vw;*/
	/*min-height:22vh;*/
	flex-basis:30vw;

	flex-grow:1;
	flex-shrink:1;
}

.image {
	max-width:32vw;
}

.image img {
	position:relative;
	left:-18px;
	top:-18px;
	height:calc(100% + 36px);
	width:calc(100% + 36px);
	object-fit:cover;

	-webkit-clip-path: inset(0 0 0 0 round 20px);
	clip-path: inset(0 0 0 0 round 20px);
}

.box .image {
	overflow: hidden;
}


.card {
	background-size:contain;
}

.c1 {
	background: var(--card) center;
	background-size:contain;
}

.c2 {
	background: var(--card2) center;
	background-size:contain;
}

.c3 {
	background: var(--card3) center;
	background-size:contain;
}

.intro {
	flex-basis:20vw;
}

.project {
	flex-basis:40vw;
}

.showcase {
	text-align:center;
	display:flex;
	align-items:center;

	font-size:3vh;
	font-style:normal;

	min-height:30vh;

	background:#dcd4b0;
	color:#584f22;
}

.showcase:hover {
	font-style:italic;
	text-decoration:none;
	background:#eac52c;
	animation: fade 0.5s linear;
}

.w100 {
	width:100%;
}

/* animation */

@keyframes fade {
	0% {
		background:#dcd4b0;
	}
	100% {
		background:#eac52c;
	}
}