/* -------------------- OVERALL -------------------- */
@font-face {
  font-family: "dahlia";
  src: url("../media/dahlia-medium-webfont.woff");
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: dahlia, serif;
  color: #fff;
  background-color: #000;
}

@media (max-width: 899px) {
  .main {
    width: 100%;
    height: 100vh;
    position: relative;
  }
}

.container {
  display: flex;
  width: 1950px;
  max-width: 100%;
}
@media (max-width: 899px) {
  .container {
    display: block;
  }
}

.section {
  padding: 3rem 5.5rem;
  display: flex;
  align-items: center;
  min-width: 100vw;
  min-height: 100vh;
}
@media (max-width: 899px) {
  .section {
    padding: 3rem 2rem;
  }
}

a {
  color: #ffffff;
}

a:hover {
  text-decoration: line-through;
  color: #ffffff;
}

p {
  font-weight: 300;
  padding-bottom: 25px;
  line-height: 110%;
}
/* ---------------------------------------------------- */
/* -------------------- SCROLLBAR -------------------- */
html::-webkit-scrollbar {
  width: 0.3vw;
}

html::-webkit-scrollbar-thumb {
  background-color: #fff;
  border-radius: 30px;
}

html::-webkit-scrollbar-thumb:hover {
  background-color: #555;
}

html::-webkit-scrollbar-track {
  background-color: #000;
}

html::-webkit-scrollbar-track:hover {
  background-color: #000;
}
/* ----------------- NAV ----------------- */
#nav {
  padding: 3rem 5.5rem;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  font-size: 25px;
  position: fixed;
  width: 100%;
  z-index: 200;
}

#nav a {
  padding: 0 45px;
}

#nav-hidden {
  padding: 3rem 5.5rem;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  font-size: 25px;
  position: fixed;
  width: 100%;
  z-index: 200;
}
@media (max-width: 899px) {
  #nav-hidden {
    display: none;
  }
}

#nav-hidden a {
  padding: 0 45px;
}
/* ---------------------------------------------------- */

/* ----------------- NAV MOBILE ----------------- */
#scrollDownAnim {
  transition: 350ms ease-in-out;
}
/* ---------------------------------------------------- */
/* ----------------- BUTTONS ----------------- */
#toTopBtn {
  display: none; /* Hidden by default */
  position: fixed; /* Fixed/sticky position */
  bottom: 20px; /* Place the button at the bottom of the page */
  right: 30px; /* Place the button 30px from the right */
  z-index: 99; /* Make sure it does not overlap */
  border: none; /* Remove borders */
  outline: none; /* Remove outline */
  background-color: white; /* Set a background color */
  color: black; /* Text color */
  cursor: pointer; /* Add a mouse pointer on hover */
  padding: 15px 30px 15px 30px; /* Some padding */
  border-radius: 10px; /* Rounded corners */
  font-size: 15px; /* Increase font size */
  text-transform: uppercase;
  font-weight: 600;
}

#toTopBtn:hover {
  background-color: rgb(221, 221, 221); /* Add a darker background on hover */
}

.returnBtn {
  display: flex;
  align-items: center;
  z-index: 1000;
  position: fixed;
  left: 0;
  font-family: "Poppins";
  font-weight: 500;
  font-size: 20px;
}
.returnBtn a:hover {
  color: #fff;
}

.fa-solid {
  padding-left: 30px;
  color: #fff;
}

i {
  margin-right: 10px;
}

.button {
  border-radius: 30px;
  background-color: rgba(0, 0, 0, 0);
  border: 1px solid #fff;
  padding: 20px;
  display: inline-block;
  text-align: center;
  width: 100%;
  text-decoration: none;
  color: white;
  font-family: "Poppins";
  font-weight: 500;
  display: flex;
}

.button:hover {
  background-color: rgb(255, 255, 255);
  color: #000;
}
/* ---------------------------------------------------- */
/* ---------------------- PAGE TITLE ---------------------- */
#title-page {
  background-color: #000;
  position: relative;
  display: flex;
  justify-content: center;
  /*align-items: flex-end;*/
}

/* Center page title on mobile  */
.section#title-page {
  justify-content: center;
  align-self: center;
  align-items: center;
  display: flex;
}

