/* General classes */
*{
	margin:0;
	padding:0;
}
body{
	background-color:whitesmoke;
	font-size:2.5vh;
}
a:link,
a:visited{
	text-decoration:none;
	color:inherit;
}
.margin{
	margin:0;
}
.white{
	background-color:white;
}
.grey{
	color:grey;
}
.bold{
	font-weight:bold;
}
.small{
	font-size:2.3vh;
}
.font{
	font-size:4.6vh;
}
.font:hover{
	color:black;
}
.pointer{
	cursor:pointer;
}
.blue{
	color:#0096FF;
}
.hover:hover{
	background-color:whitesmoke;
}
.flex{
	display:flex;
}
.underline:hover{
	text-decoration:underline;
}
.space-between{
	display:flex;
	justify-content:space-between;
}
.space-around{
	display:flex;
	justify-content:space-around;
}
.space-evenly{
	display:flex;
	justify-content:space-evenly;
}
.name{
	margin:1vh 0;
}
.center{
	text-align:center;
}

/* Navigation bar - Desktop */
nav{
	position:fixed;
	width:100%;
	z-index:20;
}
.profile-pic{
	height:25px;
	border-radius:50%;
	border:1px solid grey;
}
.searchbar{
	padding:max(0.7%, 5px) 15%;
	border-radius:20px;
}
table{
	width:100%;
	text-align:center;
}
.tr{
	display:flex;
	justify-content:space-evenly;
}
.selected{
	border-bottom:2px solid black; 
	padding:0 10px;
}
#me{
	border-right:1px solid grey;
	padding-right:10px;
	position:relative;
}

.me-dropdown{
	display:none;
	width:230px;
	background-color:white;
	padding:8px;
	position:fixed;
	top:60px;
	right:23%;
	color:black;
	text-align:left;
	font-size:16px;
	border-radius:8px;
	border:1px solid grey;
	z-index:7;
}
#me:hover .me-dropdown{
	display:block;	
}
.verify{
	background-color:#0096FF;
	border-radius:30px;
	padding:7px 15px;
	color:white;
	margin:5px 0;
}
.verify:hover{
	background-color:#007AD1;
}
.view-profile{
	color:#0096FF;
	border:1px solid #0096FF;
	border-radius:30px;
	padding:7px 15px;
	margin:5px 0;
}
.view-profile:hover{
	color:#007AD1;
	border:1px solid #007AD1;
	background-color:azure;
}
.blueshine:hover{
	color:#0096FF;
}

.business-dropdown{
	display:none;
	width:45%;
	height:340px;
	overflow-y:scroll;
	background-color:white;
	z-index:3;
	border-radius:8px;
	color:black;
	font-size:16px;
	text-align:left;
	padding:3% 3% 50px 3%;
	position:fixed;
	right:10%;
	top:60px;
	border:1px solid grey;
}
#business:hover .business-dropdown{
	display:flex;
}
.apps{
	border-right:1px solid grey;
	padding-right:5%;
}
.apps div{
	margin:25px 10px;
}

.business p{
	margin:25px 23px;
}
.business{
	padding-left:5%;
}

.premium-dropdown{
	background-color:white;
	width:450px;
	position:relative;
	z-index:12;
	border-radius:8px;
	min-height:550px;
	font-size:16px;
	margin:auto;
	padding:1%;
	color:black;
	top:2px;
}
#dropdown-premium:hover .bg-premium{
	display:block;
}
.bg-premium{
	background-color:rgba(0,0,0,0.5); 
	width:100%;
	display:none;
	z-index:5;
	position:fixed;
	top:0;
	right:0;
	text-align:left;
}
.premium-hover{
	background-color:#FFDB58;
	padding:7px 30px;
	width:fit-content;
	border-radius:30px;
	margin:65% 2% 2% 2%;
	
}
.premium-hover:hover{
	background-color:#DBAE0B;
}
/* Top Navigation bar for mobile or tablet */

.top-nav{
	display:none;
}

