*{
	-moz-osx-font-smoothing: grayscale;
	-webkit-font-smoothing: antialiased;
	box-sizing: border-box;
	font-family: "Inter",sans-serif;
    margin: 0;
    padding: 0;
}

*:focus-visible { 
	border-radius: 0.125rem;
	outline: 0.25rem solid black;
	outline-offset: 0.5rem;
	transition: none;
}

html {
	scroll-behavior: smooth;
	scrollbar-gutter: stable;
	font-size: 16px;
}

/* Hide the skip link off-screen by default */
.skip {
    background-color: yellow;
    color: black;
    cursor: pointer;
    position: absolute;
    top: -9999px; /* Off-screen */
    left: -9999px; /* Off-screen */
    width: 1px;
    height: 1px;
    padding: 0;
    margin: 0;
    overflow: hidden;
}

/* Make the skip link visible when focused */
.skip:focus {
    position: static; /* Reset positioning to normal flow */
    top: 0; /* Reset position */
    left: 0; /* Reset position */
    width: 100%; /* Ensure it takes full width */
    height: auto; /* Allow height to expand based on content */
    padding: 1rem; /* Add padding for readability */
    margin: 0 2rem; /* Margin to ensure it's not flush with the sides */
    background-color: yellow; /* Maintain visibility */
    color: black; /* Maintain text color */
}

body {
	background: white;
	color: black;
	overflow-x: hidden;	
	padding-top: 5rem;
}

/*NAVBAR*/

.nav {
	align-items: center;
	background-color: white;
	display: inline-flex;
	overflow: hidden;
	padding: 1.5rem 2rem;
	position: fixed;
	top: 0;
	transition: top 0.3s ease-out;
	width: 100%;
	z-index: 1000;
}

.nav ul {
	background-color: none;
	display: flex;
	font-size: 1.125rem;
	list-style: none;
	margin: auto;
}

.nav ul a {
	padding: 1rem;
}

.nav ul a:hover {
	text-decoration: underline;
}
  
.nav .icon {
	display: none;
	height: 2rem;
	width: 2rem;
}

/*MOBILE NAVBAR AND COLLAPSED MENU*/

@media screen and (max-width: 768px) {
	.nav a:not(:first-child) {
		display: none;
	}
	
	.nav ul {
		display: none;
	}

	.nav a.icon {
		align-self: center;
		display: block;
		filter: none;
		float: right;
		margin-right: 2rem;
		position: absolute;
		right: 0;
	}
	
	.nav.responsive {
		align-content: baseline;
		-webkit-box-shadow: 0 1px 1rem #969696;
 		-moz-box-shadow: 0 1px 1rem #969696;
 		box-shadow: 0 1px 1rem #969696;
		display: block;
		padding-bottom: 2rem;
		/*height: 50%;*/
	}

	.nav.responsive a.icon {
		filter: none;
		top: 1.5rem;
	}

	.nav.responsive ul {
		display: block;
		float: none;
		margin: 1rem 0;
		width: 100%;
	}

	.nav.responsive ul a {
		padding: 1rem 0;
		margin-right: 4rem;
	}

	.nav.responsive a {
		align-content: center;
		display: block;
		float: none;
		text-align: left;
	}

	.nav.responsive .logo {
		margin-right: 4rem;
	}
}

/*MAIN*/

main {
	max-width: 80rem; margin: auto;
}

section {
	display: grid;
	gap: 2rem;
	padding: 1.5rem 2rem;
}

section.hero {
	padding-bottom: 0;
}

section.tall {
	margin: 6rem 0;
}

section:last-child {
    margin-bottom: 8rem;
}

section ul {
	display: grid;
	gap: 2rem;
	grid-template-columns: repeat(1, 1fr);
}

section ul li {
	/*padding: 0.5rem 0;*/
	font-size: 1.5rem;
	/*border-bottom: dashed 1px black;*/
	/*list-style: none;*/
	margin-left: 2rem;
	color: blue;
}

section ul li:last-child {
    /*border: none;*/
	margin-bottom: 2rem;
}

/*FONT STYLES*/

h1 {
	font-size: 2.5rem;
	font-weight: 400;
	letter-spacing: -0.01rem;
	line-height: 1.2;
	max-width: 64rem;
}

h1.display {
	padding: 0 0 1em;	
}

