/* Importing fonts */
@import url('https://fonts.googleapis.com/css2?family=Angkor&family=Lusitana:wght@400;700&family=Roboto:wght@400;700;900&display=swap');

/* General styles */
body {
    background-color: #121212;
    color: #FFFFFF;
    font-family: 'Roboto', sans-serif;
    margin: 0;
    padding: 0;
}

.container {
	width: 1200px;
	margin: 0 auto;
}

.header {
    position: fixed;
	top: 0;
	width: 100%;
	height: 100px;
	background-color: #585858;
	display: block;
    padding: 10px 0px;
    text-align: center;
	z-index: 1000;
}

.header h1 {
    font-family: 'Angkor', cursive;
    color: #FFFFFF;
    margin: 0;
  	letter-spacing: 2px;
}

.header-nav ul {
    list-style: none;
    padding: 0;
    margin: 10px 0 10px 0;
    display: flex;
    justify-content: center;
    gap: 20px;
}

.header-nav ul li {
    display: inline;
}

.header-nav ul li a {
    text-decoration: none;
    font-family: 'Roboto', sans-serif;
    font-weight: 600;
    background-color: #F12727;
    color: #FFFFFF;
    padding: 8px 16px;
    border-radius: 5px;
	box-shadow: 0 4px 5px rgba(0, 0, 8, 0.2);
}

.header-nav ul li a:hover {
    background-color: #D07171;
}

.header-main-sm {
	height: 0%;
	display: block;
	align-items: center;
}

.intro, .gallery-preview, .contact-info {
    text-align: center;
    padding: 30px 20px;
}

.intro {
	margin-top: 100px;
}

.intro a {
	color: #F12727;
	text-decoration: underline;
}

.intro a:hover {
	color: #D07171;
}

.intro a:active {
	color: #FFFFFF;
}

h2 {
    font-family: 'Angkor', serif;
    font-size: 250%;
    color: #F12727;
}

p {
	font-family: 'Lusitana', serif;
	font-size: 20px;
	margin: 30px 0px;
	padding: 0 150px;
	color: #FFFFFF;
	text-align: auto;
}

.gallery-container {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 30px;
    margin-top: 20px;
}

.art-piece-home {
    background-color: #444444;
    padding: 15px;
    border-radius: 15px;
    width: 200px;
	height: 250px;
    text-align: center;
}

.art-piece-home img {
    max-width: 100%;
	max-height: 75%;
    border-radius: 5px;
}

.art-piece-home h3 {
    font-family: 'Lusitana', serif;
    color: #FFFFFF;
}

.button {
    display: inline-block;
    background-color: #F12727;
    color: #FFFFFF;
    padding: 10px 20px;
    text-decoration: none;
    border-radius: 5px;
    font-weight: bold;
}

.button:hover {
    background-color: #D07171;
}

/* NAVIGATION ACTIVE HIGHLIGHT */

/*.header-nav .active {
    background-color: #D07171;
}*/

footer {
    text-align: center;
    padding: 20px;
    background-color: #585858;
    margin-top: 40px;
}

footer p {
	font-family: 'Roboto', sans-serif;
}

/* ABOUT PAGE */

.about-intro {
    text-align: center;
    padding: 30px 20px;
	margin-top: 100px;
}

.about-boxes {
    text-align: center;
    padding: 0px 0 30px;
}

.about-word-box-line1, .about-word-box-line2 {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 50px;
    margin-top: 50px;
}

.about-image img {
    max-width: 100%;
    border-radius: 30px;
    padding: 15px;
    width: 250px;
	margin-left: auto;
	margin-right: auto;
}

.about-word-box {
    background-color: #444444;
    padding: 15px;
    border-radius: 10px;
    width: 400px;
	height: 270px;
    text-align: center;
}

.about-word-box h3 {
    font-family: 'Lusitana', serif;
    color: #FFFFFF;
	font-size: 18px;
	text-align: left;
}

.about-word-box h4 {
    font-family: 'Lusitana', serif;
    color: #FC3333;
	font-size: 20px;
	text-align: left;
}

