* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}



#topbtn {
  display: flex;
  justify-content: center;
}

.loaderimage {
  background-color: #ffffffa6;
  padding: 300px 500px;
}

#myBtn {
  display: none;
  position: fixed;
  bottom: 20px;
  z-index: 99;
  font-size: 18px;
  border: none;
  outline: none;
  background-color: rgba(0, 0, 0, 0.804);
  color: white;
  cursor: pointer;
  align-self: center;
  display: flex;

  justify-content: center;
  padding: 15px 17px;
  border-radius: 50%;
}

#myBtn:hover {
  background-color: #555;
}

/* loader page start */

.main {
  width: 100%;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* loader page end */

/* login page start */

.maincontainer {
  width: 100%;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

.box-form {
  display: flex;
  flex-direction: row;
  width: 75%;
  height: 80vh;
  background: #ffffff;
  border-radius: 10px;
  overflow: auto;
  align-items: stretch;
  box-shadow: 0 0 20px 6px #090b6f85;
}
.box-form .left .sub-left {
  display: flex;
  height: 100%;
  flex-direction: column;
  justify-content: space-around;
  align-items: center;
  width: 100%;
}
.box-form .left {
  width: 50%;
  display: flex;
  flex-direction: column;
  background-image: url(../images/Login-Page-Background-landscape.png);
  background-repeat: no-repeat;
  background-size: cover;
}

.box-form .right-container {
  width: 50%;
}
.box-form .left img {
  height: auto;
  width: 65%;
  animation: leftbox 1.5s ease-in-out forwards;
  background-repeat: no-repeat;
  overflow: hidden;
}
@keyframes leftbox {
  0% {
    transform: translateY(500px) scale(0.2);
  }
  100% {
    transform: translateX(0px) scale(1);
  }
}

.box-form .left .subtopleft {
  animation: topbox 1.5s ease-in-out forwards;
}

.box-form .left .subtopleft .logo-cls {
  display: flex;
  width: 100%;
  flex-direction: row;
  gap: 5px;
}
.box-form .left .subtopleft img {
  width: 35px;
  height: 35px;
}

@keyframes topbox {
  0% {
    transform: translateX(-500px) scale(0.2);
  }
  100% {
    transform: translateY(0px) scale(1);
  }
}
.right-container {
  display: flex;
  justify-content: center;
  width: auto;
  height: 100%;
}
.logo {
  width: 100%;
  height: 10%;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  flex-direction: row;
}

.right-container .logo .logo-img {
  display: flex;
  align-items: center;
}
.right-container .logo .logo-img img {
  width: 25px;
  height: auto;
}
.right-container .logo h2 {
  font-size: 25px;
}

.right {
  display: flex;
  width: 80%;
  flex-direction: column;
  justify-content: space-between;
}

.login-content-container {
  display: flex;
  width: 100%;
  flex-direction: column;
  justify-content: space-evenly;
  height: 90%;
  align-items: center;
}
.login-content-container h2 {
  font: 30px;
}

.login-inputs {
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  align-items: center;
  font-size: 15px;
  min-height: 200px;
  height: auto;
}

.login-inputs .email-container input,
.login-inputs .password-container input {
  padding: 15px;
  font-size: 25px;
  background-color: transparent;
  border-radius: 15px;
  height: 10px;
}
.login-flname {
  width: 100%;
}

input.checkbox {
  width: 20px;
  height: 20px;
  cursor: pointer;
}

.checkbox-container {
  display: flex;
  width: 100%;
  justify-content: space-between;
}

.inputs .left-checkbox {
  display: flex;
  width: 50%;
  font-size: 15px;
  align-items: center;
  /* gap: 5 px; */
}

.right-checkbox {
  display: flex;
  justify-content: end;
  width: 50%;
}

.right-checkbox p a {
  text-decoration: none;
  color: black;
  cursor: pointer;
}

.signup-btn {
  width: 70%;
  font-size: 15px;
  background-color: var(--background-blue);
  border-radius: 15px;
  padding: 5px 0px;
  height: auto;
}

.create-acc {
  font-size: 15px;
}
.create-acc p span {
  text-decoration: none;
  cursor: pointer;
  font-weight: 500;
}

.password-box {
  display: flex;
  gap: 4px;
}
.password-box #passwordip {
  width: 100%;
}

.eyecls {
  margin-left: -40px;
  display: flex;
  align-self: center;
  cursor: pointer;
}

#forgetpassword {
  margin-top: 20px;
  float: right;
  cursor: pointer;
}
/* login page end */

