/* GENERAL */
@import url("https://fonts.googleapis.com/css2?family=Lexend+Deca:wght@100;200;300;400;500;600;700;800;900&display=swap");

*,
*::before,
*::after {
  box-sizing: border-box;
}

:root {
  --dark-blue: #101e36;
  --light-blue: #3a4560;
  --white: #ffffff;
  --yellow: rgb(232, 170, 15);
  --main-pink: #f06292;
  --dark-pink: #ba2d65;
  --ligth-pink: #ff94c2;

  --h1-font-size: 4rem;
  --medium-h-font-size: 1.5rem;
  --label-size: 1.3rem;
  --paragraph-size: 1.2rem;

  --small-gap: 1rem;
  --medium-gap: 1.5rem;
  --medium-large-gap: 2rem;
  --large-gap: 4rem;

  margin: 0;
  padding: 0;
}

body {
  font-family: "Lexend Deca", sans-serif;
  font-size: 16px;
  background-color: var(--dark-blue);
  color: var(--white);
}

h1 {
  font-size: var(--h1-font-size);
}

a:hover {
  color: var(--white);
  text-decoration: none;
}

option:hover {
  background-color: var(--light-blue);
  color: var(--ligth-pink);
}

#tags::-webkit-scrollbar {
  display: none;
}

.btn-primary {
  border: 0.2rem solid var(--ligth-pink);
  color: var(--ligth-pink);
}

.btn-primary:hover {
  background-color: var(--ligth-pink);
  color: var(--dark-blue);
}

span a {
  color: var(--ligth-pink);
}

img,
picture {
  max-width: 100%;
  display: block;
}

/* INDEX.hbs PAGE */
/* Navigation bar */
nav {
  display: flex !important;
  align-items: center;
  justify-content: space-between;
  padding: 1em 2rem;
  background: var(--dark-blue);
  margin: 3.5rem 7rem;
  height: 8%;
}

.yapic__logo {
  max-width: 20rem;
  min-width: 15rem;
}

.login > * {
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  color: var(--ligth-pink);
  border: 0.2em solid var(--ligth-pink);
  border-radius: 0.5em;
  padding: 0.5em 1.5em;
}

.signup > * {
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  background-color: var(--ligth-pink);
  color: var(--dark-blue);
  border: 0.2em solid var(--ligth-pink);
  border-radius: 0.5em;
  padding: 0.5em 1.5em;
}

.post__button {
  background-color: var(--yellow);
  border-radius: 0.25em;
  padding: 1rem;

  font-size: 1.9rem;
  font-weight: 600;

  border: none;
}

.post__button:hover {
  color: var(--white);
}

.post__button a {
  color: var(--dark-blue);
}

.post__button a:hover {
  color: var(--white);
}

.footer__board {
  display: flex;
  justify-content: flex-end;
}

.nav-buttons {
  display: flex;
  gap: var(--medium-gap);
}

#avatar {
  border-radius: 100%;
  height: 60px;
  width: 60px;
}

#profile-img {
  border-radius: 50%;
  width: 18vh;
}

.dropdown-menu {
  background-color: var(--light-blue);
}

.dropdown-menu li > a {
  color: var(--white);
}

.dropdown-menu li > a:hover {
  background-color: rgba(200, 200, 200, 0.9);
}

/* HERO SECTION */
.index__container {
  display: flex;
  align-items: center;
  justify-content: space-between;

  padding: 0 7em;
  margin: 0 auto;
  max-width: 1440px;
}

.index__text h1 {
  padding-bottom: 0.2em;

  font-size: 5rem;
}

.index__text p {
  width: 70%;

  font-size: 2rem;
  font-weight: 200;
}

.index__signup {
  width: 40%;
  padding: 0.7em 1.5em;
  margin-top: 2em;
  background-color: var(--white);
  color: var(--dark-blue);

  border: 0.2em solid var(--white);
  border-radius: 0.5em;

  text-align: center;
}

.index__signup a {
  color: var(--dark-blue);
}

.index__signup a:hover {
  color: var(--white);
}

.index__login {
  display: none;
}

.index__illustration {
  width: 100%;
}

/* END OF INDEX.hbs                     */
/* <----------------------------------> */

/* LOGIN.hbs PAGE */
.login__parent {
  display: flex;
  justify-content: center;
  height: 60vh;
}
.login-container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  align-content: center;

  gap: var(--small-gap);
}

