:root {
	--font-family-text: "Roboto", sans-serif;
	--font-family-title: "Tienne", serif;
	--max-page-width: 900px;
	--clr-primary-300: hsl(209deg, 100%, 36%);
	--clr-primary-400: hsl(209deg, 100%, 21%);
	--clr-primary-500: hsl(209deg, 100%, 11%);
	--clr-secondary-300: hsl(195deg, 54%, 80%);
	--clr-secondary-400: hsl(195deg, 54%, 64%);
	--clr-secondary-500: hsl(195deg, 54%, 40%);
	--clr-accent-400: hsl(37deg, 100%, 36%);
	--clr-neutral-101: white;
	--clr-neutral-100: hsl(0deg, 0%, 80%);
	--clr-neutral-200: hsl(0deg, 0%, 60%);
	--clr-neutral-300: hsl(0deg, 0%, 40%);
	--clr-neutral-400: hsl(0deg, 0%, 20%);
	--clr-neutral-500: hsl(0deg, 0%, 0%);
	--fs-200: 0.9rem;
	--fs-300: 1rem;
	--fs-400: 1.25rem;
	--fs-500: 1.563rem;
	--fs-600: 1.953rem;
	--fs-700: 2.441rem;
	--fs-800: 3.052rem;
	--header-bg-color: var(--clr-primary-400);
	--header-font-color: var(--clr-neutral-101);
	--header-highlight-color: var(--clr-secondary-300);
	--content-bg-color: var(--clr-neutral-101);
	--content-font-color: var(--clr-neutral-400);
	--content-h1-color: var(--clr-primary-500);
	--content-h2-color: var(--clr-primary-500);
	--content-h3-color: var(--clr-primary-500);
	--footer-bg-color: var(--clr-primary-500);
}

body {
	font-family: var(--font-main);
	margin: 0;
	color: var(--clr-neutral-400);
	line-height: 1.6;
}

/* Text styling */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-family-title);
  color: var(--content-h3-color);
}

h1 {
  font-size: var(--fs-700);
  font-weight: 700;
  margin: 0;
  margin-bottom: 0px;
  margin-bottom: 1rem;
  color: var(--content-h1-color);
}

@media (min-width: 768px) {
	h1 {
		font-size: var(--fs-800);
	}
}

h3 {
  font-size: var(--fs-600);
  font-weight: 600;
}

li {
	line-height: 2rem;
}

a {
	text-decoration: none;
	color: var(--clr-primary-300);
}

a:hover {
	color: var(--clr-secondary-400);
}


/* Header */
html {
	font-size: 16px;
}

body {
  margin: 0;
  font-family: sans-serif;
}


/* Hamburger button */
#menu-toggle, #menu-toggle-off {
  font-size: 1.5rem;
  background: none;
  border: none;
  color: white;
  cursor: pointer;
}


#main-nav{
	transform: translateY(-100%);
} 

#main-nav.open{
	transform: translateY(0);
}

/* Menu styles */
.navigation {
	display: flex;
	flex-flow: column;
	list-style: none;
	margin: 0;
	padding: 0;
	background: var(--clr-primary-400);
	position: fixed;
	height: 100vh;
	width: 100%;
	top: 0;
	left: 0;
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
	z-index: 100;
}

.dropdown-menu {
	display: none;
	background-color: var(--clr-primary-300);
	list-style: none;
	margin: 0;
	padding: 0;
}

.dropdown.open .dropdown-menu {
	display: block;
}

.navigation a {
	text-decoration: none;
	display: block;
	color: white;
	text-align: center;
	padding: 1rem;
	font-size: 1.5rem;
}

.navigation li a:hover {
	background: var(--clr-primary-300);
}

nav {
	/* max-width: 1400px; */
	background-color: var(--clr-primary-400);
	display: flex;
	justify-content: space-between;
	flex-flow: row nowrap;
	align-items: center;
	padding: 1rem 2rem;
	color: var(--clr-neutral-101);
}


#menu-toggle {
	font-size: 2rem;
	padding: 1rem;
}

nav figure {
	padding: 0;
	margin: 0;
}

nav img {
	height: 7rem;
}

@media (min-width: 1000px) {
	.navigation {
		position: static;
		flex-flow: row;
		justify-content: flex-end;
		gap: 1rem;
		height: 100%;
		overflow: visible;
	}

	.navigation a {
		display: inline;
		text-align: left;
		font-size: 1rem;
		padding: 0
	}

	.navigation li a:hover {
		background: none;
		color: var(--clr-secondary-300);
	}
	
	#menu-toggle {
		display: none;
	}
	
	#main-nav {
		transform: translateY(0);
	}

	nav img {
	height: 8rem;
	}

	nav ul li {
		position: relative;
	}

	.dropdown {
		position: relative;
	}

	.dropdown-menu {
		position: absolute;
		top: 100%;
		left: 0;
		width: 180px;
		display: none;
		z-index: 999;
	}

	.dropdown:hover .dropdown-menu {
		display: block;
	}

	.dropdown-menu li a {
		display: block;
		padding: 0.75rem 1rem;
		color: white;
	}
	.dropdown-menu li a:hover {
		background: var(--clr-secondary-400);
	}
} 

/*
nav ul li {
	position: relative;
}



@media (min-width: 768px) {
}

@media (min-width: 1024px) {
}
*/

/*********************/

/* Main Layouts */
main { max-width: 1100px;
	margin: 0.5rem auto;
	padding: 1.5rem; }

.tutor-spotlight .tutor-info {
	display: flex;
	flex-flow: column nowrap;
	align-items: center;
}

.tutor-info figure {
	height: 200px;
	width: 200px;
}

.tutor-info figure img {
	width: 100%;
	border-radius: 10px;
}

@media (min-width: 768px) {
	.tutor-spotlight .tutor-info {
		flex-flow: row nowrap;
	}
}


.team-list {
	display: flex;
	flex-flow: column nowrap;
	justify-content: space-around;
	align-items: center;
}

@media (min-width: 1100px) {
	.team-list {
		flex-flow: row nowrap;
	}
}


.teammember-page {
	position: relative;
}

.teammember-page figure {
	/* float: right; */
	margin: 0px auto;
	max-width: 300px;
}

.teammember-page figure img {
	width: 100%;
	border-radius: 10px;
}

@media (min-width: 768px) {
	.teammember-page figure {
		float: right;
		margin: 1rem;
		max-width: 33%;
}

}


.centered p {
	text-align: center;
}
	
/* Images */
figure figcaption {
	color: grey;
	font-size: 0.8rem;
}

/* Image scaling and crops */
.block-img {
	display: block;
	margin: 2rem auto;
	max-width: 70%;
}

.block-img img {
	width: 100%;
	border-radius: 10px;
}

/* Portrait crop for team members */
.team-bio-img {
  width: 250px;
  height: 300px;
  border-radius: 10px;
  object-fit: cover;
  object-position: center 20%;
}


.team-bio-img#sara_img {
	object-position: center 50%;
}


/* Home page circular image */
.home-profile-pic {
	max-width: 300px;
	aspect-ratio: 1;
	border-radius: 50%;
	object-fit: cover;
	width: 100%;
	object-position: center 20%; /* Shifted focus down to avoid cropping head */
	display: block;
	margin: 0 auto; /* Centered horizontally */
}

/* responsive menu */
.hidden {
	display: none;
}