body {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	height: 100vh;
	width: 100vw;
	font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

main {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
}

main .background-img {
	display: none;
	overflow: hidden;
	margin: auto;
	z-index: -1;
	position: fixed;
	top: 50%;
	left: 50%;
	min-width: 100%;
	min-height: 100%;
	width: auto;
	height: auto;
	transform: translateX(-50%) translateY(-50%);
	background-size: cover;
}

main .background-img.active {
	display: flex;
}

.card {
	display: none;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	max-width: 300px;
	width: 100%;
	box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5);
	border: 1px solid rgba(0, 0, 0, 0.2);
	border-radius: 6px;
	background-color: #fff;
	padding: 0 0 0.5rem;
	overflow: hidden;
	opacity: 0.75;
}

.card.wide {
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
	max-width: 50vw;
}

.card-radar,
.card-regular {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}

.card-radar.hide,
.card-regular.hide {
	display: none;
}

.header {
	padding: 2rem 0 0;
}

.card-header {
	width: 100%;
	padding: 0.5rem 1rem;
	border-bottom: 0.1rem solid #e6e6e6;
}

.card-header.pink {
	background-color: #ec1e79;
	color: #fff;
}

.card-header h1,
.header h1 {
	font-size: 1.2rem;
	text-align: center;
}

.card-header ul {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 1rem;
	list-style: none;
	padding: 0;
	margin: 0;
}

.card-header ul li {
	background-color: gray;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 1.2rem;
	font-weight: 600;
	padding: 0.5rem 0.9rem;
	border-radius: 50%;
}

.card-header ul li.active {
	background-color: #fff;
	color: #333;
}

.card-content {
	width: 90%;
}

.card-content.radar {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 1rem;
}

.card-content input {
	padding: 5px;
	width: 21px;
	height: 21px;
	vertical-align: middle;
	margin: 10px auto;
	cursor: pointer;
	font-size: 120%;
	-webkit-appearance: checkbox;
	-moz-appearance: checkbox;
	appearance: checkbox;
}

.card-content label {
	line-height: 40px;
	height: 100%;
	width: 90%;
	cursor: pointer;
	vertical-align: middle;
	padding-left: 8px;
	text-align: left;
	margin-bottom: 10px;
	padding-bottom: 0;
	padding-top: 0;
	font-size: 15px;
}

.card-content .gender-selector,
.type-selector {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 2rem;
	padding-bottom: 1rem;
}

.card-content .gender-selector-item {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}

.card-content .gender-selector input {
	display: none;
}

.gender-selector .male::before {
	content: "";
	background-image: url(t36-male.png);
	height: 5rem;
	width: 4rem;
	display: block;
}

.gender-selector .female::before {
	content: "";
	background-image: url(t36-female.png);
	height: 5rem;
	width: 4rem;
	display: block;
}

.gender-selector .couple::before {
	content: "";
	background-image: url(t36-couple.png);
	height: 5rem;
	width: 4rem;
	display: block;
}

.gender-selector .radio-img {
	display: inline-block;
	width: 70px;
	height: 90px;
	background-size: contain;
	background-repeat: no-repeat;
	filter: brightness(1.8) grayscale(1) opacity(0.5);
	cursor: pointer;
}

.gender-selector input[type="radio"]:checked + label.radio-img {
	filter: brightness(1) grayscale(0) opacity(1);
}

.card-content .radio-wrapper {
	display: flex;
	align-items: center;
	justify-content: space-evenly;
	gap: 2rem;
	width: 100%;
	padding: 1rem 0;
}

.card-content .radio-wrapper .radio-item {
	display: flex;
	align-items: stretch;
	justify-content: center;
}

.card-content .radio-wrapper .radio-item input {
	display: none;
}

.card-content .radio-wrapper .radio-item label {
	font-size: 1.1rem;
	width: 100%;
}

.card-content
	.radio-wrapper
	.radio-item
	input[type="radio"]:checked
	+ label.radio-label {
	color: #ec1e79;
	font-weight: 600;
}

