/*@import url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.2/font/bootstrap-icons.min.css");*/
/*@import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300..800;1,300..800&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');*/

:root {
	--padding-container: 40px 30px;
	--color-title: #e9baf4;
	--brand-color: #7535ac;
  --brand-second-color: #ff93e6;
  --brand-color-transparent: #7535acae;
  --brand-second-color-transparent: #ff93e6ae;
  --white: #fefefe;
  --gray: #6c757d;
  --light-grey: #eaeaea;
  --light: #f8f9fa;
  --gray-dark: #343a40;
  --dark: #212529;
  /*--principal-color:#004481;*/
  --show: block;
  --hidden: none;
  --all-width: 100%;
  /*--box: inset -15.5em 0 0 0 #004481,inset 15.5em 0 0 0 #00448199;*/
  /*--backgroundtransparent: #0075be68;*/
  /*--box-two: inset -.1em 0 0 0 #004481,inset .1em 0 0 0 #00448199;*/
  --gray100: hsl(0,0%,100%);
  --gray70: hsl(0,0%,70%);
  --gray0: hsl(0,0%,0%);
}

* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
/*	border: 1px solid black;*/
}

body {
	 font-family: "Poppins", system-ui, sans-serif;
	/*width: 100%;*/
	/*	min-height: 100lvh;*/
}

h1,h2,h3,h4,h5,h6 {
	margin: 0 0 20px 0;
	padding: 10px;
	text-align: center;
}

button {
	padding: 6px 12px;
	cursor: pointer;
	animation: all .4s ease-in-out;
	border: none;
	width: 80px;
	margin: .1em;
	overflow: hidden;
	&:hover {
		scale: 1.05;
	}

	&:active {
		scale: 0.92;
	}
}

a {
	text-decoration: none;
	color: var(--dark);

	&:hover {
		color: var(--gray-dark);
	}
}

p {
	max-width: 75ch;
    /*margin: 0 auto;*/
    margin-block: 1lh;
    /*text-align: justify;*/
    /*text-wrap: balance;*/
    text-wrap-style: pretty;
    hyphenate-limit-chars: 5;
    hyphens: auto;
    color: var(--gray);
    padding: 30px;
    line-height: 1.4;
}

.container {
/*	width: 100%;*/
	max-width: 1200px;
	margin: 0 auto;
	/*padding: 0 30px;*/
	overflow: hidden;
	padding: var(--padding-container);
}


.nav {
/*	--padding-container: 0;*/
	padding: 0 5%;
	width: 100%;
	height: 80px;
	display: flex;
	align-items: center;
	position: relative;
	justify-content: space-between;
	background-color: #fff;
	overflow: hidden;
}

.nav__logo {
	background-image: url('../../favicons/logo.jpg');
	background-position: center;
	background-repeat: no-repeat;
	background-size: 100% 270%;
	width: 300px;
	height: 100%;	
	mix-blend-mode: darken;
}

.nav__link {
	display: grid;
	margin-left: auto;
	padding: 0;
	grid-auto-flow: column;
	grid-auto-columns: max-content;
	gap: 1em;
	font-weight:500;
	align-items: center;
	letter-spacing: .02rem;
	/*color: var(--brand-color);*/
}

.nav__items {
	list-style: none;
	font-size: 0.6rem;
	border-bottom:2px solid #30303000;
}

.nav__link .active a {
  padding: 0.3em;
  border-bottom: 2px solid var(--brand-color);
  opacity: 0.7;
  color: var(--brand-color);
}


.nav__items:hover:not(.active) {
  top: 100%;  
  transition: all 0.5s ease-in-out;
  border-bottom: 2px solid var(--brand-color);
  a {
  	/*padding: 0.3em;*/
  	color: var(--brand-color-transparent);
  }
  
}

.nav__link {
	color: #1b1b1b;
	text-decoration: none;
}

.nav__link li:nth-child(5) {
	background-color: var(--brand-color);
	border-radius: 30px;
	padding: 10px;
	a {
		color: var(--white);
		display: flex;
		gap: .6em;
    align-items: anchor-center;

	}
	&:hover a {
		color: var(--light-grey);
	}
}

.nav__menu {
	margin-left: auto;
	cursor: pointer;
	display: none;
}

.nav__img {
	display: block;
	width: 30px;
}

.nav__close {
	display: none;
}

@media (width <= 768px) {
	.nav__collapse {
		display: block;
		position: relative;
		width: 100%;
		height: auto;
	}

	.nav__menu {
		display: block;
		position: relative;
		border: none;
		background: none;
	}

	.nav__img {
		background-color: #30303040;
	}
	
	.nav__link {
		display: flex;
		place-content: center;
		flex-direction: column;
		position: fixed;
		width: 100%;
		height: calc(100dvh - 100px);
		left: 0;
		bottom: 0;
		overflow: hidden;
		background-color: #ffffffea;
		z-index: 6000;
		transition: all .4s ease-in-out;
	}

	.nav__link--menu {
		background-color: #ffffff00;
		height: 0;

	}
	.nav__close {
		display: block;
		position: absolute;
		background: none;
		border: none;
		top: 0;
		right: 0;
		margin: 2em;
	}

}