@charset "UTF-8";
html { 
	box-sizing: border-box;
} 
* {
	margin: 0;
	padding: 0;
	border: 0;
}
body {
	background: url('../img/hg-1.jpg');
	animation: fadeIn 1s ease-in;
}   
main {
	position: absolute;
	left: 50%;
	width: 20rem;
	margin-left: -10rem;
	z-index: 1
}
.boxB-1 {
	position: relative;
	width: 20rem;
	z-index: 2;
}
.gallery-scroll {
	display: flex;
	flex-direction: column;
	scroll-behavior: smooth;
	overflow: auto;
}
.mb-1 {
	margin-bottom: .5rem;
}
h1 {
	font-family: 'Encode Sans', sans-serif;
	font-style: normal;
	margin: 0;
}
.fs-1 {
	font-size: 1rem;
}
.fw-3 {
	font-weight: 300;	
}
.co-10 {
	color: rgb( 80, 54, 17);
}
@keyframes fadeIn {
	from {
		opacity:0;}
	to {
		opacity:1;}
}
a:link, a:visited { 
	text-decoration:none;
}
a:active, a:focus {
	outline: none;
}
a.one:link {
	text-decoration: none;
	text-align: center;
}
@media (min-width: 52.5rem) {
	main {
		width: 60rem;
		margin-left: -30rem;
	}
	.boxB-1{
		width: 60rem;
	}
	.gallery-scroll {
		flex-direction: row;
	}
	.mb-1 {
		margin-bottom: 1.5rem;
	}
	.fs-1 {
		font-size: 1.5rem ;
	}
}