*{
	margin : 0;
	padding : 0;
	box-sizing : border-box;
	font-family : Arial;
}

body{
	background : #FFFFFF;
	padding : 10px;
}

.container{
	max-width : 1350px;
	margin : auto;
	text-align : center;
}

.banner{
	padding : 0px;
	border-radius : 1px;
	margin-bottom : 1px;
}

.banner img{
    width: 100%;
    height: 200px;
}

.card{
	background : linear-gradient(rgb(255,  182, 193), rgb(255, 255, 255), rgb(0, 191, 255));
	padding : 20px;
	border-radius : 0px;
	margin-bottom : 10px;
}

.cardd{
	background : white;
	padding : 20px;
	margin-bottom : 10px;
	cursor : grab;
}

.produkk{
	display : flex;
	gap : 10px;
	flex-wrap : wrap;
	justify-content: center;
}

.produk{
	width : 180px;
	text-align : center;
	background : linear-gradient(rgb(255,  182, 193), rgb(255, 255, 255), rgb(0, 191, 255));
	box-shadow : 0 5px 5px rgba(0, 0, 0, 0.8);
	padding : 15px;
	border-radius : 15px 0px 60px 0px;
	text-align : center;
}

.produk img{
	width : 100%;
	border-radius : 15px 0px 40px 0px;
}

button{
	padding : 7px 50px;
	border-radius : 0px 0px 80px 0px;
	border-color : black;
	background : white;
	cursor : pointer;
}

table{
	width : 100%;
	border-collapse : collapse;
	box-shadow : 0 5px 5px rgba(0, 0, 0, 0.8);
}

table th,
table td{
	border : 1px solid #000;
	padding : 8px;
	text-align : center;
}

table th{
	background : white;
	color : black;
}

.total{
	text-align : center;
}

input{
	width : 100%;
	padding : 12px;
	margin : 10px 0;
}

#struk{
    background:white;
    border:1px dashed black;
    padding:15px;
    margin-top:15px;
    text-align:left;
}

#struk h3{
    text-align:center;
    margin-bottom:10px;
}

button:hover{
    opacity:0.9;
}

input:focus{
    outline:none;
}

.aksi{
    display:flex;
    justify-content:center;
    gap:10px;
}