@font-face {
  font-family: 'inter';
  font-style:  normal;
  font-weight: 400;
  font-display: auto;
  src: url("/assets/inter400.woff2") format("woff2"),
       url("/assets/inter400.woff") format("woff");
}

* { margin: 0; padding: 0; border: none; outline: none; box-sizing: border-box; text-decoration: none; font-family: 'inter', -apple-system, sans-serif; font-weight: 400; vertical-align: baseline; font-size: 20px; letter-spacing: -0.009em; line-height: 36px; }

.animate-in { animation: fadeIn .2s ease-in; }
.animate-out { transition: opacity .2s; opacity: 0; }

@-webkit-keyframes fadeIn {
	from { opacity: 0; }
	to { opacity: 1; }
}

@keyframes fadeIn {
	from { opacity: 0; }
	to { opacity: 1; }
}










/* structure				.--. .--- .-. ...- ... */

html, body { background: #fcfcfc; color: #222; height: 100%; }
body { display: grid; grid-template-columns: 1fr; grid-gap: 0; align-items: center; padding: 5% 15%; }
	.rapper { grid-column: 1; max-width: 620px; display: block; }
	nav { padding-bottom: 60px; position: relative; }






/* typography			.--. .--- .-. ...- ... */

h1, h2, h3, h4, p, blockquote, form, ul, ol, .video { margin-bottom: 30px; font-weight: 400; font-style: normal;}

ul li { list-style: none; padding: 0 0 15px 0; position: relative; line-height: 30px; }
ul li:before { content: "•"; position: absolute; left: -27px; }
ol li { margin-left: -10px; padding: 0 0 10px 10px; }

i, em { font-weight: 400; font-style: normal; }
b, strong { font-weight: 400; font-style: normal; }

blockquote { border-left: 1px solid #ddd; margin-left: -10px; padding-left: 10px; font-weight: 400; font-style: normal; }
blockquote p { margin: 0; }
cite { display: block; font-weight: 400; font-style: normal; margin-top: 15px; }

a { color: inherit; border-bottom: 1px solid #ddd; transition: color .4s; padding-bottom: 2px; }
	a:hover { color: #f9415d; border-bottom: 1px solid #ddd; }
	nav a { margin-right: 5%; }
	nav a.active { border-bottom-style: dotted; }
	nav a.rat { border: none; padding: 0; vertical-align: top; }

img { max-width: 100%; filter: grayscale(90%) opacity(90%); }

.video { position: relative; height: 0; overflow: hidden; padding-bottom: 56.25%; box-sizing: border-box; filter: grayscale(90%) opacity(90%); }
	.video iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
	
svg { max-width: 20px; height: auto; margin-top: 7px; }
	svg path { fill: #aeaeae; }
	a svg path { transition: fill .4s; }
	a:hover svg path { fill: #f9415d; }

hr { padding: 30px 0;  }
	hr:before { content: "↓"; color: #222; }










/* forms						.--. .--- .-. ...- ... */

form { display: grid; grid-template-columns: 1fr min-content; grid-gap: 20px; align-items: center; margin: 40px 0; }

	input, button { width: 100%; cursor: pointer; -webkit-appearance: none; border-radius: 0; }
	input { background: none; border-bottom: 1px solid #bbb; padding: 5px 0; color: #444; transition: color .4s, border .4s; }
	input:focus { border-bottom: 1px solid #444; }
	input:required:invalid, input:invalid { outline: none; box-shadow: none; border-bottom: 1px solid #bbb; }
	::placeholder { color: #444; opacity: 1; }
	
	button { border-radius: 40px; background: none; border: 1px solid #444; padding: 10px; color: #444; transition: color .4s, border .4s; white-space: nowrap; }
	button:hover { color: #f9415d; border-color: #f9415d; }










/* media						.--. .--- .-. ...- ... */
@media screen and (max-width: 700px) {
	body { display: block; padding: 15px; }
	.rapper { margin-bottom: 30px; }
	
	form { display: block; }
	input, button { margin-bottom: 10px; text-align: center; }
	
	ul li { list-style: none; padding: 0 0 20px 20px; position: relative; }
	ul li:before { position: absolute; left: 0; }

	ol li { margin-left: 20px; padding: 0 0 20px 10px; }

	nav { text-align: center; z-index: 1000; }
	nav a.rat { display: block; margin-bottom: 10px; }
	nav a { z-index: 1001; }

}

@media (prefers-color-scheme: dark) {
	html, body { background: #222; color: #fcfcfc; }
	button { border: 1px solid #fcfcfc; color: #fcfcfc; }
	input { color: #fcfcfc; }

}