* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;		
}


@font-face {
	font-family: "CrimsonText";
	src: url(../font/CrimsonText-Regular.ttf);
}

@font-face {
	font-family: "Montserrat";
	src: url(../font/Montserrat-VariableFont_wght.ttf);
}


body {
	background-color: var(--color-bg);
	font-family: "CrimsonText", serif;
}

/* ----------- Colors Start ----------- */

:root {
	--color-bg: #c9d6bb;
	--color-brand: #007c85;
	--color-brand-gray: #46777c;
	--color-h3: #dce7ce;
	--color-accent: #be3e2e;
	--color-text: #00200d;
}

.theme-microblog {
	--color-bg: #7e717e;
	--color-brand: #483297;
	--color-h3: #b1a8b1 ;
	--color-dark:#24222c;
	--color-text: #00200d;
}

.theme-art {
	--color-bg: #eee2d4;;
	--color-brand: #7a5d57;
	--color-brand-gray:#b38069;
	--color-text: #00200d;
	background-image: url(../images/recycled-paper.webp);
    background-size: 100% auto;
    background-repeat: repeat;
    background-attachment: fixed;
}

.theme-oc {
	--color-bg: #1e2429;
	--color-brand: #e34a0e;
	--color-brand-gray:#35aaee;
	--color-text: #00200d;
}

/* ----------- Colors End ----------- */

a{
	text-decoration: none;
	color: var(--color-brand);
}

a:hover{
	color: var(--color-accent);
}

/* ----------- Layout Starts ----------- */


.container-index {
	display: grid;
	grid-gap: 20px;
	grid-template: 
		"nav nav"
		"main sidebar2"
		/ 3fr 2fr
	;
	margin: 1% 5%;
}

.container-blog {
	display: grid;
	grid-gap: 20px;
	grid-template: 
	"nav main sidebar2"
	/1fr 4fr 2fr
	;
	margin: 1% 5%;
}

.container-gallery {
	display: grid;
	column-gap: 2%;
	grid-template: 
	"nav-gallery gallery"
	/1fr 7fr
	;
	margin: 20px;
	overflow: hidden;
	padding-bottom: 20px;
}

main{ grid-area: main; }
.sidebar2 { grid-area: sidebar2; }
nav{ grid-area: nav; }
.gallery { grid-area: gallery; }
.nav-gallery { grid-area: nav-gallery; }
		
main, .sidebar2{
	display: flex;
	flex-direction: column;
	gap: 20px;
	height: auto;
}

/* ----------- Nav Hell Starts ----------- */

nav{
	display: flex;
	justify-content: space-evenly;
	flex-shrink: 0;
	flex-wrap: wrap;
	gap: 10px;
}
	.nav-link{
		width: 15%;
	}
	.nav-link img{
		width: 80%;
	}

.nav-button{
	width: 100%;
	height: fit-content;
	background-color: var(--color-dark);
	border-radius: 10px;
	box-shadow:  rgba(9, 30, 66, 0.25) 0px 4px 8px -2px, rgba(9, 30, 66, 0.08) 0px 0px 0px 1px;
	padding: 10px 20px;
	text-align: center;
	font-family: "Montserrat", serif;
	font-weight: bold;
}
	.nav-button a{
		color: white;
	}

.nav-gallery {
	margin: 10px 0 10px 30px;
	font-family: "Montserrat", serif;
	font-weight: bold;
	font-size: 1.5em;
}
	.nav-gallery a{
		display: block;
		padding: 10px 0;
		-webkit-text-stroke: 5px white;
   		paint-order: stroke fill;
		filter: drop-shadow(3px 3px);
	}

/* ----------- Nav Hell Ends ----------- */

.main-card {
	background-color: white;
	border-radius: 10px;
	box-shadow:  rgba(9, 30, 66, 0.25) 0px 4px 8px -2px, rgba(9, 30, 66, 0.08) 0px 0px 0px 1px;
}

	.main-card	p {
		padding: 0 20px 0 20px;
	}

	.main-card h3 {
		background-color: var(--color-h3);
		padding: 10px 20px;
		}

	.main-card ul {
		padding: 0 20px 0 20px;
		margin-left: 1rem; 
		margin-bottom: 10px;
	}

	.main-card img {
		display: block;
   		margin: 0 auto;
	}