/* Bottom Navigation Bar for mobile or tablet */

.bottom-nav{
	display:none;
}

/* Main section - Desktop view */
main{
	padding:80px 3% 80px 3%;
}
.main{
	flex:2.5;
	margin:2%;
}
.right{
	flex:1;
	margin:2%;
}
.section{
	background-color:white;
	border-radius:8px;
	border:1px solid grey;
	margin:2% 0;
	padding:2%;
}

/* About me */
.me{
	border:1px solid grey;
	border-radius:5px;
	margin:3%;
	background-color:#fff;
}
.bg{
	width:100%;
	height:200px;
	border-radius:8px 8px 0 0;
}
.pfp{
	border-radius:50%;
	width:20%;
	border:2px solid grey;
	z-index:3;
	margin:-13% 0 0% 5%;
}
.badge{
	width:fit-content;
	min-width:0;
	text-wrap:nowrap;
	border:1.5px dotted #1DA3E2;
	color:#1DA3E2;
	background-color:#E8F6FC;
	padding:0px 15px;
	border-radius:20px;
	margin:0 15px;
	outline:none;
}
.badge:hover{
	background-color:#C0E5F7;
	color:#1DA3E2;
	
}

.open-to-button{
	border:1.5px solid #2E85FF;
	color:white;
	font-weight:bold;
	border-radius:40px;
	padding:1.2vh 3vh;
	margin:1%;
	background-color:#2E85FF;
}
.open-to-button:hover{
	border:1.5px solid #0057D1;
	color:white;
	background-color:#0057D1;
}

.overflow{
	width:700px;
	height:20vh;
	padding:3%;
	display:flex;
	justify-content:space-evenly;
	overflow-x:scroll;
}
.card{
	width:340px;
	flex-shrink:0;
	height:10vh;
	padding:3%;
	margin:0 5%;
	border-radius:8px;
	border:1px solid grey;
}

.suggestion-scroll{
	width:700px;
	max-width:100%;
	overflow-x:scroll;
	height:250px;
	display:flex;
	gap:20px;
	justify-content:space-evenly;
}
.suggestion-card{
	min-width:250px;
	height:170px;
	border:1px solid grey;
	padding:1vh 3vh 3vh 3vh;
	border-radius:8px;
	margin:1%;
}
.add-feature{
	position:relative;
	bottom:0;
	top:30%;
}
.add-feature2{
	position:relative;
	bottom:0;
	top:20%;
}

.font2{
	font-size:23px;
}

.add-experience{
	border:1.5px solid #2E85FF;
	color:#2E85FF;
	font-weight:bold;
	border-radius:40px;
	padding:1.2vh 3vh;
	margin:1%;
	background-color:inherit;
}
.add-experience:hover{
	border:1.5px solid #0057D1;
	color:#0057D1;
	background-color:#E6F0FF;
}

/* Interest section */
.green-button{
	background-color:#00A36C;
	padding:2vh;
	border-radius:40px;
	font-weight:bold;
	color:white;
	outline:none;
	border:none;
}
.green-button:hover{
	background-color:#007A51;
}
.following-button{
	padding:1.2vh 2vh;
	background-color:inherit;
	margin:1%;
	text-align:center;
	border-radius:30px;
	border:1.5px solid #3b3b3b;
	font-weight:bold;
	color:#3b3b3b;
}
.following-button:hover{
	color:black;
	background-color:#F2f2f2;
}

/* right side */
.sticky-ad{
	position:sticky;
	top:13vh;
	z-index:2;
	display:block;
}

/* footer section of the page */
.choose-language{
	padding:1vh;
	width:100%;
	background-color:whitesmoke;
	color:black;
	outline:none;
	border:1px solid black;
}
.choose-language:hover{
	border:1.5px solid black;
}

/* Tablet section */ 

.tablet-section{
	display:none;
}


/* Messaging drawer */

