@import url('https://fonts.googleapis.com/css2?family=Open+Sans&display=swap');

@font-face {
  font-family: 'barrio';
  src: url('/font/Barrio-Regular.otf') format("opentype");
}

@font-face {
  font-family: 'splendid';
  src: url('/font/SplendidN.ttf') format("truetype");
}
@font-face {
  font-family: 'splendid';
  src: url('/font/SplendidB.ttf') format("truetype");

  font-weight: bold;  
}
@font-face {
  font-family: 'elite';
  src: url('/font/SpecialElite.ttf') format("truetype");
  size-adjust: 70%;
}

@font-face {
  font-family: 'sophie';
  src: url('/font/Sophiecomic-Regular.ttf') format("truetype");
}

@font-face {
  font-family: 'cat';
  src: url('/font/CatCafe.ttf') format("truetype");
  size-adjust: 75%;
}

@font-face {
  font-family: 'sofija';
  src: url('/font/Sofija.ttf') format("truetype");
  size-adjust: 75%;
}


html {
  font-family: 'cat', sans-serif;
  font-size: 22px;
}

body {
  display: flex;
  flex-direction: column;
  align-items: center;
  background-color: black;
  gap: 0.5rem;
  overflow-x: hidden;
  
  --card-bg: #EFEDEA;
}

main, header, footer {
  max-width: 370px;
  z-index: 10;
}

footer {
  z-index: 9;
}
footer :nth-child(1) {
  z-index: 9;
}

footer :nth-child(2) {
  z-index: 8;
}

footer p, header h1, header p, main{
  margin: 0;
  background-color: var(--card-bg);
  padding: 0.25rem;
  box-shadow: 0 0 1rem 0rem rgba(0, 0, 0, 0.5);
}

main > :first-child {
  margin-top: 0;
}
main > section:first-child > :first-child {
  margin-bottom: 0;
}

main > :last-child {
  margin-bottom: 0;
}
main > section:last-child > :last-child {
  margin-bottom: 0;
}

input, button {
  font-family: 'splendid', 'Open Sans';
  font-weight: bold;
  font-size: 1rem;
}

input[type='text'], input[type='url'] {
  outline: none;
  border: none;
  display: block;
  background-image: url('/assets/underline.svg');
  background-repeat: no-repeat;
  background-position-y: 2px;
  width: 14rem;
  height: 1rem;
  padding: 0;
  background-color: transparent;
}
input[type='text']::placeholder, input[type='url']::placeholder {
  color: color-mix(in srgb, transparent, black 50%);
}

.radio-option {
  display: flex;
  align-items: center;
  gap: 0.2rem
}

.radio-option label:hover, .radio-option:has(input:hover) label  {
  padding-left: 0.25rem;
}

.radio-option label {
  flex-grow: 1;  
  padding: 0.14rem 0;
}

