.formModel {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 10px;
	padding: 20px;
	background: white;
	border-radius: 10px;
	overflow: hidden;
	perspective: 1000px;
	transform-style: preserve-3d;
	transition: all 0.3s ease-in-out;
	box-shadow: rgba(0, 0, 0, 0.4) 0px 2px 4px, rgba(0, 0, 0, 0.3) 0px 7px 13px -3px, rgba(0, 0, 0, 0.2) 0px -3px 0px inset;
	animation: form-animation 0.5s ease-in-out;
}

@keyframes form-animation {
	from {
	transform: rotateX(-5deg);
	opacity: 0;
	}

	to {
	transform: rotateX(0deg);
	opacity: 1;
	}
}

.inputModel {
	margin: 5px;
	padding: 10px;
	border-radius: 5px;
	background-color: white;
	transition: border-color 0.3s ease-in-out, background-color 0.3s ease-in-out, transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
	transform-style: preserve-3d;
	backface-visibility: hidden;
	color: var(--mColor1);
	border: 1px solid var(--mColor1);
	box-shadow: rgb(255 255 255 / 40%) 0px 2px 4px, rgb(183 183 183 / 30%) 0px 7px 13px -3px, rgb(156 156 156 / 20%) 0px -3px 0px inset;
}

.inputModel::placeholder {
	color: var(--mColor1);
}

.inputModel:hover,
.inputModel:focus {
	border-color: var(--mColor1);
	background-color: whitesmoke;
	
	transform: scale(1.01) rotateY(1deg);
	box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.3);
	outline: none;
}

.buttonModel {
	padding: 20px 20px;
	border: none;
	border-radius: 5px;
	background-color: var(--mColor1);
	color: #fff;
	font-size: 30px !important;
	font-weight: bold;
	cursor: pointer;
	transform-style: preserve-3d;
	backface-visibility: hidden;
	transition: all 0.3s ease-in-out;
	box-shadow: rgba(0, 0, 0, 0.4) 0px 2px 4px, rgba(0, 0, 0, 0.3) 0px 7px 13px -3px, rgba(0, 0, 0, 0.2) 0px -3px 0px inset;
}

.buttonModel:hover {
	background-color: var(--mColor1);
	font-size: 17px;
	transform: scale(1.05) rotateY(1deg) rotateX(1deg);
	box-shadow: rgba(0, 0, 0, 0.4) 0px 2px 4px, rgba(0, 0, 0, 0.3) 0px 7px 13px -3px, rgba(0, 0, 0, 0.2) 0px -3px 0px inset;
}