/* register page start */

.signup-naming input {
  background-color: transparent;
}
.signup-flname input {
  background-color: transparent;
}

.signup-content-container {
  display: flex;
  width: 100%;
  flex-direction: column;
  justify-content: space-evenly;
  height: 90%;
  align-items: center;
  overflow: auto;
}
.signup-content-container h2 {
  font-size: 20px;
}
/* register page end */

/* varification page start */

.email-varification-content-container {
  display: flex;
  width: 100%;
  flex-direction: column;
  justify-content: space-evenly;
  height: 90%;
  align-items: center;
}
.email-varification-content-container .sub-email-container {
  display: flex;
  flex-direction: row;
  width: 100%;
  justify-content: space-between;
}

.title {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 5px;
}

.email-varification-text {
  text-align: center;
}

.emailvarification-btn {
  width: 40%;
  text-align: center;
  font-size: 15px;
  background-color: var(--background-blue);
  border-radius: 15px;
  padding: 5px 0px;
  height: auto;
  border: 2px solid blue;
}
.emailvarification-btn:hover {
  background-color: blue;
  color: white;
  transition: all 0.4s;
}
/* varification page end */

/* forget password page start */

.default-input-size {
  width: 100%;
}

.login-content-container-forgot {
  display: flex;
  width: 100%;
  flex-direction: column;
  justify-content: space-evenly;
  min-height: 80%;
  height: auto;
  align-items: center;
}

.forgot-logo {
  height: 20%;
}
.fp-login {
  cursor: pointer;
  font-weight: 600;
  color: blue;
  text-decoration: none;
}
/* forget password page end */

/* create post page start */

@import url("https://fonts.googleapis.com/css?family=Raleway:400");

* {
  box-sizing: border-box;
}

@property --angle {
  syntax: "<angle>";
  initial-value: 90deg;
  inherits: true;
}

@property --gradX {
  syntax: "<percentage>";
  initial-value: 50%;
  inherits: true;
}

@property --gradY {
  syntax: "<percentage>";
  initial-value: 0%;
  inherits: true;
}

/* body {
	font-family: Raleway, sans-serif;
	text-align: center;
	margin: 0;
	padding: 1rem;
	background-color: rgba(10, 12, 18, 1);
	color: white;
	min-height: 100vh;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
} */

p {
  margin: 0;
}

:root {
  --d: 2500ms;
  --angle: 90deg;
  --gradX: 100%;
  --gradY: 50%;
  --c1: rgb(0, 208, 255);
  --c2: rgba(0, 0, 0, 0.629);
}

.wrapper {
  min-width: min(40rem, 100%);
}

.sub-createpost-container {
  font-size: 3vw;
  margin: max(1rem, 3vw);
  border: 2px solid black;
  padding: 3vw;
  animation: mymove 3s infinite;
}
@keyframes mymove {
  50% {
    box-shadow: rgba(0, 213, 255, 0.455) 0px 30px 60px -12px inset,
      rgba(0, 213, 255, 0.592) 0px 18px 36px -18px inset;
  }
}

.close:hover,
.close:focus {
  box-shadow: inset -3.5em 0 0 0 var(--hover), inset 3.5em 0 0 0 var(--hover);
}

.raise:hover,
.raise:focus {
  box-shadow: 0 0.5em 0.5em -0.4em var(--hover);
  transform: translateY(-0.25em);
}