.loginForm {
  display: flex;
  flex-wrap: nowrap;
  align-content: center;
  flex-direction: column;
  align-items: center;
}

.loginBtn {
  padding: 0.375em 0.75em;
  background-color: var(--ligth-pink);
  color: var(--dark-blue);
  border: none;
  border-radius: 0.25em;
}

.loginBtn:hover {
  color: var(--white);
}

/* END OF LOGIN.hbs                     */
/* <----------------------------------> */

/* SIGNUP.hbs PAGE */
.signup-container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  align-content: center;
  height: 70vh;
  gap: var(--small-gap);
}
.signupForm {
  display: flex;
  flex-wrap: nowrap;
  align-content: center;
  flex-direction: column;
  align-items: center;
}

.signupBtn {
  padding: 0.375em 0.75em;
  background-color: var(--ligth-pink);
  color: var(--dark-blue);
  border: none;
  border-radius: 0.25em;
}

.signupBtn:hover {
  color: var(--white);
}
/* END OF SIGNUP.hbs                     */
/* <----------------------------------> */

/* POSTNEW.hbs PAGE */
.postnew-container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  align-content: center;
  height: 70vh;
  gap: var(--small-gap);
}

.profileParent {
  text-align: center;
}

.profileParent h1 {
  margin-bottom: 5rem;
}

.profileParent button {
  margin-bottom: 2rem;
}

.postnewForm {
  display: flex;
  flex-wrap: nowrap;
  align-content: center;
  flex-direction: column;
  align-items: center;
  gap: var(--medium-gap);
}

.postnewForm label {
  margin-bottom: -1rem;
}

.postnewForm button {
  margin-top: 2rem;
}

.inp {
  text-align: center;
  margin: auto;
}

input[type="file"] {
  width: 10rem;
}

option {
  color: var(--dark-blue);
}

option:focus {
  outline: none !important;
}

textarea {
  color: var(--dark-blue);
}

textarea:focus {
  outline: none !important;
}

input {
  color: var(--dark-blue);
}

input:focus {
  outline: none !important;
}

select:focus {
  outline: none;
}
/* END OF POSTNEW.hbs                     */
/* <----------------------------------> */

/* PROFILE.hbs PAGE */
.editing-profile-container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  align-content: center;
  min-width: none;
  gap: var(--small-gap);
}

.editing-profile {
  display: flex;
  flex-wrap: nowrap;
  flex-direction: column;
  align-items: center;
}

.profile__parent {
  padding-bottom: 8em;
}

.profile__parent h1 {
  text-align: center;
  padding-bottom: 1em;
}

.profile__button {
  padding: 0.375em 0.75em;
  background-color: var(--ligth-pink);
  color: var(--dark-blue);
  border: none;
  border-radius: 0.25em;
}

.profile__button:hover {
  color: var(--white);
}

#interests::-webkit-scrollbar {
  display: none;
}
/* END OF PROFILE.hbs                     */
/* <----------------------------------> */

/* HOME PAGE */
.home__title {
  display: flex;
  justify-content: center;
}

/* GRID */
.stacked {
  display: grid;
}

.stacked > * {
  grid-column: 1/2;
  grid-row: 1/2;
}

.home__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(30rem, 1fr));
  gap: 0.5rem;

  margin: 8rem;
}

.home__card {
  transition: 0.6s ease;
  aspect-ratio: 1 / 1.5;
}

.home__card:hover {
  transform: scale(1.02);
}

.home__card-img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
}

.home__card form {
  margin: 0;
}

.home__card-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1em;

  margin: 0.5rem 0.5rem 2rem;
  padding: 2rem;
  background-color: var(--light-blue);

  align-self: end;
}

.home__card-content h4 {
  margin: 0;
}

.home__card-title {
  font-size: 2.3rem;
  font-weight: 800;
  line-height: 1.1;
  text-align: center;
  text-transform: uppercase;
}

.home__card-description {
  color: white;

  font-size: 1.5rem;
  font-weight: 300;
  letter-spacing: 0.07rem;
  text-align: center;
}

.home__card-tags {
  display: flex;
  gap: 1em;
}

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

