@import url('https://fonts.googleapis.com/css2?family=Anton&family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap');

* {
	margin: 0;
	padding: 0;
	border: 0;
	font: inherit;
	vertical-align: baseline;
	list-style-type: none;
	outline: none;
	text-decoration: none;
	border-collapse: collapse;
	background: none;
	color: inherit;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	letter-spacing: inherit;
	font-family: inherit; 
	font-size: inherit;
	line-height: inherit;	
	text-align: center;
	transition: all 0s linear; 
	border-radius: 0em;
}
::-webkit-scrollbar {
	width: calc( 2vh + 1vw );
}
::-webkit-scrollbar-track {
	background: gray;
}
::-webkit-scrollbar-thumb {
	background: black; 
	border-radius: 1em;
}
::-webkit-scrollbar-thumb:hover {
	background: white;
}

@keyframes errorBlink {
	0%, 49% {
		color: red;
	}
	50%, 100% {
		color: white;
	}
}

@keyframes warningBlink {
	0%, 49% {
		color: orange;
	}
	50%, 100% {
		color: white;
	}
}

html {
	font-family: 'Montserrat', sans-serif;
	font-size: calc( 3vh + 2vw );
	line-height: calc( 3vh + 2vW );
	color: white;
	background-color: gray;
}

body {
	font-size: 0.6em;
	margin: 0 auto;
	width: calc(30vh + 20vw);
	overflow-x: hidden;
}

.registered {
	color: orange;
}
.approved {
	color: green;
}
.transferred {
	color: blue;
}

.form, 
img {
	width: 100%;
}
.form img {
	display: block;
}

#logo {
	margin: calc( 0.8vh + 0.5vw ) 0;
	height: calc( 21vh + 13vw );
	width: auto;
	fill:white;
}

.form.invalid button,
.form:invalid button,
#change:disabled {
	display: none;
	opacity: 0.5;
	pointer-events: none;
}
#change {
	display: block;
	opacity: 1;
	pointer-events: auto;
}

label,
input,
select,
textarea,
button,
p,
#stripe_elements > div,
#message {
	display: block;
	width: 100%;
	margin-bottom: 1em;
	padding: 0.8em;
}
input.invalid,
input:invalid {
	color: red;
}

#message {
	padding: 0;
}

h1, h2 {
	display: block;
	width: 100%;
	margin-bottom: 1em;
}
h1 {
	font-size: 1.3em;
}
h2 {
	line-height: 1.2em;
}
h3 {
	line-height: 1.1em;
}
b {
	font-weight: bold;
}

p {
	border: 1px solid white;
	line-height: 1.2em;
}

a {
	text-decoration: underline;
}
small {
	display: block;
	text-align: left;
	font-size: 0.7em;
	line-height: 1.2em;
	margin-bottom: 1em;
}
label {
	display: block;
	text-align: left;
	margin-bottom: 0;
	padding: 0;
}
label > small,
.FAILURE,
.SUCCESS {
	display: block;
	text-align: left;
	font-size: 0.7em;
	line-height: 1.2em;
	margin-bottom: 0.5em;
}

input, 
select,
option,
optgroup,
#stripe_elements > div {
	text-align: left;
	border: 1px solid white;
	background-color: black;
	color: white;
}
input::placeholder,
option:disabled {
	color: red;
}

select:valid {
	color: white;
}

select.changeable.invalid,
select.changeable:invalid,
input.invalid,
input:invalid {
	font-size: 0.7em;
	color: red;
}

input:disabled,
select:disabled {
	background: none;
}
button {
	display: block;
	cursor: pointer;
	background-color: green;
	color: white;
	border: 1px solid white;
}

label:has( + input[type="checkbox"] ),
label:has( + input[type="file"] ) {
	cursor: pointer;
	text-align: center;
	color: white;
	border: 1px solid white;
}

input[type="checkbox"],
input[type="file"] {
	overflow: hidden; 
	padding: 0;
	border: 0;
	height: 0;
}

label:has( + input[type="checkbox"]:checked ) {
	color: white;
	cursor: default;
	pointer-events: none;
	font-weight: bold;
	background: none;
}
label:has( + input[type="file"]:valid ) {
	color: white;
	background: none;
}
p:has( ~ input[type="checkbox"]) {
	margin-bottom: 0.5em;
}
p:has( ~ input[type="checkbox"]:checked ) {
	border-color: green;
}

.hidden,
.disabled-container {
	display: none;
}

#stripe_elements > #card-errors {
	border: none;
}

.SUCCESS {
	color: green;
}
.FAILURE {
	color: red;
}

input.error,
label.error,
select.error {
	animation: errorBlink 0.2s infinite;
}
input.warning,
label.warning,
select.warning {
	animation: warningBlink 0.2s infinite;
}

#footer {
	text-transform: uppercase;
	margin: calc( 4vh + 2vw ) 0;
}

#footer #date {
	font-weight: 600;
	font-size: 1.3em;
}

#footer #address {
	font-size: 0.7em;
	line-height: 0.7em;
}