/* === Created by EagleP ===*/

/* === Global & Element settings ===*/
html {
	--primarytext: #000;
	--inverttext: #fff;
	--accent: #408050;
	--midtones: #999;
}
* {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}
body {
  background-color: lavender;

	text-align: center;
	font-family: system-ui, sans-serif;
}
h1 {
	font-size: 8vmin;
	font-weight: 400;
	font-family: "Satisfy", cursive;
}
h2 {
	font-size: 4vmin;
	font-weight: 400;
	font-family: "Satisfy", cursive;
}
h3 {
	font-size: 2vh;
	font-weight: 600;
}
footer {
	padding: 10rem 2rem 4rem;
	background:
		linear-gradient(lavender, #fff0),
		no-repeat center/cover url("PXL_shadowgrass.jpg");
}

/* === Links reset ===*/
a:hover {
	text-shadow: 0px 0px 10px var(--primarytext);
}
a {
	outline-color: transparent;
	text-decoration: none;
	color: var(--primarytext);
}
a > * {
	transition: all 0.5s ease;
}


/* === Reusable classes ===*/
.centeritems {
	display: grid;
	align-items: center;
	justify-items: center;
}
.wrapper {
	width: 100%;
	display: flex;
}
.flex-space-evenly {
	justify-content: space-evenly;
}


.grid{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
  padding: 0 2rem;
}

.card {
  background-color: darkmagenta;
  
	position: relative;
	padding: 6rem 0;
	border-radius: 2rem;
	color: #fff;
	overflow: hidden;
	transition: all 0.7s ease;
}
.card * {
  margin: 0 2rem;
}

.paragraph {
  margin: 5rem 2rem;
}

#banner {
	padding: 2rem;
}

/* === Hero section ===*/
#hero {
	height: 75vh;
	background:
		linear-gradient(0deg, lavender, #fff0),
		no-repeat center/cover url("PXL_shadowgrass.jpg");
}
#hero div {
	padding: 10rem 2rem;
}


/* === Services section ===*/
#services .wrapper {
	margin-top: 4rem;
	max-width: 90%;
	overflow-x: scroll;
	scrollbar-width: none;
}
#services .wrapper::-webkit-scrollbar { 
	display: none;
}

/* === Service card section ===*/
.servicecard {
  background-color: darkmagenta;
  
	position: relative;
	padding: 6rem 0;
	border-radius: 2rem;
	color: #fff;
	overflow: hidden;
	transition: all 0.7s ease;
}
.servicecard::before {
	content: "";
	position: absolute;
	top: 0; left: 0;
	width: 100%; height: 100%;
	filter: brightness(90%);
	transition: all 0.7s ease;
}
.servicecard > h2 {
	position: relative;
	margin: 0 2rem;
}
.servicecard:hover::before {
	filter: brightness(50%);
}
.servicecard:hover {
	text-shadow: 0px 0px 10px #fff;
}
.servicegrid a:nth-of-type(1) div::before {
	background: no-repeat center/cover url("PXL_leftarm.jpg");
}
.servicegrid a:nth-of-type(2) div::before {
	background: no-repeat center/cover url("PXL_leg.jpg");
}
.servicegrid a:nth-of-type(3) div::before {
	background: no-repeat center/cover url("PXL_rightarm.jpg");
}
.servicegrid a:nth-of-type(4) div::before {
	background: no-repeat center/cover url("PXL_shadowgrass.jpg");
}
.servicegrid a:nth-of-type(5) div::before {
	background: no-repeat center/cover url("slvrLG_moss.jpg");
}
.servicegrid a:nth-of-type(6) div::before {
	background: no-repeat center/cover url("mGplay1_flowers.jpg");
}


/* === Appointment form section ===*/
#appointment {
	margin: 6rem 0;
}
#bookappointment {
	padding: 2rem;
	background-color: var(--accent);
	border-radius: 2rem;
}

/* === Appointment form collapsing section ===*/
#form1 {
	display: grid; /* Activates accordian submenu */
	
	overflow: hidden;
	
	transition: all 1s ease;
}
#form1 > * {
	overflow: hidden;
}
.collapsed {
	grid-template-rows: 0fr;
}

/* === Credits section ===*/
#credits {
	padding-top: 4rem;
}
#credits span {
	padding-left: 0.5rem;
	position: absolute;
	transition: all 1s ease;
}
#credits span:hover {
	letter-spacing: 0.2rem;
}

@media (max-width: 950px) {
	#contactlinks {
		width: 80vw;
	}
}