/* Estilo da página */

body {
	position: relative;
	overflow: hidden;
	isolation: isolate;

	background: linear-gradient(135deg, pink, purple);
	background-repeat: no-repeat;
	background-size: cover;
	background-attachment: fixed;
	
	font-family: "Google Sans", cursive;

	margin: 0;
	margin-top: 0;
	padding: 0;
	height: 100%;
	width: 100%;
}

body::before {
	content: "";
	position: fixed;
	
	top: 0;
	left: 0;
	height: 100%;
	width: 100%;
	
	background-image: url("../img/flower.svg");
	background-size: 120px 120px;
	background-repeat: repeat;
	opacity: 0.03;
	
	z-index: -1;
}

.btn-roxo {
	color: white;
	background-color: purple;
}

.btn-roxo:hover {
	color: white;
	background-color: purple;
	filter: drop-shadow(0px 0px 10px lightgray);
	text-shadow: 2px 2px 4px black;
}

/* ========== Menu ========== */

div.menu {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 33.3%;
	gap: 1rem;
}

a.menu {
	background-color: purple;
	border-radius: 4px;
	color: pink;
	font-size: 16px;
	padding: 10px;
	text-decoration: none;
}

a.menu:hover { 
	filter: drop-shadow(0px 0px 10px lightgray);
	text-shadow: 2px 2px 4px black;
	color: white;
}

i.menu {	margin-right: 10px; }

/* ========== Barra redes sociais e contatos ========== */

div.social {
	background-color: rgba(128, 0, 128, 0.2);
	background-blend-mode: color-dodge;
	border-radius: 6px;
	padding: 5px;
}

img.social {
	height: 32px;
	width: 32px;
	margin: 6px;
}

img.social:hover { filter: drop-shadow(0px 0px 10px lightgray); }

/* ==================== Logo ==================== */

div.logo {
	display: inline-block;
	margin-right: 3rem;
	width: 33,3%;
}

font.logo-dancingscript {
	color: white;
	font-family: "Dancing Script", cursive;
	font-size: 8em;
	text-shadow: 2px 2px 4px black;
}

font.logo_googlesans {
	color: purple;
	font-size: 2.5em;
	letter-spacing: 0.45em;
}

p.logo {	line-height: 0.8; }

/* ==================== Caixa de texto  ==================== */

div.texto {
	background: transparent;
	backdrop-filter: blur(4px); /* efeito glass */
	border: 2px solid purple;
	border-radius: 8px;
	
	margin-left: 8em;
	margin-top: 4em;
	padding: 3em;
	width: 65%;
}

p.texto-titulo {
	font-family: "Dancing Script", cursive;
	font-size: 2.5em;
	color: purple;
	text-shadow: 2px 2px 4px gray;
}

/* ==================== Foto ==================== */

div.foto {
	position: fixed;
	bottom: 0px;
	right: -520px;
	z-index: -1;
}

img.foto {
	max-width: 40%;
}