/* Styling for page title */
.main-title {
  font-size: 16vw;
  font-weight: 300;
  line-height: 0.8;
}
@media (max-width: 899px) {
  .main-title {
    font-size: 16vw;
  }
}

/* Adds styling to the mouse scroll icon */
.scroll-downs {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
  width: 34px;
  height: 55px;
}

.mousey {
  width: 2px;
  padding: 7px 12px;
  height: 30px;
  border: 2px solid #fff;
  border-radius: 25px;
  opacity: 0.75;
  box-sizing: content-box;
  bottom: -520px;
  position: relative;
}

.scroller {
  width: 3px;
  height: 10px;
  border-radius: 25%;
  background-color: #fff;
  animation-name: scroll;
  animation-duration: 2.2s;
  animation-timing-function: cubic-bezier(0.15, 0.41, 0.69, 0.94);
  animation-iteration-count: infinite;
}

@keyframes scroll {
  0% {
    opacity: 0;
  }
  10% {
    transform: translateY(0);
    opacity: 1;
  }
  100% {
    transform: translateY(15px);
    opacity: 0;
  }
}
/* ---------------------------------------------------- */
/* ---------------------- TRACK LIST ---------------------- */
#tracklist {
  background: #000;
}

.tracklist-title {
  font-size: 1vw;
  font-family: "Poppins";
  min-width: 20%;
}
@media (max-width: 899px) {
  .tracklist-title {
    font-size: 6vw;
  }
}

.tracks-container {
  display: flex;
  flex-direction: column;
}
@media (max-width: 899px) {
  .tracks-container {
    display: block;
  }
}

.tracks-group {
  display: flex;
  padding-bottom: 20px;
}
@media (max-width: 899px) {
  .tracks-group {
    display: block;
    padding-bottom: 0;
  }
}

.tracklist-song-title {
  font-size: 3vw;
  font-weight: 100;
  font-family: "Bodoni Moda", serif;
  line-height: 1;
  margin-right: 80px;
}
@media (max-width: 899px) {
  .tracklist-song-title {
    font-size: 7vw;
    margin-right: 0;
    padding-bottom: 30px;
  }
}

.tracklist-song-title-inactive {
  font-size: 3vw;
  font-weight: 600;
  font-family: "Bodoni Moda", serif;
  line-height: 1;
  margin-right: 80px;
  text-decoration: line-through;
  color: #555 !important;
}
@media (max-width: 899px) {
  .tracklist-song-title-inactive {
    font-size: 7vw;
    margin-right: 0;
    padding-bottom: 30px;
  }
}

.section-subtitle {
  font-size: 25px;
  font-family: "Poppins";
  font-weight: 600;
  min-width: 25%;
}
/* ---------------------------------------------------- */
/* ---------------------- INDIVIDUAL TRACKS ---------------------- */

/* Track title page */
#track-title-page {
  /* background-color: #000; */
  position: relative;
  justify-content: center;
  background-image: url("/media/cover.jpg");
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  height: 100vh;
}

/* Styling for track titles */
.track-title-large {
  font-size: 10vw;
  line-height: 0.9;
  font-weight: 300;
  text-align: center;
}
@media (max-width: 899px) {
  .track-title-large {
    font-size: 16vw;
    line-height: 0.9;
  }
}

#track-lyrics {
  padding-top: 250px;
  min-width: 100vw;
  background-color: #000;
  position: relative;
  align-items: center;
  justify-content: center;
}

.track-lyrics {
  font-size: 70px;
  font-family: "Bodoni Moda", serif;
  line-height: 1.7;
}
@media (max-width: 899px) {
  .track-lyrics p {
    font-size: 30px;
    line-height: 1.5 !important;
  }
}

/* Adds space between the song elements */
.form-element {
  padding-bottom: 70px;
}
@media (max-width: 899px) {
  .form-element {
    padding-bottom: 50px;
  }
}

/* Styling for the form elements */
.form-element-title {
  font-style: italic;
  color: #555;
  font-size: 30px;
  padding-bottom: 10px;
}
@media (max-width: 899px) {
  .form-element-title {
    font-size: 30px;
  }
}

