@font-face {
  font-family: "avenirlight";
  src: url("../fonts/avenirlight.ttf") format("truetype");
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "avenirmedium";
  src: url("../fonts/avenirmedium.ttf") format("truetype");
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "avenirheavy";
  src: url("../fonts/avenirheavy.ttf") format("truetype");
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "avenirblack";
  src: url("../fonts/avenirblack.ttf") format("truetype");
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "avenirroman";
  src: url("../fonts/avenirroman.ttf") format("truetype");
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "avenirbookoblique";
  src: url("../fonts/avenirbookoblique.ttf") format("truetype");
  font-style: normal;
  font-display: swap;
}

* {
  padding: 0;
  margin: 0;
}
a.login-button {
  border: 1px solid #fff;
  padding: 6.5px 22px;
  color: white;
  text-decoration: none;
}
body {
  font-family: "avenirmedium";
  font-style: normal;
  font-size: 14px;
  line-height: 20px;
}
.App {
  display: flex;
  flex-direction: row-reverse;
  min-height: 91vh;
  flex-wrap: wrap;
  margin-top: 50px;
  background-color: #e5e5e5;
  gap: 45px;
  justify-content: center;
  padding: 35px;
  /* padding:20px 40px; */
}
.nav-link {
  color: #fff;
}
.left {
  background: #191970;
  /* width:40%; */
}
.left,
.right {
  border-radius: 15px;
}
.top {
  display: flex;
  justify-content: space-between;
  padding: 1rem 1rem 0 1rem;
}
.logo {
  height: 1.9rem;
}
.login-button1 {
  background: none;
  height: 33px;
}
.login-button2 {
  background: none;
  height: 33px;
  padding-left: 1rem;
}
.left-content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.left-content p {
  text-align: center;
  font-size: 18px;
  margin-top: 0.8rem;
  color: #ffd700;
}

.landingButton {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}
.landingButton2 {
  display: none;
}

.landingPageImage {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 240px;
}
.landingPageImage1 {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 240px;
}
.landingPageImage img {
  height: 100%;
  margin-bottom: 5px;
}
.landingPageImage1 img {
  height: 100%;
  margin-bottom: 5px;
  /* margin-top: 10px; */
}

.left-ul {
  font-size: 14px;
  color: #fff;
  font-style: normal;
  font-weight: 400;
}

/* ---------------Right Side CSS------------------ */

.right {
  /* width:60%; */
  display: flex;
  justify-content: center;
  background: #fff;
  padding: 15px;
}
.right-bottom-1 {
  font-style: normal;
  font-weight: 500;
  font-size: 14px;
  line-height: 20px;
  color: #3d59ab;
  text-align: center;
}
.right-bottom-2 {
  font-style: normal;
  font-weight: 500;
  font-size: 20px;
  line-height: 27px;
  text-align: center;
}
.post {
  width: 100%;
  border-radius: 15px;
  background-color: transparent;
  padding: 12px;
  /* box-shadow: 0px 5px 7px -7px rgba(0, 0, 0, 0.75); */
  position: relative;
  max-width: 650px;
}
.blue {
  color: #3d59ab;
}
.post__image {
  display: flex;
  align-items: center;
  justify-content: center;
  background: whitesmoke;
}
.post__image img {
  width: auto;
  max-width: 100%;
  max-height: 330px;
}

.post__top {
  display: flex;
  position: relative;
  align-items: flex-end;
  /* padding: 0 0 5px 15px; */
}
.post__top > img {
  width: 40px;
  height: 40px;
  object-fit: contain;
  border-radius: 50%;
}
.post__top .image_alternate {
  width: 45px;
  height: 45px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
  background-color: #aaa;
  color: #fff;
}
.like_info {
  color: #3d59ab;
  font-size: 0.8rem;
}
.post__avatar {
  margin-right: 10px;
}

.post__topInfo h3 {
  font-size: medium;
  margin-top: 15px;
}