.card-content .type-selector input {
	display: none;
}

.card-content .type-selector .girl-type label {
	width: 4rem;
	padding: 0;
}

.type-selector .girl-type {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	gap: 0.5rem;
	padding-bottom: 1rem;
}

.type-selector .girl-type .checkbox-img::before {
	display: flex;
	height: 4rem;
	width: 4rem;
	background-size: contain;
	background-position: center;
	background-repeat: no-repeat;
	border-radius: 50%;
	filter: brightness(1.8) grayscale(1) opacity(0.7);
	cursor: pointer;
}

.type-selector .girl-type .checkbox-img:hover::before {
	filter: brightness(1.8) grayscale(0.3) opacity(0.7);
}

.type-selector
	.girl-type
	input[type="checkbox"]:checked
	+ label.checkbox-img::before {
	box-shadow: 0 0 0.5rem #ec1e79;
	filter: brightness(1) grayscale(0) opacity(1);
}

.type-selector .big-tits::before {
	content: "";
	background-image: url(t36-bigtits.jpg);
	height: 5rem;
	width: 5rem;
}

.type-selector .slim::before {
	content: "";
	background-image: url(t36-slim.jpg);
}

.type-selector .curvy::before {
	content: "";
	background-image: url(t36-curvy.jpg);
}

.type-selector .bbw::before {
	content: "";
	background-image: url(t36-bbw.jpg);
}

.type-selector .athletic::before {
	content: "";
	background-image: url(t36-athletic.jpg);
}

.type-selector .big-ass::before {
	content: "";
	background-image: url(t36-bigass.jpg);
}

.form-select-one p {
	color: #ec1e79;
}

form {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 1rem;
	width: 100%;
	padding-top: 2rem;
}

form select,
input {
	width: 80%;
	padding: 0.5rem;
	border: 1px solid #ccc;
	outline: none;
	border-radius: 0.3rem;
	font-size: 1rem;
	margin-bottom: 1rem;
	cursor: pointer;
}

form .select-wrapper,
.inputs-wrapper {
	display: flex;
	gap: 1rem;
	width: 80%;
}

form select option {
	padding: 1rem;
	cursor: pointer;
}

.card .actions {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 100%;
	padding-top: 0.5rem;
	border-top: 0.1rem solid #e6e6e6;
}

.actions.column {
	flex-direction: column;
	width: 80%;
	border: none;
	padding-bottom: 1rem;
}

.actions.column .back-btn {
	display: flex;
	align-self: flex-start;
}

[class*="btn"] {
	width: 100%;
	max-width: 100%;
	height: 50px;
	display: inline-block;
	font-size: 1rem;
	font-weight: 400;
	text-align: center;
	border-radius: 4px;
	padding: 0.5rem 0.7rem;
	border: 1px solid transparent;
	margin: 0 5px;
	cursor: pointer;
}

.btn-green {
	color: #fff;
	background-color: #5cb85c;
	border-color: #4cae4c;
}

.btn-red {
	color: #fff;
	background-color: #d9534f;
	border-color: #d43f3a;
}

.btn-pink {
	display: flex;
	align-items: center;
	justify-content: center;
	color: #fff;
	background-color: #ec1e79;
	border-color: #ec1e79;
	text-transform: uppercase;
	font-size: 1.6rem;
	font-weight: 600;
	padding: 2rem;
}

.btn-pink:hover {
	opacity: 0.75;
	transition: opacity 0.3s ease-in-out;
}

.accept-btn {
	width: 80%;
	height: 4rem;
	padding: 0;
}

.btn-outline:hover {
	border: 1px solid gray;
}

hr {
	opacity: 0.3;
}

.active {
	display: flex;
}

.bold {
	font-weight: bold;
}

.pink {
	color: #ec1e79;
}

@media (orientation: portrait) {
	.card.wide {
		max-width: 90vw;
	}

	.card-content .gender-selector,
	.type-selector {
		flex-wrap: wrap;
	}
}
