:root {
	--fs-900: 3rem;
	--fs-800: 2.5rem;
	--fs-700: 2rem;
	--fs-600: 1.5rem;
	--fs-400: 1.25rem;

	--fw-400: 400;
	--fw-300: 300;
	--fw-700: 700;

	--size-sm: 1.5rem;
	--size-md: 3rem;
	--size-lg: 6rem;

	--clr-neutral-900: hsl(0, 9%, 11%);
	--clr-neutral-400: hsl(0, 0%, 35%);
	--clr-neutral-200: hsl(36, 24%, 96%);
	--clr-neutral-100: hsl(0, 0%, 100%);

	--clr-primary-200: hsl(213, 43%, 79%);
	--clr-primary-300: hsl(190, 84%, 50%);
	--clr-primary-400: hsl(217, 100%, 50%);
	--clr-primary-500: hsl(190, 100%, 28%);
}

@font-face {
	font-family: 'Breathing Script';
	font-weight: 400;
	src: url('fonts/breathing-webfont.woff2') format('woff2'),
		url('fonts/breathing-webfont.woff') format('woff');
}

/* Box sizing rules */
*,
*::before,
*::after {
	box-sizing: border-box;
}

/* Gerenal spacing and font reset */
* {
	margin: 0;
	padding: 0;
	font: inherit;
}

/* Set core body defaults */
body {
	min-height: 100vh;
	text-rendering: optimizeSpeed;
	line-height: 1.5;
}

h1,
h2,
h3,
h4,
h5,
h6 {
	font-weight: var(--fw-300);
	text-wrap: pretty;
}

a {
	color: inherit;
	text-decoration-color: rgb(107, 107, 107);
}

a:where(:hover, :focus) {
	text-decoration-color: currentColor;
}

code {
	font-family: monospace;
}

/* Make images easier to work with */
img,
picture {
	max-width: 100%;
	display: block;
}

/* Remove all animations, transitions and smooth scroll for people that prefer not to see them */
@media (prefers-reduced-motion: reduce) {
	html:focus-within {
		scroll-behavior: auto;
	}

	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}



/* Utilities */

.fs-900 {
	font-size: clamp(var(--fs-700), 3.5vw, var(--fs-900));
}

.fs-800 {
	font-size: var(--fs-800);
}

.fs-700 {
	font-size: var(--fs-700);
}

.fs-400 {
	font-size: var(--fs-400);
}

.fw-regular {
	font-weight: var(--fw-400);
}

.fw-lignt {
	font-weight: var(--fw-300);
}

.fw-bold {
	font-weight: var(--fw-700);
}

.surface-neutral-100 {
	background-color: var(--clr-neutral-100);
}

.surface-neutral-200 {
	background-color: var(--clr-neutral-200);
}

.surface-neutral-400 {
	background-color: var(--clr-neutral-400);
}

.surface-neutral-900 {
	background-color: var(--clr-neutral-900);
}

.surface-primary-200 {
	background-color: var(--clr-primary-200);
}

.surface-primary-300 {
	background-color: var(--clr-primary-300);
}

.surface-primary-400 {
	background-color: var(--clr-primary-400);
}

.surface-primary-500 {
	background-color: var(--clr-primary-500);
}

.text-neutral-100 {
	color: var(--clr-neutral-100);
}

.text-neutral-200 {
	color: var(--clr-neutral-200);
}

.text-neutral-900 {
	color: var(--clr-neutral-900);
}

.text-primary-300 {
	color: var(--clr-primary-300);
}

.text-primary-400 {
	color: var(--clr-primary-400);
}

.text-primary-500 {
	color: var(--clr-primary-500);
}

.text-center {
	text-align: center;
}

.text-right {
	text-align: right;
}

.margin-auto {
	margin: auto;
}

.margin-block-auto {
	margin-block: auto;
}

.margin-inline-auto {
	margin-inline: auto;
}

.margin-top-auto {
	margin-top: auto;
}