h2 {
	font-size: 1.5rem;
	font-weight: 400;
	letter-spacing: -0.01rem;
}

h3 {
	font-size: 1.5rem;
	font-weight: 400;
	padding-bottom: 1rem;
	border-bottom: solid 1px black;
}

h4 {
	font-size: 1.25rem;
	font-weight: 600;
	padding-bottom: 1rem;
	margin-top: 1rem;
}

p {
	line-height: 1.5;
	max-width: 40rem;
	margin-bottom: 0.5rem;
}

p.note {
	font-size: 1rem;
	min-width: 6rem;
}

.logo {
	color: black;
	font-size: 2rem;
	font-weight: 500;
	line-height: 2rem;
	height: 2rem;
}

a {
	color: black;
	font-size: 1.125rem;
	text-decoration: none;
}

.secondary {
	color: #969696;
}

/*ANIMATE CSS*/

.hidden {
    opacity: 0;
    transform: translateY(8rem);
    transition: opacity 1.2s ease-out, transform 0.8s ease-out !important;
}

.hidden.show {
    opacity: 1;
    transform: translateY(0);
}

.hidden.animated {
    opacity: 1;
}

/*TEXT TABLE*/

dl {
	display: grid;
	line-height: 1.5;
	margin-top: 6rem;
}

dt {
	font-size: 2rem;
	font-weight: 400;
}

dd {
	color: #969696;
	margin-bottom: 2rem;
	font-size: 1.5rem;
}

/*BUTTONS*/

.button {
	align-items: center;
	background-color: black;
	border-radius: 4rem;
	border: solid 1px black;
	color: white;
	cursor: pointer;
	display: inline-flex;
	justify-content: center; /* center the content horizontally */
	max-height: 3.5rem;
	padding: 1.25rem 2rem;
	text-align: center;
	text-decoration: none;
	transition: .3s ease-in-out;
	white-space: nowrap;
	width: fit-content;
	font-size: 1.125rem;
	text-decoration: none;
}

.small {
	padding: 0.75rem 1rem;
	max-height: 3rem;
}

.grey {
	background-color: #D9D9D9;
	border: solid 1px #D9D9D9;
	color: black;
}

.alt {
	background-color: white;
	border-color: black;
	color: black;
}

.button:hover {
  background-color: white;
  border: solid 1px black;
  color: black;
  transition: .3s ease-in-out;
}

.button:focus {
	transition: none;
}

.icon{
	filter: invert(100%);
	height: 1.5rem;
	margin-left: 0.5rem;
	position: relative;
	transition: .3s ease-in-out;
}

.arrow{
	background: url('arrow.svg');
	background-size: contain;
	display: block;
	filter: invert();
	height: 1.5rem;
	transform: rotate(45deg);
    width: 1.5rem;
}

a.alt .icon, a.grey .icon {
	filter: none;
	transition: .3s ease-in-out;
}

a:hover .icon{
    filter: none;
	rotate: 45deg;
	transition-delay: .1s;
}

.menu {
    background: url('menu.svg');
	background-size: contain;
    display: block;
	filter: none;
	height: 2rem;
	width: 2rem;
}

/*CARDS*/

.cards {
	display: grid;
	gap: 2rem;
	margin: 0 auto;
	width: 100%;
}

.home :first-child {
	grid-column: 1 / -1;
}

.reverse :last-child {
	grid-column: 1 / -1;
}

.card {
	color: black;
	overflow: hidden;
}

.card:hover {
	cursor: pointer;
	transition: .5s ease-in-out;
}

.card .media {
	background-color: #D9D9D9;
	border: solid 1px #D9D9D9;
	border-radius: 1.5rem;
	height: 20rem;
	overflow: hidden;
	position: relative;
}

.card img {
	/*transform-origin: 50% 100%;*/
	object-fit: cover;
	overflow: hidden;
  	transition: transform 2.5s, filter .5s ease-out;
	height: 100%;
	max-height: none;
}

.card .img-wrap {
	bottom: 0 !important;
	/*height:max-content;*/
	max-height: 100%;
	object-fit: contain;
	overflow: hidden;
	padding: 2.5rem 2.5rem 0;
	position: absolute;
  	transition: transform 1s, filter 1s ease-in-out;
}

.card:hover img {
	overflow: hidden;
	transform: scale(1.1);
	transition-delay: .25s;
}

