@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400;1,500;1,600;1,700&display=swap');

:root {
	--turquoise: rgb(7, 38, 32);
	--brown: rgb(89, 72, 39);
	--ocker: rgb(191, 142, 99);
	--camel: rgb(166, 120, 93);

	--letter-spacing: 0.15em;
	--fun-font: 'Rock Salt', 'Hachi Maru Pop', cursive;
	--serif-font: 'Cormorant Garamond', serif;
	--serif-font-jp: "Noto Serif JP", serif;
	--sans-font: 'Helvetica Neue', "Helvetica", sans-serif;

	--margin-very-small: 0.1em;
	--margin-small: 0.25em;
	--margin-medium: 0.5em;
	--margin-large: 1em;

	--drop-shadow-subtle: 0 2px 5px rgba(0, 0, 0, 0.1);

	--allegro: 0.25s;
	--lento: 1s;

	scroll-behavior: smooth;
}

body {			background-image: url('noise.png');
				background-repeat: repeat; 
				font-style: italic; }

#splash {		font-family: var(--serif-font);
				color: var(--turquoise);
				font-size: calc(4vw + 9vh + 2vmin);
				font-weight: 500; 
				margin: var(--margin-medium); }

a {				text-decoration: none;
				color: var(--turquoise);
				display: inline-block; /* needed for line-height trick to move border */
				line-height: 1;
				border-bottom: 1px solid var(--turquoise); }

a#contact {		border-bottom: none; }

a:hover {		
				border-bottom: 2px solid var(--turquoise); 
				transform: scale(1) rotate(0deg) translate(0px, 0px) skew(5deg, 0deg); 
				transition: transform var(--allegro); }

#envelope {		position: fixed;
				bottom: var(--margin-large);
				left: 50%;
				transform: translateX(-50%); 
				font-style: normal;
				border-bottom: none; }