global.css

/* font */
@font-face {
	font-family: "Roboto";
	src: url("./fonts/roboto/Roboto-Regular.ttf") format('truetype');
	font-display: swap;
}
@font-face {
	font-family: "Roboto";
	src: url("./fonts/roboto/Roboto-Bold.ttf") format('truetype');
	font-weight: bold;
	font-display: swap;
}
@font-face {
	font-family: "Roboto";
	src: url("./fonts/roboto/Roboto-Italic.ttf") format('truetype');
	font-style: italic;
	font-display: swap;
}
@font-face {
	font-family: "Roboto";
	src: url("./fonts/roboto/Roboto-BoldItalic.ttf") format('truetype');
	font-weight: bold;
	font-style: italic;
	font-display: swap;
}

/* font */
@font-face {
	font-family: "Roboto Light";
	src: url("./fonts/roboto/Roboto-Light.ttf") format('truetype');
	font-display: swap;
}

body {
	font-family: "Roboto", sans-serif;
	padding: 0;
	margin: 0;
	background: #efefef url("./background.png") repeat scroll center;
}

a {
	color: #5393b8;
	cursor: pointer;
}

.page {
	max-width: 1024px;
	margin: auto;
	padding: 12px;
	background-color: white;
	box-sizing: border-box;
	border-top: 6px solid #53b8ab;
	border-bottom: 6px solid #152e2b;
	overflow: hidden;
	margin-top: 32px;
	margin-bottom: 32px;
	box-shadow: 1px 1px 12px 6px #ccc;
	border-radius: 6px;
}

.logos {
	display: table;
	width: 100%;
}

.logos a {
	display: table-cell;
	vertical-align: middle;
}

.stupidsurvey h1,h2,h3 {
	font-variant: small-caps;
}

.stupidsurvey hr {
	border: none;
	border-bottom: 2px solid #bfe4df;
	margin-top: 20px;
	margin-bottom: 20px;
}

.stupidsurvey .strongseparator {
	border-bottom: 10px solid #53b8ab;
	margin-top: 25px;
	margin-bottom: 35px;
}

.stupidsurvey button {
	display: inline-block;
	background-color: #fbfffe;
	font-size: inherit;
	border: 1px solid #bfe4df;
	border-bottom: 2px solid #49a196;
	cursor: pointer;
	margin-left: 5px;
	margin-right: 5px;
	padding-left: 9px;
	padding-right: 9px;
	padding-top: 6px;
	padding-bottom: 6px;
	height: 2rem;
	line-height: 1rem;
}

.stupidsurvey #submit {
	background-color: #fff0a0;
	border: 1px solid #e1bcae;
	border-bottom: 2px solid #c18e7a;
}

.stupidsurvey button:hover {
	border-bottom: 2px solid black;
}

.stupidsurvey img {
	border: 2px solid #bfe4df;
	max-width: 100%;
}

.stupidsurvey p {
}

.stupidsurvey canvas {
	border: 2px solid #bfe4df;
}

.stupidsurvey video {
	border: 2px solid #bfe4df;
	width: 48%;
	height: auto;
	margin: 0.5%;
}

.stupidsurvey .item {
	margin-top: 6px;
	margin-bottom: 6px;
}

.stupidsurvey .question {
	margin-top: 28px;
	margin-bottom: 4px;
}

.stupidsurvey .question i {
	color: #53b8ab;
}

.stupidsurvey .example {
	cursor: pointer;
}

.stupidsurvey .example:hover {
	color: black;
}

.stupidsurvey .gallery {
	padding: 12px;
	background-color: #f7f7f7;
	border-top: 1px solid #bfe4df;
	border-bottom: 1px solid #bfe4df;
}

.stupidsurvey .gallery button {
	margin: 6px;
}

.stupidsurvey .gallery canvas{
	cursor: move;
}

.stupidsurvey .imagenumber {
	text-align: center;
	font-size: 11pt;
}

.stupidsurvey .videowall {
	padding: 12px;
	background-color: #f7f7f7;
	border-top: 1px solid #bfe4df;
	border-bottom: 1px solid #bfe4df;
}

.stupidsurvey .videowall button {
	margin: 6px;
}

.stupidsurvey .contents {
}

.stupidsurvey .pagenumber {
	text-align: center;
	font-size: 11pt;
}

.stupidsurvey .footer {
	padding: 12px;
	margin-top: 32px;
	background-color: #f7f7f7;
	border-top: 1px solid #bfe4df;
	border-bottom: 1px solid #bfe4df;
}

.stupidsurvey input[type=radio] {
	margin-left: 16px;
}

.stupidsurvey input[type=text] {
	/*border-bottom: 1px solid #49a196;*/
}

.stupidsurvey textarea {
	max-width: 100%;
}

.stupidsurvey input[type=text]::placeholder, textarea::placeholder{
	color: gray;
}

.stupidsurvey input[type=text], input[type=number], textarea {
	font-family: "Roboto Light", serif;
	font-size: 11pt;
	background-color: #fbfffe;
	border: 1px solid #bfe4df;
	border-bottom: 1px solid #53b8ab;
	padding: 6px;
}

.stupidsurvey select {
	font-family: inherit;
	font-size: inherit;
}