/* ---------- CUSTOM PROPERTIES --------------- */

:root {
  --cl-black: 0, 0%, 5%;
  --cl-white: 0, 0%, 100%;
  --cl-profile-name: 0, 0%, 97%;
  --cl-profile-bio: 0, 0%, 72%;
  --cl-like-btn-hovered: 162, 100%, 93%;
  --cl-reject-btn-hovered: 340, 100%, 95%;
}

/* RESET */
/* CSS Reset https://andy-bell.co.uk/a-modern-css-reset/ */

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

body,
h1,
h2,
h3,
h4,
h5,
h6,
p {
  margin: 0;
}

/* Set up body */
body {
  font-family: "Poppins", sans-serif;
  color: hsl(var(--cl-profile-bio));
  font-weight: 400;
  font-size: 1.25rem;
  line-height: 1.5;
}

@media (width >= 420px) {
  body {
    font-size: 1.5rem;
  }
} 

/* Make images easier to work with */
img {
  display: block;
  object-fit: cover;
}

/* ---------------- UTILITY CLASSES ------------------*/

.container {
  width: 100%;
  margin: 0 auto;
  padding: 0 0.5rem;
  max-width: 35rem;
  background-color: hsl(var(--cl-profile-name));
}

.rounded {
  border-radius: 50%;
}

.flex {
  display: flex;
}

.disabled {
  pointer-events: none;
  filter: grayscale(1);
}

/* ----------------- TYPOGRAPHY ------------------- */

h2,
.reset-btn {
  font-size: 1.75rem;
  font-weight: 600;
  color: hsl(var(--cl-profile-name));
}

@media (width >= 420px) {
  h2,
  .reset-btn {
    font-size: 2rem;
  }
} 

h2 {
  line-height: 1.125;
}

/* ----------------- BUTTONS ------------------- */

.button-wrapper {
  justify-content: center;
  padding: 1.5rem 0;
  gap: 1.5rem;
}

.btn {
  width: 5rem;
  height: 5rem;
  justify-content: center;
  align-items: center;
  border: none;
  background-color: hsl(var(--cl-white));
  box-shadow: 0 7px 12px hsl(var(--cl-profile-bio), 0.5);
  cursor: pointer;
}

@media (width >= 420px) {
  .btn {
    width: 5.75rem;
    height: 5.75rem;
    box-shadow: 0 10px 15px hsl(var(--cl-profile-bio), 0.5);
  }
} 

.reject-btn:hover,
.reject-btn:focus {
  background-color: hsl(var(--cl-reject-btn-hovered));
  box-shadow: 0 7px 12px hsl(var(--cl-reject-btn-hovered), 0.8);
}

@media (width >= 420px) {
  .reject-btn:hover,
  .reject-btn:focus {
    box-shadow: 0 10px 15px hsl(var(--cl-reject-btn-hovered), 0.8);
  }
} 

.like-btn:hover,
.like-btn:focus {
  background-color: hsl(var(--cl-like-btn-hovered));
  box-shadow: 0 7px 12px hsl(var(--cl-like-btn-hovered), 0.8);
}

@media (width >= 420px) {
  .like-btn:hover,
  .like-btn:focus {
    box-shadow: 0 10px 15px hsl(var(--cl-like-btn-hovered), 0.8);
  }
} 

.reset-btn {
  margin: 1rem 0;
  border: none;
  border-radius: 1.25rem;
  padding: 0.625rem 4.5rem;
  background-image: linear-gradient(
    90deg,
    rgba(248, 51, 117, 1) 0%,
    rgba(250, 105, 90, 1) 100%
  );
  cursor: pointer;
}

@media (width >= 420px) {
  .reset-btn {
    margin: 1.25rem 0;
    padding: 0.875rem 6rem;
  }
} 

.reset-btn:hover,
.reset-btn:focus {
  background: linear-gradient(
    180deg,
    rgba(0, 216, 148, 1) 0%,
    rgba(86, 233, 205, 1) 100%
  );
}

/* ---------------- LAYOUT -------------------- */

/* Header */

header .container {
  padding: 1rem .875rem;
  justify-content: space-between;
  align-items: center;
}

@media (width >= 420px) {
  header .container {
    padding: 1.25rem 1.125rem;
  }
}

.profile-icon {
  width: 1.75rem;
  height: 1.875rem;
}

@media (width >= 420px) {
  .profile-icon {
    width: 2rem;
    height: 2.125rem;
  }
} 

.logo {
  width: 5rem;
  height: 2.375rem;
}

@media (width >= 420px) {
  .logo {
    width: 5.25rem;
    height: 2.625rem;
  }
} 

.chat-icon {
  width: 1.875rem;
  height: 1.875rem;
}

@media (width >= 420px) {
  .chat-icon {
    width: 2.125rem;
    height: 2.125rem;
  }
} 

/* Profile */

main .container {
  flex-direction: column;
}

.profile,
.end {
  max-width: 100%;
  min-height: 36rem;
  flex-direction: column;
}

@media (width >= 420px) {
  .profile,
  .end {
    min-height: 47rem;
  }
} 

.profile {
  position: relative;
  overflow: hidden;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  border-radius: 1rem;
  padding-left: 0.75em;
  padding-bottom: 1em;

  justify-content: end;
}

/* Labels */

.label {
  position: absolute;
  top: 2.5rem;
  left: 0.5em;
  max-width: 11rem;
  max-height: 5.5rem;
  
  transform: rotate(-30deg);
}

@media (width >= 420px) {
  .label {
    top: 3.5rem;
    left: 0.75em;
    max-width: 14.625rem;
    max-height: 7.25rem;
  }
} 

/* End */

.end {
  justify-content: end;
  align-items: center;
}

.end-gif {
  border-radius: 1rem;
  max-width: 100%;
}

.end-message {
  text-align: center;
  margin-top: 5rem;
}

@media (width >= 420px) {
  .end-message {
    margin-top: 10rem;
  }
}