@font-face {
	font-family: "Martel Sans";
	src: url("../fonts//MartelSans-Regular.ttf");
}

[v-cloak] {
	display: none;
}

body {
	background-color: #fff;
	font-family: "Martel Sans", sans-serif;
}

.header {
	padding: 40px;
	margin-bottom: 20px;
}

.nav-link img:hover {
	opacity: 0.8;
}

a {
	color: #6802b8 !important;
}

.app-title {
	margin-bottom: 80px;
}

.text-brand {
	color: #6802b8;
}

.text-danger {
	color: #ff5722 !important;
}

#text-to-send {
	padding: 20px;
	box-shadow: 6px 7px 0px 0px #d7d7d7;
}

#clipboard-content {
	background: #eaeaea;
	padding: 20px;
	box-shadow: 6px 7px 0px 0px #d7d7d7;
}

#pasteBtn {
	padding: 12px 30px;
	border-radius: 2rem;
	margin-top: 8px;
	font-weight: bold;
	box-shadow: 1px 2px 14px 2px #bababa;
}

#pasteBtn:hover {
	border: none;
}

#pasteBtn:focus {
	background: #2a323a;
	border: 1px solid white;
}

#clipboard-copy-btn {
	position: relative;
	top: 33px;
	padding: 3px 7px;
	font-size: 15px;
}

.content {
	margin-top: 40px;
}

.about,
.guide {
	background: linear-gradient(119deg, #ffffff, #f9f9f9);
	border: 1px solid #6802b8;
	border-radius: 20px;
	box-shadow: 1px 2px 9px 0px #d1d1d1;
	color: #000000;
	padding: 80px;
	margin: auto;
	font-size: 20px;
	line-height: 35px;
	text-align: justify;
	width: 80%;
}

.about a,
.guide a {
	color: #57118e !important;
	text-decoration: none;
}

.about strong {
	color: #6802b8 !important;
	font-weight: 550;
}

.about .text-right,
.guide .text-right {
	text-align: right !important;
}

.footer {
	margin-top: 100px;
	padding-bottom: 50px;
}

@media (max-width: 768px) {

	.logo {
		width: 100% !important;
		margin-bottom: 30px !important;
	}

	.header .justify-content-end {
		justify-content: center !important;
	}

	li.nav-item.me-auto.logo {
		margin: 0 auto;
		width: 77% !important;
	}

	.about,
	.guide {
		text-align: left;
		width: 90%;
		padding: 30px;
		margin-bottom: 80px;
	}
}