@charset "utf-8";

/* CSS Document */

/*
* {
  border-color:lightblue;
  border-style:dashed;
  border-width:thin;
}
*/


body {
	font-family: Verdana, Geneva, sans-serif;
	font-size: 16px;
	word-wrap: normal;
	color: #303030;
	text-align: justify;
	background-color: #D3D3D3;
	display: grid;
	justify-items: center;
}

.main {
	display: grid;
	grid-template-columns: 1fr;
    grid template-rows: 1fr;
	width: 80%;
	background-color: #FFF8DC;
	margin-bottom: 20px;
}

#title {
	text-align: center;
}

#description {
	text-align: center;
}

#survey-form {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	grid-gap: 20px;
}

#name-label {
	display: flex;
	align-items: center;
}

#name {
	width: 75%;
}

#email-label {
	display: flex;
	align-items: center;
}

#email {
	width: 75%;
}

#number-label {
	display: flex;
	align-items: center;
}

#number {
}

#dropdown {
}

.label {
	display: flex;
	justify-content: flex-end;
	color: blue;
}

.input-feild {
	display: flex;
	justify-content: left;
}

#text-area {
	width: 75%;
	height: 78px;
}

ul {
	list-style: none;
	margin: 0px;
}

li {
	margin-left: -43px;
}

input[type=radio], input[type=checkbox] {
	width : 18px;
}

input {
	height: 20px;
	width: 280px;
	padding: 5px;
	margin: 10px;
	border: 1px solid #c0c0c0;
	border-radius: 2px;
}
 input.required:invalid {
 border: 1px solid red;
}

.submit-div {
	display: flex;
	grid-area: 8 / 1 / 9 / 3;
	justify-content: center;
}

#submit {
	background-color: #59ace0;
	border-radius: 4px;
	color: blue;
	font-size: 1em;
	height: 40px;
	width: 96px;
	margin: 10px;
	border: 0px solid;
}
 @media (max-width:680px) {

#survey-form {
	display: flex;
	flex-direction: column;
}

.label {
	justify-content: center;
}

.input-feild {
	justify-content: center;
}
}