.post__topInfo p {
  font-size: small;
  color: gray;
  margin-top: -12px;
}
.post__subinfo {
  font-size: 0.8rem;
  line-height: 1.2rem;
  /* font-weight: 400; */
  color: #666666;
}
.profile_imgPost {
  border-radius: 50%;
  width: 2.5rem;
  height: 2.5rem;
  object-fit: cover;
  margin-right: 0.7rem;
}
.post__bottom {
  /* padding: 10px 25px; */
  font-size: 0.8rem;
  margin-top: 1rem;
}

.post__options {
  border-top: 1px solid #f2f2f2;
  display: flex;
  justify-content: end;
  font-size: 0.8rem;
  margin-top: 0.2rem;
  color: gray;
  cursor: pointer;
  /* padding: 7px; */
}

.post__option {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  margin-left: 15px;
}
.post__optionIcon {
  color: #3d59ab;
  width: 18.75px;
  height: 18.63px;
}
.post__option p {
  margin-left: 5px;
  margin-top: 15px;
  /* color: rgb(0, 0, 0); */
}

.post__option:hover {
  transform: scale(1.1);
}
.post__meta {
  margin-left: 10px;
  font-size: 10px;
  color: rgb(195, 195, 195);
}
.post__comment {
  background-color: #e5e5f4;
  padding: 1%;
}
.post__likes {
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 5px;
  color: #3d59ab;
  font-size: 0.7rem;
}

/* .comment-card {
  margin-left: 15px;
} */
/*** ------------------new css for comment----------- ***/
.comment-card {
  padding: 0.5rem 0.8rem;
  display: flex;
  gap: 0.7rem;
  width: 100%;
}
.c-name {
  font-weight: 800;
  font-size: 0.8rem;
  margin-bottom: 0.4rem;
  line-height: 1rem;
}
.c-comment {
  font-size: 0.8rem;
  font-weight: 400;
  line-height: 1rem;
}
.comment-section {
  background-color: #3d59ab;
  width: 90%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  padding: 5px 10px;
  background: #f6f6f6;
  border-radius: 2px;
}

.post__topInfo {
  margin-left: 10px;
}
.post__topInfo > div {
  margin-top: -10px;
}
.pinned {
  position: absolute;
  top: 0;
  right: 1%;
  color: #b3b3b3;
  font-size: 0.8rem;
}
a.signup-button {
  color: transparent;
}

.app_2 {
  /* display: flex; */
  /* flex-direction: row-reverse; */
  min-height: 92vh;
  /* flex-wrap: wrap; */
  margin-top: 50px;
  background-color: #e5e5e5;
  /* gap: 45px; */
  /* justify-content: center; */
  padding: 35px;
  padding-left: 75px;
}
/* /* padding: 20px 40px; */

.blue-box {
  background-color: #3d59ab;
  color: #fff;
  padding: 10px;
  border-radius: 8px;
  font-size: x-small;
}
.blue-top {
  display: flex;
  justify-content: space-between;
}
.blue-para {
  display: flex;
  /* gap: 10px; */
  flex-direction: column;
}
.date {
  display: flex;
  gap: 10px;
}
.p1 {
  position: relative;
  top: 20px;
  font-size: x-small;
}
/* ---------------Right Side CSS------------------ */

@media only screen and (max-width: 925px) {
  .app_2 {
    display: flex;
    flex-direction: column;
  }
  .left {
    width: 100%;
  }
  .right {
    width: 100%;
  }
  .landingButton2 {
    display: block;
    margin-left: 5.8rem;
  }
  .landingButton {
    display: none;
  }
  .left {
    display: none !important;
  }
  .left-content {
    display: none !important;
  }
}

@media only screen and (max-width: 700px) {
  .app_2 {
    padding: 20px;
  }
  .left {
    display: none;
  }
  .right {
    width: 100% !important;
    padding: 0px;
  }
}

@media only screen and (max-width: 300px) {
  .landingButton2 {
    margin-left: 3.8rem;
  }
}
/* ___________________________________________________________________________________________ */