# {
	--text-color:#fff;
}

body {
	margin: 0;
	background-color: #444;
	color: #fff;	
}


.roboto-regular {
  font-family: "Roboto", serif;
  font-optical-sizing: auto;
  font-weight: 100;
  font-style: normal;
  font-variation-settings:
    "wdth" 100;
}

.menu {
	position: fixed;
	display: flex;
	justify-content: center;
	height: 7vh;
	width:100vw;
	align-content: center;
	flex-wrap: wrap;
	gap: 1rem;

	font-family: "Roboto", serif;
	font-weight: 300;
	font-style: normal;

	-webkit-backdrop-filter: blur(20px);
	backdrop-filter: blur(20px);

	backdrop-filter: brightness(60%);
}

.btn {
	display: flex;

	padding-right: 1.3rem;
	padding-left: 1.3rem;	
	padding-top: 0.6rem;
	padding-bottom: 0.6rem;

	color: var(--text-color);
}

.btn-regular {
	background: rgb(255 255 255 / 20%);
	border-radius: 0.8rem;
	box-shadow: rgba(0 0 0 / 20%) 0px 7px 29px 0px;
}

.btn-action {
	color: var(--text-color);
	background: #ffa600;
}

.banner {
	display: flex;
    justify-content: center;
    height: 100vh;
    position: relative;
    align-content: center;
    flex-wrap: wrap;
}

.banner .content .title {
	color: #444;
	font-family: "Roboto", serif;
	font-optical-sizing: auto;
	font-weight: 500;
	font-style: normal;
	font-variation-settings: "wdth" 100;
	font-size: 3em;
}

p {
	font-size:2rem;
	text-shadow: 0px 0px 10px #fff;
}

.banner::before {
	content: '';
	position: absolute;
	inset: 0;
	background-image: url(../img/bg.jpg);
	background-size: cover;
	background-position: center;
	z-index: -1;

	mask-image: url(../img/ink.gif);
	mask-size: cover;
	mask-position: center;
}

/* -------------------  Fonts ------------------- */

svg path {
	fill: transparent;
	stroke: #555;
	stroke-width: 2;
	stroke-dasharray: 50;
	stroke-dashoffset: 100;
	animation: textAnimation 4s ease-in-out 1 forwards;
}

@keyframes textAnimation {
	0% {
		stroke-dashoffset: 150;
	}
	80% {
		fill: transparent;
	}
	100% {
		fill: #ffa600;
		stroke-dasharray: 450;
		stroke-dashoffset: 0;
		box-shadow: rgba(0 0 0 / 20%) 0px 7px 29px 0px;

	}
}