@import url('https://fonts.googleapis.com/css2?family=Kaushan+Script&family=Mulish:wght@300;400;500&display=swap');
:root{
	--primary-color:#202020;
	--secondary-color:#f4f7fc;
	--grey:#a6a6a6;
}
html{
	font-size:62.5%;
	scroll-behavior:smooth;
	
}
*,
::before,
::after{
	margin:0;
	padding:0;
	box-sizing:border-box;
}
body{
	height:100%;
	width:100%;
	font-family: 'mulish', sans-serief;
	}
h1,h2,h3{
	font-family:'Player Display,serif';
	font-weight:800;
	color:var(--primary-color);
	margin:1.6 0;
}
p{
	font-weight:400;
	margin:1.6rem 0;
	font-size:1.6rem;
	color: var(--primary-color);
	line-height:1.5;
}
h1{
	font-size:4rem;
}
nav .logo img{
	width:200px;
	height:200px;
}
@media only screen and (max-width:768px){
	nav .logo img{
		width:150px;
		height:150px;

		}
	h1{
		font-size:3rem;
	}
}
	h2{
		font-size:3rem;
		letter-spacing:1.5px;
	}
	h3{
		font-size:2.5rem;
		letter-spacing:1.5px;
	}
	h4{
		letter-spacing:1.6px;
	}
span{
	color:var(--grey);
	font-size:1.5rem;
	font-weight:500;
}
a{
	text-decoration:none;
	margin:1.6rem 0;
	color:var(--grey);
	font-size:1.6rem;

}
.container{
	width:95%;
	margin:0 auto;
}
img{
	max-width:100%;
	height:auto;
	
}
hr{
	margin:16px 0;
}
.scroll-top{
	position:fixed;
	bottom:20px;
	right:40px;
	z-index:90;
	background:#FFCA28;
	color:white;
	cursor:pointer;
	padding:8px 16px;
	font-size:20px;
	font-weight:800;
}

/*-----------Nav--------*/
nav{
	position:relative;
	display:flex;
	align-items:center;
	justify-content:space-between;
}
nav .menu a{
	border-bottom:none;
	color:var(--primary-color);
	font-weight:700;
	margin-left:24px;
	text-decoration:none;
	
}
nav .menu a:hover{
    font-size:17px;
    color:#999;
}
nav .icon{
	display:none;
}
@media only screen and (max-width:768px){
	nav .icon{
		display:block;
	
	}
	.menu{
		position:absolute;
		background:linear-gradient(rgba(250,250,250,.6),white);
		width:100%;
		z-index:5;
		display:none;
		right:40px;
		top:100%;
		border-radius:3px;
		padding:20px;
		margin:5px;

	}
	.menu a{
		padding:15px 0;
		font-size:18px;
		display:block;
		color:white;
		text-decoration:none;
	}
	.show{
		display:block;
	}
}
.content{
	display:grid;
	grid-template-columns:2fr 1fr;
	position:relative;
	
}
.content .contleft{
	background-image:linear-gradient(rgba(0,0,0,.1),#222),url('image/OIP.jpeg');
	background-size:cover;
	height:50vh;
	background-repeat:no-repeat;
	background-position:center;
}
.content .contright{
	background:#FFCA28;
}
.content .content-box{
	position:absolute;
	background:#fffffc;
	padding:30px;
	width:35%;
	top:50%;
	left:65%;
	transform:translate(-40%,-50%);
}

@media only screen and (max-width:768px){
	.content{
		grid-template-columns:1fr;
	}
	.content .content-box{
		top:50%;
		left:50%;
		transform:translate(-50%,-50%);
		width:70%;
		background:white;
	}
}

main{
	display:grid;
	grid-template-columns:2fr 1fr;
	margin-top:50px;
	grid-gap:60px;
}
.blog{
	display:grid;
	grid-template-columns:1fr 1fr;
	grid-gap:48px;
}

.blog .image{
	object-fit:contain;
}

.blog-post{
	background:var(--secondary-color);
	margin:24px 0;
	padding:16px;
}
.blog-content{
	margin-top:24px;
}

.pagination{
	display:inline-block;
}
.pagination .active{
	border:1px solid var(--primary-color);
	background-color:var(--secondary-color)
}
.pagination a{
	color:var(--primary-color);
	float:left;
	padding:8px 16px;
	text-decoration:none;
	border:0;
}
@media only screen and (max-width:768px){
	.blog{
		grid-template-columns:1fr;
	}
}

.wrap{
	display:flex;
	align-items:center;
}
.wrap .thumb{
	flex:1;
}
.wrap .cont{
	flex:2;
	padding:16px;
	
}
@media only screen and (max-width:768px){
	.site-container{
		width:100%;
		padding:0 24px;
	}
	main{
		grid-template-columns:1fr;
	}
	.wrap{
		margin:24px 0;
	}
}


footer{
	background:#555;
	margin-top:100px;
	padding:100px 10px;
	
	grid-template-columns:repeat(2,1fr);
	grid-gap:10px;
	width:100%;
	bottom:0px;
}
footer h3{
	color:white;
}
.foot-top{
	display:grid;
	grid-template-columns:repeat(3,1fr);
	margin:0 auto;
	grid-gap:16px;
	justify-items:center;
}
.footleft{
	padding:7px;
	font-size:14px;
	
}

.footleft a{
	text-decoration:none;
	color:white;
	font-size:16px;
}
.footcenter{
	color:white;
	padding:15px;
	font-size:18px;
}
.footcenter a{
	color:white;
}
.footright{
	text-align:center;
	color:white;
}

.social-links .fa{
	height:40px;
	width:40px;
	font-size:20px;
	line-height:40px;
	margin:20px 5px;
	color:white;
	transition:0.5s;
}

.social-links .fa:hover{
	color:yellow;
	transform:translateY(-7px);
}
.social-links p{
	font-size:14px;
	margin-top:5px;
	padding:5px;
	color:white;
}
.foot-bottom{
		
		text-align:center;
		justify-content:center;
		color:#FFCA28;
		font-size:16px;
}
footer hr{
	margin:60px 0;
}
@media only screen and (max-width:768px){
	.foot-top{
		grid-template-columns:1fr;
		justify-items:start;
		
	}
}

/*thumbnail=image*/