.mainpost-container {
  height: 100vh;
}

.createpost-container {
  display: flex;
  /* margin-top: 100px; */
  justify-content: center;
  max-height: 100vh;
  height: 70vh;
}

.sub-createpost-container {
  display: flex;
  width: 70%;
  height: 130%;
  background-color: rgba(29, 29, 29, 0.348);
  border-radius: 4px;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.sub-createpost-container textarea {
  width: 100%;
  padding: 5px;
  box-shadow: 0 0 20px 6px #090b6f85;
  margin-bottom: 40px;
}
.main-uploading-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-around;
  width: 90%;
  height: 70%;
}
#imageforpost {
  font-size: 30px;
  cursor: pointer;
}
.uploadingcontent {
  border-radius: 10px;
  padding: 10px;
  background-color: transparent;
  border: 1px solid rgba(0, 0, 0, 0.164);
  box-shadow: 2px 2px 20px black;
  color: white;
}
.createposttitle {
  font-size: 40px;
  margin-bottom: 50px;
  text-align: center;
  color: white;
  padding: 10px 20px;
  border-radius: 3px;
  background-color: #0000006f;
  box-shadow: 2px 2px 20px rgb(255, 255, 255);
}

#cptextarea::placeholder {
  color: white;
}
.createpost-container img {
  width: 70px;
  height: 70px;
  cursor: pointer;
}

#submitbutton a {
  color: black;
  text-decoration: none;
}
#submitbutton {
  border: 1px solid #d0d6db;
  background-color: white;
  padding: 10px 30px;
  border-radius: 10px;
  box-shadow: 7px 5px 10px rgba(0, 0, 0, 0.449);
  font-size: 30px;
  text-align: center;
  cursor: pointer;
}

#uploadedmssage {
  display: none;
}

#progressdiv {
  background-color: rgba(0, 0, 0, 0.359);

  width: 100%;
}

/* create post page end */

/* profile page start */

.profilecontainer {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-evenly;
  margin-top: 10px;
  height: 75vh;
}
.subprofilecontainer {
  width: 70%;
  border: 1px solid #d0d6db;
  min-height: 600px;
  background-color: rgba(255, 255, 255, 0.226);
  z-index: -10;
  box-shadow: 2px 2px 20px black;
  display: flex;
  flex-direction: column;
  align-items: center;
}

#userdetail {
  width: 90%;
}

#usercoverimg {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  cursor: pointer;
  object-fit: contain;
}

#inputforusercoverimg {
  margin: 0;
  padding: 0;
  width: 0;
}
#coverimg {
  height: 50%;
  max-height: 60vh;
  min-height: 58vh;
  width: 70%;
  border-radius: 3px 3px 10px 10px;
  z-index: -10;
  /* position: relative; */
  object-fit: contain;
}

#choosecoverimg {
  display: flex;
  justify-content: center;
}

.uploadbtnprofile {
  /* position: absolute; */
  /* bottom: 100px;
  left: 520px; */
  width: 40px;
}
#userprofileimg {
  border-radius: 50%;
  width: 200px;
  height: 200px;
  border: 5px solid #ffffff;
  z-index: -1;
  /* left: 27%;
  bottom: 15%; */
  /* position: absolute; */
}
#userprofilepicture {
  width: 50%;
  display: flex;
  height: 100%;
  justify-content: space-evenly;
  align-items: center;
  flex-direction: column;
}

#Coverimgcontent {
  width: 50%;
  height: 100%;
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  justify-content: space-evenly;
  align-items: center;
}

.sublabel {
  display: flex;
  flex-direction: row;
}

#m {
  cursor: pointer;
}

/* profile page end */

/* home page start */