.card .text {
	padding: 1rem 0;
}

.card:hover p {
	text-decoration: underline;
	transition: transform 1s, filter 1s ease-in-out;
	transition-delay: .25s;
}

.card p {
	font-size: 1.5rem;	
}

.card .note {
	color: #969696;
	font-size: 1rem;
	margin: 0
}

/*CARD FLOATING BUTTON*/

/* Floating Icon Button Styles */
.card-btn {
	position: absolute;
	bottom: 2rem; /* Distance from the bottom of the card */
	left: 2rem;   /* Distance from the left side of the card */
	background-color: rgba(0, 0, 0, 0.5); /* Semi-transparent background */
	color: white; /* Icon color */
	border: none; /* Remove default button borders */
	border-radius: 2rem; /* Circular button */
	padding: 0.5rem;
	cursor: pointer;
	background-image: url("arrow.svg");
	background-repeat: no-repeat;
	background-size: 2rem 2rem;
	background-position:bottom;
	content: "";
	height: 3rem;
	width: 2rem;
	padding: 1rem;
	filter: invert();
	
	width: 2rem;
	/*transition: background-color 0.3s ease;*/
	rotate: 45deg;
	z-index: 10; /* Make sure the button is above the image */
  }
  
  /* Hover effect on button */
  .card:hover .card-btn {
	background-color: white;
	filter: none;
	/*transition: .5s ease-in-out;*/
	height: 3rem;
	width: 3rem;
	rotate: 90deg;
	border-radius: 50%; /* Circular button */
	background-position: center;
  }
  

/*IMAGE*/

img {
	border-radius: 0.5rem;
	object-fit: cover;
	width: 100%;
}

img.short {
	max-height: 24rem;
}

/*MINI IMAGES*/

.thumbnails {
	display: grid;
	gap: 1rem;
	grid-template-columns: repeat(2, 1fr);
	margin: 0 auto;
	width: 100%;
}

.thumbnail {
	background-color: #D9D9D9;
	border-radius: 0.5rem;
	height: 8rem;
	overflow: hidden;
	padding: 1rem;
}

.thumbnail img {
	border-radius: 0.25rem;
	object-fit: contain;
	height: 100%;
}

/*ACCORDION*/

.accordion {
	align-content: center;
	background: none;
	border: none;
	color: black;
	cursor: pointer;
	display: block;
	justify-content:space-between;
	min-height: 6rem;
	padding: 0;
	position: relative;
	text-align: left;
	padding-right: 2rem;
	width: 100%;
}
  
.content {
	border-bottom: solid 1px #969696;
	max-height: 0;
	overflow: hidden; /* Hidden by default */
	transition: max-height 0.3s ease-out;
}

.content p {
	margin: 0;
	padding: 1rem 0;
}

.accordion:after {
    background-image: url("arrow.svg");
    background-repeat: no-repeat;
    background-size: 100% 100%;
	content: "";
    height: 2rem;
    position: absolute;
	right: 0;
    top: 2rem;
	transform-origin: 1rem 50%;
	transform: rotate(-180deg);
    transition: 0.3s transform ease-out;
    width: 2rem;
}
  
.active:after {
	transform: rotate(0deg);
	border-bottom: none;
}

/*FORMS AND INPUTS*/

/*form {
  background-color: white;
}*/

fieldset {
	border: none;
}

legend {
	font-size: 1.5rem;
	font-weight: 400;
	letter-spacing: -0.01rem;
	margin-bottom: 1rem;
}

input, textarea {
	border-radius: 0.25rem;
	border: solid 1px #969696;
	box-sizing: border-box;
	font-size: 1rem;
	line-height: 1.5;
	margin: 0.125rem 0 1rem;
	min-height: 2.5rem;
	min-width: 100%;
	padding: 0.5rem 1rem;
}

textarea {
	min-height: 6rem;
}

/*BACK TO TOP BUTTON*/

