/* "PT Sans" */
/* "Changa One" */



:root {
	
	--text: #1E2534;
	--accent1: #ff2ddc;
	--accent1-dark: #ff37de;
	--accent2: #ffc4ff;
	--accent2-dark: #ff76f4;
	--bg: #F1F1F8;
	--bg-light: #FFFFFF;
}


body {
	font-family: "PT Sans", sans-serif;
	color: var(--text);
	background-color: var(--bg);
}

.button {
	font-size: 1.125rem;
	text-decoration: none;
	border: var(--text) 1px solid;
	border-radius: .5rem;
	padding: .5rem 1.5rem;
	background-color: var(--accent2);
	font-weight: bold;
}



.site-header {
	position: relative;
	margin-top: 1rem;
	margin-left: 1rem;
	margin-right: 1rem;
	margin-bottom: 3rem;
}
.site-logo {
	font-size: 1.875rem;
	font-family: "Changa One", cursive;
}
.site-nav {
	margin-top: 2rem;
}
.site-nav__links {


	li {
		margin-bottom: .5rem;
	}
	a {
		font-size: 1.125rem;
		text-decoration: none;
		display: block;
		border: var(--text) 1px solid;
		border-radius: .5rem;
		padding: .5rem;
		text-align: center;
	}
	.active {
		background-color: var(--accent1);
		font-weight: bold;
	}
}
.site-nav__button {
	position: absolute;
	top: -.25rem;
	right: 0;
	border: var(--text) 1px solid;
	border-radius: .5rem;
	padding: .75rem;


	svg {
		display: block;
	}
}
.site-nav__links a:hover {
  background-color: var(--accent1-dark);
  color: white;
  transition: 0.3s ease;
}

.hero {
	background: linear-gradient(-45deg, var(--accent2) 0%, var(--accent2-dark) 100%);
	padding: 1rem 1rem 0;
	margin-bottom: 3rem;
}

.hero {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-direction: row-reverse;  
}

.hero__header {
	font-size: 3rem;
	font-family: "Changa One", cursive;
	margin-bottom: 2rem;
	text-align: center;
	line-height: 1;
	letter-spacing: -0.09rem;


	em {
		font-style: normal;
		color: var(--bg);
	}
}
.hero__image {
	display: block;
	width: 100%;
}



.quote {
	margin-left: 1rem;
	margin-right: 1rem;
	margin-bottom: 3rem;
	text-align: center;	
}
.quote__text {
	font-size: 1.5rem;
}
.quote__attribution {
	margin-top: .5rem;
	font-size: 1.25rem;
}



.cards {
	margin-left: 1rem;
	margin-right: 1rem;
	margin-bottom: 3rem;
}
.cards__header {
	font-size: 1.5rem;
	margin-bottom: 2rem;
	text-transform: uppercase;
	text-align: center;
	font-weight: bold;
	color: var(--accent1-dark);
}
.cards__wrapper {
	display: grid;
	gap: 2rem;
}
.card {
	background-color: var(--bg-light);
	border-radius: 0.5rem;
	box-shadow: 4px 4px 16px 0px rgba(30, 37, 52, 0.10);
}
.card__link {
	padding: 1.5rem;
	text-decoration: none;
	text-align: center;
	display: block;
}
.card__image {
	background-color: var(--accent1);
	width: 10rem;
	height: 10rem;
	padding: 1.5rem;
	border-radius: 50%;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 1.5rem;	


	img {
		width: 100%;
		mix-blend-mode: multiply;
	}
}
.card__header {
	font-size: 1.25rem;
	margin-bottom: .5rem;
	text-transform: uppercase;
	font-weight: bold;
}
.card__text {
	line-height: 1.35;
}

.button:hover {
  background-color: var(--accent2-dark);
  color: white;
  transition: 0.3s ease;
}

.card:hover {
  transform: translateY(-5px);
  transition: 0.3s ease;
}



.mailing-list {
	margin-left: 1rem;
	margin-right: 1rem;
	margin-bottom: 3rem;
	text-align: center;
}





.site-footer {
	background-color: var(--text);
	color: var(--bg);
	
	p {
		padding: 3rem 1rem;
	}
}


@media (min-width: 768px) {

  .wrapper {
    max-width: 1100px;
    margin: 0 auto;
  }


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

  .site-nav__button {
    display: none;
  }

  .site-nav {
    margin-top: 0;
  }

  .site-nav__links {
    display: flex;
    gap: 0;
    margin: 0;
  }

  .site-nav__links a {
    border-radius: 0;
  }

  .site-nav__links li:first-child a {
    border-radius: .5rem 0 0 .5rem;
  }

  .site-nav__links li:last-child a {
    border-radius: 0 .5rem .5rem 0;
  }


 .hero {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 4rem;
    border-radius: 1.5rem;
  }

  .hero__header {
    font-size: 4rem;
    max-width: 450px;
    text-align: left;
  }

  .hero__image {
    max-width: 500px;
  }

}