:root {
  interpolate-size: allow-keywords;
  --color-primary: #f25c05;
  --color-site-background: #151515;
}

@media (max-width: 800px) {
  :root {
    --site-padding: 16px;
  }
}
@media (min-width: 800px) {
  :root {
    --site-padding: 32px;
  }
}

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

::selection {
  color: #151515;
  background-color: var(--color-primary);
}

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

html {
  box-sizing: border-box;
  /* scrollbar-gutter: stable; */
}

body {
  min-height: calc(100svh - var(--wp-admin--admin-bar--height, 0px));
  display: grid;
  grid-template-rows: auto 1fr auto;
  margin: 0;
  background-color: #151515;
  color: #fff;
}
/* Scanlines */
body::before {
  content: "";
  display: block;
  position: fixed;
  width: 100vw;
  height: 100vh;
  top: 0;
  left: 0;
  /* bottom: 0;
  right: 0; */
  background: linear-gradient(rgba(18, 16, 16, 0) 50%, rgba(0, 0, 0, 0.25) 50%),
              linear-gradient(90deg, rgba(255, 0, 0, 0.06), rgba(0, 255, 0, 0.02), rgba(0, 0, 255, 0.06));
  z-index: 100;
  background-size: 100% 2px, 3px 100%;
  pointer-events: none;
}
/* Flickering */
body::after {
  content: " ";
  display: block;
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background: rgba(18, 16, 16, 0.1);
  opacity: 0;
  z-index: 2;
  pointer-events: none;
  animation: flicker 2s infinite;
  will-change: filter;
}
@keyframes flicker {
  0% {opacity: 0.27861;}
  5% {opacity: 0.34769;}
  10% {opacity: 0.23604;}
  15% {opacity: 0.90626;}
  20% {opacity: 0.18128;}
  25% {opacity: 0.83891;}
  30% {opacity: 0.65583;}
  35% {opacity: 0.67807;}
  40% {opacity: 0.26559;}
  45% {opacity: 0.84693;}
  50% {opacity: 0.96019;}
  55% {opacity: 0.08594;}
  60% {opacity: 0.20313;}
  65% {opacity: 0.71988;}
  70% {opacity: 0.53455;}
  75% {opacity: 0.37288;}
  80% {opacity: 0.71428;}
  85% {opacity: 0.70419;}
  90% {opacity: 0.7003;}
  95% {opacity: 0.36108;}
  100% {opacity: 0.24387;}
}



.container {
  max-width: 1440px;
  margin-inline: auto;
  padding-inline: var(--site-padding);
}
.container-narrow {
  max-width: 800px;
  margin-inline: auto;
  padding-inline: var(--site-padding);
  line-height: 1.5;
}
.container-narrow a {
  transition: color .2s;
}
.container-narrow a:hover {
  color: var(--color-primary)
}

.page-header {
  margin-top: 5.5rem;
}



/* Utility classes */

.list-unstyled {
  list-style: none;
  margin-block: 0;
  padding-left: 0;
}

.uppercase {
  text-transform: uppercase;
}
.lowercase {
  text-transform: lowercase;
}

.hidden {
	height: 1px;
	width: 1px;
	overflow: hidden;
	position: absolute;
	margin: -1px;
	padding: 0;
	border: 0;
	clip-path: inset(50%);
	white-space: nowrap;
}

.brackets:before {
  content: "[";
}
.brackets:after {
  content: "]";
}