@import url('https://fonts.googleapis.com/css2?family=Quicksand:wght@300..700&display=swap');
:root{
	font-family: "Quicksand", sans-serif;
  font-size:14px;
}
*, ::before, ::after{
	margin:0;
}
a{
	color:#848585;
	text-decoration: none;	
}
ul{
	list-style-type: none;	
}
h1,h2,h3,h4,h5,h6{
	color:#F2505D
}
p{
	color:#fff;
}
body{
  background:#0F1627;
  color:#fff;
}
header, #headerWrapper, #navList, img{
	width:100%;	
}
header{
	background:#5C4639;
	padding:13px;
	box-sizing: border-box;		
	margin-bottom:15px;	
}
input{
	height: 25px;
	margin-top:5px;
	border-radius: 5px;
	border: none;
	width:100%;
	font-family:"Quicksand";
	font-weight: bold;
	font-size: 16px;
	padding-left:5px;
}
#headerWrapper{
	display:grid;
  grid-template-columns: 0.5fr 0.6fr;
	align-items: center;
}
#headerWrapper #siteLogo{
	font-size:25px;
}
#navList{
	display:flex;	
	gap:20px;
	list-style-type:none;
	align-items:center;
	padding-left:0;
}
.navListLI{
	cursor: pointer;
}
#navListRight{
	display:flex;	
	gap:30px;
	white-space: nowrap;
	padding-left:0;
}
.navLinkBtn{
		background-color:#6F5749;
	cursor: pointer;
	padding:10px 20px;
	border-radius: 20px;
	color:#fff;
	border:1px solid #EFDBC0;
}
.navLinkBtn:hover{
	background:#EFDBC0;
}
#navigation {
	display:flex;	
	font-size:16px;	
}
.navLink{
	color:#fff;
	padding:6px;
	border-radius:10px;
}
.navLink:hover{
	color:#EFDBC0;
}
.formWrapper, .formLeft, .formRight, input-group {
	display:flex;
}
.formLeft, .formRight{
	flex-direction: column;		
	font-size:26px;
	width:100%;
}
.formLeft{
	max-width:350px;
}
.formWrapper{
	flex-direction: column;
	align-items: center;
	max-width: 950px;
	margin:0 auto;	
	gap: 35px;
}
.loginForm .submitBtn{
		background-color:#6F5749;
	cursor: pointer;
	padding:10px 20px;
	border-radius: 20px;
	color:#fff;
  border:none;
}
.formWrapper h2{
	font-size: 35px;	
}
input-group{
	flex-direction: column;
	margin-bottom:15px;
	color:#fff;
}
.loginForm{
	margin-top:10px;
	font-size:16px;	
}
p.formText{
	font-size: 17px;	
}
.profile{
	display:flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: center;
	background:#44678B;
	padding:65px 15px;
	max-width: 1600px;
	margin:0 auto;
	border-radius: 35px;
}
.profileHeader {
	display:flex;
	align-items: center;
	justify-content: space-between;
	gap:35px;
  text-transform: uppercase;
  font-weight: bold;
	width:100%;
	margin:0 auto;
}
.profileHeader, .profileStory, .profileWrapper{
	max-width: 1300px;
}
.profileHeader #profileName{
	  font-size:55px;
}
.profileHeader p{
	text-align: center;
	padding:35px 0;
	margin-top:0;	
}
.profileHeadLeft{
	display:flex;
	align-items: center;	
	gap:15px;
}
.profileHeadRight a, .btn-primary{
	display:block;
	padding:10px 20px;
	background:#5C4639;
  color:#fff;
	border-radius: 35px;
	font-weight:300;
	letter-spacing: 1.2px;
	cursor:pointer;
}
.btn-primary{
	background:none;
	border:none;
	text-transform: uppercase;
	padding:6px 15px;
	color:#0F1627;
}
.btn-primary:hover{
	background:#EFDBC0;
}
.profileWrapper {
  display:flex;
	flex-direction: column;
  justify-content: space-between;
	width:100%;
  margin:0 auto;
  font-size:16px;
	background:#A8BFD7;		
}
.profileSidebar{
  display: flex;
  line-height:1.9;
	background:#5C4639;	
}
.profileSidebar div{
	padding:10px 20px;
	font-weight: bold;
	border-right:2px solid rgb(0, 30, 33);
	cursor:pointer;
}
.profileSidebar div:hover{
	background-color:#EFDBC0;
	color:#0F1627;
}
.profileSidebar div.active{
	background-color:#EFDBC0;
	color:#0F1627;
}
.resultsSection{
  display:flex;
  flex-direction: column;  
  width:100%;
	max-width: 1000px;
	margin:0 auto;
}
.profileResults.active{
  display: flex;	
	flex-direction: column;
	align-items: center;
	gap:20px;
}
.profileResults{
  display: none;
	padding:25px;
}

.profileStory {
	display:flex;
	flex-direction: column;
	font-size:19px;
	line-height: 1.6;
  margin-bottom:20px;
	width:100%;
	margin:0 auto;
	padding-bottom:15px;
}
#profileAvatar {
  cursor:pointer;
}
#dashboardAvatar {
  max-width:100px;
  max-height: 200px;
  border-radius: 50%;  
}
.deleteAccount {
  display:flex;
  align-items: center;
  justify-content: space-between;
  font-size:12px;
  width:100%;
}
.deleteAccount .danger{

	color:#fff;
	border-radius: 20px;
	padding:10px;
	font-size:12px;
	cursor: pointer;
	border: 1px solid rgb(181, 3, 3);
  background: rgba(171, 0, 0, 0.6);
}
.deleteAccount .danger:hover{
	border:1px solid rgb(181, 3, 3);
	background:rgba(218, 56, 56, 0.6);
}
.deleteAccount, .deleteAccount button {
    font-size:14px;  
}
.inputGroup {
  display:flex;
  justify-content: space-between;
	align-items: center;
  width:100%;
	padding:15px 20px;
	max-width: 750px;
}
.inputIcons{
	display:flex;
	align-items: flex-end;
	gap:25px;
	width:100%;
	max-width: 650px;	  
	border-bottom:1px solid #024784;	
}
.inputIcons label{
	white-space: nowrap;
}
.inputGroup input, .inputGroup textarea{
  background:none;
  border:none;
	
}
.inputGroup input{
	display:flex;
	align-items: center;
  height:30px;
	width:100%;
	margin-right:15px;
	color:#fff;
}
.inputGroup textarea{
	width: 100%;
}
.profileHeadRight{
	display: flex;
	align-items:center;
	gap:6px;
}
#viewAsGuestLink{
	background:none;
	padding:0;
	border-radius:0;
	border-bottom:1px solid transparent;
}
#viewAsGuestLink:hover{
	border-bottom:1px solid #fff;
}
.formBottom {
  display: flex;
  align-items: center;  
  justify-content:space-between;
}
.forgotPassword{
  font-size:14px;
}