/* GALLERY PAGE */

.gallery-content {
	text-align: center;
    padding: 30px 20px;
	margin-top: 100px;
}

.art-piece {
    background-color: #444444;
    padding: 15px;
    border-radius: 15px;
    width: 200px;
	height: 250px;
    text-align: center;
}

.art-piece:hover {
    background-color: #737373;
	cursor: pointer;
}

.art-piece img {
    max-width: 100%;
	max-height: 75%;
    border-radius: 5px;
}

.art-piece h3 {
    font-family: 'Lusitana', serif;
    color: #FFFFFF;
}

/* CONTACT PAGE */

.contact-page-info {
    text-align: center;
    padding: 30px 20px;
	margin-top: 100px;
}

.contact-page-info img {
	width: 7%;
	height: 7%;
    border-radius: 0;
	margin: 0 15px;
}

.contact-page-info a {
	font-family: 'Roboto', sans-serif;
	font-weight: bold;
    color: #F12727;
	font-size: 20px;
	text-align: center;
	line-height: 1.9;
}

.contact-page-info a:hover {
	color: #D07171;
}

.contact-page-info a:active {
	color: #FFFFFF;
}

/* GALLERY POPUP */

.popup-container {
	width: 100%;
	height: 0;
	display: flex;
	align-items: center;
	justify-content: center;
}

.popup h3 {
	font-family: 'Lusitana', serif;
    color: #FFFFFF;
	font-size: 160%;
}

.popup h4 {
	font-family: 'Lusitana', serif;
    color: #000000;
	font-size: 120%;
}

.popup {
	width: 50vw;
	height: 90vh;
	background: #737373;
	border-radius: 6px;
	position: fixed;
	top: 0;
	left: 50%;
	transform: translate(-50%,-50%) scale(0.1);
	text-align: center;
	padding: 0 30px 0px;
	box-shadow: 0 2px 5px rgba(0, 0, 8, 0.2);
	visibility: hidden;
	transition: transform 0.4s, top 0.4s;
	z-index: 1100;
}

.open-popup {
	visibility: visible;
	top: 50%;
	transform: translate(-50%,-50%) scale(1);
}

.popup img {
	max-width: 100%;
	max-height: 60%;
    border-radius: 5px;
	margin-top: 20px;
}

.popup button {
    display: inline-block;
    background-color: #F12727;
    color: #FFFFFF;
    padding: 20px 40px;
    text-decoration: none;
    border: 0;
	border-radius: 10px;
	outline: none;
	font-size: 140%;
    font-weight: bold;
	cursor: pointer;
	box-shadow: 0 5px 5px rgba(0, 0, 8, 0.2);
}

.popup button:hover {
    background-color: #D07171;
}

.burger-menu, .burger-menu-btn {
	display: none;
}

/* MOBILE LAYOUT */