@media (min-width: 60em) {
  .home__card.featured:first-child {
    grid-row: span 2;
    grid-column: span 2;
  }

  .home__card.featured:first-child .home__card-img {
    aspect-ratio: 1 / 1.25;
  }

  .home__card.featured:first-child .home__card-title {
    font-size: 3rem;
  }
}

/* Match Scrolling */
.match-scroller {
  display: grid;
  grid-auto-flow: column;
  align-items: center;
  grid-auto-columns: 21%;

  padding: 2rem 2rem 4rem 2rem;

  overflow-x: auto;
  overscroll-behavior-inline: contain;
}

.snaps-inline {
  scroll-snap-type: inline mandatory;
  scroll-padding-inline: 1rem;
}

.snaps-inline > * {
  scroll-snap-align: start;
}

.match-card {
  display: grid;
  grid-template-rows: min-content;
  justify-items: center;
  padding: 1rem;
  border-radius: 50%;
  margin-bottom: 2rem;
}

.match-card img {
  width: 70%;
  min-width: 6.25em;
  margin: 0 auto;
  border-radius: 50%;
  object-fit: cover;
}

.match-card p {
  text-align: center;
  margin: 2rem;
}

/*DELETE BUTTON FOR POSTS */
.btn-delete {
  display: flex;
  align-items: center;
  text-align: center;
  background: none;
  background-color: var(--white);
  color: var(--dark-blue);
  padding: 0.5em 1.5em;

  letter-spacing: 0.2rem;
  cursor: pointer;
}

.btn-delete span {
  font-size: 1rem;
  font-weight: 400;
}

.home__card .span-tags * {
  background-color: var(--ligth-pink);
  padding: 0.7rem;
  border-radius: 2rem;
  font-size: var(--paragraph-size);
  font-weight: 500;
  color: var(--dark-blue);
}

.span-tags p {
  margin: 0;
}

.btn:hover {
  background-color: var(--ligth-pink);
  color: var(--white);
  border: none;
}

/* Match PAGE */
.match-div {
  display: flex;
  flex-direction: column;
  align-items: center;
  align-content: center;
  gap: 0.8rem;
  text-align: center;
}

.match-div h1 {
  font-size: var(--h1-font-size);
}
.match-div h4 {
  font-size: 2.2rem;
  font-weight: 500;
}

.match-div p {
  font-size: 1.6rem;
  font-weight: 200;
}

.messageBtn {
  background-color: var(--ligth-pink);
  color: var(--dark-blue);
  transition: background-color 2s;
}

/* Modal */
.modal-content {
  background-color: var(--light-blue);
}

.modalMessBtn {
  background-color: var(--ligth-pink);
  color: var(--dark-blue);
  transition: background-color 2s;
}

.btn-secondary:hover {
  background-color: var(--yellow);
  color: var(--dark-blue);
}

/* END OF PROFILE.hbs                     */
/* <----------------------------------> */

/* FOOTER */
footer {
  display: flex;
  align-items: center;
  justify-content: space-between;

  position: fixed;

  width: 100%;
  padding: 2.5em 6em;

  left: 0;
  bottom: 0;
}

.index__waves {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  z-index: -1;
}

.index__waves img {
  width: 100%;
}

.index__waves2 {
  display: none;
}

footer p {
  margin-bottom: 0;
  color: var(--dark-blue);
}

footer .fa-icons {
  display: flex;
  gap: var(--large-gap);
  font-size: 2rem;
}

.fa-facebook {
  color: var(--dark-blue);
}

.fa-facebook:hover {
  color: var(--white);
}

.fa-facebook:focus {
  text-decoration: none;
  color: inherit;
}

.fa-twitter {
  color: var(--dark-blue);
}

.fa-twitter:hover {
  color: var(--white);
}

.fa-instagram {
  color: var(--dark-blue);
}

.fa-instagram:hover {
  color: var(--white);
}

.hr-post {
  border-top: 1px solid black;
}

/* MEDIA QUERY */
@media screen and (min-width: 1440px) {
  .index__container {
    padding-top: 0;
  }

  .index__text {
    max-width: 50%;
  }

  .footer {
    margin: 0 auto;
  }

  .index__waves {
    display: block;
  }

  .index__waves3 {
    display: none;
  }

  .index__waves4 {
    display: none;
  }
}

