@font-face {
	font-family: Lato;
	font-style: normal;
	font-weight: normal;
	src: url(../fonts/Lato.woff);
}

@font-face {
	font-family: 'Literata';
	src: url('../fonts/Literata-Italic.woff2') format('woff2'),
		 url('../fonts/Literata-Italic.woff') format('woff'),
		 url('../fonts/Literata-Italic.ttf') format('truetype');
	font-weight: 400;
	font-display: swap;
	font-style: italic;
	ascent-override: 100%; /* ask me not why */
}

@font-face {
	font-family: 'Literata';
	src: url('../fonts/Literata-SemiBoldItalic.woff2') format('woff2'),
		 url('../fonts/Literata-SemiBoldItalic.woff') format('woff'),
		 url('../fonts/Literata-SemiBoldItalic.ttf') format('truetype');
	font-weight: 600;
	font-display: swap;
	font-style: italic;
	ascent-override: 100%; /* ask me not why */
}

@font-face {
	font-family: Maths;
	font-style: italic;
	font-weight: normal;
	src: url(../fonts/cmunti.otf);
}

@font-face {
	font-family: Maths;
	font-style: normal;
	font-weight: normal;
	src: url(../fonts/cmunui.otf);
}

@font-face {
	font-family: latin-modern-maths;
	font-style: normal;
	font-weight: normal;
	src: url(../fonts/latinmodern-math.otf);
}

/*-------------------------------------------------
    Utility styles
--------------------------------------------------*/

:root {
	--spacing-1: .25rem;
	--spacing-2: .5rem;
	--spacing-3: 1rem;
	--spacing-4: 2rem;
	--spacing-5: 4rem;
	--spacing-6: 8rem;
	--spacing-7: 16rem;

	--orca-white: #f7f7f7;
	--orca-black: #141414;
	--color-dim: #6b6b6b;
}

.mw--site {
	max-width: 52rem;
}

.bg-orca-white {
	background-color: var(--orca-white);
}

.c--orca-white {
	color: var(--orca-white);
}

.c--dim {
	color: var(--color-dim);
}

.sb {
	font-weight: 600;
}

.rg0 > :not(:first-child) { margin-left: 0; }
.rg1 > :not(:first-child) { margin-left: var(--spacing-1); }
.rg2 > :not(:first-child) { margin-left: var(--spacing-2); }
.rg3 > :not(:first-child) { margin-left: var(--spacing-3); }
.rg4 > :not(:first-child) { margin-left: var(--spacing-4); }
.rg5 > :not(:first-child) { margin-left: var(--spacing-5); }
.rg6 > :not(:first-child) { margin-left: var(--spacing-6); }
.rg7 > :not(:first-child) { margin-left: var(--spacing-7); }

.cg0 > :not(:first-child) { margin-top: 0; }
.cg1 > :not(:first-child) { margin-top: var(--spacing-1); }
.cg2 > :not(:first-child) { margin-top: var(--spacing-2); }
.cg3 > :not(:first-child) { margin-top: var(--spacing-3); }
.cg4 > :not(:first-child) { margin-top: var(--spacing-4); }
.cg5 > :not(:first-child) { margin-top: var(--spacing-5); }
.cg6 > :not(:first-child) { margin-top: var(--spacing-6); }
.cg7 > :not(:first-child) { margin-top: var(--spacing-7); }

