@charset "UTF-8"; 
@font-face {font-family: RobotoReg; src: url(/fonts/wf2/Roboto/Roboto-Regular.woff2) format('woff2'); font-display: swap;}
@font-face {font-family: RobotoMed; src: url(/fonts/wf2/Roboto/Roboto-Medium.woff2) format('woff2'); font-display: swap;}
@font-face {font-family: RobotoLight; src: url(/fonts/wf2/Roboto/Roboto-Light.woff2) format('woff2'); font-display: swap;}
:root{
	--font:RobotoLight, -apple-system, system-ui, sans-serif;
	--font-bold: RobotoMed, -apple-system, system-ui, sans-serif;
	--cl-blue:#1f9dd7;
	--fsize: 1vw + 1vh;
}
*{margin:0; padding:0;user-select: none;}
b{font-family:RobotoMed; font-weight:unset;}
body{
	display: flex; flex-direction: column; align-items: center;font-family: var(--font);
    color: #000; min-height: 100svh;  background: radial-gradient(#ffffff 20%, #c3e2ff); text-align: center;
	font-size: clamp(1.1rem, 2vw, 1.5rem);
}

header{}
.conteiner{margin: 1em; max-width: 1200px;}
main{display: flex; flex-direction: column; align-items: center; gap: 1rem;}
h1{font-family: var(--font-bold); font-size: clamp(1.3rem, 4vw, 1.6rem); text-align:center; font-weight: 500; text-wrap-style: balance;letter-spacing:1px;}
h2{font-family: RobotoReg; font-size: clamp(1.2em, 3vw, 1.5em); text-align:center;  font-weight: 500;letter-spacing:1px;}
.shadow_wrapper{filter: drop-shadow(-8px 5px 8px rgba(100, 100, 100, 0.3));}
.sect{
	background-color: #ffffffde; padding: clamp(0.8em, 2vh, 2em) clamp(1em, 6vw, 4em); border: 1px solid #c1c1c1;	
	border-radius: 30px;
	backdrop-filter: blur(1px);max-width: 768px;
	p{margin-top: 1em; line-height: 1.3em;}
}
.marker_green{
	list-style: none;padding-left: 0;
	li{position: relative;margin-bottom: 1em;padding-left: 1em;}
	li::before {content: "\2714";position: absolute;color: #00ca21;font-size: 1.2em;left: -0.5em;top: 50%;transform: translateY(-50%);}
}
.txt_just{text-align: justify;}

.smartphone{
	--br: 27px;
	--br-in: 22px;
	container-type: inline-size;
	display: flex;flex-direction: column;justify-content: space-between;
	background: radial-gradient(circle at top left, #bfc654, transparent 60%), radial-gradient(circle at bottom right, #bfc654, transparent 60%), #69bf8e;
	height:clamp(256px, 55svh, 512px); 
	aspect-ratio: 9 / 19.5;
	border: 0.6vh outset #1a1a1a; border-radius:var(--br);
	margin: 0.5em auto;
	
	.top_panel{
		background-color:#fff; min-height:3.5cqh; border-radius:var(--br-in) var(--br-in) 0 0;
		.camera{background: linear-gradient(165deg, #353535, #4d4d4d);width: 40%;height: 45%; border-radius: 0 0 30px 30px; margin: 0 auto;}
	}
	.wrap_chat{padding-left: 3px;scroll-behavior:smooth;overflow: auto;scrollbar-width: none;}
	.chat{padding:4px;flex-grow: 1;align-content: center;font-size: 4.5cqw;}
	.chat.animation{animation-name: scrollChat;animation-duration: 4s;animation-iteration-count:1;animation-direction: alternate;}
	
	.message{/*font-family:sans-serif;*/ background-color:#fff;border-radius: 6px; padding:4px; text-align:left;margin-right: 12%;margin-top: 1.2em;}	
	.wrap_but{text-align: left;}
	.inline_button{
		height: 2.5em; align-self: flex-start;padding: 0 0.5em;font-size: 4.5cqw;background-color: #0000001f;border-radius: 8px;border: none;outline: none;color: white;width: -webkit-fill-available; margin-right: 12%; overflow: hidden;
	}
	.bottom_panel{
		display: flex;justify-content: center;align-items: center;gap: 18cqw;background-color:#558c5c80;min-height:3.5cqh;border-radius: 0 0 var(--br-in) var(--br-in);color:#ffffffc9;
		& .rect, & .round, & .back{display:inline-block; width: 1cqh; height: 1cqh; border:1px solid #d5d5d5;}
	}
}
.fx_row_col{display: flex;flex-direction: row; flex-wrap: wrap;}
.rect{border-radius: 2px;}
.round{border-radius:50%}
.back{border-radius: 50% 0 0 50%; corner-shape: bevel;}
@keyframes scrollChat {
  from {transform: translateY(0);}
  to {transform: translateY(-550px);}
}