:root {
	--background: #eeede7;
	--fundo: #868b8e;
	--text: #272727;
	--decor: #e7d2cc;
}

* {
	box-sizing: border-box;
	padding: 0;
	margin: 0;
	scroll-behavior: smooth;
	word-wrap: normal;
	overflow: hidden;
}

body,
html {
	background-image: url("./img/background-img.webp");
	background-size: cover;
	background-repeat: no-repeat;
	background-position: top center;

	color: var(--text);

	font-family: "Pixelify Sans", sans-serif;
	font-optical-sizing: auto;
	font-style: normal;
}

body {
	height: 100dvh;
}
a {
	color: blue;
}
svg {
	display: block;
}
button {
	color: #272727;
	font-family: "Pixelify Sans", sans-serif;
	font-optical-sizing: auto;
	font-style: normal;
	cursor: pointer;
}
.box {
	position: absolute;
	top: 50%;
	left: 20%;
	background: #ffffff;
	border: 1px solid #414141;

	button {
		cursor: default;
	}
}
.topbar {
	background: #bbbbbb;
	display: flex;
	justify-content: space-between;
	padding: 0.3rem 0.5rem;
	border-bottom: 1px solid #414141;
	span {
		margin-right: 1rem;
	}
}
.icons {
	display: flex;
	align-items: center;
	gap: 0.1rem;

	button {
		height: 20px;
		width: 20px;
		display: flex;
		align-items: center;
		justify-content: center;
	}
}
.content {
	padding: 0.5rem;

	span {
		text-decoration: red wavy underline;
	}
}

.desktop {
	display: flex;
	flex-direction: column;
	align-items: center;
	width: fit-content;

	button {
		background: none;
		border: none;
		font-size: medium;
		margin: 1rem;

		svg {
			margin: auto;
			margin-bottom: 0.5rem;
		}
	}
	.deskButton {
		color: #000000;
	}
}

dialog {
	border: none;
	position: absolute;
	top: 10%;
	left: 10%;
	border: 1px solid #414141;

	max-width: 80%;
}
.dialogClose {
	float: right;
	font-size: large;
}

@media screen and (min-width: 768px) {
	.box {
		top: 50%;
		left: 50%;
	}
	dialog {
		max-width: 60%;
	}
	.icons {
		gap: 0.3rem;
	}
}