@charset "UTF-8";

*{
	margin: 0;
	padding: 0;
	box-sizing: 0;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

:root{
	/* PRIMARY COLORS */
	--primary-color01: #190361;
	--primary-color02: #bb00ff;
	--primary-color03: #34355B;
	--primary-color04: #E4EDF1;
	--primary-color05: #FF9500;
	--primary-color06: #fdae3f;
	--primary-color07: #e92626;
	--primary-color08: #f8c276;
	/* GRAY COLOR */
	--gray100: #F8F9FA;
	--gray200: #E9ECEF;
	--gray300: #DEE2E6;
	--gray400: #CED4DA;
	--gray500: #ADB5BD;
	--gray600: #6C757D;
	--gray700: #495057;
	--gray800: #343A40;
	--gray900: #212529;

	--white: #fff;
	font-size: 62.5%;
	font-family: 'DM Sans', sans-serif;
	font-weight: 400;
}

body {
	font-size: 1.6rem;
	/* efeito de animação no gradiente do background */
	/* background: linear-gradient(45deg, var(--primary-color07), var(--primary-color08)); */
	/* animation: bg-gradient 10s ease infinite; */
	/* background-size: 200% 200%; */
	background-image: url('../images/bg-chinese-restaurant2.jpg'); 
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center;
	height: 100vh;
}

main{
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 1.6rem;
	box-shadow: 0 0 10px #55555577;
	height: 100%;
}

h1{
	color:var(--gray700);
	font-size: 2.4rem;
	font-family: "Montserrat", sans-serif;
	font-weight: 700;
	text-align: center;
}

.screen1 h1{
	padding:0 2rem;
}

p{
	color:var(--primary-color03);
	font-size: 1.6rem;
	font-weight: 400;
}

.screen2 p{
	font-family: "Dancing Script";
	font-weight: 400;
	font-size: 2.4rem;
	color: var(--gray900);
	background-color: var(--primary-color04);
	border-radius: 5px;
	box-shadow: 2px 2px 2px #55555575;
	padding: 10px;
	text-align: center;
	/* position: sticky; */
	animation: appear-slide 2s ease 1;
}

.screen{
	background-color: var(--white);
	border: 4px solid var(--gray500);
	border-radius: 5px;
	width: 428px;
	padding: 4.8rem 6.4rem;
	width: auto;
}

.screen1 img{
	width: 300px;
	cursor: pointer;
}

.screen1 img:hover{
	animation: shake 0.3s linear infinite;
}

.screen1-content,
.screen2-content{
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 1.6rem;
	width: 300px;
}

.screen1-content{
	gap: 1.6rem;
}

.screen2 #msg-cookie{
	height: 107px;
	width: 100%;
	position: relative;
}

.hide{
	display: none;
}

.btn{
	font-family: "DM Sans", sans-serif;
	font-weight: 700;
	font-size: 1.6rem;
	color: var(--white);
	background-color: var(--primary-color05);
	border: none;
	border-radius: 4px;
	padding: 1.6rem;
	cursor: pointer;
}

.btn:hover{
	background-color: var(--primary-color06);
}

@keyframes bg-gradient {
	0% {
		background-position: 0% 50%;
	}
	50% {
		background-position: 100% 50%;
	}
	100% {
		background-position: 0% 50%;
	}
}

@keyframes shake{
	33%{
		transform: rotate(10deg);
	}
	66%{
		transform: rotate(-10deg);
	}
	100%{
		transform: rotate(10deg);
	}
}

@keyframes appear-slide{
	0%{
		transform: scale(0);
		position: absolute;
		top: 200px;
	}
	100%{
		transform: scale(1);
		position: absolute;
		top: 0px;


	}
}