/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
   HTML content. To learn how to do something, just try searching Google for questions like
   "how to change link color." */

body {
	color: #1a1a19;
	background-color: #f9f4e9;
	font-family: "JetBrains Mono", monospace;
	margin: 0;
}

/* TEXT STYLES */

h1 {
	/* font-family: "Darumadrop One", sans-serif; */
	font-family: "Jersey 10", sans-serif;
	font-size: 80px;
	line-height: 75%;
	margin: 0;
	margin-bottom: -10px;
}

h2 {
	/* font-family: "Noto Sans", sans-serif; */
	font-size: 28px;
	/* font-style: italic;*/
	font-weight: 600;
	color: #e7ab18;
	/*opacity: 80%;*/
}

p {
	/*font-family: "Noto Sans", sans-serif;
	font-size: 20px;*/
	/* font-family: "DotGothic16", sans-serif;
	font-size: 16px;
	letter-spacing: 0.05em;
	line-height: 1.5em; */
	font-size: 16px;
	line-height: 1.5em;
}

hr {
	border: none;
	border-top: 3px dotted #e7ab18;
	height: 1px;
	width: 30%;
	margin-top: 50px;
	margin-bottom: 50px;
}

blockquote {
	padding-left: 30px;
	margin: 30px;
	border-left: dotted 3px;
	color: #e7ab18;
}

mark {
	background-color: #fdd35b;
	border-radius: 5px;
	padding-left: 5px;
	padding-right: 5px;
}

a {
	/* color: #7dc9c7; */
	color: #62b3ba;
	font-weight: bold;
}

.intl {
	font-family: "DotGothic16", sans-serif;
	font-weight: 800;
	font-size: 75%;
}

.caption {
	font-size: 14px;
	text-align: center;
}

.description {
	width: 90%;
}

/* NAV BAR */

.logo {
	max-height: 90px;
	float: left;
	margin-top: -10px;
}

nav {
	padding: 40px;
}

nav ul {
	list-style: none;
	/* font-family: "Noto Sans", sans-serif; */
	font-size: 20px;
	display: flex;
	gap: 65px;
	justify-content: flex-end;
}

nav ul li:hover {
	background-image: linear-gradient(currentColor, currentColor);
	background-repeat: repeat-x;
	background-size: 1px 1px;
	background-position: 0px calc(105% - 0.1em);
}

/* MAIN */

main {
	padding: 40px;
}

.home {
	max-width: 60%;
	margin: 0 auto;
	margin-bottom: 30px;
	margin-top: -40px;
display: flex;
}

.home-buttons {
display: block;
text-align: center;
margin-bottom: 50px;
}

/* PROJECTS FLEXBOX */

.projects {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: center;
	width: 100%;
	height: auto;
	min-height: 400px;

	row-gap: 1.5em;
	margin-bottom: 50px;
}

.project-full {
	border-radius: 20px;
	width: 100%;
}

.project-half {
	border-radius: 20px;
	width: 49%;
}

.project-thumb {
	border-radius: 20px;
	max-height: 400px;
	display: block;
	margin: 0 auto;
}

.project-quarter {
	width: 22%;
	height: auto;
}

/* for the work page */
.projects-grid {
	display: flex;
	flex-wrap: wrap;
	margin: 0 auto;
	width: 90%;
justify-content: center;
gap: 1.5em;
}

.project-quarter:hover {
	rotate: 4deg;
	transition: .2s;
	cursor: pointer;
}

/* FRIENDS PAGE */

.friends-container {
	display: flex;
	width: 100%;
	flex-wrap: wrap;
	justify-content: center;
	gap: 30px;
	overflow: hidden;
}

.friends-card {
	background-color: #e2d6c8;
	max-width: 15%;
	min-width: 230px;
	border-radius: 30px;
	justify-content: center;
	text-align: center;
	padding: 15px;
	color: inherit;
	text-decoration: inherit;
	display: none;
}

.avatar {
	width: 150px;
	border-radius: 100px;
	margin: 20px auto 0 auto;
	display: block;
}

.friends-card h3 {
	font-family: "Jersey 10", sans-serif;
	font-size: 40px;
	line-height: 80%;
	font-weight: 100;
	margin-top: 20px;
	margin-bottom: 0px;
}

.friends-card p {
	text-transform: uppercase;
	font-size: 15px;
	font-weight: 400;
	margin-top: 10px;
	margin-bottom: 20px;
}

footer {
	padding: 40px;
	background-color: #1a1a19;
	color: #f9f4e9;
}

/* SLIDESHOW */

.slideshow-container {
	width: 100%;
	text-align: center;
}

.slideshow {
	max-width: 70%;
	margin: 0 auto;
}

.arrow-left,
.arrow-right,
.slideshow-buttons {
	cursor: pointer;
	font-size: 24px;
}

.arrow-left {
	float: left;
}

.arrow-right {
	float: right;
}

.slideshow-buttons {
	height: 13px;
	width: 13px;
	padding: 0;
	display: inline-block;
	border: 1px solid #1a1a19;
	border-radius: 50%;
	text-align: center;
	margin-top: 20px;
}

.slideshow-buttons-active {
	background-color: #1a1a19;
}

.slideshow-buttons:hover {
	background-color: #1a1a19;
}

/* FILTER */

/* The "show" class is added to the filtered elements */
.show {
	display: block;
}

#myBtnContainer {
	width: 100%;
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	justify-content: center;
	margin-bottom: 40px;
}

button {
	border: none;
	border-radius: 10px;
	outline: #e7ab18;
	padding: 12px 16px;
	font-family: "JetBrains Mono", monospace;
	font-size: 14px;
	background-color: #e2d6c885;
	cursor: pointer;
	min-width: 12.5%;
}

button:hover {
	background-color: #e7ab18;
	color: white;
}

button.active {
	background-color: #e7ab18;
	color: white;
}


/* LIGHTBOX */

/* Create four equal columns that floats next to eachother */

#gallery {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
	gap: 1%;
}

.illo-page {
	width: 100%;
}

/* The Modal (background) */
.modal {
  display: none;
  position: fixed;
  z-index: 1;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: rgba(255, 255, 255, 0.5);
  backdrop-filter: blur(2px);
}

.mySlides img {
width: auto;
min-width: 75%;
  height: 75vh;
}

/* Modal Content */
.modal-content {
 position: inherit;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

/* The Close Button */
.close {
  color: #1a1a19;
  position: absolute;
  top: 10px;
  right: 25px;
  font-size: 50px;
  font-weight: bold;
}

.close:hover,
.close:focus {
  color: #999;
  text-decoration: none;
  cursor: pointer;
}

/* Hide the slides by default */
.mySlides {
  display: none;
height: 100%;
}