@charset "utf-8";

		* {
			box-sizing: border-box;
		}

		body {
			background-color: ivory;
		}

		#content {
			margin: 0 auto;
			text-align: justify;
			width: 70%;
			font-size: 1.25rem;
		}

		dialog {
			/*position: absolute;*/
			margin: 0 auto;
			border: 1px solid #898989;
			border-radius: 10px;
			-webkit-box-shadow:0px 1px 4px 2px rgba(0,0,0,0.60);
			-moz-box-shadow:0px 1px 4px 2px rgba(0,0,0,0.60);
			box-shadow:0px 1px 4px 2px rgba(0,0,0,0.60);
		}

		#dia-keycode {
			top: 25vh;
			padding: 1rem 2rem;
			max-width: 50vw;
			font-size: 1.25rem;
		}

		#dia-keycode button {
			padding: .25rem .5rem;
			width: 7rem;
			border: 1px solid #333;
			border-radius: 3px;
		}

		#inp-keycode {
			font-size: 1.1rem;
			padding: .25rem .5rem;
			text-transform: uppercase;
			color: blue;
			font-weight: bold;
		}

		#btn-keycode {
			padding: .5rem;
			border: 1px solid #333;
			border-radius: 3px;
		}

		@media (390px <= width <= 932px){
			#content {
				width: 96%;
				font-size: 1.1rem;
			}

			h1 {
				font-size: 1.7rem;
			}

			#dia-keycode {
				top: 20vh;
				padding: .5rem;
				max-width: 94vw;
				font-size: .9rem;
			}
		}

		.center {
			text-align: center;
		}

		.justify {
			text-align: justify;
		}

		.reg {
			font-size: .9rem;
			vertical-align: text-top;
		}

		.lbl {
			text-decoration: underline;
			cursor: pointer;
			color: blue;
		}

		img {
			width: 100%;
		}

		a:visited {
			color: blue;
		}