:root {
	/* pink black */ 
	/* white black */ 
	/* orange #1c1c1c */ 

	/* pink #0e2a44 */ 
	/* pink darkred */ 

	/* #dddddd darkblue */ 
	/* white darkgreen */ 
  --fg: light-dark(#0e2a44, pink);
  --bg: light-dark(pink, #0e2a44);

  --s0: 0.33rem;
  --s1: 0.7rem;
  --s2: 1.8rem;

	--result-width: 220px;

	color-scheme: light dark;
}

html {
  box-sizing: border-box;

  color: var(--fg);
  background-color: var(--bg);
}

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

body {
  margin: 0;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

header {
  color: var(--bg);
  background-color: var(--fg);
  display: flex;
}

h1 {
  margin-inline: auto;
  padding-inline: var(--s2);
	margin-block: var(--s1);
  max-width: 1000px;
  width: 100%;
}

main {
  margin: 0 auto;
  padding: var(--s2);
  max-width: 1000px;

  display: flex;
  flex-direction: column;
  gap: var(--s2);
}

form {
  display: flex;
  flex-flow: row wrap;
  gap: var(--s2);
}

.form {
  font-size: 1.4rem;
  font-family: monospace;
  font-weight: bold;
  width: clamp(12ch, 100%, 42ch + 2 * var(--s0));
  display: grid;
  gap: var(--s1);
}

.form > * {
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

.form > input {
	font-size: 1.4rem;
	font-weight: normal;
}

input {
  border: none;
  border-radius: 4px;
  padding: var(--s0);
  font-size: 1.4rem;
  margin-block-end: var(--s1);
	min-width: 12ch;
  filter: drop-shadow(color-mix(in srgb, var(--bg), light-dark(black, white) 40%) 8px -8px 0);

  font-weight: normal;
  color: var(--bg);
  background-color: var(--fg);

	transition-property: filter;
	transition-duration: 0.1s;
	transition-timing-function: ease-in-out;
}

label {
  /* max-width: unset; */
  font-size: 1.2rem;
  font-weight: bold;
}

input:focus-visible {
	outline: none;
  filter: drop-shadow(color-mix(in srgb, var(--fg), light-dark(white, black) 40%) 8px -8px 0);
}

label:has(+ input:focus-visible):before {
	content: '>';
	font-family: monospace;
	display: inline-block;
	position: relative;
	width: 0;
	left: -2ch;
}

label:has(+ input:focus-visible):after {
	content: '<';
	font-family: monospace;
	display: inline-block;
	position: relative;
	width: 0;
	right: -1ch;
}

button {
  border: none;
  border-radius: 4px;
  filter: drop-shadow(color-mix(in srgb, var(--bg), light-dark(black, white) 40%) 8px -8px 0);
  padding: var(--s1) var(--s2);
  margin-block: var(--s1);
	justify-self: end;

	cursor: pointer;

  font-size: 1rem;
	font-weight: bold;
  color: var(--bg);
  background-color: var(--fg);

	transition-property: background-color, filter;
	transition-duration: 0.1s;
	transition-timing-function: ease-in-out;
}

button:hover, button:focus-visible {
	outline: none;
	background-color: color-mix(in srgb, var(--fg), light-dark(black, white) 30%);
  filter: drop-shadow(color-mix(in srgb, var(--fg), light-dark(white, black) 40%) 8px -8px 0);
}

button:focus-visible:before {
	content: '>';
	font-family: monospace;
	font-weight: bold;
	display: inline-block;
	position: relative;
	width: 0;
	color: color-mix(in srgb, var(--fg), light-dark(black, white) 30%);
	left: calc(-3ch - var(--s2));
}

button:focus-visible:after {
	content: '<';
	font-family: monospace;
	font-weight: bold;
	display: inline-block;
	position: relative;
	width: 0;
	color: color-mix(in srgb, var(--fg), light-dark(black, white) 30%);
	right: calc(-2ch - var(--s2));
}


button:active {
	transition-duration: 0.05s;
  filter: drop-shadow(color-mix(in srgb, var(--fg), light-dark(white, black) 40%) 4px -4px 0);
}

.output {
	flex-basis: var(--result-width);
	flex-grow: 1;
  display: grid;
	align-items: center;
	justify-items: center;
}

.error {
	width: var(--result-width);
	height: var(--result-width);
	padding: var(--s1);
	font-weight: bold;
	font-size: 1.2rem;
	color: var(--bg);
	background-color: var(--fg);

  display: grid;
	align-items: center;
	justify-items: center;
	text-align: center;
}

svg {
	width: var(--result-width);
}

rect {
	fill: var(--fg);
}

path {
	fill: var(--bg);
}

#iban {
  font-family: monospace;
	font-weight: bold;
}

/* input:focus-visible { */
/* 	filter: unset; */
/*   outline-offset: var(--s0); */
/* 	outline: var(--fg) solid 3px; */
/* } */