input[type='radio'] {
  display: inline-block;
  width: 1rem;
  height: 1rem;
  background-image: url('/assets/checkbox.svg');
  appearance: initial;
  -webkit-appearance: initial;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

input[type='radio']:checked {
  background-image: url('/assets/checkbox-checked.svg');
}

button {
  appearance: initial;
  -webkit-appearance: initial;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  text-shadow: color-mix(in srgb, transparent, black 30%) 2px 2px 0;
  border: none;
  background: none;
  display: inline-flex;
  align-items: center;
  text-transform: uppercase;
  transform: translateY(-1px);
  color: black;
}

button::before {
  content: "[";
  font-family: 'barrio';
  font-size: 1.2rem;
  transform:  translateY(1px);
}
button::after {
  content: "]";
  font-family: 'barrio';
  font-size: 1.2rem;
  transform:  translateY(1px);
}
button:hover {
  text-shadow: color-mix(in srgb, transparent, black 50%) 2px 2px 0;
}
button:hover::before {
  transform: translateX(-3px) translateY(1px);
}
button:hover::after {
  transform: translateX(3px) translateY(1px);
}

header, h1 {
  text-align: center;
  margin-top: 1rem;
}

h1 {
  margin-top: 0;
}

h1 a {
  color: black;
  text-decoration: none;
}

h2,h3,h4,header {
  font-family: 'splendid', sans-serif;
  font-weight: bold;
  margin-bottom: 0;
  margin-top: 0.5rem;
  line-height: 1;
}
h1 {
  font-family: 'barrio', sans-serif;
}
header h1 {
  margin-bottom: 0;
}
header h1 + p {
  font-size: 1.5rem;
  margin: 0;
  line-height: 0.75;
  max-width: 11.7rem;
}

.form-entry {
  margin: 1rem 0;
}
.form-entry:first-of-type {
  margin-top: 0.5rem;
}
.form-entry:last-of-type {
  margin-bottom: 0.5rem;
}

.form-entry p {
  margin: 0;
}

aside {
  font-size: 0.8rem;  
  padding-left: 0.4rem;
  background-image: url('/assets/sideline.svg');
  background-repeat: repeat-y;
  margin-top: 0.1rem;
}

fieldset {
  padding: 0;
  border: none;
}

ul {
	padding-left: 1rem;
	margin: 0.25rem 0;
}

em {
	font-weight: bold;
	text-transform: uppercase;
	font-size: 0.85em;
}


.code-block {
  background-color: black;
  padding: 0.25rem 0.5rem;
  position: relative;
}

.code-block:has(button) code {
  padding-right: 3rem;
}

.code-block .copy-button {
  filter: invert(94%) sepia(2%) saturate(821%) hue-rotate(323deg) brightness(105%) contrast(120%);
  box-shadow: 0rem -1.25rem 0 0 white inset;
}

code {
  background-color: black;
  color: var(--card-bg);
  font-family: 'elite', monospace;
}

.member-list {
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  gap: 0.25rem;
}

.member {
  --scale: 1;
	display: inline-flex;
	flex-direction: column;
	gap: 0.5rem;
	padding: 0.5rem;
	border: black 2px solid;
	align-items: center;  
	width: calc(50% - 0.125rem);
  box-sizing: border-box;
}

.member img {
  image-rendering: optimizeSpeed;   
  image-rendering: -moz-crisp-edges;  
  image-rendering: -o-crisp-edges;  
  image-rendering: -webkit-optimize-contrast;  
  image-rendering: pixelated; 
  image-rendering: crisp-edges;
  image-rendering: optimize-contrast;  
  -ms-interpolation-mode: nearest-neighbor; 
  width: calc(88px * var(--scale));
  height: calc(31px * var(--scale));
}

.member span {
  word-break: break-word;
  text-align: center;
}

details summary {
  cursor: default;
  user-select: none;
}

.prompt {
  margin: 0.25rem 0;
  text-align: center;
}

.prompt dd {
  margin: 0;
  font-family: 'sofija', sans-serif;
  font-size: 3rem;
}

.prompt-section {
	width: 100%;
	text-align: center;
	display: flex;
	flex-direction: column;
	align-items: center;
}

.prompt + p {
  margin: 0;
  max-width: 15rem;
}

footer, header {
  text-align: center;
  background-color: transparent;
  padding: 0;  
  display: flex;
  flex-direction: column;
  align-items: center;
}

@supports selector(::-webkit-scrollbar){
    header h1 { padding-right: 0.4rem; }
}
footer p + p, header h1 + p {
  margin-top: 0.5rem;
}

.mailvis {
  font-family: 'splendid', 'elite';
}

.mailvis h2 {
  font-size: 1rem;  
  display: flex;
  gap: 0.25rem;
  align-items: center;
  font-family: 'splendid', 'elite';
}

.mailvis h2 > span {
  border: black 1px solid;
  padding: 0.15rem 2.7rem 0.15rem 0.4rem;
  flex-grow: 1;
  position: relative;
}

.mailvis h2:before {
  content: "subject: ";
  font-weight: normal;
  font-family: 'cat';
}


.mailvis h2:has(#mail-recipient):before {
  content: "to: ";
}

.mailvis p {
  margin: 0;
  margin-top: 0.25rem;
  padding: 0 0.25rem 0.2rem 0.25rem;
  border: black 1px solid;
  position: relative;
}

.copy-button.floating {
  position: absolute;
  right: 0;
  top: -0.15rem;
}


.widget-container {
  display: flex;
  justify-content: center;
  margin-bottom: 0.5rem;
}

.submission-clutter {
  position: absolute;
}

.submission-clutter img {
  position: absolute;
  
  max-width: 180px;
  max-height: 215px;
  
  filter: drop-shadow(5px 5px 10px #000000A0);
}

#sub-lq-el {
	left: 178px;
	transform: rotate(13deg);
}
#sub-lq-sr {
	left: -350px;
	transform: rotate(-9deg);
}
#sub-lq-lu {
	left: 203px;
	top: 165px;
}
#sub-bd-lu {
	left: -343px;
	top: 165px;
}