@import url("https://fonts.googleapis.com/css2?family=Big+Shoulders+Display:wght@100..900&family=Hanken+Grotesk:ital,wght@0,100..900;1,100..900&family=Lexend+Deca:wght@100..900&family=Roboto:ital,wght@0,100..900;1,100..900&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Roboto+Mono:wght@400;500&display=swap");

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

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus {
  -webkit-box-shadow: 0 0 0 30px white inset !important;
  -webkit-text-fill-color: inherit !important;
  transition: background-color 5000s ease-in-out 0s;
}

body {
  font-family: sans-serif;
  min-height: 10vh;
  background-color: #fff;
}

.login-wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 10vh;
}

.container {
  width: 100%;
  max-width: 400px;
  padding: 15px 20px 0px 20px;
}

.logo {
  width: 230px;
  height: auto;
  margin: 5px 0 13px 5px;
}

/* Form Container Styles */
.login-content {
  width: 100%;
  margin-bottom: 20px;
  padding: 5px;
}

/* Form Field Styles */
.form-field {
  position: relative;
  margin-bottom: 27px;
}

/* Input Styles */
.form-field input {
  width: 100%;
  padding: 15px;
  border: 1px solid #ccc;
  border-radius: 7px;
  font-size: 16px;
  outline: none;
  transition: border-color 50ms ease;
  caret-color: #00aff0;
}

.form-field input:focus {
  border: 1px solid rgba(14, 157, 240, 0.8);
}

.form-field input::placeholder {
  color: #8a96a3;
  opacity: 1;
  transition: opacity 50ms ease-in;
  padding-left: 2px;
  font-family: sans-serif;
  font-size: 16px;
  opacity: 0.9;
}

.form-field input:focus::placeholder {
  opacity: 0;
}

/* Label Styles */
.form-field label {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  background-color: white;
  padding: 0 4px;
  color: #8a96a3;
  pointer-events: none;
  opacity: 0;
}

.form-field.ready label {
  transition: all 0.1s ease;
}

.form-field input:focus + label {
  color: #00b0f0e5;
}

.form-field input:focus + label,
.form-field input:not(:placeholder-shown) + label {
  top: 0;
  font-size: 13px;
  opacity: 1;
}

/* Password Field Styles */
.password-container {
  position: relative;
  width: 100%;
}

.toggle-password-btn {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  opacity: 0.7;
  border: none;
  background: none;
  padding: 5px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  transition: background-color 0.2s;
}

.toggle-password {
  width: 24px;
  height: 24px;
  fill: #666;
  transition: fill 0.2s;
}

.toggle-password-btn:hover {
  background-color: rgba(0, 122, 255, 0.1);
}

/* Header Styles */
.mainheader {
  font-family: "Roboto", sans-serif;
  font-size: 29px;
  font-weight: 400;
  line-height: 36px;
  color: #242529;
  /* margin-bottom: 30px; */
  /* margin-left: 5px; */
  margin: 0 30px 30px 5px;
  text-align: left;
}

h4 {
  color: #242529;
  font-family: sans-serif;
  margin-bottom: 12px;
  font-weight: 700;
  /* padding-left: 2px; */
  font-size: 14px;
  /* opacity: 0.9; */
}

.login-btn button {
  font-family: "Roboto", sans-serif;
  font-weight: 500;
  font-size: 14px;
  margin-top: 28px;
  margin-bottom: 7px;
  width: 100%;
  border-radius: 30px;
  padding: 12px 0 12px 0;
  border: none;
  color: white;
  background-color: rgba(138, 150, 163, 0.75);
  opacity: 0.4;
  transition: all 0.2s ease;
}

.login-btn p {
  font-family: "Roboto", sans-serif;
  font-weight: 400;
  font-size: 12px;
  line-height: 16px;
  margin: 0 10px 0 14px;
  color: #8a96a3;
  /* opacity: 0.9; */
}

.login-btn a {
  text-decoration: none;
  color: #00aff0;
}

.action-btns {
  font-weight: 400;
  text-align: center;
  margin-top: 26px;
  color: #00aff0;
  display: flex;
  justify-content: center;
}

.action-btns span {
  font-family: "Roboto", sans-serif;
  cursor: pointer;
  font-size: 14px;
}