aside{
	z-index:4;
	position:fixed;
	bottom:0;
	right:3%;
	width:30%;
	border:1px solid grey;
	border-radius:5px 5px 0 0;
	background-color:white;
}


.span{
	display:flex;
	justify-content:space-between;
}
.hidden{
	display:none;
}
#message:checked ~ .visible{
	display:block;
}
.msg{
	margin:2% 4% 1% 3%;
}
.msg-pfp{
	width:40px;
	height:40px;
	border:1px solid grey;
	border-radius:50%;
	margin:5% 3% 0 1%; 
}
.header{
	border-bottom:1px solid grey;
}
.header:hover{
	background-color:#E5E4E2;
}
.aside{
	padding:10px;
	margin-top:10px;
	border-radius:50%;
}
.aside:hover{
	background-color:lightgrey;
}
.visible{
	height:70vh;
	text-align:center;
	display:none;
}
.input{
	width:80%;
	padding:2% 3%;
	color:darkgrey;
	margin: 2% auto;
	background-color:#E6F1F7;
	border:1px solid #E6F1F7;
}
.input:hover{
	border:1px solid black;
}
.nothing{
	width:40%;
	margin:5% auto;
}
.no{
	font-size:1.3rem;
}
.send{
	padding:2% 4%;
	margin:2% auto;
	width:50%;
	border:2px solid grey;
	border-radius:40px;
}
.send:hover{
	border:2px solid black;
	background-color:whitesmoke;
	font-weight:bold;
}
.type1{
	color:green;
	border-bottom:2px solid green;
	width:30%;
	margin:0;
	text-align:center;
	padding:4%;
}
.type{
	width:30%;
	margin:0;
	text-align:center;
	padding:4%;
}
.type:hover,
.type1:hover{
	background-color:lightgrey;
	padding:4%;
}


@media (max-width:930px){
	.top-nav{
		display:block;
		position:fixed;
		top:0;
		background-color:white;
		display:flex;
		justify-content:space-evenly;
		padding:1vh 2vw;
	}
	.searchbar{
		padding:max(5px,1%) 2%;
		width:max(150px,45vw);;
	}
	.nav{
		display:none;
	}
	.small{
		font-size:0.7rem;
	}
	.bottom-nav{
		display:block;
		position:fixed;
		width:100%;
		height:fit-content;
		left:0;
		bottom:0;
		z-index:3;
		padding:1vh 0 0 0;
		text-align:center;
		background-color:white;
		display:flex;
		justify-content:space-evenly;
		box-sizing:border-box;
	}
	.box{
		border:2px solid black;
		color:black;
		padding:0 3%;
		margin-left:-15px;
	}
	
	/* messaging  drawer*/
	aside{
		display:none;
	}
	.hidden{
		display:block;
	}
	
	/* Main section */
	.fonts{
		font-size:4vh;
	}
	main{
		padding:40px 0 80px 0;
		font-size:2.8vh;
	}
	.hidden-section{
		display:none;
	}
	.tablet-section{
		display:block;
	}
	.section2{
		padding:0;
		margin:3vh 0;
		background-color:#fff;
		border-radius:5px;
		border:1px solid grey;
	}
	.setting-button{
		font-size:4vh;
		width:fit-content;
		padding:5px;
		color:grey;
		border-radius:50%;
		background-color:white;
		text-align:right;
		margin:2% 2vh 0 89%;
		position:absolute;
		z-index:3;
	}
	.right{
		text-align:right;
		padding:1% 1% 0 0;
		margin-top:-7vh;
	}
	.text-wrap{
		overflow-wrap:anywhere;
	}
}
@media(max-width:400px){
	.setting-button{
		margin:2% 2vh 0 85%;
	}
	.right{
		margin-top:-10vh;
	}
.bg{
	width:100%;
	height:120px;
	border-radius:8px 8px 0 0;
}
.pfp{
	border-radius:50%;
	width:30%;
	border:2px solid grey;
	z-index:3;
	margin:-13% 0 2vh 5%;
}
}