@import "../../css/fonts.css";

* {
	margin: 0px;
	padding: 0px;
}


:root {
	--form-max-width: 400px;
	
	--background-light-gray01: #eee;
	--background-light-gray02: #ccc;
	--decoration-color: #999;
	
	--speed-animation: 0.6s;
}

body {
	font-family: "Helvetica Neue";
	background-color: var(--background-light-gray02);
}

h3 {
	display: block;
	font-size: 1.17em;
	margin-block-start: 1em;
	margin-block-end: 1em;
	margin-inline-start: 0px;
	margin-inline-end: 0px;
	font-weight: bold;
	font-family: "HelveticaNeue Condensed Bold";
}

.uppercase {
	text-transform: uppercase;
}

.decor {
	 position: relative;
	 max-width: var(--form-max-width);
	 margin: 50px auto 0;
	 background: white;
	 border-radius: 30px;
}

.form-left-decoration,
.form-right-decoration {
	 content: "";
	 position: absolute;
	 width: 50px;
	 height: 20px;
	 background: var(--decoration-color);
	 border-radius: 20px;
}

.form-left-decoration {
	 bottom: 60px;
	 left: -30px;
}

.form-right-decoration {
	 top: 60px;
	 right: -30px;
}

.form-left-decoration:before,
.form-left-decoration:after,
.form-right-decoration:before,
.form-right-decoration:after {
	 content: "";
	 position: absolute;
	 width: 50px;
	 height: 20px;
	 border-radius: 30px;
	 background: white;
}

.form-left-decoration:before {
	 top: -20px;
}

.form-left-decoration:after {
	 top: 20px;
	 left: 10px;
}

.form-right-decoration:before {
	 top: -20px;
	 right: 0;
}

.form-right-decoration:after {
	 top: 20px;
	 right: 10px;
}

.circle {
	 position: absolute;
	 bottom: 80px;
	 left: -55px;
	 width: 20px;
	 height: 20px;
	 border-radius: 50%;
	 background: white;
}

.form-inner {
	 padding: 45px;
}

.text-form {
	padding: 10px;
	width: 95%;
}

.form-inner input,
.form-inner textarea {
	 display: block;
	 /*width: 100%;*/
	 margin-bottom: 10px;
	 background: var(--background-light-gray01);
	 line-height: 20px;
	 border-width: 0;
	 border-radius: 8px;
}

.form-inner > input[type="submit"] {
	 margin-top: 30px;
	 width: 102%;
	 background: var(--decoration-color);
	 color: white;
	 font-size: 16px;
	 font-family: "HelveticaNeue Condensed Bold";
}
.form-inner > input[type="submit"]:hover {
	background: #FF0092;
	transition: background var(--speed-animation) ease;
}

.form-inner > input[type="submit"]:active {
	background: #00AFFF;
}


.form-inner textarea {
	 resize: none;
}

.form-inner h3 {
	 margin-top: 0;
	 font-weight: 500;
	 font-size: 24px;
	 color: #707981;
}

@media(max-width:480px) {

	.decor {
		max-width: calc(var(--form-max-width) * 0.8);
	}

	.form-left-decoration,
	.form-right-decoration,
	.circle {
		display: none;
	}
	
	.form-inner {
		padding: 25px;
	}
	
	.form-inner h3 {
		text-align: center;
	}
	

}