html {scroll-behavior: smooth}

body {
	margin: 0;
	font-family: Arial;
	color: rgb(50, 50, 50);
	background: url(pix/bg.webp) fixed;
	background-size: 100% 100%;
	font-size: 15px;
}

img {display: block}

a {text-decoration: none;color: inherit}
a:hover {text-decoration: underline}

.growfx {transition: all 0.3s ease}
.growfx:hover {transform: scale(1.1)}

main {
	width: 70%;
	margin: 0 auto;
	background-color: #f2f3f4;
	box-shadow: 0 2px 9px 0 rgba(0, 0, 0, 0.2);
	min-height: 100vh;
	position: relative;
	padding-bottom: 35px;
}

header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding-top: 26px;
	padding-left: 50px;
	padding-right: 50px;
	margin-bottom: 38px;
}

.info_box {
	width: 800px;
	margin: 0 auto;
	border: 1px solid #3cdad9;
	border-radius: 15px;
	padding: 15px;
	box-sizing: border-box;
	background-color: #f2f3f4;
}

.sale_box {
	background-color: white;
	border-radius: 15px;
	font-size: 14px;
	font-weight: bold;
	padding: 9px;
	box-shadow: 0px 7px 13px -1px rgba(0, 0, 0, 0.1);
	color: dimgray;
	text-align: center;
	border: 1px solid #d1d9da;
}

.sale_box img {margin: 0 auto}

.s1 {color: rgb(17, 141, 219); font-weight: bold}
.s2 {font-size: 12px; font-weight: bold}
.s3 {margin-top: 3px; cursor: pointer}
.s4 {margin-left:6px; margin-right:-2px}
.s5 {background-color: rgb(235, 235, 235)}
.s6 {font-weight: bold}

#app_list {
	width: 800px;
	margin: 0 auto;
	margin-top: 35px;
	box-shadow: 0px 7px 13px -1px rgba(0, 0, 0, 0.1);
	border-radius: 15px;
	background-color: white;
	border: 1px solid #d1d9da;
	font-size: 14px;
	box-sizing: border-box;
}

#app_list table {border-collapse: collapse}
#app_list td {padding: 6px}

#badge
{
	position: absolute;
	top: 135px;
	right: 3.5%;
	z-index: 1;
}

#order
{
	width: fit-content;
	margin: 0 auto;
	margin-top: 8px;
	background-color: white;
	box-shadow: 0px 7px 13px -1px rgba(0, 0, 0, 0.1);
	border: 1px solid #d1d9da;
	border-radius: 15px;
	box-sizing: border-box;
	position: relative;
	z-index: 2;
}

#order table
{
	width: 566px;
	font-size: 14px;
	border-spacing: 5px;
}

#order td {padding: 4px}

#payment
{
	width: fit-content;
	margin: 0 auto;
	margin-top: 8px;
	border: 3px solid #e0e1e2;
	box-shadow: 0px 7px 13px -1px rgba(0, 0, 0, 0.1);
	border-radius: 15px;
	padding-top: 25px;
	padding-left: 25px;
	padding-bottom: 22px;
	background-color: white;
}

#payment table
{
	width: 540px;
	margin-top: 23px;
	font-size: 14px;
}

#payment td {padding: 2px}

#cust_name, #card_number, #exp_month, #exp_year, #security_code, #cust_email {font-size: 14px}

footer
{
	position: fixed;
	bottom: 0px;
	width: 70%;
	height: 40px;
	line-height: 40px;
	font-size: 12px;
	border-top: 1px dashed rgb(169, 169, 169);
	text-align: center;
	backdrop-filter: blur(8px);
}