.margin-bottom-auto {
	margin-bottom: auto;
}

.margin-right-auto {
	margin-right: auto;
}

.margin-left-auto {
	margin-left: auto;
}

.margin-top-sm {
	margin-top: var(--size-sm);
}

.margin-top-md {
	margin-top: var(--size-md);
}

.margin-top-lg {
	margin-top: var(--size-lg);
}

.margin-bottom-sm {
	margin-bottom: var(--size-sm);
}

.margin-bottom-md {
	margin-bottom: var(--size-md);
}

.margin-bottom-lg {
	margin-bottom: var(--size-lg);
}

.margin-block-sm {
	margin-block: var(--size-sm);
}

.margin-block-md {
	margin-block: var(--size-md);
}

.margin-block-lg {
	margin-block: var(--size-lg);
}

.padding-block-sm {
	padding-block: var(--size-sm);
}

.padding-block-md {
	padding-block: var(--size-md);
}

.padding-block-lg {
	padding-block: var(--size-lg);
}

.padding-block-auto {
	padding-block: auto;
}

.padding-inline-auto {
	padding-inline: auto;
}

.padding-inline-sm {
	padding-inline: var(--size-sm);
}

.padding-top-auto {
	padding-top: auto;
}

.padding-bottom-auto {
	padding-bottom: auto;
}

.padding-right-auto {
	padding-right: auto;
}

.padding-left-auto {
	padding-left: auto;
}

.padding-sm {
	padding: var(--size-sm);
}

.padding-md {
	padding: calc(var(--size-sm) * 2);
}

.border-right-thin {
	border-right: 1px solid rgb(197, 192, 182);
}

.border-bottom-md {
	border-bottom: 2px solid var(--clr-neutral-400);
}

:where(.flow > :not(:first-child)) {
	margin-top: var(--flow-space, var(--size-sm));
}

.flex {
	display: flex;
	flex-wrap: wrap;
	width: fit-content;
	gap: var(--gap, var(--size-sm));
}

.flex.right {
	justify-content: flex-end;
}

.flex-flow {
	display: flex;
	flex-direction: column;
	gap: var(--flow-space, var(--size-sm));
}

.flex-flow.rows {
	flex-direction: row;
}

.text-center .flex {
	margin: 0 auto;
}

.container {
	--max-width: 90rem;
	width: min(100% - 2rem, var(--max-width));
	margin-inline: auto;
}

.text-shadow {
	text-shadow: 2px 2px 4px rgb(0 0 0 / 0.25);
}

.breathing {
	font-family: 'Breathing Script';
	line-height: 1.75;
}

h2 .breathing {
    font-size: clamp(var(--fs-600), 6vw, 1.35em);
}

/* general styling 
--------------------------------------------------------*/

body {
	font-family: 'Roboto', sans-serif;
	font-size: var(--fs-400);
	line-height: 1.4;
	color: var(--clr-neutral-900);
	background-color: var(--clr-neutral-100);
}

[class*='grid-'] {
	display: grid;
	gap: 1rem;
}

.grid-even-columns {
	grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
}

#topbar {
	color: var(--clr-neutral-400);
}

#topbar>* {
    text-align: center;
}

#topbar.grid- {
    grid-template-columns: 1fr 1fr;
}

#topbar .social-icons {
    background-color: var(--clr-neutral-200);
    width: 100%;
    align-items: center;
    justify-content: center;
    padding-block: 0.75rem;
}

.social-icons img {
    height: 30px;
    aspect-ratio: 1 / 1;
    clip-path: circle(49% at 50% 50%);
}

.social-icons a:last-of-type {
    margin-right: var(--size-sm);
}

.social-icons img:hover {
    filter: drop-shadow(0 0 2px var(--clr-neutral-900)) invert(1);
    background-color: #fff;
}


#hero {
	grid-template-columns: 1fr 45%;
    margin: 0;
}

