@import url('https://fonts.googleapis.com/css2?family=Caveat:wght@400..700&family=Cookie&family=Edu+NSW+ACT+Hand+Pre:wght@400..700&family=Italianno&family=Meie+Script&family=Playwrite+IN:wght@100..400&display=swap');

body{
	background-color:black;
	overflow-x:hidden;
	display:flex;
}
.aside{
	height:740px;
	width:250px;
	border-right:1px solid #262626;
	position:sticky;
	top:0;
}
.div{
	margin:10%;
	padding-top:3px;
	font-size:19px;
	font-weight:bold;
	color:white;
	font-family: "Playwrite IN", cursive;
	cursor:pointer;
}
.insta{
	color:white;
	font-size:25px;
	margin-left:3.5%;
}
.insta1{
	margin-left:5px;
}
.div1{
	height:35px;
	width:180px;
	margin:10%;
	padding-top:4px;
	display:flex;
	font-size:27px;
	color:white;
	background-color:black;
	border:none;
	cursor:pointer;
}
.div1:hover{
	background-color:#1A1A1A;
	border-radius:5px;
	border:1px solid #262626;
	font-size:25px;
}
.margin5{
	margin-left:11%;
}
.home{
	margin:3.2%;
	padding-left:5%;
	font-size:17px;
}
.margin , .icon1 , .icon3{
	padding-top:2px;
}
.icon1{
	height:70%;
	width:13%;
}
.icon3{
	height:26px;
}
.icon3{
	width:23px;
	border-radius:100px;
}
.search{
	height:98%;
	width:25%;
	background-color:black;
	margin-left:5%;
	border-right:1px solid #292929;
	border-left:1px solid #292929;
	border-radius:10px;
}
hr{
	border:1px solid #292929;
	margin-top:5%;
}
.search1{
	font-size:25px;
	font-weight:bold;
	color:white;
	margin-left:5%;
}
.input1{
	height:15px;
	width:94%;
	padding:5%;
	font-size:15px;
	border-radius:10px;
	margin:3%;
	background-color:#363636;
	color:white;
	border:none;
	outline:none;
}
.recent{
	font-size:18px;
}
.nosearch{
	height:70%;
	width:100%;
	font-weight:bold;
	color:#A8A8A8;
	display:flex;
	justify-content:center;
	align-items:center;
}
.follow{
	display:flex;
	cursor:pointer;
}
.follow:hover{
	background-color:#121212;
}
.Fname{
	font-size:15px;
	margin:5px;
	margin-top:2.5%;
	color:white;
	letter-spacing:1px;
}
.Fbtn{
	background-color:#0095F6;
	color:white;
	padding:8px;
	padding-left:6%;
	width:15.5%;
	margin:2%;
	margin-left:4%;
	border-radius:10px;
	text-decoration:none;
	font-size:15px;
	font-weight:bold;
}
.Fbtn:hover{
	background-color:#1877F2;
}
.Fwidth{
	width:21%;
	margin-left:12%;
	background-color:#363636;
}
.Fpadding{
	padding-left:2%;
}
.Fwidth:hover{
	background-color:#262626;
}
.Fimage{
	height:92%;
	width:12.5%;
	border-radius:10px;
	margin-left:6%;
}
.create{
	height:12%;
	width:13%;
	background-color:#262626;
	margin-left:2%;
	margin-bottom:9.5%;
	border-radius:8px;
	font-size:18px;
}
.postdiv{
	color:white;
	height:45%;
	width:95%;
	margin-top:1px;
	padding-left:5%;
	border-radius:5px;
	cursor:pointer;
}
.postdiv:hover{
	background-color:#3C3C3C;
}
.postimg{
	height:27px;
	width:27px;
	margin-left:60%;
}
.posticon{
	font-size:24px;
	margin-top:3px;
	margin-left:66%;
	display:inline-block;
}
.postM{
	margin-top:4%;
}
.anker{
	text-decoration:none;
}
.message{
	height:100%;
	width:95%;
	background-color:black;
	margin-left:5%;
}
.msgdiv{
	height:100%;
	width:25%;
	float:left;
	border-left:1px solid #292929;
	border-right:1px solid #292929;
}
.fontmsg{
	width:90%;
	font-size:21px;
	color:white;
	display:flex;
	justify-content:space-between;
	align-items:center;
	padding-left:10px;
	padding-top:7px;
	cursor:pointer;
}
.Ebox{
	font-size:25px;
}
.input2{
	background-color:#131313;
	margin-top:0;
}
.note{
	height:75px;
	width:20%;
	border-radius:50px;
	margin:5%;
	cursor:pointer;
}
.p{
	color:#A8A8A8;
	margin-top:0;
	font-size:14px;
	margin-left:8%;
	cursor:pointer;
}
.msg{
	display:flex;
	justify-content:space-between;
	color:white;
	margin:6%;
	font-size:18px;
	font-weight:bold;
	cursor:pointer;
}
.msg1{
	font-size:15px;
	color:gray;
}
.listmsg{
	width:100%;
	color:white;
	display:flex;
	align-items:center;
	font-weight:bold;
	cursor:pointer;
}
.listmsg:hover{
	background-color:#121212;
}
.msgimg{
	height:58px;
	width:16%;
	border-radius:50px;
	margin-left:5%;
}
.color2{
	font-size:13px;
	color:#A8A8A8;
}
.Mmargin{
	margin-top:7%;
}
.side{
	height:100%;
	width:74.5%;
	display:flex;
	justify-content:center;
	align-items:center
}
.sidediv{
	height:27%;
	width:30%;
	margin:2%;
	text-align:center;
}
.icon4{
	height:39%;
	width:25%;
	color:white;
	margin:2%;
	border-radius:50px;
	border:5px solid white;
	display:inline-block;
}
.Micon{
	font-size:50px;
	margin:15%;
	display:inline-block;
}
.msg2{
	font-size:20px;
	color:white;
}
.send{
	color:white;
	background-color:#0095f6;
	border:none;
	padding:3%;
	margin-top:4%;
	border-radius:10px;
	cursor:pointer;
}
.send:hover{
	background-color:#1877F2;
}
/* main section */
main{
	min-height:100%;
	width:85%;
	display:flex;
	flex-basis:100%;
	background-color:black;
	overflow:auto;
}
.main1{
	height:auto;
	max-width:830px;
	width:100%;
	display:flex;
	flex-direction:column;
}
.section{
	height:auto;
	max-width:640px;
	width:100%;
	margin-left:11%;
	margin-top:3%;
	display:flex;
	justify-content:space-between;
	overflow-x:scroll;
	overflow-y:hidden;
	scrollbar-width:none;
}
.story{
	width:65px;
	padding-left:10px;
	padding-right:6px;
	color:#E9E9E9;
	font-size:14px;
	cursor:pointer;
}
.img{
	height:58px;
	width:58px;
	border-radius:50px;
	border:3px solid #FD4330;
}
.margin1{
	margin-left:10%;
}
.section1{
	height:auto;
	max-width:475px;
	width:100%;
	margin-left:21%;
	margin-top:2%;
}
.post{
	display:flex;
	color:white;
	align-items:center;
	justify-content:space-between;
	cursor:pointer;
}
.Pname{
	margin-left:8px;
}
.img1{
	height:32px;
	width:32px;
	border-radius:50px;
	border:3px solid #FD4330;
}
.verify{
	height:14px;
	width:14px;
	font-size:13px;
	color:blue;
	margin-left:5px;
}
.color1{
	color:gray;
	font-size:14px;
	margin-left:3px;
}
.dotbtn{
	display:none;
}
.dot{
	color:white;
	background-color:black;
	border:none;
	font-size:18px;
	cursor:pointer;
}
.div7{
	height:460px;
	width:380px;	
	border-radius:15px;
	background-color:#262626;
	border:none;
}
.dot1{
	display:flex;
	flex-wrap:no-wrap;
	align-items:stretch;
	justify-content:center;
	flex-direction:column;
}
.button{
	padding:4.5%;
	background-color:#262626;
	border:none;
	border-bottom:1px solid #363636;
	color:white;
	font-weight:bold;
	letter-spacing:1px;
	cursor:pointer;
}
.border{
	border:none;
}
.borderC{
	color:#ED4956;
}
.image{
	height:615px;
	width:100%;
	margin:1px;
	margin-top:3px;
	background-color:black;
	border-radius:5px;
	cursor:pointer;
}
.caption{
	height:190px;
	width:100%;
	margin-top:1%;
	border-bottom:1px solid #5A5A5A;
}
.likenm{
	display:none;
}
.like{
	height:30px;
	width:100%;
	display:flex;
	justify-content:space-between;
	color:white;
	font-size:27px;
	padding-top:1%;
}
.cursor{
	cursor:pointer;
}
.margin4{
	cursor:pointer;
}
.margin4:hover{
	color:#626262;
}
.textlike{
	font-size:15px;
	font-weight:bold;
	color:white;
	word-spacing:1px;
	margin-top:5px;
	display:inline-block;
	cursor:pointer;
}
b{
	cursor:pointer;
}
.comment{
	margin-top:3px;
	font-size:16px;
	word-spacing:1px;
	letter-spacing:0.5px;
	color:white;
}
.tick{
	font-size:13px;
	margin-left:2px;
	color:blue;
}
.more{
	color:gray;
	cursor:pointer;
}
.comment1{
	margin-top:5%;
	font-weight:bold;
}
.input{
	height:20px;
	width:85%;
	margin-top:5px;
	float:left;
	background-color:black;
	color:white;
	border:none;
}
.inputdiv{
	height:25px;
	width:15%;
	margin-top:4px;
	cursor:pointer;
}
.aside1{
	height:550px;
	width:380px;
}
.div3{
	height:50px;
	width:310px;
	margin-top:8%;
	display:flex;
	cursor:pointer;
}
.profile1{
	height:40px;
	width:40px;
	border-radius:50px;
	padding:1.5%;
}
.font{
	font-weight:bold;
	color:white;
	font-size:16px;
	margin:1.5%;
	padding-top:4px;
}
.fontwidth{
	width:600px;
}
.color{
	width:180px;
	color:#9C9C9C;
	font-size:12px;
	margin-top:1%;
	font-weight:none;
}
.name1{
	margin:6%;
	margin-left:13%;	
	color:#0095F6;
}
.name1:hover{
	color:#C8D7E4;
}
.width{
	margin-left:9%;
}
.div4{
	height:25px;
	width:307px;
	display:flex;
	justify-content:space-between;
	margin-top:5%;
	font-weight:bold;
	color:#9C9C9C;
	font-size:17px;
}
.name3{
	color:white;
	padding-top:1%;
	font-size:13.5px;
	cursor:pointer;
}
.name3:hover{
	color:gray;
}
.margin2{
	margin-top:3%;
}
.margin3{
	margin-top:2%;
}
.div5{
	height:90px;
	width:280px;
	margin-left:1%;
	margin-top:10%;
	font-size:13px;
	color:#737373;
	word-spacing:1px;
}
.name4{
	margin-top:1%;
}
.name5{
	text-transform:uppercase;
	word-spacing:1.5px;
}
.div6{
	height:45px;
	width:150px;
	background-color:#212328;
	display:flex;
	justify-content:start;
	flex-direction:row-reverse;
	border-radius:50px;
	padding:7px;
	border:1px solid #323439;
	bottom:5%;
	right:2%;
	position:fixed;
	cursor:pointer;
}
.div6:hover{
	background-color:#38393E;
}
.logo{
	font-size:27px;
	color:white;
	margin-left:6%;
}
.name6{
	margin-left:3%;
	margin-top:5px;
	font-weight:bold;
	font-size:17px;
	color:white;
}
.nav{
	display:none;
}
.icon-div{
	display:none;
}
.Add{
	display:none;
}
.Add-text{
	display:none;
}
.story1{
	display:none;
}