@media screen and (min-width: 30em) {
	.rg0-ns > :not(:first-child) { margin-left: 0; }
	.rg1-ns > :not(:first-child) { margin-left: var(--spacing-1); }
	.rg2-ns > :not(:first-child) { margin-left: var(--spacing-2); }
	.rg3-ns > :not(:first-child) { margin-left: var(--spacing-3); }
	.rg4-ns > :not(:first-child) { margin-left: var(--spacing-4); }
	.rg5-ns > :not(:first-child) { margin-left: var(--spacing-5); }
	.rg6-ns > :not(:first-child) { margin-left: var(--spacing-6); }
	.rg7-ns > :not(:first-child) { margin-left: var(--spacing-7); }

	.cg0-ns > :not(:first-child) { margin-top: 0; }
	.cg1-ns > :not(:first-child) { margin-top: var(--spacing-1); }
	.cg2-ns > :not(:first-child) { margin-top: var(--spacing-2); }
	.cg3-ns > :not(:first-child) { margin-top: var(--spacing-3); }
	.cg4-ns > :not(:first-child) { margin-top: var(--spacing-4); }
	.cg5-ns > :not(:first-child) { margin-top: var(--spacing-5); }
	.cg6-ns > :not(:first-child) { margin-top: var(--spacing-6); }
	.cg7-ns > :not(:first-child) { margin-top: var(--spacing-7); }
}

@media screen and (min-width: 30em) and (max-width: 60em) {
	.rg0-m > :not(:first-child) { margin-left: 0; }
	.rg1-m > :not(:first-child) { margin-left: var(--spacing-1); }
	.rg2-m > :not(:first-child) { margin-left: var(--spacing-2); }
	.rg3-m > :not(:first-child) { margin-left: var(--spacing-3); }
	.rg4-m > :not(:first-child) { margin-left: var(--spacing-4); }
	.rg5-m > :not(:first-child) { margin-left: var(--spacing-5); }
	.rg6-m > :not(:first-child) { margin-left: var(--spacing-6); }
	.rg7-m > :not(:first-child) { margin-left: var(--spacing-7); }

	.cg0-m > :not(:first-child) { margin-top: 0; }
	.cg1-m > :not(:first-child) { margin-top: var(--spacing-1); }
	.cg2-m > :not(:first-child) { margin-top: var(--spacing-2); }
	.cg3-m > :not(:first-child) { margin-top: var(--spacing-3); }
	.cg4-m > :not(:first-child) { margin-top: var(--spacing-4); }
	.cg5-m > :not(:first-child) { margin-top: var(--spacing-5); }
	.cg6-m > :not(:first-child) { margin-top: var(--spacing-6); }
	.cg7-m > :not(:first-child) { margin-top: var(--spacing-7); }
}

@media screen and (min-width: 60em) {
	.rg0-l > :not(:first-child) { margin-left: 0; }
	.rg1-l > :not(:first-child) { margin-left: var(--spacing-1); }
	.rg2-l > :not(:first-child) { margin-left: var(--spacing-2); }
	.rg3-l > :not(:first-child) { margin-left: var(--spacing-3); }
	.rg4-l > :not(:first-child) { margin-left: var(--spacing-4); }
	.rg5-l > :not(:first-child) { margin-left: var(--spacing-5); }
	.rg6-l > :not(:first-child) { margin-left: var(--spacing-6); }
	.rg7-l > :not(:first-child) { margin-left: var(--spacing-7); }

	.cg0-l > :not(:first-child) { margin-top: 0; }
	.cg1-l > :not(:first-child) { margin-top: var(--spacing-1); }
	.cg2-l > :not(:first-child) { margin-top: var(--spacing-2); }
	.cg3-l > :not(:first-child) { margin-top: var(--spacing-3); }
	.cg4-l > :not(:first-child) { margin-top: var(--spacing-4); }
	.cg5-l > :not(:first-child) { margin-top: var(--spacing-5); }
	.cg6-l > :not(:first-child) { margin-top: var(--spacing-6); }
	.cg7-l > :not(:first-child) { margin-top: var(--spacing-7); }
}

.shadow {
	box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.2);
}

.text-shadow {
	text-shadow: 0px 2px 2px rgba(0, 0, 0, 0.2);
}

.flex-equal > * {
	flex-basis: 1px;
	flex-grow: 1;
	flex-shrink: 0;
}

/*-------------------------------------------------
	Body and misc styles
--------------------------------------------------*/

body {
	font-family: Lato, Helvetica, sans-serif;
	background-image: url("../img/underwater.jpg");
	background-color: #0a1f48;
	background-position: center top;
	background-repeat: no-repeat;
}

