/* #0F253E */
:root {
	--bg: white;
	--blue: #C9E2F8;
	--text: #0F253E;
}

body {
	background-color: var(--bg);
	font-family: 'Futura', sans-serif;
}

a, button, input, textarea {
	outline: none!important;
}

.canvas {
	height: 100vh;
	width: 100vw;
}

.clip-path {
	clip-path: circle(0% at 100% 0);
	background: white;
	width: 100%;
	height: 100%;
	position: absolute;
	z-index: 999;
}

img {
	width: 100%;
}

h1 {
	color: var(--text);
	font-size: clamp(2rem, 9vw, 9rem);
	font-weight: 700;
}

.subtitle {
	font-size: clamp(1.3rem, 2vw, 2rem);
	color: var(--text);

}

.first-screen .wrapper {
	padding-left: 30%;
	z-index: 99
}

.phone {
	width: 85%;
}

button {
	background: #E1656F;
	color: white;
	text-transform: uppercase;
	border: none;
	border-radius: 5px;
	font-size: 1.1rem;
	padding: .5rem 1.5rem;
	cursor: pointer;
}

.right-wave {
	right: 0;
	bottom: 0;
	width: 60%;
}

.left-wave {
	left: 0;
	top: 0;
	width: 35%;
}

iframe {
	left: 0;
	top: 0;
}

.pink {
	color: var(--pink);
}

.blue {
	color: var(--blue);
}

.rel {
	position: relative;
}

.abs {
	position: absolute;
}

.second-screen {
	width: 100vw;
	height: 100vh;
	background: #F5F9FD;
	display: none;
}

.second-screen .wave {
	bottom: 0;
	left: 0;
	width: 43%;
}

.logo {
	top: 1.75rem;
	left: 1.75rem;
	width: 75px;
	z-index: 99;
}

.frame {
	width: 94vw;
	height: 90vh;
	background: white;
	padding: 8rem 10rem;
	border-radius: 10px;
}

.inputURL,
.inputColor,
.inputInfo
 {
	background-color: #F5F9FD;
	border: none;
	border-radius: 5px;
	color: #9CB5CA;
	font-size: 20px;
	padding: .7rem 1.5rem;
	margin-right: 1rem;
}

input::placeholder {
	color: #9CB5CA;
}

label {
	font-size: 23px;
	font-weight: 700;
	color: var(--text);
}

.qr-wrapper {
	background-color: #F5F9FD;
	width: 100%;
	height: 500px;
	border-radius: 5px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.qr-wrapper img {
	width: 100%;
}

.first-screen,
.second-screen {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	overflow: hidden;
}

button.download,
button.print {
	text-transform: uppercase;
	border: none;
	border-radius: 5px;
	font-size: clamp(1.2rem, 1.5vw, 1.5rem);
	padding: .5rem 1.5rem;
	width: 49%;
	font-weight: 500;
	cursor: pointer
}

button.download {
	background: #E1656F;
	color: white;
}

button.print {
	background: #73B4EE;
	color: white;
}
.choose_button button {
	background-color: white;
	border: 2px solid #E1656F;
	color: var(--text);
}
.colorButton, .choose_button button:hover {
	background-color: #E1656F !important;
	color: white !important;
}
.url {
	margin-right: 20px
}

.fun1, .fun2 {
	width: 9%;
	bottom: -60%;
}

.animfun1 {
	animation-name: animFun;
	animation-duration: 7s;
	animation-fill-mode: forwards;
	animation-timing-function: linear;
}
.animfun2 {
	animation-name: animFun;
	animation-duration: 6s;
	animation-fill-mode: forwards;
	animation-timing-function: linear;
}

@keyframes animFun {
	0% {
		bottom: -60%;
	}
	20% {
		bottom: 0%;
	}
	40% {
		bottom: 0%;
	}
	60% {
		bottom: 0%;	
	}
	80% {
		bottom: 0%;
	}
	100% {
		bottom: -60%;
	}
}

#installApp {
	top: 20px;
	right: 20px;
	z-index: 9999;
	width: 40px;
	height: 40px;
	display: flex;
	justify-content: center;
	align-items: center;
	background-color: #eff5fb !important;
}
#installApp .imgInstall {
	width: 30px !important;
	height: 30px !important;	
}

@media (max-width: 1600px) { 
	.frame {
		background: white;
		padding: 4rem 6rem;
		border-radius: 10px;
	}
	label {
		font-size: 20px;
	}
	
}