@import url('https://fonts.googleapis.com/css?family=JetBrains%20Mono:700|Nunito%20Sans:400');

/* CSS Reset */
*, *::before, *::after {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}

*::before, *::after {
	box-sizing: inherit;
}

img, picture, video, canvas, svg {
	display: block;
	max-width: 100%;
}

input, button, textarea, select {
	font: inherit;
}

p, h1, h2, h3, h4, h5, h6 {
	overflow-wrap: break-word;
}

:root {
	--orange-100: #fde2d2;
	--orange-200: #fbc5a5;
	--orange-300: #faa778;
	--orange-400: #f88a4b;
	--orange-500: #f66d1e;
	--orange-600: #dd621b;
	--orange-700: #944112;
	--orange-800: #622c0c;
	--orange-900: #311606;

	--blue-100: #e2f8ff;
	--blue-200: #a9e9ff;
	--blue-300: #70dbff;
	--blue-400: #65c5e6;
	--blue-500: #5aafcc;
	--blue-600: #438399;
	--blue-700: #22424c;
	--blue-800: #162c33;
	--blue-900: #0b1619;

	--gray-100: #0f0f0f;
	--gray-200: #161717;
	--gray-300: #272727;
	--gray-400: #2d2f2e;
	--gray-500: #5a5e5c;
	--gray-600: #868d89;
	--gray-700: #b3bcb7;
	--gray-800: #e0ebe5;
	--gray-900: #ffffff;

	--text-font: 'Nunito Sans', sans-serif;
	--heading-font: 'Jetbrains Mono', monospace;

	--text: var(--gray-900);
	--background: var(--gray-100);
	--primary: var(--orange-600);
	--secondary: var(--gray-300);
	--accent: var(--blue-600);

	--primary-light: var(--orange-400);
	--primary-dark: var(--orange-800);

	scroll-behavior: smooth;
}

/* Common CSS */
body {
  font-family: var(--text-font);
  font-weight: 400;
  background-color: var(--background);

  color: var(--text);
}

h1, h2, h3, h4, h5 {
  font-family: var(--heading-font);
  color: var(--primary-light);
  font-weight: 700;
}

html { font-size: 1rem; }

h1 {
	font-size: 4rem;
	text-align: center;
	text-wrap: pretty;
}

h2 {font-size: 3rem;}

h3 {font-size: 2rem;}

h4 {font-size: 1.777rem;}

h5 {font-size: 1.333rem;}

small {
	font-size: 0.8rem;
	color: var(--primary);
}

@media (max-width: 720px) {
	h1 {font-size: 2.5rem; }
	h2 {font-size: 2.1rem; }
	h3 {font-size: 1.777rem; }
	h4 {font-size: 1.333rem; }
	h5 {font-size: 1.111rem; }
	small {font-size: 0.9rem;}
}

a {
	text-decoration: none;
	font-weight: 600;
	color: var(--blue-200);
	transition: 200ms;
}

a:visited { color: var(--blue-400); }

a:is( :hover, :focus ) { color: var(--blue-600); }

::-webkit-scrollbar {
	scrollbar-width: thin;
	background-color: var(--blue-900);
	border-radius: 100vw;
}

::-webkit-scrollbar-thumb {
	border-radius: 100vw;
	background-color: var(--orange-500);
}

/* Nav partial */
#nav {
	position: relative;

    background-color: var(--bg);
	padding-block: 0.5rem;

	background-image:
		linear-gradient( rgba(22, 23, 23, 0.5) 10%, rgba(22, 23, 23, 0.1) ),
		url('/assets/images/nav-bg-1.png'),
		url('/assets/images/nav-bg-2.png')
	;

	background-repeat: repeat-x;
	background-size: contain;
	image-rendering: pixelated;

	font-family: var(--heading-font);
}

#nav ul {
	display: flex;
	flex-wrap: wrap;
	align-content: center;
	justify-content: space-evenly;
	align-items: center;
}

#nav li {
	list-style: none;
	margin-block: 0.2rem;
	margin-inline: 1rem;
}

#nav a {
	color: var(--blue-200);
	transition: 200ms;
}

#nav a:is( :hover, :focus ) {
	color: var(--blue-400);
}