#scrollTop {
	box-shadow: 0 0 64px rgba(0, 0, 0, 0.2); /* Optional: Adds a shadow */
	align-items: center; /* Center the arrow vertically */
	border-radius: 50%; /* Makes the button round */
	border: none;
	bottom: 2rem; /* Place the button at the bottom of the page */
	display: none; /* Hidden by default */
	height: 4rem;
	justify-content: center; /* Center the arrow horizontally */
	max-height: none;
	opacity: 0; /* Initially invisible */
	position: fixed; /* Fixed/sticky position */
	right: 1rem; /* Place the button 1rem from the right */
	transform: translateY(100%); /* Start with the button off-screen */
	transition: transform 0.3s ease, opacity 0.3s ease; /* Animation for slide-in and fade */
	width: 4rem;
	z-index: 901; /* Make sure it does not overlap */
  }
  
  #scrollTop.show {
	opacity: 1; /* Make the button visible */
	transform: translateY(0); /* Move the button into view */
  }
  
  #scrollTop:hover {
	background-color: #969696;
	transition: 0.3s ease-in-out;
	scale: 1.1;
  }
  
  #scrollTop:before {
	background-image: url("arrow.svg");
	background-repeat: no-repeat;
	background-size: 100% 100%;
	content: "";
	height: 2rem;
	left: 50%; /* Center the icon horizontally */
	position: absolute; /* Fixed position inside the button */
	top: 50%; /* Center the icon vertically */
	transform-origin: 1rem 50%;
	transform: translate(-50%, -50%); /* Adjust for exact centering */
	transition: 0.3s transform ease-in-out;
	width: 2rem;	
  }  

/*SITE FOOTER*/

footer, .row {
	background-color: black;
	color: white;
	display: grid;
	gap: 2rem;
	grid-template-columns: repeat(2, 1fr);
	margin: 0 auto;
	padding: 1.5rem 2rem;
	width: 100%;
}

footer h1 {
	margin-bottom: 1em;
}

footer :first-child {
	grid-column: 3 / 1;
}

footer :last-of-type {
	grid-column: 1 / -1;
}

footer :focus-visible { 
	border-radius: 0.125rem;
	outline: 3px solid white;
	outline-offset: 0.25rem;
}

footer p.note {
	align-content: center;
	min-height: 3rem;
}

.footer-links {
	line-height: 2.5em;
}

.footer-links li {
	display: block;
}

.footer-links a {
	align-items: center;
	color: white;
	display: flex;
	gap: 0.5rem;
	min-height: 3rem;
}

.footer-links a:active,
.footer-links a:focus,
.footer-links a:hover {
	text-decoration: underline;
}

.copyright {
	color: #969696;
	font-size: 0.875rem;
	margin-top: 6rem;
	vertical-align: bottom;
}

/*MEDIA QUERIES*/

@media (min-width: 768px) {	
	.nav {
		padding: 1rem 3.5rem;
	}
	section, footer {
		gap: 2rem;
		padding: 2.75rem 3.5rem;
	}
	.inline {
		display: inline-flex;
	}
	section.tall {
		margin: 4rem 0;
	}
	.cards {
		gap: 2rem;
		grid-template-columns: repeat(2, 1fr);
	}
	.cards.home :first-child .media {
		height: 32rem;
	}
	
	.thumbnails {
		grid-template-columns: repeat(3, 1fr);
	}
	h1 {
		font-size: 3.5rem;
	}
	h2 {
		font-size: 2rem;
	}
	h3 {
		font-size: 1.75rem;
	}
	p {
		font-size: 1.125rem;
	}
	section ul {
		display: grid;
		gap: 2rem;
		grid-template-columns: repeat(2, 1fr);
	}
	#scrollTop {
		bottom: 3rem; /* Place the button at the bottom of the page */
		right: 2.5rem; /* Place the button 30px from the right */
	}
	footer {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (min-width: 1080px) {
	.nav {
		padding: 1rem 5rem;
	}
	section, footer {
		gap: 2rem;
		padding: 4rem 5rem;
	}
	.cards {
		/*grid-template-columns: repeat(3, 1fr);*/
		gap: 3rem;
	}
	.thumbnails {
		grid-template-columns: repeat(5, 1fr);
	}
	h2 {
		padding-right: 4rem;
	}
	p {
		font-size: 1.25rem;
	}
	#scrollTop {
		bottom: 4rem; /* Place the button at the bottom of the page */
		right: 4rem; /* Place the button 30px from the right */
	}
	section ul {
		display: grid;
		gap: 2rem;
		grid-template-columns: repeat(3, 1fr);
	}
	footer {
		grid-template-columns: repeat(4, 1fr);
	}
	.footer-links a {
		margin-left: 8rem;
	}
}