:root {
	color-scheme: light;

	--bg: #fff;
	--text: #333;
	--text-tr: #0005;

	--bg-light: #f5f5f5;

	--accent: #FF6522;
	--accent-tr: #FF4D0080;
	--accent-dark: #D16733;
	--accent-light: #FFBEA2;
	--accent-light-tr: #FFBEA280;
	--accent-light-on-gray: #FF9A6F;
	--accent-light-on-gray-tr: #FF9A6F80;

	--red: #ff5555;
	--yellow: #f4e7a3;
	--green: #baf39e;
	--blue: #82d8fd;
	--rose: #fddec6;
	--teal: #85F3CF;
	--orange: #ffbf57;
	--pink: #FFA6FF;

	--font-size: 20px;
	--line-height: 1.75em;
	--mw: 16rem;
}


* {
	all: unset;
	margin: 0;
	padding: 0;
	display: flex;
	gap: var( --gap-y, var(--gap, 1rem) )
		var( --gap-x, var(--gap, 1rem) )
		;
	flex-wrap: wrap;
	word-wrap: break-word;
	hyphens: auto;
	overflow: visible;
	scroll-padding: 3rem;
	box-sizing: border-box;
	color: var(--c, var(--text));
	transition: all 0.125s ease-in-out;
	font-size: var(--font-size);
	line-height: var(--line-height);
	font-family: 'Kadwa'
		, 'DejaVu Sans'
		, 'PT Sans'
		, 'Helvetica'
		, 'Helvetica Rounded'
		, sans-serif;
}



.raw-text,
.raw-text * {
	display: inline;
}
.raw-text a:any-link {
	color: var(--accent-dark);
	text-decoration: underline;
}

em {
	font-style: italic;
}


/* hidden */
head,
title,
style,
script,
[hidden],
[type=hidden],
.hidden,
summary ::-webkit-details-marker {
	display: none;
}

[disabled],
.disabled {
	opacity: 0.5;
	cursor: not-allowed;
}

html {
	scroll-behavior: smooth;
	font-size: var(--font-size);
	display: flex;
	overflow: hidden;
}

body {
	background: #fffc;
	backdrop-filter: opacity(0.8) blur(0.25rem);
	width: 30rem;
	min-height: 19.5rem;
	--gap: 0;
}

form {
	flex-grow: 1;
	align-content: flex-start;
	justify-content: center;
}
section {
	flex-grow: 1;
	align-content: flex-start;
}

input::placeholder {
	color: gray;
}

label {
	user-select: none;
}

a:any-link,
button,
.button,
label[for],
input[type="submit"],
input[type="button"],
input[type="checkbox"],
input[type="radio"] {
	cursor: pointer;
}

footer a:hover span,
footer a:focus span,
footer a:active span {
	color: var(--bg);
	background-color: var(--accent);
	box-shadow: -0.3rem 0rem 0 0 var(--accent)
			, 0.3rem 0rem 0 0 var(--accent)
			;
}

.gap-space {
	--gap-x:0.5em;
}
.nogap {
	--gap-x: 0;
	--gap-y: 0;
}

.col {
	flex-direction: column;
	flex-wrap: nowrap;
}

.c {
	align-content: center;
	align-items: center;
	justify-content: center;
	justify-items: center;
	text-align: center;
}

.row.top {
	align-items: flex-start;
}
.col.top {
	justify-items: flex-start;
}
input[type="checkbox"].top,
input[type="radio"].top {
	align-self: flex-start;
}

.margin-top-2,
.margin-top-2 + label {
	margin-top: 2rem;
}


figure {
	display: grid;
	justify-items: start;
	align-items: flex-end;
}
figure > figcaption {
	padding: 0 0.5em;
	backdrop-filter: opacity(0.8) blur(0.25rem);
	background-color: var(--accent-tr);
	align-content: flex-end;
	justify-content: start;
	word-wrap: break-word;
	text-align: left;
	align-items: center;
	flex-wrap: nowrap;
	--gap: 0.3rem;
}
figure > figcaption,
figure > figcaption i,
figure > figcaption span {
	color: white;
}


img {
	max-width: 100vw;
}

.cards {
	align-items: stretch;
}

a.card:hover,
a.card:focus,
a.card:active {
	box-shadow: 0 0 0 0.125rem var(--bg)
				, 0 0 0 0.25rem var(--accent-tr)
				;
}

.card {
	position: relative;
}