@media screen and (min-width: 1024px) and (max-width: 1439px) {
  .index__container {
    padding-top: 2em;
  }

  .index__text {
    max-width: 50%;
  }

  .index__text h1 {
    width: 80%;
    font-size: 4rem;
  }

  .index__text p {
    width: 90%;
    font-size: 2rem;
  }

  .index__illustration {
    width: 40vw;
  }

  .index__illustration img {
    width: 50vw;
  }

  .index__waves {
    display: block;
  }

  .index__waves3 {
    display: none;
  }

  .index__waves4 {
    display: none;
  }
}

@media screen and (min-width: 768px) and (max-width: 1023px) {
  .index__container {
    display: flex;
    flex-direction: column-reverse;

    padding: 0 1em;
  }

  .index__text {
    width: 75%;
  }

  .index__text h1 {
    font-size: 3.5rem;
  }

  .index__text p {
    font-size: 1.7rem;
    width: 100%;
  }

  .index__signup {
    margin-top: 1em;
    padding: 1em 4em;
    width: 50%;
  }

  .index__illustration {
    width: 45vw;
  }

  .index__illustration img {
    width: 100%;
  }

  .index__waves {
    display: none;
  }

  .index__waves4 {
    display: none;
  }

  .index__waves3 {
    display: block;
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    z-index: -1;
  }

  .index__waves3 img {
    width: 100%;
  }

  .nav-bar {
    margin: 1em 2em;
  }
}

@media screen and (min-width: 426px) and (max-width: 767px) {
  .nav-bar {
    justify-content: center;
  }

  .index__container {
    flex-direction: column-reverse;

    padding: 2em 2em 0 2em;
  }

  .index__illustration {
    display: flex;
    justify-content: center;
  }

  .index__text {
    width: 90%;
  }

  .index__text h1 {
    display: none;
  }

  .index__text p {
    display: none;
  }

  .index__signup {
    width: 100%;
    margin-top: 0;
    background-color: var(--ligth-pink);
    border: 0.2em solid var(--ligth-pink);
  }

  .login {
    display: none;
  }

  .index__login {
    display: flex;
    justify-content: center;

    width: 100%;
    background-color: var(--dark-blue);

    border: 0.2em solid var(--ligth-pink);
    border-radius: 0.5em;
    padding: 0.5em 1.5em;
  }

  .index__login a {
    color: var(--ligth-pink);
  }

  .index__buttons {
    display: flex;
    flex-direction: column;
    gap: 1em;
  }

  .index__illustration img {
    width: 60vw;
  }
  .index__waves {
    display: none;
  }

  .index__waves2 {
    display: none;
  }

  .index__waves3 {
    display: none;
  }

  footer {
    padding: 2em 2em;
  }

  footer p {
    color: var(--ligth-pink);
  }

  .fa-facebook {
    color: var(--ligth-pink);
  }

  .fa-twitter {
    color: var(--ligth-pink);
  }

  .fa-instagram {
    color: var(--ligth-pink);
  }
}

@media screen and (max-width: 425px) {
  

  .index__container {
    display: flex;
    flex-direction: column-reverse;
    padding: 1em 0;
  }

  .login {
    display: none;
  }

  .index__login {
    display: flex;
    justify-content: center;

    width: 100%;
    background-color: var(--dark-blue);

    border: 0.2em solid var(--ligth-pink);
    border-radius: 0.5em;
    padding: 0.5em 1.5em;
  }

  .index__login a {
    color: var(--ligth-pink);
  }

  .index__login a:hover {
    color: var(--white);
  }

  .index__signup {
    width: 100%;
    margin-top: 0;
    background-color: var(--ligth-pink);
    border: 0.2em solid var(--ligth-pink);
  }

  .index__buttons {
    display: flex;
    flex-direction: column;
    gap: 2em;
  }

  .index__text {
    width: 80%;
  }

  .index__text h1 {
    display: none;
  }

  .index__text p {
    display: none;
  }

  .index__illustration {
    width: 85vw;
    padding-bottom: 2em;
  }

  .index__illustration img {
    width: 100%;
  }

  .index__waves {
    display: none;
  }

  .index__waves3 {
    display: none;
  }

  footer {
    padding: 1em 2em;
  }

  footer p {
    color: var(--ligth-pink);
  }

  .fa-facebook {
    color: var(--ligth-pink);
  }

  .fa-twitter {
    color: var(--ligth-pink);
  }

  .fa-instagram {
    color: var(--ligth-pink);
  }
}