header a {
	text-decoration: none;
	color: var(--orca-black);
}

h1, h2, h3, h4, h5, h6 {
	font-family: Literata;
	font-style: italic;
	font-weight: 600;
	margin: 0;
}

#logo img {
	width: 9rem;
}

#logo h1 {
	font-size: 3rem;
}

#menu a {
	font-size: 1.6rem;
	font-family: Literata;
	font-style: italic;
	font-weight: 400;
	line-height: 1;
}

.card {
	background-color: var(--orca-white);
	box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.2);
}

.card:not(.card-wide) {
	border-radius: 0.5rem;
}

video
{
	max-width:100%;
}

pre
{
	background-color: #CCCCCC;
	padding-top: 10px;
	padding-bottom: 10px;
	padding-left: 10px;
	padding-right: 10px;
	overflow: auto;
}

code
{
	font-family: Courier;
}

pre code
{
	font-family: Courier;
	font-size: 11pt;
	white-space: pre;
}


@media screen and (min-width:30em) {
	.card {
		border-radius: 0.5rem;
	}
}

a
{
	font-weight: bold;
	text-decoration: none;
	color: #6895e3;
}

a:hover
{
    font-weight : bold;
    color: #3465bb;
}

a.plain-link
{
	color: inherit;
	font-weight: inherit;
	text-decoration: none;
}

.avatar {
	border-radius: 999px;
	width: 3rem;
}

#subscribe-form *
{
	font-family: Lato, Helvetica, sans-serif !important;
}

#subscribe-form h1,
#subscribe-form h2,
#subscribe-form h3,
#subscribe-form h4,
#subscribe-form h5,
#subscribe-form h6
{
	font-family: Literata !important;
}

#handmade-logo {
	width: 16rem;
}

footer {
	background: var(--orca-black);
}

/*-------------------------------------------------
	Markdown content styles
--------------------------------------------------*/

.md-content {
	line-height: 1.4;
}

.md-content > :first-child {
	margin-top: 0;
}

.md-content > :last-child {
	margin-bottom: 0;
}

.md-content h1,
.md-content h2,
.md-content h3,
.md-content h4,
.md-content h5,
.md-content h6
{
	margin-top: 1rem;
	margin-bottom: 1rem;
}

.md-content ol,
.md-content ul
{
	padding-left: 1.4em;
}

.md-content li {
	margin-top: 0.4em;
	margin-bottom: 0.4em;
}

/*-------------------------------------------------
    newsletter subscribe form styles
--------------------------------------------------*/
.subscribe-form
{
    max-width: 400px;
    width: 100%;
    padding: 20px;

    font-family: Lato, Helvetica, sans-serif;
    font-size: 14px;
}

.subscribe-form h4
{
	color: #000000;
	font-family: 'Literata', Arial, Helvetica, sans-serif;
	font-size: 30px;
	font-weight: 400;
	margin: 0 0 10px 0;
	text-align: left;
	word-break: break-word;
}

.subscribe-form form
{
    margin: 0px;
}

.subscribe-form .form-content
{
    margin-bottom: 20px;
}

.subscribe-form .form-content input
{
    width: 100%;
    padding: 10px;
    box-sizing: border-box;
    border-color: #cccccc;
    border-style: solid;
    border-width: 1px;
    border-radius: 4px;
}

.subscribe-form .form-content .email-warning
{
    margin-top:10px;
    color: red;
}

.subscribe-form .form-submit button
{
    color: #ffffff;
    background-color: #000000;
    border: none;
    border-radius: 4px;
    box-shadow: none;
    font-size: 16px;
    font-weight:700;
    padding:10px;
    width: 100%;
}

.subscribe-form .form-submit button .loader {
  border: 2px solid #ffffff; /* white */
  border-top: 2px solid  #000000; /*  grey */
  border-radius: 50%;
  width: 1em;
  height: 1em;
  animation: spin 2s linear infinite;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}