/* Styling for the music links */
.music-link {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.music-link a,
.music-link p {
  font-size: 3vw;
  padding: 0;
  margin: 0;
  font-style: italic;
}
@media (max-width: 899px) {
  .music-link a,
  .music-link p {
    font-size: 6vw;
  }
}

.music-link a {
  color: #555;
}

.music-link > p {
  text-transform: lowercase;
  color: #555;
}

/* Adds styling to Infatuation */
#track-one {
  background-color: #000;
}

h3.track-subtitle {
  font-size: 25px;
  text-align: center;
  padding: 40px 0 20px 0;
}
@media (max-width: 899px) {
  h3.track-subtitle {
    font-size: 25px;
  }
}

.music-link-container {
  display: flex;
  gap: 15px;
}
@media (max-width: 899px) {
  .music-link-container {
    display: block;
  }
}
@media (max-width: 899px) {
  .music-link-container a {
    margin-bottom: 19px;
  }
}

/* ---------------------------------------------------- */
/* ---------------------- CREDITS ---------------------- */
#credits {
  min-width: 100vw;
  background-color: #000;
  position: relative;
  align-items: center;
  justify-content: center;
}

.credit {
  font-size: 20px;
  font-family: "Poppins";
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.section-subtitle {
  color: #fff;
}
@media (max-width: 899px) {
  .section-subtitle {
    font-size: 20px;
    padding-bottom: 20px;
  }
}

.project-descr {
  padding-bottom: 50px;
  font-size: 35px;
  font-family: "Bodoni Moda", serif;
  line-height: 1.4;
}
@media (max-width: 899px) {
  .project-descr {
    font-size: 30px;
  }
}

.copyright {
  padding-top: 50px;
  font-size: 17px;
  color: #555;
  font-family: "Poppins";
}

.copyright p {
  font-weight: 500 !important;
  line-height: 1.6;
}
@media (max-width: 899px) {
  .copyright {
    font-size: 15px;
    padding-top: 50px;
  }

  .copyright p {
    line-height: 23px;
    font-size: 15px;
  }
}

/* Adds styling to the logos */
.logos {
  align-items: flex-start;
  display: flex;
  gap: 20px;
  opacity: 0.8;
}

.logos img {
  width: 100px;
  height: auto;
}

.logos > a:first-of-type {
  margin-right: 40px;
}
/* ---------------------------------------------------- */
/* ---------------------- ANIMATIONS ---------------------- */
/* FADE IN */
.fade-in {
  -webkit-animation: fade-in 7s cubic-bezier(0.39, 0.575, 0.565, 1) 1s both;
  animation: fade-in 7s cubic-bezier(0.39, 0.575, 0.565, 1) 1s both;
}

@-webkit-keyframes fade-in {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

@keyframes fade-in {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

.fade-in-quick {
  -webkit-animation: fade-in 2s ease-in 0.2s both;
  animation: fade-in 2s ease-in 0.2s both;
}

@-webkit-keyframes fade-in {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@keyframes fade-in {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

/* TRACKING IN EXPAND */
.tracking-in-expand {
  -webkit-animation: tracking-in-expand 3s cubic-bezier(0.215, 0.61, 0.355, 1)
    2s both;
  animation: tracking-in-expand 3s cubic-bezier(0.215, 0.61, 0.355, 1) 2s both;
}

@-webkit-keyframes tracking-in-expand {
  0% {
    letter-spacing: -0.5em;
    opacity: 0;
  }
  40% {
    opacity: 0.6;
  }
  100% {
    opacity: 1;
  }
}

@keyframes tracking-in-expand {
  0% {
    letter-spacing: -0.5em;
    opacity: 0;
  }
  40% {
    opacity: 0.6;
  }
  100% {
    opacity: 1;
  }
}

.slide-in-bottom {
  -webkit-animation: slide-in-bottom 2s ease-in 0.5s both;
  animation: slide-in-bottom 2s ease-in 0.5s both;
}

@-webkit-keyframes slide-in-bottom {
  0% {
    -webkit-transform: translateY(1000px);
    transform: translateY(1000px);
    opacity: 0;
  }
  100% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
    opacity: 1;
  }
}
@keyframes slide-in-bottom {
  0% {
    -webkit-transform: translateY(1000px);
    transform: translateY(1000px);
    opacity: 0;
  }
  100% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
    opacity: 1;
  }
}