.card figure {
	position: relative;
	display: flex;
	flex-direction: column;
	padding: 0;
	--gap-y: 0;
}

.card img {
	padding: 0;
	width: 8rem;
	height: 5rem;
	object-fit: cover;
	align-content: center;
	justify-content: center;
}
.card figcaption {
	width: 8rem;
	--gap-x: 0.5em
}

input,
textarea,
button,
.button {
	padding: 0.35em 1em;
	--gap: 0.5em;
	--gap-x: 0.5em;
	--gap-y: 0.5em;
}

input[type="checkbox"],
input[type="radio"],
input[type="text"],
input[type="email"],
textarea,
button,
.button {
	border: 0.125rem solid var(--accent-light);
}

input[type="text"],
input[type="email"] {
	padding: 0.125em 0.45em;
}

input[type="radio"] {
	line-height: 1rem;
	height: 1rem;
	width: 1rem;
	padding: 0.75rem;
	border-radius: 999px;
	color: var(--accent-light);
	background: url("") 50% 50% no-repeat;
}
input[type="radio"]:checked {
	background-color: var(--accent-light-tr);
	background-image: url("../img/dot.svg");
}

input[type="checkbox"] {
	line-height: 1rem;
	height: 1rem;
	width: 1rem;
	padding: 0.75rem;
	color: var(--accent-light);
	background: url("") 50% 50% no-repeat;
}
input[type="checkbox"]:checked {
	background-color: var(--accent-light-tr);
	background-image: url("../img/checkmark.svg");
}

button.main,
.button.main {
	background-color: var(--accent);
	color: white;
}

button.main,
.button.main,
button.main i,
.button.main i,
button.main span,
.button.main span {
	color: white;
}

button:hover,
button:focus,
button:active,
.button:hover,
.button:focus,
.button:active {
	border: 0.125rem solid var(--accent);
	display: flex;
}

input[type="text"]:hover,
input[type="text"]:focus,
input[type="text"]:active,
input[type="email"]:hover,
input[type="email"]:focus,
input[type="email"]:active,
input[type="checkbox"]:hover,
input[type="checkbox"]:focus,
input[type="checkbox"]:active,
input[type="radio"]:hover,
input[type="radio"]:focus,
input[type="radio"]:active,
textarea:hover,
textarea:focus,
textarea:active {
		border: 0.125rem solid var(--accent);
}

article,
.default {
	padding: 1rem;
	flex-grow: 1;
	align-self: stretch;
	align-items: center;
	justify-content: stretch;
	--gap-x: 1rem;
	--gap-y: 1rem;
}


article:target {
	transform: translateX(0);
	position: relative;
	opacity: 1;
	transition: all 0.5s ease-in-out;
}
article:not(:target),
article:target ~ .default {
	left: -100%;
	pointer-events: none;
	position: absolute;
	opacity: 0;
	transition: none;
}

.grid-2-col {
	width: 100%;
	--gap: 1rem;
	--gap-x: 1rem;
	--gap-y: 1rem;
	display: grid;
	grid-template:
		auto
		/
		10rem
		1fr
		;
}
.grid-2-col.checkboxes {
	grid-template-columns: 2rem 1fr;
}

.grid-4x2-col {
	width: 100%;
	--gap: 0.75rem;
	--gap-x: 0.75rem;
	--gap-y: 1rem;
	display: grid;
	grid-template:
		max-content
		/
		1.75rem
		1fr
		1.75rem
		1fr
		;
}
.grid-2-col-wide {
	width: 100%;
	--gap: 1rem;
	--gap-x: 1rem;
	--gap-y: 1rem;
	display: grid;
	grid-template:
		auto
		/
		2rem
		1fr
		;
}
.grid-2-col-wide > label {
	justify-content: flex-start;
	text-align: left;
	--font-size: 15px;
}

.grid-3-col {
	--gap-y: 1rem;
	align-self: flex-start;
	display: grid;
	grid-template:
		auto
		/
		10rem
		11.5rem
		4rem
		;
}
.grid-3-col input[type="range"] {
	padding-left: 0;
	padding-right: 0;
}

.grid-2-col > input[type="checkbox"],
.grid-2-col > input[type="radio"],
.grid-2-col > .button:first-of-type,
.grid-3-col > .button:first-of-type {
	justify-self: flex-end;
	flex-wrap: nowrap;
}

.grid-2-col > input[type="checkbox"] + label,
.grid-2-col > input[type="radio"] + label {
	justify-self: flex-start;
	justify-content: flex-start;
	text-align: left;
	width: 100%;
}

