:root { 
	--font-size: clamp(18px, 1.44vw, 1.44vw);
	--1px: clamp(1px, 0.052vw, 0.052vw);
	--2px: clamp(2px, 0.104vw, 0.104vw);
	--3px: clamp(3px, 0.156vw, 0.156vw);
	--4px: clamp(4px, 0.208vw, 0.208vw);
	--5px: clamp(5px, 0.260vw, 0.260vw);
	--6px: clamp(6px, 0.312vw, 0.312vw);
	--10px: clamp(10px, 0.520vw, 0.520vw);
	--12px: clamp(12px, 0.625vw, 0.625vw);
	--16px: clamp(16px, 0.833vw, 0.833vw);
	--20px: clamp(20px, 1.041vw, 1.041vw);
	--30px: clamp(30px, 1.562vw, 1.562vw);
	--50px: clamp(50px, 2.604vw, 2.604vw);
	--78px: clamp(78.35px, 5.104vw, 5.104vw);
}

html { background: url('/img/background.jpg') repeat fixed left/auto 100% content-box; line-height: 1.2; text-align: center; font-size: var(--font-size); font-family: Arial; }
@media (max-width: 768px) { html { background: white; } }

* { box-sizing: border-box; padding: 0; margin: 0; }

.w5 { width: 5%; margin: auto; }
.w10 { width: 10%; margin: auto; }
.w15 { width: 15%; margin: auto; }
.w20 { width: 20%; margin: auto; }
.w25 { width: 25%; margin: auto; }
.w30 { width: 30%; margin: auto; }
.w35 { width: 35%; margin: auto; }
.w40 { width: 40%; margin: auto; }
.w50 { width: 50%; margin: auto; }
.w70 { width: 70%; margin: auto; }
.w90 { width: 90%; margin: auto; }
.w99 { width: 99%; margin: auto; }
.w100 { width: 100%; }

.hide { display: none; }

a { 
	text-decoration: none; width: 100%; color: black;
	&:hover { text-decoration: underline; }
}

img, video { width: 100%; height: auto; display: block; }

body { background-color: rgba(255, 255, 255, 0.9); }

.autoWidth { 
	width: clamp(600px, 40vw, 40vw);
	margin: auto;
	@media (max-width: 768px) { width: 100vw; } 
}

.shadow { box-shadow: 0 var(--10px) var(--16px) 0 rgba(0,0,0,0.2), 0 var(--6px) var(--20px) 0 rgba(0,0,0,0.19); }

nav { 
	margin: auto; width: 100%; display: flex;
	a.button { justify-content: center; display: flex; align-items: center; padding-left: 0; margin: 0; border: var(--2px) solid rgb(181, 112, 2); font-weight: bold; } 
}

input, button, select, textarea { width: 100%; font-size: inherit; }
button, input[type=button], input[type=submit], .button { background: linear-gradient(rgb(255, 228, 119), rgb(255, 204, 0), rgb(255, 204, 0)); border: var(--2px) solid rgb(181, 112, 2); box-shadow: rgb(255, 247, 215) 0 var(--2px) 0 0 inset; padding: var(--6px); color: #51361A; }
input, button, textarea, select, a.button { margin: var(--2px) auto var(--2px) auto; font-family: inherit; }
textarea { display: block; font-family: inherit; }
button:hover, input[type=button]:hover, input[type=submit]:hover, .button:hover, button.active, a.button.active, input[type=submit]:disabled { background: linear-gradient(rgb(255, 204, 0), rgb(255, 204, 0), rgb(255, 228, 119)); box-shadow: none; }

a.button { 
	display: inline-block; 
	&:hover { text-decoration: none; }
}

button, input[type=button], input[type=submit], .button { border: var(--2px) solid rgb(181, 112, 2);}

::placeholder, label { color: #757575; }
 
table { border-collapse: collapse; table-layout: fixed; width: 100%; }
.border, input:not([type="submit"]), textarea { border: var(--1px) solid #969696; }
select, tr:last-child { border: none; }
select option { border-bottom: var(--1px) solid #969696; } /*#ccc*/
tr { border-bottom: var(--1px) solid #969696; }
th:nth-child(1)  { text-align: center; }
input, td, option, th, textarea { padding: var(--6px); }

.inputA {
	position: relative;
	
	label {
		transition: transform 150ms;
		position: absolute;
		top: 50%;
		left: 0.5vw;
		z-index: 1;
		pointer-events: none;
	}
	
	input+label {
		transform: translateY(-50%);
	}
	
	textarea+label {
		top: 0.3vw;
		left: 0.5vw;
	}
	
	input:focus, textarea:focus {
		border-color: #1873e8;
	}
	
	input:focus+label, input:not(:placeholder-shown)+label, textarea:focus+label, textarea:not(:placeholder-shown)+label {
		transform: translateY(-140%);
		background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 20%, rgba(255, 255, 255, 1) 20%);/* white; linear-gradient(to top, white 50%, transparent 50%);*/
		font-size: 80%;
		color: #1a73e8;
	}
	
	textarea:focus+label, textarea:not(:placeholder-shown)+label {
		transform: translateY(-70%);
	}
}

.space { display: block; height: 1vh; }