.action-btns span:nth-child(2) {
  position: relative;
  padding-left: 20px;
  margin-bottom: 25px;
}

.action-btns span:nth-child(2)::before {
  width: 2px;
  height: 2px;
  border-radius: 1000px;
  background: #8a96a3;
  content: "";
  position: absolute;
  top: 50%;
  margin-top: -1px;
  left: 9px;
}

.social-btns {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.twitter {
  text-align: center;
  width: 100%;
  font-size: 14px;
  margin-bottom: 15px;
  border-radius: 30px;
  padding: 12px 0 12px 0;
  background-color: #1da1f2;
  position: relative;
}

/* hover state for twitter AND passwordless sign in color #0091ea */

.twitter a {
  text-decoration: none;
  color: #fefefe;
  font-family: "Roboto", sans-serif;
  font-weight: 500;
  display: flex;
  align-items: center;
  justify-content: center;
}

.twitter svg {
  width: 24px;
  height: 24px;
  fill: currentColor;
  position: absolute;
  left: 10px; /* Adjust this value to match your design */
  top: 50%;
  transform: translateY(-50%);
}

.google {
  text-align: center;
  width: 100%;
  font-size: 14px;
  margin-bottom: 15px;
  border-radius: 30px;
  padding: 12px 0 12px 0;
  background-color: #4285f4;
  position: relative;
}

/* hover state for google color #3367d6 */

.google a {
  text-decoration: none;
  color: #fefefe;
  font-family: "Roboto", sans-serif;
  font-weight: 500;
  display: flex;
  align-items: center;
  justify-content: center;
}

.google svg {
  width: 24px;
  height: 24px;
  fill: currentColor;
  position: absolute;
  left: 8px;
  top: 50%;
  transform: translateY(-50%);
  background-color: #fefefe;
}

.google a::before {
  content: "";
  position: absolute;
  left: 2px;
  width: 36px;
  height: 37px;
  background: white;
  border-radius: 30px 0 0 30px;
}

.passwordless {
  text-align: center;
  width: 100%;
  font-size: 14px;
  border-radius: 30px;
  padding: 12px 0 12px 0;
  background-color: #00aff0;
  position: relative;
}

.passwordless a {
  text-decoration: none;
  color: #fefefe;
  font-family: "Roboto", sans-serif;
  font-weight: 500;
  display: flex;
  align-items: center;
  justify-content: center;
}

.passwordless svg {
  width: 24px;
  height: 24px;
  fill: currentColor;
  position: absolute;
  left: 8px;
  top: 50%;
  transform: translateY(-50%);
}

.featured-posts {
  min-height: 300px;
  display: flex;
  flex-direction: column;
  align-items: center;
  border-top: 1px solid rgba(138, 150, 163, 0.4);
  background: url(data:image/png;base64,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)
    50% / cover;
  padding: 36px 16px 26px;
}

.featured-header {
  width: 100%;
  max-width: 700px;
  font-size: 29px;
  font-family: "Roboto", sans-serif;
  font-weight: 400;
  color: #242529;
  margin-bottom: 36px;
  align-self: left;
}

.posts {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.post-card {
  width: 100%;
  max-width: 700px;
  border-radius: 6px;
  background-color: #fff;
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16);
  margin-bottom: 32px;
  padding: 12px 16px 0;
  display: block;
  overflow: hidden;
  color: black;
}

.post-header {
  padding: 3px 0 0 60px;
  min-height: 48px;
  position: relative;
  margin: 0 0 14px;
}

.post-avatar {
  position: absolute;
  top: 3px;
  left: 2px;
}

.avatar-span {
  width: 48px;
  height: 48px;
  flex: 0 0 48px;
  font-size: 18px;
  border-radius: 1000px;
  display: block;
  position: relative;
  /* background-color: black; */
}

.avatar {
  width: 100%;
  height: 100%;
  cursor: pointer;
}

.avatar img {
  border-radius: 50%;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  position: relative;
  pointer-events: none;
}

.post-name {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  margin-bottom: 5px;
}

.name-and-badge {
  display: flex;
  flex-direction: row;
  align-items: center;
}

.name-and-badge svg {
  fill: rgba(36, 37, 41, 1);
  cursor: pointer;
}

.name-and-badge h5 {
  font-family: "Roboto", sans-serif;
  font-weight: 500;
  font-size: 16px;
  padding-right: 4px;
  color: #242529;
  cursor: pointer;
}

.post-name p {
  font-size: 14px;
  font-family: "Roboto", sans-serif;
  color: #8a96a3;
  opacity: 0.9;
}

.post-username a {
  text-decoration: none;
  color: #8a96a3;
  font-family: "Roboto", sans-serif;
  font-size: 14px;
  /* opacity: 0.9; */
}

.desc {
  position: relative;
  font-family: "Roboto", sans-serif;
  margin: 0 0 10px 0;
  color: #242529;
  font-size: 16px;
  line-height: 24px;
}

.links {
  color: #00aff0;
  font-family: "Roboto", sans-serif;
  font-weight: 400;
  cursor: pointer;
}

.readmore {
  font-size: 14px;
  text-decoration: none;
  color: #00aff0;
  cursor: pointer;
}

.post-image {
  margin-top: 12px;
  width: calc(100% + 32px);
  margin-left: -16px;
}

.image-video {
  width: 100%;
  position: relative;
  aspect-ratio: 16/9;
  overflow: hidden;
}

.image-video img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.play-button {
  position: absolute;
  top: 50%;
  left: 50%;
  opacity: 0.7;
  transform: translate(-50%, -50%);
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  transition: transform 0.2s ease;
}

.showmore-btn {
  border: none;
  border-radius: 20px;
  border: 1px solid rgba(138, 150, 163, 0.25);
  background-color: transparent;
  font-family: "Roboto", sans-serif;
  font-size: 14px;
  font-weight: 500;
  color: #00aff0;
  padding: 8px 14px;
  cursor: pointer;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
  /* transition: background-color 0.2s ease; */
}

.footer {
  background-color: #fff;
  color: #8a96a3;
  border-top: 1px solid rgba(138, 150, 163, 0.25);
  padding-top: 35px;
  font-size: 13px;
  line-height: 16px;
  margin-top: auto;
}

.footer-cont {
  max-width: 972px;
  margin-right: auto;
  margin-left: auto;
  padding: 0 16px;
  width: 100%;
}

.footer-nav {
  padding-top: 13px;
  color: #8a96a3;
  column-gap: normal;
  display: flex;
  flex-direction: row;
  align-items: flex-start;
}

.leftfooter {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  padding-right: 16px;
  width: 35%;
  flex: 0 0 35%;
}

.leftfooter a {
  text-decoration: none;
  color: #8a96a3;
  font-family: "Roboto", sans-serif;
  font-weight: 500;
  font-size: 12px;
  margin-bottom: 16px;
  display: inline-block;
  vertical-align: top;
  background-color: transparent;
}

.footer-socials {
  margin-top: -5px;
  display: inline-flex;
  flex-direction: row;
  align-items: center;
}

.footer-socials a {
  margin-top: 5px;
  margin-right: 15px;
}

.footer-socials a svg {
  fill: rgba(138, 150, 163, 1);
}

.endofdiv {
  display: flex;
  flex-direction: column;
}

.lang-menu {
  display: flex;
  flex-direction: row;
  font-family: "Roboto", sans-serif;
  font-size: 13px;
  font-weight: 500;
}

.worldicon {
  fill: rgba(138, 150, 163, 1);
  margin-right: 5px;
}

.blue-line {
  width: 64px;
  height: 2px;
  margin-bottom: 17px;
  border-radius: 2px;
  background: rgba(0, 175, 240, 0.5);
}

.drop-arrow {
  fill: rgba(138, 150, 163, 1);
  margin-left: 7px;
}

.rightfooter {
  display: grid;
  column-gap: 16px;
  flex: 0 0 auto;
  grid-template-columns: repeat(2, 1fr);
  width: 65%;
  margin-bottom: 40px;
}

.rightfooter a {
  margin-bottom: 16px;
  text-decoration: none;
  color: rgba(138, 150, 163, 1);
  font-size: 11.8px;
  font-family: "Roboto", sans-serif;
  /* opacity: 0.9; */
}