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

* {
	box-sizing: border-box;
	font-family: 'Mitr', sans-serif;
}

body {
	padding: 0;
	margin: 0;
	font-family: 'Mitr', sans-serif;
	height: 100vh;
	width: 100vw;
	overflow: hidden;
	font-weight: 600;
	display: flex;
	background: #ecf0f3;
	color: #555;
	align-items: center;
	justify-content: center;
}

.fa-link {
	padding-left: 20px;
    padding-right: 6px;
    font-size: 23px;
}

.div-qr {
	width: 500px;
	height: 530px;
	box-shadow: 10px 10px 20px #cbced1,-10px -10px 20px #ffffff;
	padding: 45px 35px 35px 35px;
	border-radius: 40px;
}

.div-qr-show {
	width: 500px;
	height: 530px;
	box-shadow: 10px 10px 20px #cbced1,-10px -10px 20px #ffffff;
	padding: 40px 80px;
	border-radius: 40px;
}

.logo {
	background: url("https://surinpao.go.th/logo/surinpao.jpg");
	width: 130px;
	height: 130px;
	background-size: cover;
	margin: 0 auto;
	box-shadow: 0 0 2px #5f5f5f,
	0 0 5px #ecf0f3,
	8px 8px 15px #a7aaaf,
	-8px -8px 15px #ffffff;
	border-radius: 50%;
}

.title {
	text-align: center;
	font-size: 28px;
	font-weight:700;
	color: #4070f4;
	text-shadow: 6px 4px 4px #c5c5c5;
	padding-top: 24px;
}

.card
{
	width: 100%;
	padding: 30px 5px 5px 5px;
}

.card input {
	border: none;
	outline: none;
	width: 20rem;
	font-family: 'Mitr', sans-serif;
	background: none;
	font-size: 18px;
	color: #555;
}

.url {
	box-shadow:
	inset 5px 5px 8px #cbced1,
	inset -5px -5px 8px #ffffff ;
	border-radius: 50px;
	margin-bottom: 30px;
	padding: 16px 0px;
}

.url::placeholder {
	color: #999;
	font-family: 'Mitr', sans-serif;
}

.buttons {
	outline: none;
	border: none;
	cursor: pointer;
	width: 100%;
	font-family: 'Mitr', sans-serif;
	background: #4070f4;
	height: 60px;
	border-radius: 30px;
	color: #fff;
	font-weight:500;
	font-size: 18px;
	box-shadow: 5px 5px 8px #b1b1b1,-5px -5px 8px #ffffff;
	transition: ease all 0.8s;
}

.button-s {
	margin-top: 10px;
	outline: none;
	border: none;
	cursor: pointer;
	width: 100%;
	font-family: 'Mitr', sans-serif;
	background: #4070f4;
	height: 60px;
	border-radius: 30px;
	color: #fff;
	font-weight:500;
	font-size: 18px;
	box-shadow: 5px 5px 8px #b1b1b1,-5px -5px 8px #ffffff;
}

.buttons:hover {
	background: #000;
}

.buttons:active {
	background: #4070f4;
}

a {
	text-decoration: none;
	color: #fff;
	font-family: 'Mitr', sans-serif;
}

a.contact {
	color:#4070f4;
}

a.contact:hover {
	color:#555;
}

img {
	width:86%;
	box-shadow: 10px 10px 20px #cbced1, -10px -10px 20px #ffffff;
}

footer {
	margin-top: 2rem;
}

/* ---------- responsive หน้าจอขนาด 480px ---------- */
@media screen and (min-width: 480px) and (max-width: 599px) {

	.card input {
		width: 16rem;
	}
	.div-qr {
		width: 435px;
		height: 530px;
		box-shadow: 10px 10px 20px #cbced1,-10px -10px 20px #ffffff;
		padding: 45px 35px 35px 35px;
		border-radius: 40px;
	}
	.div-qr-show {
		width: 435px;
		height: 540px;
		box-shadow: 10px 10px 20px #cbced1,-10px -10px 20px #ffffff;
		padding: 20px 35px 35px 35px;
		border-radius: 40px;
	}
	.button-s {
		margin-top: 12px;
	}
	img {
		width: 90%;
		box-shadow: 10px 10px 20px #cbced1, -10px -10px 20px #ffffff;
	}
}

/* ---------- responsive หน้าจอขนาด 320px ---------- */
@media screen and (min-width: 320px) and (max-width: 479px) {

	.div-qr {
		width: 350px;
		height: 500px;
		box-shadow: 10px 10px 20px #cbced1,-10px -10px 20px #ffffff;
		padding: 45px 35px 35px 35px;
		border-radius: 40px;
	}
	.div-qr-show {
		width: 350px;
		height: 510px;
		box-shadow: 10px 10px 20px #cbced1,-10px -10px 20px #ffffff;
		padding: 45px 35px 35px 35px;
		border-radius: 40px;
	}
	.logo {
		background: url("https://surinpao.go.th/logo/surinpao.jpg");
		width: 110px;
		height: 110px;
		background-size: cover;
		margin: 0 auto;
		box-shadow: 0 0 2px #5f5f5f,
		0 0 5px #ecf0f3,
		8px 8px 15px #a7aaaf,
		-8px -8px 15px #ffffff;
		border-radius: 50%;
	}
	.title {
		text-align: center;
		font-size: 21px;
		font-weight:700;
		color: #4070f4;
		/* text-shadow: 
		8px 8px 15px #a7aaaf,
		-8px -8px 15px #ffffff; */
		text-shadow: 6px 4px 4px #c5c5c5;
		padding-top: 24px;
	}
	.fa-link {
	    font-size: 18px;
    	margin-right: -5px;
	}
	.card input {
		border: none;
		outline: none;
		width: 13rem;
		font-family: 'Mitr', sans-serif;
		background: none;
		font-size: 16px;
		color: #555;
	}
	img {
		width: 100%;
		box-shadow: 10px 10px 20px #cbced1, -10px -10px 20px #ffffff;
	}
	.button-s {
		margin-top: 10px;
	}
}