.grid-2-col > hr + .button,
.grid-2-col > .button + .button,
.grid-3-col > .button + .button {
	justify-self: flex-start;
	text-align: left;
	flex-wrap: nowrap;
	width: 100%;
}

label.end {
	justify-content: flex-end;
}

.text {
	--gap-x: 0.5rem;
	width: 5rem;
}

header {
	justify-content: center;
	--gap: 1rem;
}

.menu-item {
	--gap: 0.5rem;
}
.menu-item i {
	background-color: var(--accent-light);
	padding: 0.5rem 1rem;
}

.notice {
	--gap-x: 0.25rem;
	border-radius: 1000px;
	border: 0.125rem solid var(--accent-light);
	padding: 0.5rem;
}
.notice span {
	padding: 0.25rem 0.5rem;
}
.notice i {
	height: 2rem;
	width: 2rem;
	padding: 0.5rem;
	border-radius: 1000px;
	background-color: var(--accent-tr);
	text-align: center;
	color: white;
}


h2 {
	--font-size: 1.25rem;
	font-family: 'Nunito Sans', serif;
	font-weight: 300;
}

.grid-2-col + .grid-3-col {
	margin-top: 1rem;
}


/* range */
input[type="range"] {
	box-shadow: none;
	width: 100%;
	-webkit-appearance: none;
}
input[type=range]:focus {
	outline: none;
}
input[type=range]::-webkit-slider-runnable-track {
	width: 100%;
	height: 9px;
	cursor: pointer;
	animate: 0.2s;
	border-radius: 0px;
	border: 2px solid var(--accent-light);
}
input[type=range]::-webkit-slider-thumb {
	border: 2px solid var(--accent-light);
	height: 20px;
	width: 20px;
	border-radius: 0px;
	background: #FF6522;
	cursor: pointer;
	-webkit-appearance: none;
	margin-top: -7.5px;
}
input[type=range]:focus::-webkit-slider-runnable-track {
}
input[type=range]::-moz-range-track {
	width: 100%;
	height: 9px;
	cursor: pointer;
	animate: 0.2s;
	border-radius: 0px;
	border: 2px solid var(--accent-light);
}
input[type=range]::-moz-range-thumb {
	border: 2px solid var(--accent-light);
	height: 20px;
	width: 20px;
	border-radius: 0px;
	background: #FF6522;
	cursor: pointer;
}
input[type=range]::-ms-track {
	width: 100%;
	height: 9px;
	cursor: pointer;
	animate: 0.2s;
	background: transparent;
	border-color: transparent;
	color: transparent;
}
input[type=range]::-ms-fill-lower {
	border: 2px solid var(--accent-light);
	border-radius: 0px;
}
input[type=range]::-ms-fill-upper {
	border: 2px solid var(--accent-light);
	border-radius: 0px;
}
input[type=range]::-ms-thumb {
	margin-top: 1px;
	border: 2px solid var(--accent-light);
	height: 20px;
	width: 20px;
	border-radius: 0px;
	background: #FF6522;
	cursor: pointer;
}
input[type=range]:focus::-ms-fill-lower {
}
input[type=range]:focus::-ms-fill-upper {
}


.grid-3x2 {
	align-items: flex-start;
	align-content: flex-start;
	width: 100%;

	--gap: 1rem;
	--gap-x: 1rem;
	--gap-y: 1rem;
	display: grid;
	grid-template:
		auto
		/
		repeat(3, 8rem)
		;
}

.buttons {
	align-self: stretch;
	flex-grow: 1;
	align-items: flex-end;
	justify-content: space-between;
}
section {
	flex-grow: 1;
}
section + .buttons {
	flex-grow: 0;
}

.grid-3-fr label {
	flex-wrap: nowrap;
	--gap-x: 0.5rem;
	align-items: center;
}
label.top {
	align-content: flex-start;
	line-height: 2rem;
}
.grid-2-col.short-first-col {
	grid-template-columns: 8rem 1fr;
}

.contact-form {
	--gap-y: 2rem;
	--font-size: 17px;
}

small,
.small {
	--font-size: 0.75rem;
}


.grid-2-col label,
.grid-3-col label,
.grid-4x2-col label {
	align-content: center;
	text-align: left;
}

.padding-top-1rem {
	padding-top: 1rem;
}

.col.default.nogap {
	--gap-y: 0;
}