@media only screen and (max-width: 385px) {
	.burger-menu-btn {
		display: block;
		width: 50px;
		height: 50px;
		background-image: url("images/burger-menu.png"), url("images/burger-menu-close.png");
		background-size: cover;
		background-repeat: no-repeat;
		background-position: center, center left 50px;
		position: fixed;
		top: 10px;
		left: 10px;
		z-index: 1200;
	}
	.burger-menu {
		display: none;
		position: fixed;
		width: 100%;
		height: 100vh;
		z-index: 1000;
		background-color: #222;
		top: 50px;
	}
	.burger-menu ul {
		width: 100%;
		height: calc(100vh - 100px);
		display: flex;
		list-style: none;
		flex-wrap: wrap;
		align-content: flex-start;
		padding: 0;
	}
	.burger-menu ul li {
		flex-basis: 100%;
		border-top: 5px solid #000;
	}
	.burger-menu ul li:last-child {
		border-bottom: 5px solid #000;
	}
	.burger-menu ul li a {
		display: block;
		height: 100%;
		font-size: 2rem;
		padding: 30px 0;
		flex-basis: 100%;
		text-align: center;
		text-decoration: none;
    	font-family: 'Roboto', sans-serif;
    	font-weight: 600;
    	color: #FFFFFF;
	}
	.container {
		width: calc(100% - 30px);
	}
	.header {
		height: 50px;
	}
	.header h1 {
  		letter-spacing: 2px;
		font-size: 150%;
		text-align: right;
		margin-right: 25px;
		align-self: center;
	}
	.header-nav ul {
		display: none;
	}
	h2 {
    	font-size: 200%;
	}
	p {
		font-size: 20px;
		margin: 30px 0px;
		padding: 0px;
		text-align: auto;
	}
	.intro, .about-intro, .gallery-content, .contact-page-info {
		margin-top: 50px;
	}
	.contact-page-info {
		margin-bottom: 0px;
	}
	.popup {
		width: 70%;
		height: 75%;
		background: #737373;
		padding: 0 30px 0px;
	}
	.popup img {
		max-width: 90%;
		max-height: 45%;
	}
	.popup button {
		position: fixed;
		left: 35px;
		right: 35px;
		bottom: 4vh;
    	padding: 3% 20%;
		border-radius: 10px;
		font-size: 160%;
	}
	.button {
	    padding: 20px 50px;
		font-size: 140%;
	}
}

@media only screen and (min-width: 385px) and (max-width: 600px) {
	.burger-menu-btn {
		display: block;
		width: 50px;
		height: 50px;
		background-image: url("images/burger-menu.png"), url("images/burger-menu-close.png");
		background-size: cover;
		background-repeat: no-repeat;
		background-position: center, center left 50px;
		position: fixed;
		top: 10px;
		left: 10px;
		z-index: 1200;
	}
	.burger-menu {
		display: none;
		position: fixed;
		width: 100%;
		height: 100vh;
		z-index: 1000;
		background-color: #222;
		top: 50px;
	}
	.burger-menu ul {
		width: 100%;
		height: calc(100vh - 100px);
		display: flex;
		list-style: none;
		flex-wrap: wrap;
		align-content: flex-start;
		padding: 0;
	}
	.burger-menu ul li {
		flex-basis: 100%;
		border-top: 5px solid #000;
	}
	.burger-menu ul li:last-child {
		border-bottom: 5px solid #000;
	}
	.burger-menu ul li a {
		display: block;
		height: 100%;
		font-size: 2rem;
		padding: 30px 0;
		flex-basis: 100%;
		text-align: center;
		text-decoration: none;
    	font-family: 'Roboto', sans-serif;
    	font-weight: 600;
    	color: #FFFFFF;
	}
	.container {
		width: calc(100% - 30px);
	}
	.header {
		height: 50px;
	}
	.header h1 {
  		letter-spacing: 2px;
		font-size: 170%;
		text-align: right;
		margin-right: 25px;
		align-self: center;
	}
	.header-nav ul {
		display: none;
	}
	p {
		font-size: 20px;
		margin: 30px 0px;
		padding: 0px;
		text-align: auto;
	}
	.intro, .about-intro, .gallery-content, .contact-page-info {
		margin-top: 50px;
	}
	.contact-page-info {
		margin-bottom: 120px;
	}
	.popup {
		width: 70%;
		height: 75%;
		background: #737373;
		padding: 0 30px 0px;
	}
	.popup img {
		max-width: 90%;
		max-height: 45%;
	}
	.popup button {
		position: fixed;
		left: 35px;
		right: 35px;
		bottom: 4vh;
    	padding: 3% 20%;
		border-radius: 10px;
		font-size: 160%;
	}
	.button {
	    padding: 20px 50px;
		font-size: 140%;
	}

@media only screen and (min-width: 600px) {
	.container {
		width: 100%;
	}
}

@media only screen and (min-width: 768px) {
	.container {
		width: 100%;
	}
}

@media only screen and (min-width: 992px) {
	.container {
		width: 100%;
	}
}

@media only screen and (min-width: 1200px) {
	.container {
		width: 100%;
	}
}