@import url(styles.css);

header{
	position: fixed;
	top: 0;
	width: 100%;
	padding: 2rem 5rem;
	/* border: 1.5px solid red; */
	background: transparent;
	z-index: 999;
	transition: .5s ease-in-out;
}
header.scrolled{
	top: -100%;
	background: #070707;
	box-shadow: 0 0 5px gray;
}

header nav{
	display: flex;
	align-items: center;
	justify-content: space-between;
}

header .logo img{
	width: 7rem;
	box-shadow: 0 0 7px gray;
	border-radius: 7px;
	animation: scaling 1s ease-in-out .3s infinite alternate;
}
header .logo img:hover{
	transform: scale(1.05);
	box-shadow: 0 0 15px gray;
}
@keyframes scaling {
	0% {
		transform: scale(.9);
	}

	100% {
		transform: scale(1);
	}
}

header .cta{
	color: var(--color-dark);
	background: linear-gradient(to left, var(--color2) 50%, transparent 50%) right;
	background-size: 210%;
	padding: 1.2rem 2rem;
	border-radius: 10px;
	border: 2px solid var(--color2);
	font-weight: 500;
	transition: .5s ease-in-out;
}
header .cta:hover{
	color: var(--color2);
	background-position: left;
	box-shadow: 0 0 5px var(--color2);
}
header .cta i{
	margin-right: .5rem;
}

header .cta.active{
	color: var(--color2);
	background-position: left;
	box-shadow: 0 0 5px var(--color2);
}

/* MEDIA */
@media (max-width: 700px) {
	header{
		padding-inline: 2.5rem;
	}
}

@media (max-width: 500px) {
	header{
		padding-inline: 1.5rem;
	}
}