@keyframes fadeIn {
	0% {
		opacity: 0
	}

	to {
		opacity: 1
	}
}

:root {
	--deepred: #900;
	--iconsize: clamp(0.82rem, 2.5vw, 1.1em);
	--text-md: clamp(1rem, 2.5vw, 1.3em);
	--text-lg: clamp(1.4rem, 8vw, 2rem);
	--text-xlg: clamp(2rem, 16vw, 4rem)
}

html {
	font-size: 16px
}

h4,p {
	font-size: var(--text-md);
	line-height: 1.6;
	color: #000
}

h4 {
	color: #900
}

img {
	max-width: 70%;
	height: auto
}

.image-lightbox,h1 {
	position: fixed;
	width: 100%
}

.image-lightbox {
	top: 0;
	left: 0;
	height: 100%;
	background: rgba(0,0,0,.8);
	display: none;
	align-items: center;
	justify-content: center;
	z-index: 1000
}

.image-lightbox img {
	max-width: 90%;
	max-height: 90%;
	border-radius: 10px;
	box-shadow: 0 4px 10px rgba(255,255,255,.3)
}

.image-lightbox.active {
	display: flex;
	animation: fadeIn .3s ease-in-out
}

.image-lightbox .close-btn {
	position: absolute;
	top: 20px;
	right: 20px;
	font-size: 24px;
	color: #fff;
	cursor: pointer;
	background: rgba(0,0,0,.5);
	padding: 5px 10px;
	border-radius: 5px
}

.click-to-enlarge {
	cursor: pointer;
	transition: transform .2s
}

.click-to-enlarge:hover {
	transform: scale(1.05)
}

#table {
	color: #31008f;
	font-size: 18px
}

h1 {
	font-family: "Trattatello";
	font-size: var(--text-xlg);
	margin: 0;
	text-align: center;
	top: 64px;
	left: 50%;
	transform: translateX(-50%);
	z-index: -10;
	transition: opacity .5s ease-out;
	max-width: 84%;
	line-height: 1.1
}

h1,h2,h3 {
	color: var(--deepred)
}

h2 {
	font-size: var(--text-lg)
}

h3 {
	font-size: clamp(1.2rem,6vw,1.7rem)
}

body,header {
	display: flex;
	flex-direction: column
}

body {
	font-family: "Cuatro",sans-serif;
	margin: 0;
	padding: 0;
	align-items: center;
	height: 100%;
	overflow-x: hidden
}

header {
	background-color: rgba(255,255,255,.92);
	box-shadow: 0 2px 5px rgba(0,0,0,.1);
	font-size: var(--iconsize);
	padding: 8px 20px;
	width: 82%;
	position: fixed;
	border-radius: 12px;
	top: 0;
	z-index: 1000
}

a:not(.no-resize) {
	font-size: clamp(1rem,2.5vw,1.3em)
}

.nav-list {
	list-style: none;
	display: flex;
	justify-content: space-around;
	padding: 0;
	margin: 0
}

.nav-list li a {
	text-decoration: none;
	color: #000;
	font-weight: 400;
	transition: color .3s
}

.nav-list li a:hover {
	font-weight: 700;
	color: #0063ff
}

.about-link::before,.homes-link::before,.journal-link::before,.sources-link::before {
	display: inline-block;
	width: var(--iconsize);
	height: var(--iconsize);
	background-size: contain;
	background-position: center;
	margin-right: 4px;
	vertical-align: bottom
}

.homes-link::before {
	content: "";
	background-image: url(18.svg)
}

.journal-link::before {
	content: "";
	background-image: url(pen.svg)
}

.sources-link::before {
	content: "";
	background-image: url(data.svg)
}

.about-link::before {
	content: "";
	background-image: url(users.svg)
}

.container {
	width: 80%;
	padding: .5rem clamp(20px,4vw,30px);
	background-color: #f6f6f6;
	border-radius: 15px;
	box-shadow: 0 4px 10px rgba(0,0,0,.1),0 8px 20px rgba(0,0,0,.05);
	text-align: left;
	margin-top: 150px;
	margin-bottom: 20px
}

/* Dark Mode Toggle */
.dark-mode {
	background-color: rgba(26,26,26,.96);
	color: #e6e6e6;
}

.dark-mode header {
	background-color: #1a1a1a;
	box-shadow: 0 2px 5px rgba(118, 118, 118, 0.1), 0 8px 20px rgba(151, 151, 151, 0.05);
}

.dark-mode .container {
	background-color: #1a1a1a;
	box-shadow: 0 4px 10px rgba(197,197,197,.1);
}

.dark-mode h1, .dark-mode h2, .dark-mode h3, .dark-mode h4 {
	color: #e62444;
}

.dark-mode p, .dark-mode a, .dark-mode .nav-list li a {
	color: #e6e6e6;
}

.dark-mode .nav-list li a:hover {
	color: #428bff;
}

.dark-mode .homes-link::before {
	content: "";
	background-image: url(white-house.svg);
}

.dark-mode .journal-link::before {
	content: "";
	background-image: url(whitepen.svg);
}

.dark-mode .sources-link::before {
	content: "";
	background-image: url(white-box.svg);
}

.dark-mode .about-link::before {
	content: "";
	background-image: url(whiteusers.svg);
}

.dark-mode #table {
	color: #b394f7;
}

/* Dark Mode Toggle Button */
.toggle-dark-mode {
	font-size: 24px;
	top: 70px;
	right:10px;
	position: fixed;
	background-color: #4b4b4b;
	color: #f6f6f6;
	border: none;
	border-radius: 8px;
	cursor: pointer;
	box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
	transition: background-color 0.3s, color 0.3s;
}

.toggle-dark-mode:hover {
	background-color: #646464;
	color: #1f1f1f;
}

@media (max-width:620px) {
	.container {
		margin-bottom: 100px;
		max-width: 84%
	}

	img {
		max-width: 100%;
		height: auto
	}

	a.index_text i,p {
		font-size: 18px
	}

	h1 {
		font-size: clamp(1.4rem,18vw,3.6rem);
		top: 26px;
		line-height: 1
	}

.toggle-dark-mode {top:26px; right: 10px;}

	header {
		top: auto;
		bottom: 0;
		padding: 12px;
		width: 100%;
		background-color: #fff;
		font-size: .8rem;
		box-shadow: 0-2px 5px rgba(0,0,0,.1);
		transition: all .4s linear
	}

	header.shrink {
		padding: 0;
		font-size: 0
	}

	.about-link::before,.homes-link::before,.journal-link::before,.sources-link::before {
		transition: all .2s linear;
		width: 1.6rem;
		height: 1.6rem
	}

	header.shrink .about-link::before,header.shrink .homes-link::before,header.shrink .journal-link::before,header.shrink .sources-link::before {
		width: 0;
		height: 0
	}

	.nav-list a {
		display: flex;
		flex-direction: column;
		align-items: center;
		text-decoration: none;
		color: inherit;
		font-size: inherit
	}
}