#hero .logo {
	/* width: calc(100% - 2rem); */
	gap: unset;
	grid-column: 2 / -1;
	grid-row: 1 / 2;
	background: #ffffff77;
	border-radius: 30px;
	backdrop-filter: blur(5px);
	box-shadow: 3px 3px 8px #00000033;
	place-items: center;
	margin: 1.25rem;
}

.logo.grid-stack img {
	padding: 1.25rem;
	object-fit: contain;
	aspect-ratio: unset;
}

.banner h2 {
    font-size: clamp(var(--fs-600), 5vw, var(--fs-800));
}

.banner h2 .breathing {
    font-size: clamp(var(--fs-600), 8vw, 2.25em);
}

.banner h2.breathing {
    font-size: clamp(var(--fs-700), 4.5vw, 3.75rem);
}

.checks {
	font-size: var(--fs-700);

	grid-template-columns: var(--size-lg) 1fr;
	grid-template-rows: 1fr 1fr 1fr;
	gap: var(--size-sm);
	padding-block: var(--size-sm);
}

.checks	img {
    width: 60px;
    aspect-ratio: 1 / 1;
    margin-block: auto;
}

.checks	p {
		margin-block: auto;
	}

#now-building,
#amenities {
	grid-template-columns: 1fr;
	grid-template-rows: 1fr;
	gap: var(--size-sm);
	border-bottom: 5px solid var(--clr-neutral-200);
}

#now-building {
 padding-bottom: var(--size-md);
}

#now-building>div:first-of-type img {
    height: 100%;
    width: 100%;
    object-fit: cover;
}

#amenities {
	--slider-duration: 30s;
    padding-bottom: var(--size-sm);
    border: none;
}

#amenities>div.slider {
	grid-row: 1 / 2;
    aspect-ratio: 784/523;
	background: url(images/slide1.jpg) no-repeat;
	background-size: cover;
	background-position: center;

	animation: slide var(--slider-duration) ease-in forwards infinite;
	/* animation-delay: 4s; */


}

@keyframes slide {
	5% {
		background: url(images/slide1.jpg) no-repeat;
		background-size: cover;
		background-position: center;
	}

	20% {
		background: url(images/pool-slide.jpg) no-repeat;
		background-size: cover;
		background-position: center right;
	}

	45% {
		background: url(images/hat-womanx2-slide.jpg) no-repeat;
		background-size: cover;
		background-position: center;
	}

	60% {
		background: url(images/fireplace-slide.jpg) no-repeat;
		background-size: cover;
		background-position: center left;
	}

	75% {
		background: url(images/fitness-slide-2.jpg) no-repeat;
		background-size: cover;
		background-position: center;
	}

	90% {
		background: url(images/fitness-slide-1.jpg) no-repeat;
		background-size: cover;
		background-position: center right;
	}

}

#amenities .checks img:nth-of-type(1) {
	animation: check-shadow1 var(--slider-duration) ease forwards infinite;
}

#amenities .checks img:nth-of-type(2) {
	animation: check-shadow2 var(--slider-duration) ease forwards infinite;
}

#amenities .checks img:nth-of-type(3) {
	animation: check-shadow3 var(--slider-duration) ease forwards infinite;
}

@keyframes check-shadow1 {
	15% {
		filter: none;
	}

	20% {
		filter: brightness(2.25);
	}

	50% {
		filter: brightness(2.25);
	}

	55% {
		filter: none;
	}
}

@keyframes check-shadow2 {
	50% {
		filter: none;
	}

	55% {
		filter: brightness(2.25);
	}

	65% {
		filter: brightness(2.25);

	}

	75% {
		filter: none;
	}
}

@keyframes check-shadow3 {
	65% {
		filter: none;
	}

	70% {
		filter: brightness(2.25);

	}

	90% {
		filter: brightness(2.25);

	}

	95% {
		filter: none;
	}
}

#amenities .checks p:last-of-type {
	grid-column: 1 / -1;
	padding-block: var(--size-sm) 0;
}

#about {
	padding-block: var(--size-md);
}

