@import url('https://fonts.googleapis.com/css2?family=Kanit:wght@500&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Bangers&display=swap');

body {
	background:#092c41;
	font-family: 'Kanit', sans-serif;
}


.login {
    position:absolute;
    width:510pt;
    height:100pt;
    left:50%;
    top:50%;
    margin-left:-255pt;
    margin-top:-80pt;
	text-align:center;
}

	.login h1 {
		font-size:60pt;
		margin:0 0 20pt 0;
		padding:0;
		font-family: 'Bangers', sans-serif;
		color:#fff;
		text-shadow:5pt 5pt 0pt rgba(0,16,25, 0.7);
	}

	.login p {
			font-size:12pt;
			margin:20pt 0 0 0;
			padding:0;
			font-family: 'Kanit', sans-serif;
			color:#bce1f8;
		}

	.login .container {
		width:470pt;
		background:#0d3b57;
		border-radius: 25pt;
		overflow:hidden;
		clear:both;
		padding:20pt;
	}

		.login input {
			float:left;
			margin:0;
			padding:0;
		}

			.login input.text {
				width:150pt;
				height:35pt;
				padding:2pt 0 3pt 15pt;
				background:#c7e5f7;
				border:none;
				font-size:15pt;
				border-radius:10pt 0 0 10pt;
			}
			
			.login input.password {
				width:150pt;
				height:35pt;
				padding:2pt 0 3pt 15pt;
				background:#c7e5f7;
				border:none;
				font-size:15pt;
				border-radius:0 10pt 10pt 0;
			}	
			
				.login input:focus,
				.login input:active,
				::-moz-focus-inner
				{
					border:none;
					box-shadow: none;
					outline: none;
				}

			.login input.button {
				width:120pt;
				height:40pt;
				margin:0 0 0 10pt;
				background:#00d8ff;
				border:none;
				font-size:15pt;
				font-weight:bold;
				color:#fff;
				border-radius:10pt;
			}
			
@media only screen and (max-width: 1080px) {
    body {

    }
	
	.login {
		margin-left:0;
		margin-top:-25%;
		width:90%;
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
	}

	.login h1 {
		font-size:40pt;
	}

	.login p {

	}

	.login .container {
		width:100%;
		background:none;
		border-radius: 0;
		overflow:hidden;
		clear:both;
		padding:0;
		text-align:center;
	}

	.login input {
		float:none;
		display: block;

	}
	
		.login input.text {
			width:93%;
			height:35pt;
			padding:2pt 0 3pt 15pt;
			margin:0 auto 5pt auto;
			background:#c7e5f7;
			border:none;
			font-size:15pt;
			border-radius:15pt;
		}
		
		.login input.password {
			width:93%;
			height:35pt;
			padding:2pt 0 3pt 15pt;
			margin:0 auto 5pt auto;
			background:#c7e5f7;
			border:none;
			font-size:15pt;
			border-radius:15pt;
		}	

	.login input.button {
		margin:0 auto 0 auto;
	}

	.login input:focus,
	.login input:active,
	::-moz-focus-inner {

	}
}