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

:root {
	background-color: #333;
	color: #ddd;
	font-family: "Yrsa", serif;
	interpolate-size: allow-keywords;

	--main-col: #66c971;
}

article {
  & > :last-child {
    margin-block-end: 0;
    margin-bottom: 0;
  }
}

body {
  margin: 64px auto 128px auto;
  width: 60%;
}

main {
	margin: 64px 0 64px 0;

	display: flex;
	flex-direction: column;
	gap: 64px;
}

section {
	margin-bottom: 48px;
	& > :not(h2) {
		margin-bottom: 32px;
	}
}

hgroup {
  text-align: center;
}

h1 {
	font-size: 32pt;
	/* font-family: "Reddit Sans", sans-serif; */
	color: var(--main-col);
	margin: 0;
	margin-bottom: 32px;
}

h2 {
	font-size: 26pt;
	margin: 0;
	margin-bottom: 16px;
}

h3, summary {
  font-size: 22pt;
}

h3 {
  margin-bottom: 8px;
}

p {
  margin-block-start: 0;
	font-size: 21pt;
}

a {
  text-decoration: none;
  color: var(--main-col);
}

img {
  max-width: 100%;
  margin: auto;
}

details {
  border-radius: 12px;
  padding: 16px;
  background-color: #00000022;
  margin-bottom: 16px;
  overflow: hidden;

  > summary {
    cursor: pointer;
  }

  > :nth-child(2) {
    padding-top: 16px;
  }
  > :last-child {
    margin-block-end: 0;
    margin-bottom: 0;
  }

  &::details-content {
    block-size: 0;

    transition:
      block-size 0.5s,
      content-visibility 0.5s;

    transition-behavior: allow-discrete;
  }
  &[open]::details-content {
    block-size: auto;
  }
}
summary::marker {
  opacity: 0;
}

/*
Source - https://stackoverflow.com/a
Posted by Carlos Vidal
Retrieved 2026-01-10, License - CC BY-SA 4.0
*/
details summary::-webkit-details-marker {
  display: none;
}


hr {
  width: 100%;
  opacity: 30%;
}

code {
	font-size: 16pt;
	border-radius: 6px;
	padding: 0 6px;
}

code, pre {
	background-color: rgba(0, 0, 0, 0.2);
  font-family: "JetBrainsMono-Regular", monospace;
}

img, pre {
  border-radius: 8px;
}

kbd {
  background-color: #00000022;
  border-bottom: 4px solid #00000033;
  border-radius: 4px;
  padding: 4px 8px;
  font-size: 16pt;
}

pre {
  font-size: 16pt;
	padding: 16px;
	overflow: auto;

  .blue {
    color: #7f9ad7;
  }
  .teal {
    color: #99d1db;
  }
  .gray {
    color: #868eab;
  }
  .green {
    color: #98be81;
  }
  .yellow {
    color: #e5c890;
  }
  .comment {
    color: #868eab;
    font-style: italic;
  }
}

footer {
  opacity: 50%;
  font-style: italic;
  text-align: center;
}

.notice {
  border: 2px solid #b2539d;
  background-color: #b2539d22;
  border-radius: 8px;
  padding: 8px;
  & > p {
    &::before {
      content: "⚠️ "
    }
    margin: 0;
  }
}

@media screen and (max-width: 1200px) {
	body {
		width: 100%;
		padding: 0 16px;
		box-sizing: border-box;
	}
	main {
	  width: 100%;
	  padding: 0;
	  box-sizing: border-box;
	}
	h1 {
		font-size: 24pt;
	}
	h2 {
		font-size: 22pt;
	}
	p {
		font-size: 18pt;
	}
	code {
		font-size: 14pt;
	}
	pre {
	  font-size: 14pt;
	}
}