:root {
                --bg: #001440;
                --fg: #ffffff;
                --link: #b2c6e6;
                --active: #dfebff;
                --pre: #0D2F73;}

body {
	font-family: sans-serif;
	background-color: var(--bg);
	color: var(--fg);
	padding: 2rem 1.25rem;
	line-height: 1.5;
	max-width: 600px;
	margin: 0 auto;
}

header {
	margin-bottom: 1rem;
	display: flex;
	justify-content: space-between;
	align-items: center;
	flex-wrap: wrap;
}

header h1 {
	font-size: 1.2rem;
	margin-top: 0;
	margin-bottom: 0;
	margin-right: 1rem;
}

a {
	color: var(--link);
	position: relative;
}

a:hover {
	color: var(--active);
}

main h1 {
	font-size: 1.6rem;
	margin: 0;
}

h2 {
	font-size: 1.35rem;
}

h3 {
	font-size: 1.1rem;
}

ul {
	padding: 0;
}

pre {
	display: block;
	padding: .25rem;
	margin: .25rem 0;
	overflow-x: auto;
	background-color: var(--pre);
}

img {
	max-width: 100%;
}

footer {
	margin-top: 2rem;
}

@media (prefers-color-scheme: dark) {
	:root {
		--bg: #001440;
		--fg: #ffffff;
		--link: #b2c6e6;
		--active: #dfebff;
		--pre: #0D2F73;
	}
}
.cta-button, .cta-button:hover, .cta-button:visited {
    border: 1.5px solid #a4c2d0;
    border-radius: 5px;
    padding: 10px;
    display: inline-block;
    margin: 10px 0;

    background: linear-gradient(120deg, #77888f, #364e59);
    color: white !important;
    font-weight: bold;
}

code {
  background: #0D2F73;
  padding: 2.5px 5px;
  border-radius: 6px;
}