#about h2 {
	font-size: var(--fs-900);
	margin-left: var(--size-lg);
}

#about div {
	background-color: var(--clr-neutral-200);
	border-radius: 30px;
	padding: var(--size-md);
}

#about p:not(:last-of-type) {
	margin-bottom: var(--size-sm);
}

#communities h2 {
	line-height: unset;
}

#communities .banner {
	padding-block-end: 0;
	color: var(--clr-neutral-400)
}

#communities .logos {
    margin-top: 3em;
    display: grid;
    gap: 3em;
	grid-template-columns: repeat(auto-fit, minmax(min(350px, 100%), 1fr));
    place-items: center;
    text-align: center;
}

.logos>*{
    transition: all .3s ease;
}

.big-logo {
    max-width: 300px;
}

.images {
	justify-content: space-evenly;
	width: unset;
	border-bottom: 60px solid var(--clr-neutral-400);
}

.images div {
    margin-block: 20px -25px;
    max-width: 400px;
}

.images div img {
    width: 100%;
    aspect-ratio: 1;
    object-fit: cover;
}

footer {
	font-size: clamp(1rem, 2.5vw, var(--fs-400));
}

footer h2 {
	font-size: clamp(var(--fs-700), 4vw, var(--fs-900));
}

#copyright {
    background: var(--clr-neutral-400);
    color: #fff;
    place-items: center;
    padding-block: var(--size-sm);
}

#copyright .container {
    justify-content: space-between;
}

#copyright .social-icons img {
    filter: invert();
}

.separator-lg, .separator-sm {
    border: 0;
    border-bottom: 30px solid var(--clr-neutral-400);
    color: transparent;
}

.separator-lg.separator-lt,
.separator-sm.separator-lt
{
     border-color: var(--clr-neutral-200);   
}

/*--------------------------- */
/* Media Queries              */
/*--------------------------- */

@media (min-width: 62em) {
	.grid-auto-flow {
		grid-auto-flow: column;
		grid-auto-columns: 1fr;
	}

	#topbar h1 {
		text-align: unset;
	}

	#topbar .social-icons {
		justify-content: flex-end;
		padding-block: unset;
    }
	#topbar .social-icons img {
		height: 50px;
	}

	#now-building,
	#amenities {
		grid-template-columns: 40% 1fr;
		grid-template-rows: 1fr;
		gap: var(--size-md);
	}

    #now-building>div.flex-flow, 
    #amenities>div.flex-flow {
        gap: 0;
    }

	#amenities {
		aspect-ratio: unset;
        padding-block: var(--size-sm);
	}

	#now-building>div:first-of-type,
	#amenities>div.slider {
		grid-row: 1 / -1;
	}
    
    #now-building>div:first-of-type img,
	#amenities>div.slider img {
        height: 100%;
        width: 100%;
        object-fit: cover;
    }


	#amenities>div.slider {
		grid-row: unset;
        aspect-ratio: unset;
	}


	.checks {
		font-size: var(--fs-700);
		grid-template-columns: var(--size-lg) 1fr;
		grid-template-rows: 1fr 1fr 1fr;
		gap: var(--size-sm);
		padding-block: var(--size-md);
	}
    
    .checks img {
        width: 60px;
        aspect-ratio: 1 / 1;
        margin-block: auto;
    }

    
    .checks p {
        margin-block: auto;
    }
    
    .separator-lg {
        border-bottom: 60px solid var(--clr-neutral-400);
    }

    .logos:hover>*:not(:hover) {
        filter: blur(3px) opacity(.5);   
    }

} /* end Media queries */

.grid-stack {
	display: grid;
	place-items: center;
}

.grid-stack>* {
	grid-column: 1 / 2;
	grid-row: 1 / 2;
}

.grid-stack>img {
	aspect-ratio: 16 / 9;
	grid-column: 1 / -1;
	grid-row: 1 / -1;
	width: 100%;
	object-fit: cover;
	z-index: -1;
}