@media screen and (max-width:1050px){
	.aside1{
		display:none;
	}
}
@media screen and (max-width:1260px){
	.aside{
		display:none;
	}
}
@media screen and (max-width:361px){
	body{
		background-color:white;
		margin:0;
	}
	.nav{
		height:50px;
		width:95%;
		display:block;
		font-family: "Playwrite IN", cursive;
		font-size:20px;
		display:flex;
		justify-content:space-between;
		align-items:center;
		margin-left:3%;
		margin-top:1%;
	}
	.icons{
		font-size:27px;
		margin-right:8px;
	}
	.icon-div{
		width:100%;
		background-color:white;
		display:block;
		bottom:0px;
		position:fixed;
		display:flex;
		justify-content:space-around;
		align-items:center;
	}
	.icon1{
		height:36px;
		width:36px;
	}
	.icon3{
		width:28px;
		height:28px;
	}
	.icon-home{
		font-size:28px;
	}
	main{
		background-color:white;
		display:block;
		overflow-x:hidden;
		position:relative;
	}
	.section{
		margin-left:0;
		margin-top:4%;
	}
	.story{
		color:black;
		font-size:13px;
		margin-left:5px;
	}
	.story1{
		width:65px;
		padding-left:10px;
		padding-right:6px;
		color:black;
		font-size:13px;
		cursor:pointer;
		position:relative;
		display:block;
	}
	.Add{
		display:block;
		color:blue;
		font-size:20px;
		position:absolute;
		right:0;
		bottom:17%;
	}
	.Add-text{
		margin-left:15%;
		display:block;
	}
	.img{
		height:65px;
		width:65px;
	}
	.margin1{
		margin-left:17%;
	}
	.section1{
		margin-left:0;
	}
	.post{
		color:black;
	}
	.Pname{
		font-size:15px;
	}
	.img1{
		margin-left:8px;
	}
	.color1{
		display:none;
	}
	.dot{
		display:none;
	}
	.dotbtn{
		color:black;
		background-color:white;
		border:none;
		font-size:18px;
		cursor:pointer;
		display:block;
	}
	.image{
		height:420px;
		margin-top:2%;
	}
	.caption{
		height:180px;
		width:100%;
		display:flex;
		flex-direction:column;
		margin-top:2%;
		border-bottom:1px solid #5A5A5A;
	}
	.like{
		height:25px;
		width:93%;
		align-items:center;
		margin-left:3%;
		color:black;
		font-size:24px;
		padding-top:0;
	}
	.cursor{
		cursor:pointer;
	}
	.cursor:hover{
		color:red;
	}
	.margin4{
		cursor:pointer;
	}
	.margin4:hover{
		color:#626262;
	}
	.textlike{
		color:black;
		margin-left:3%;
	}
	b{
		cursor:pointer;
	}
	.comment{
		font-size:15px;
		color:black;
		margin-left:3%;
	}
	.tick{
		font-size:13px;
		margin-left:2px;
		color:blue;
	}
	.more{
		color:gray;
		cursor:pointer;
	}
	.comment1{
		margin-left:2px;
	}
	.input{
		background-color:white;
		color:black;
	}
	.inputdiv{
		height:25px;
		width:15%;
		margin-top:4px;
		cursor:pointer;
	}
}