.homecontainer {
  width: 100%;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.minisubhomecontainer {
  width: 80%;
  display: flex;
  height: 150px;
  border: 1px solid rgb(206, 190, 190);
  box-shadow: rgba(56, 195, 255, 0.25) 0px 30px 60px -12px inset,
    rgba(118, 193, 212, 0.3) 0px 18px 36px -18px inset;
  margin-top: 10px;
}
.homesubcontainer {
  width: 100%;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-around;
}

.homeprofilepicture {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  border: 5px solid #9b9b9b;
  margin: 10px;
}

.inputfirst {
  width: 90%;
  display: flex;
  justify-content: space-around;
}
.inputfirst img {
  width: 40px;
  height: 40px;
  cursor: pointer;
}
#hometextinput {
  width: 90%;
  height: 50px;
  border-radius: 10px;
  padding: 10px;
}

#createuserpost {
  min-height: 100vh;
  width: 70%;
  /* margin-top: 10px; */
  display: flex;
  justify-content: center;
  /* align-items: center; */
}

#showuserposts {
  padding: 10px;
  /* background: #9b9b9b5e; */
  height: 100vh;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.postmain {
  background-color: #ffffff85;
  margin-bottom: 10px;
  border: 2px solid rgba(0, 0, 0, 0.532);
  border-radius: 10px;
  padding: 30px;
  animation: mymove 3s infinite;
}

@keyframes mymove {
  50% {
    box-shadow: rgba(0, 213, 255, 0.455) 0px 30px 60px -12px inset,
      rgba(0, 213, 255, 0.592) 0px 18px 36px -18px inset;
  }
}

.close:hover,
.close:focus {
  box-shadow: inset -3.5em 0 0 0 var(--hover), inset 3.5em 0 0 0 var(--hover);
}

.raise:hover,
.raise:focus {
  box-shadow: 0 0.5em 0.5em -0.4em var(--hover);
  transform: translateY(-0.25em);
}

.postheader {
  display: flex;
  flex-direction: column;
  padding: 10px;
  margin-bottom: 10px;
  border-radius: 5px;
  box-shadow: 2px 2px 20px black;
}

.userprodev {
  display: flex;
  flex-direction: row;
}

.profileimage {
  width: 100px;
  height: 100px;
  box-shadow: 2px 2px 20px rgba(0, 0, 0, 0.518);
  border-radius: 50%;
  object-fit: contain;
}

.userprodev div h5,
.userprodev div p {
  margin-top: 4px;
  font-size: 15px;
  margin-left: 10px;
}

.userdiv {
  display: flex;
  flex-direction: column;
  margin-left: 20px;
}

.userdiv .postdetail {
  /* margin-left: 20px; */
  margin-bottom: 0;
}

.postimageurl {
  width: 100%;
  margin-bottom: 10px;
  border-radius: 10px;
  /* margin: 10px;
  padding: 10px; */
  box-shadow: rgba(0, 0, 0, 0.233) 0px 2px 4px 0px,
    rgba(0, 0, 0, 0.211) 0px 2px 16px 0px;
  height: 60vh;
  object-fit: contain;
}
.postvideo {
  /* padding: 10px; */
  border-radius: 10px;
  /* margin: 10px; */
  width: 100%;
  height: 60vh;
  box-shadow: rgba(0, 0, 0, 0.233) 0px 2px 4px 0px,
    rgba(0, 0, 0, 0.211) 0px 2px 16px 0px;
  object-fit: contain;
}

.footerdiv {
  /* border-top: 1px solid rgb(206, 200, 200); */
  margin-bottom: 10px;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-around;
}

.footerdiv button {
  border: none;
  padding: 15px 30px;
  box-shadow: 2px 2px 20px rgba(0, 0, 0, 0.651);
  display: flex;
  align-items: center;
  justify-content: center;
}

.likebutton {
  border-radius: 5px;
}
.likebutton:hover {
  background-color: #0000009f;
  color: #fff;
  transition: all 0.3s;
}

.dislikebutton {
  width: auto;
  display: flex;
  flex-direction: column;
  border-radius: 5px;
}
.dislikebutton:hover {
  background-color: #0000009f;
  color: #fff;
  transition: all 0.3s;
}

