@import url('https://fonts.googleapis.com/css2?family=Passero+One&family=Titillium+Web:wght@300;400;600;700&display=swap');

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

body {
  margin-left: 10%;
  margin-right: 10%;
}

.container {
  max-width: 800px;
  margin: 0 auto;
  padding: 20px;
}

h1 {
  text-align: center;
  font-family: 'Passero One', sans-serif;
  color: #7B0B00;
  font-size: 100pt;
}

h2 {
  text-align: center;
  font-family: 'Titillium Web', sans-serif;
  color: #7B0B00;
  font-size: larger;
}

#login-button {
  display: block;
  margin: 0 auto;
  padding: 12px 21px;
  font-family: 'Titillium Web', sans-serif;
  font-size: large;
  color: #2A2A2A;
  background-color: #E5C48E;
  border: none;
  border-radius: 8px;
  cursor: pointer;
}

#login-button:hover {
  color: #E5C48E;
  background-color: #7B0B00;
}

.profile {
  display: flex;
  align-items: center;
  margin-top: 20px;
}

#avatar {
  width: 200px;
  height: 200px;
  border-radius: 50%;
  object-fit: cover;
}

.info {
  margin-left: 20px;
  font-family: 'Titillium Web', sans-serif;
  font-size: larger;
}

.info p {
  margin-bottom: 10px;
}

.info strong {
  color: #1DB954;
}

.info span, .info a {
  color: #333;
}

.info a {
  text-decoration: none;
}

.info a:hover {
  text-decoration: underline;
}

#top-tracks-container {
  font-family: 'Titillium Web', sans-serif;
  font-size: large;
  margin-left: auto;
  margin-right: auto;
  width: 80%;
}

/* Define a linear gradient background for the table */
#top-tracks-container table {
  background-image: linear-gradient(180deg, #E5C48E 0%, #A06039 35%);
  color: #F2F2F2;
  width: 100%;
  align-items: center;
  margin-left: auto;
  margin-right: auto;
}

/* Define the table header styles */
#top-tracks-container thead th {
  color: #7B0B00;
  font-weight: bold;
  text-align: left;
  margin-left: 3pt;
}

/* Define the table body styles */
#top-tracks-container tbody tr {
  border-bottom: 1px solid #F2F2F2; /* White border between rows */
}

#top-tracks-container tbody td {
  color: #F2F2F2;
}

/* Define the table footer styles */
#top-tracks-container tfoot th {
  font-weight: bold;
  color: #F2F2F2;
}

/* Define the column styles */
#top-tracks-container td:nth-child(1) {
  width: 10%; /* Set the width of the first column to 10% */
  padding: 10pt;
  margin-left: 3pt;
}

#top-tracks-container td:nth-child(2) {
  width: 60%; /* Set the width of the second column to 60% */
  padding: 10pt
}

#top-tracks-container td:nth-child(3) {
  width: 30%; /* Set the width of the third column to 30% */
  padding: 10pt;
  text-align: right;
}

/* Define the styles for the playlist generator elements */
#playlist-generator {
  margin-top: 20px;
}

#activity-select {
  display: block;
  margin: 0 auto;
  padding: 10px;
  font-family: 'Titillium Web', sans-serif;
  font-size: large;
  color: #2A2A2A;
  background-color: #E5C48E;
  border: none;
  border-radius: 8px;
  cursor: pointer;
}

.activity-select {
  margin-top: 3%;
  padding: 10px;
  font-family: 'Titillium Web', sans-serif;
  font-size: large;
  color: #2A2A2A;
}

#activity-select:hover {
  color: #E5C48E;
  background-color: #7B0B00;
}

/* The slider itself */
#length-slider {
  -moz-appearance: none;
  appearance: none;
  -webkit-appearance: none; /* Override default CSS styles */
  display: block;
  background: #c4c4c4;
  margin: 0 auto;
  appearance: none;
  width: 50%; /* Full-width */
  height: 8px; /* Specified height */
  opacity: 0.8; /* Set transparency (for mouse-over effects on hover) */
  -webkit-transition: .2s; /* 0.2 seconds transition on hover */
  transition: opacity .2s;
}

/* Mouse-over effects */
#length-slider:hover {
  opacity: 1; /* Fully shown on mouse-over */
}

/* The slider thumb (use -webkit- (Chrome, Opera, Safari, Edge) and -moz- (Firefox) to override default look) */
#length-slider::-webkit-slider-thumb {
  -webkit-appearance: none; /* Override default look */
  appearance: none;
  width: 25px; /* Set a specific slider handle width */
  height: 15px; /* Slider handle height */
  border-radius: 10px; /* Make it oval */
  background: #1d1c25; /* Dark gray color */
  border: 2px solid #E5C48E; /* Sunset color */
  cursor: pointer; /* Cursor on hover */
}

#length-slider::-moz-range-thumb {
  width: 25px; /* Set a specific slider handle width */
  height: 15px; /* Slider handle height */
  border-radius: 10px; /* Make it oval */
  background: #7B0B00; /* Barn red color */
  border: 2px solid #E5C48E; /* Sunset color */
  cursor: pointer; /* Cursor on hover */
}

/* Style the track */
#length-slider::-webkit-slider-runnable-track {
  background: #A06039 linear-gradient(to right, #c4c4c4 0%, #A06039 var(--value), #A06039 var(--value), #A06039 100%);
  height: 8px; /* Specified height */
}

#length-slider::-moz-range-track {
  background: #A06039 linear-gradient(to right, #c4c4c4 0%, #A06039 var(--value), #A06039 var(--value), #A06039 100%);
  height: 8px; /* Specified height */
}


#length-value {
  display: block;
  margin: 0 auto;
  font-family: 'Titillium Web', sans-serif;
  font-size: large;
  color: #7B0B00;
}

#generate-button {
  display: block;
  margin: 0 auto;
  padding: 12px 21px;
  font-family: 'Titillium Web', sans-serif;
  font-size: large;
  color: #2A2A2A;
  background-color: #E5C48E;
  border: none;
  border-radius: 8px;
  cursor: pointer;
}

#generate-button:hover {
  color: #E5C48E;
  background-color: #7B0B00;
}