.scrollbox {
	height: 200px;
	overflow: scroll;
	scrollbar-color: var(--color-brand-gray) white;
	margin: 0 5px 5px 0;
}

/* ----------- Layout Ends ----------- */

h3 {
	color: var(--color-text);
	margin-bottom: 10px;
	border-radius: 8px 8px 0 0;
	font-family: "Montserrat", serif;
	font-weight: normal;
}

p{
	margin-bottom: 10px;
	margin-top: 10px;
	text-align: justify;
}

	.left p{
		text-align: left;
	}

img {
	object-fit: contain;
	margin: 0 auto;
}

.stamp {
    image-rendering: auto;
    image-rendering: crisp-edges;
    image-rendering: pixelated;
    image-rendering: -webkit-optimize-contrast;
	padding: 0 20px 0 20px;
}
	.stamp img {
		display: inline;
		width: auto;
		padding: 0;
		}

/* ----------- Gallery Ends ----------- */

.gallery {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    align-items: center;
}

.photo {
	width: auto; 
    margin: 0;
	height: fit-content;
	align-content: center;
	background-color: white;
	border-radius: 10px;
	box-shadow: rgba(0, 0, 0, 0.4) 0px 2px 4px, rgba(0, 0, 0, 0.3) 0px 7px 13px -3px, rgba(0, 0, 0, 0.2) 0px -3px 0px inset;
	overflow: hidden;
	padding: 5px 5px 10px 5px;
}
	.photo img{
		width: 100%;
	}

.gcard {
	break-inside: avoid;
    column-span: all;
    width: 100%;
	padding: 10px 20px;
	background-color: white;
	border-radius: 10px;
	box-shadow: rgba(0, 0, 0, 0.4) 0px 2px 4px, rgba(0, 0, 0, 0.3) 0px 7px 13px -3px, rgba(0, 0, 0, 0.2) 0px -3px 0px inset;
	grid-column: 1 / -1;
}
	.gcard h3 {
		background-color: var(--color-brand-gray);
		padding: 10px 20px;
		box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px, rgba(60, 64, 67, 0.15) 0px 2px 6px 2px;
		border-radius: 10px;
		font-weight: bold;
		color: white;
		}
	
	.gcard img{
		width: 50%;
	}

/* ----------- Gallery Ends ----------- */

.sub {
	font-family: "Montserrat", serif;
	text-align: center;
	font-style: italic;
}

footer {
	margin-top: 5%;
	text-align: center;
}

footer p {
	text-align: center;
}

.al {
	color: #35aaee;
}

.ch{
	color: #e34a0e;
}

/* ----------- Experimental ----------- */

#lightbox {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.8);
  justify-content: center;
  align-items: center;
  z-index: 999;
  cursor: pointer;
}

#lightbox img {
  max-width: 90%;
  max-height: 90vh;
  object-fit: contain;
  border-radius: 10px;
}

/* ----------- Mobile ----------- */

@media only screen and (max-width: 750px){
	.container-index {
		grid-template: 
			"nav"
			"main"
			"sidebar2"
		;
		grid-gap: 20px;
	}

	.container-blog {
		grid-template: 
			"nav"
			"sidebar2"
			"main"
		;
		grid-gap: 20px;
	}

	.nav-link {
		width: 30%;
	}
		.nav-link img{
			width: 100%;
		}

	header{
		font-size: 1.5em;
	}

	.container-gallery {
		grid-template: 
		"nav-gallery"
		"gallery"
	;
	grid-gap: 20px;
	margin: 1% 5%;
}
}

@media only screen and (max-width: 950px) {
    .gallery {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media only screen and (max-width: 500px) {
    .gallery {
        grid-template-columns: 1fr;
    }
}