.commentmain {
  /* padding: 5px 10px; */
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  margin: 10px 15px;
  padding: 5px 10px;
  align-items: center;
  justify-content: space-around;
  box-shadow: 2px 2px 20px rgba(0, 0, 0, 0.651);
  border-radius: 10px;
  /* border: 1px solid #000000; */
}

.commentprofileimage {
  width: 100px;
  height: 100px;
  object-fit: contain;
  border-radius: 50%;
  box-shadow: 20px 2px 20px black;
}

.commentmain div {
  background-color: #f0f2f5;
  padding: 10px;
  border-radius: 10px;
  width: 85%;
  margin-right: 10px;
}

.writecomment {
  display: flex;
  /* flex-direction: row; */
  /* flex-wrap: wrap;   */
  align-items: center;
  justify-content: space-evenly;
  margin: 10px 0;
  padding: 5px;
}

.commentinput {
  outline: none;
  border: none;
  width: 90%;
  background-color: #f0f2f5;
  border-radius: 20px;
  margin-left: 5px;
  font-size: 15px;
  padding: 10px;
}

.commentsendbtn {
  cursor: pointer;
  box-sizing: content-box;
  padding: 10px;
  box-shadow: 1px 1px 15px black;
  border-radius: 50%;
  /* border: 1px solid black; */
}
.commentmessage1 {
  display: flex;
  flex-direction: column;
}

/* home page end */

/* Friends page start */

.detailsuser {
  width: 70%;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.signupdate {
  text-align: center;
}

.friendsusername {
  text-align: center;
}

#userprofileimgdiv {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.friendscontainer {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

#friendsusers {
  background-color: rgba(255, 255, 255, 0.485);
  width: 80%;
  padding: 8px;
  overflow: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
}

#friendsloaderdiv {
  display: flex;
  align-items: center;
  justify-content: center;
}

#userdetailsdev {
  display: flex;
  flex-direction: row;
  align-items: center;
  border: 2px solid rgb(0, 0, 0);
  border-radius: 50px;
  max-height: 100vh;
  padding: 5px;
  margin-top: 10px;
  margin-bottom: 10px;
}

.friendsuserimg {
  margin-right: 10px;
}

.friendsuserimg {
  width: 60px;
  height: 60px;
  object-fit: contain;
  box-shadow: 2px 2px 20px rgba(0, 0, 0, 0.518);
  border-radius: 50%;
}

#friendsdata {
  width: 80%;
}

.friendsusername {
  font-size: 18px;
  margin-top: 10px;
  margin-bottom: 0px;
}

#userdetailsdev {
  width: 80%;
  display: flex;
  justify-content: space-between;
}

#friendsdropdown {
  width: 10%;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
}
#friendsdropdown i {
  color: #000000;
}

.dropdownbuttons {
  cursor: pointer;
  padding: 10px;
  font-size: 30px;
  color: #3360f8;
}

#friendsdropdownhide {
  display: none;
}

#userprofilediv {
  position: relative;
  width: 50%;
  height: auto;
  object-fit: contain;
  margin-top: 20px;
  border: 2px solid rgb(0, 0, 0);
  box-shadow: rgb(0, 0, 0) 0px 2px 4px 0px, rgb(0, 0, 0) 0px 2px 16px 0px;
  border-radius: 20px;
  display: none;
  padding: 5px;
}

/* #usercoverimg {
  width: 100%;
  margin-bottom: 5px;
  height: 100%;
  object-fit: contain;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
} */

.largeprofileimage {
  border-radius: 50%;
  position: absolute;
  bottom: 10px;
  left: 15px;
  width: 150px;
  height: 150px;
}

#frienduserprofileimg {
  width: 150px;
  height: 150px;
  border: 1px solid rgba(0, 0, 0, 0.633);
  border-radius: 50%;
  position: sticky;
  cursor: pointer;
  object-fit: contain;
}

.friendusername {
  font-size: 20px;
  font-weight: 700;
}

/* Friends page end */