#nav .nav-link {
	background-color: rgba(22, 23, 23, 0.8);
	padding-inline: 1rem;
	padding-block: 0.2rem;
	border-radius: 100vw;
	min-width: 15ch;
	text-align: center;

	transition: 100ms;

	position: relative;
}

#nav .nav-link:is( :hover, :focus-within ) {
	background-color: black;
}

/* Discoverable list that uses a checkbox be opened */
.discoverable-list {
	cursor: pointer;

	display: flex;
	flex-direction: column;
	flex-wrap: nowrap;

	interpolate-size: allow-keywords;

	transition: 200ms;
	isolation: isolate;
}

.discoverable-list > * { cursor: pointer; }

.nav-link:has( .discoverable-list ) {
	cursor: pointer;
}

.discoverable-list input {
	width: 0px;
	height: 0px;
	position: absolute;
}

.discoverable-list > label {
	width: auto;
	display: inline-block;
}

.discoverable-list > label::before {
	position: relative;
	content: '▶';
	font-size: 60%;
	left: -5%;
	top: 0rem;

	transition: 200ms;
}

.discoverable-list:has( input:checked ) > label::before {
	content: '▼';
	font-size: 70%;
}

.discoverable-list > :last-child {
	visibility: hidden;

	height: 0;
	overflow: hidden;

	background-color: rgba(22, 23, 23, 0.8);

	position: absolute;
	left: 0rem;
	right: 0rem;
	top: 100%;

	border-bottom-right-radius: 1.5rem;
	border-bottom-left-radius: 1.5rem;

	transition: 200ms;
}

.discoverable-list:has( input:checked ) > :last-child {
	visibility: visible;
	height: max-content;
	padding-block: 0.5rem;
}

.nav-link:is( :hover, :focus-within ) .discoverable-list > :last-child {
	background-color: black;
}

.nav-link:has( input:checked ) {
	border-bottom-right-radius: 0 !important;
	border-bottom-left-radius: 0 !important;
}

/* Go to top button */

#gototop {
	position: fixed;
	right: 1rem;
	bottom: 1rem;

	background-color: var(--primary-light);
	border-radius: 50%;
	width: 4rem;
	aspect-ratio: 1;
}

#gototop svg {
	position: absolute;
	fill: var(--background);
	top: 5%;
	left: 5%;

	width: 90%;
	height: 90%;

	transition: 100ms;
}

#gototop:is(:hover, :focus, :focus-within) svg {
	fill: var(--blue-300);
}

#footer {
	display: flex;
	flex-wrap: wrap;
	align-content: center;
	justify-content: space-around;
	align-items: center;
	padding-block: 0.5rem;
	background-color: var(--gray-300);
}

/* Image Holder */
.image-holder {
	display: grid;
	width: min(100%, 10rem);
	image-rendering: pixelated;
}

.image-holder img {
	grid-area: 1 / 1 / 2 / 2;
	width: inherit;
	aspect-ratio: inherit;
}

.details-popup {
	position: relative;
	transition: 500ms;
}

.details-popup > *:last-child {
	display: flex;
	position: absolute;
	z-index: 2;
	flex-direction: column;
	width: fit-content;
	text-align: center;
	background-color: var(--bg);

	box-shadow: 0 1rem 1rem 0 var(--gray-100);
}

#null-ring {
	display: flex;
	flex-wrap: wrap;
}

.column-with-space {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 1rem;
}

/* MAIN CSS */

.frame {
	--border-width: 16px;
	padding-block: 1rem;
	padding-inline: 2rem;

	background-color: var(--gray-400);
	border-image-source: url('/assets/images/pattern.png');
	border-image-slice: calc( 1/3 * 100% );
	border-image-outset: var(--border-width);
	border-image-width: var(--border-width);
	border-image-repeat: round;
}

.single-margin {
	margin-block: 4rem;
	margin-inline: auto;
	width: max(10rem, 90dvw);
}

.inline-list {
	display: flex;
	flex-wrap: wrap;
}

.inline-list > li {
	margin-inline: 0.5rem;
	list-style: none;
}

.pseudo-iframe {
	overflow: auto;
	border: 0.2rem solid var(--orange-900);
	border-radius: 0.5rem;
	width: 100%;
}

.sticky {
    position: sticky;
    top: 2rem;
}

.rss-button {
	display: inline-block;
}

.rss-button img {
	display: inline;
	width: 1rem;
	height: 1rem;
}