@charset "UTF-8";
*,
::before,
::after {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

html {
  font-size: 10px;
}

/* UK Theme 🇬🇧 */
body[data-theme=english],
body:not([data-theme]) {
  /* Brand Colours */
  --brand-colour-100: #e8ebf3;
  --brand-colour-300: #7b8fc9;
  --brand-colour-primary: #012169;
  --brand-colour-700: #011852;
  --brand-colour-900: #010f3b;
  /* Accent Colours */
  --brand-accent-light: #b8465a;
  --brand-accent-primary: #9a3a4c;
  /* Background Colours */
  --bg-colour-100: #fafafa;
  --bg-colour-200: #f5f5f5;
  --bg-colour-300: #e0e0e0;
  --bg-colour-400: #bdbdbd;
  --bg-colour-500: #9e9e9e;
  /* Border Colours */
  --border-colour-light: #e5e5e5;
  --border-colour-primary: #cccccc;
  --border-colour-dark: #999999;
  /* Text Colours */
  --text-colour-100: #9e9e9e;
  --text-colour-300: #757575;
  --text-colour-primary: #616161;
  --text-colour-700: #424242;
  --text-colour-900: #212121;
  /* Success State */
  --success-colour: #5a9367;
  --success-colour-text: #2d5f3a;
  /* Error State */
  --error-colour: #c1465a;
  /* Neutral */
  --colour-lightest: #ffffff;
  /* Font size */
  --font-size-primary: 1.6rem;
  /* Font family */
  --font-family: "Inter", sans-serif;
  /* Content width */
  --content-width: 1000px;
}

/* Spain Theme 🇪🇸 */
body[data-theme=spanish] {
  /* Brand Colours */
  --brand-colour-100: #f0e3e5;
  --brand-colour-300: #b86b75;
  --brand-colour-primary: #8b2d35;
  --brand-colour-700: #6b2329;
  --brand-colour-900: #4a181d;
  /* Accent Colours */
  --brand-accent-light: #c9943a;
  --brand-accent-primary: #a87a2f;
  /* Background Colours */
  --bg-colour-100: #faf9f7;
  --bg-colour-200: #f5f3f0;
  --bg-colour-300: #e8e3dd;
  --bg-colour-400: #d1c9bf;
  --bg-colour-500: #aea89e;
  /* Border Colours */
  --border-colour-light: #e8e3dd;
  --border-colour-primary: #d1c9bf;
  --border-colour-dark: #a89d8f;
  /* Text Colours */
  --text-colour-100: #a89d8f;
  --text-colour-300: #7d7166;
  --text-colour-primary: #5e5449;
  --text-colour-700: #443d34;
  --text-colour-900: #2a2520;
  /* Success State */
  --success-colour: #6b8c6e;
  --success-colour-text: #3d5e3f;
  /* Error State */
  --error-colour: #b8453d;
  /* Neutral */
  --colour-lightest: #ffffff;
  /* Font size */
  --font-size-primary: 1.6rem;
  /* Font family */
  --font-family: "Inter", sans-serif;
  /* Content width */
  --content-width: 1000px;
}

/* Germany Theme 🇩🇪 */
body[data-theme=german] {
  /* Brand Colours */
  --brand-colour-100: #f0f0f0;
  --brand-colour-300: #d4a935;
  --brand-colour-primary: #1a1a1a;
  --brand-colour-700: #0d0d0d;
  --brand-colour-900: #000000;
  /* Accent Colours */
  --brand-accent-light: #c1695a;
  --brand-accent-primary: #a8443a;
  /* Background Colours */
  --bg-colour-100: #fafafa;
  --bg-colour-200: #f5f5f5;
  --bg-colour-300: #e0e0e0;
  --bg-colour-400: #bdbdbd;
  --bg-colour-500: #9e9e9e;
  /* Border Colours */
  --border-colour-light: #e5e5e5;
  --border-colour-primary: #cccccc;
  --border-colour-dark: #999999;
  /* Text Colours */
  --text-colour-100: #9e9e9e;
  --text-colour-300: #757575;
  --text-colour-primary: #616161;
  --text-colour-700: #424242;
  --text-colour-900: #212121;
  /* Success State */
  --success-colour: #5a9367;
  --success-colour-text: #2d5f3a;
  /* Error State */
  --error-colour: #c1543d;
  /* Neutral */
  --colour-lightest: #ffffff;
  /* Font size */
  --font-size-primary: 1.6rem;
  /* Font family */
  --font-family: "Inter", sans-serif;
  /* Content width */
  --content-width: 1000px;
}

/* France Theme 🇫🇷 */
body[data-theme=french] {
  /* Brand Colours */
  --brand-colour-100: #d4e6f1;
  --brand-colour-300: #5291c9;
  --brand-colour-primary: #004482;
  --brand-colour-700: #003160;
  --brand-colour-900: #002044;
  /* Accent Colours */
  --brand-accent-light: #c14440;
  --brand-accent-primary: #c1283a;
  /* Background Colours */
  --bg-colour-100: #fafafa;
  --bg-colour-200: #f5f5f5;
  --bg-colour-300: #e0e0e0;
  --bg-colour-400: #bdbdbd;
  --bg-colour-500: #9e9e9e;
  /* Border Colours */
  --border-colour-light: #e5e5e5;
  --border-colour-primary: #cccccc;
  --border-colour-dark: #999999;
  /* Text Colours */
  --text-colour-100: #9e9e9e;
  --text-colour-300: #757575;
  --text-colour-primary: #616161;
  --text-colour-700: #424242;
  --text-colour-900: #212121;
  /* Success State */
  --success-colour: #5a9367;
  --success-colour-text: #2d5f3a;
  /* Error State */
  --error-colour: #c1465a;
  /* Neutral */
  --colour-lightest: #ffffff;
  /* Font size */
  --font-size-primary: 1.6rem;
  /* Font family */
  --font-family: "Inter", sans-serif;
  /* Content width */
  --content-width: 1000px;
}

/* Japan Theme 🇯🇵 */
body[data-theme=japanese] {
  /* Brand Colours */
  --brand-colour-100: #e5ede8;
  --brand-colour-300: #6b9a7b;
  --brand-colour-primary: #2d5f3a;
  --brand-colour-700: #20472b;
  --brand-colour-900: #15301d;
  /* Accent Colours */
  --brand-accent-light: #e68fa8;
  --brand-accent-primary: #d9758f;
  /* Background Colours */
  --bg-colour-100: #fafafa;
  --bg-colour-200: #f5f5f5;
  --bg-colour-300: #e0e0e0;
  --bg-colour-400: #bdbdbd;
  --bg-colour-500: #9e9e9e;
  /* Border Colours */
  --border-colour-light: #e5e5e5;
  --border-colour-primary: #cccccc;
  --border-colour-dark: #999999;
  /* Text Colours */
  --text-colour-100: #9e9e9e;
  --text-colour-300: #757575;
  --text-colour-primary: #616161;
  --text-colour-700: #424242;
  --text-colour-900: #212121;
  /* Success State */
  --success-colour: #4a7a5a;
  --success-colour-text: #2d5f3a;
  /* Error State */
  --error-colour: #c1543d;
  /* Neutral */
  --colour-lightest: #ffffff;
  /* Font size */
  --font-size-primary: 1.6rem;
  /* Font family */
  --font-family: "Inter", sans-serif;
  /* Content width */
  --content-width: 1000px;
}

/* Korea Theme 🇰🇷 */
body[data-theme=korean] {
  /* Brand Colours */
  --brand-colour-100: #e8edf5;
  --brand-colour-300: #7b92c9;
  --brand-colour-primary: #1a3a5f;
  --brand-colour-700: #0f2744;
  --brand-colour-900: #0a1a2f;
  /* Accent Colours */
  --brand-accent-light: #e67373;
  --brand-accent-primary: #c83e3e;
  /* Background Colours */
  --bg-colour-100: #faf8f5;
  --bg-colour-200: #f5f1eb;
  --bg-colour-300: #e8dfd5;
  --bg-colour-400: #d1c4b5;
  --bg-colour-500: #b3a89a;
  /* Border Colours */
  --border-colour-light: #e8dfd5;
  --border-colour-primary: #d1c4b5;
  --border-colour-dark: #a8988a;
  /* Text Colours */
  --text-colour-100: #a89d8f;
  --text-colour-300: #7d705e;
  --text-colour-primary: #5e5244;
  --text-colour-700: #433d32;
  --text-colour-900: #2a2520;
  /* Success State */
  --success-colour: #5a8c67;
  --success-colour-text: #2d5f3a;
  /* Error State */
  --error-colour: #a84a3d;
  /* Neutral */
  --colour-lightest: #ffffff;
  /* Font size */
  --font-size-primary: 1.6rem;
  /* Font family */
  --font-family: "Inter", sans-serif;
  /* Content width */
  --content-width: 1000px;
}

/* Taiwan Theme 🇹🇼 */
body[data-theme=mandarin] {
  /* Brand Colours */
  --brand-colour-100: #e3e8f0;
  --brand-colour-300: #6b7fa8;
  --brand-colour-primary: #1f3550;
  --brand-colour-700: #14233a;
  --brand-colour-900: #0d1626;
  /* Accent Colours */
  --brand-accent-light: #e6945f;
  --brand-accent-primary: #c8693a;
  /* Background Colours */
  --bg-colour-100: #faf9f7;
  --bg-colour-200: #f5f3f0;
  --bg-colour-300: #ebe8e3;
  --bg-colour-400: #d9d4cd;
  --bg-colour-500: #c0bbb3;
  /* Border Colours */
  --border-colour-light: #ebe8e3;
  --border-colour-primary: #d9d4cd;
  --border-colour-dark: #bfbab3;
  /* Text Colours */
  --text-colour-100: #afa89e;
  --text-colour-300: #847d73;
  --text-colour-primary: #635e54;
  --text-colour-700: #494640;
  --text-colour-900: #2f2d29;
  /* Success State */
  --success-colour: #5a8c6b;
  --success-colour-text: #2d5f3a;
  /* Error State */
  --error-colour: #c1543d;
  /* Neutral */
  --colour-lightest: #ffffff;
  /* Font size */
  --font-size-primary: 1.6rem;
  /* Font family */
  --font-family: "Inter", sans-serif;
  /* Content width */
  --content-width: 1000px;
}

body {
  background-color: var(--bg-colour-200);
  font-size: var(--font-size-primary);
  color: var(--text-colour-primary);
  font-family: var(--font-family);
}

.header {
  padding: 3.6rem 0 0;
}
.header__container {
  width: var(--content-width);
  margin: 0 auto;
}
.header__title {
  font-size: 4.2rem;
  color: var(--brand-colour-primary);
  text-align: center;
  margin: 0 0 7rem;
}

.main__container {
  width: var(--content-width);
  margin: 0 auto;
}

.language__radio {
  display: none;
}
.language__contents {
  margin: 7rem 0 0 0;
}
.language__content {
  display: none;
}
.language #english:checked ~ .language__tabs .language__tab[for=english] {
  background-color: var(--brand-colour-primary);
  color: var(--colour-lightest);
}
.language #english:checked ~ .language__contents .language__content[data-tab=english] {
  display: block;
}
.language #spanish:checked ~ .language__tabs .language__tab[for=spanish] {
  background-color: var(--brand-colour-primary);
  color: var(--colour-lightest);
}
.language #spanish:checked ~ .language__contents .language__content[data-tab=spanish] {
  display: block;
}
.language #german:checked ~ .language__tabs .language__tab[for=german] {
  background-color: var(--brand-colour-primary);
  color: var(--colour-lightest);
}
.language #german:checked ~ .language__contents .language__content[data-tab=german] {
  display: block;
}
.language #french:checked ~ .language__tabs .language__tab[for=french] {
  background-color: var(--brand-colour-primary);
  color: var(--colour-lightest);
}
.language #french:checked ~ .language__contents .language__content[data-tab=french] {
  display: block;
}
.language #japanese:checked ~ .language__tabs .language__tab[for=japanese] {
  background-color: var(--brand-colour-primary);
  color: var(--colour-lightest);
}
.language #japanese:checked ~ .language__contents .language__content[data-tab=japanese] {
  display: block;
}
.language #korean:checked ~ .language__tabs .language__tab[for=korean] {
  background-color: var(--brand-colour-primary);
  color: var(--colour-lightest);
}
.language #korean:checked ~ .language__contents .language__content[data-tab=korean] {
  display: block;
}
.language #mandarin:checked ~ .language__tabs .language__tab[for=mandarin] {
  background-color: var(--brand-colour-primary);
  color: var(--colour-lightest);
}
.language #mandarin:checked ~ .language__contents .language__content[data-tab=mandarin] {
  display: block;
}
.language__tabs {
  display: flex;
  flex-direction: column;
  gap: 2rem;
  font-size: 1.8rem;
}
.language__europe {
  display: flex;
  justify-content: space-between;
  gap: 2rem;
}
.language__asia {
  display: flex;
  gap: 2rem;
  margin: 0 auto;
  justify-content: center;
}
.language__tab {
  width: 23.2rem;
  border: 0.2rem solid var(--brand-colour-primary);
  border-radius: 0.4rem;
  color: var(--brand-colour-primary);
  padding: 1rem 1.5rem;
  text-align: center;
  background-color: var(--colour-lightest);
  cursor: pointer;
  font-weight: 500;
  transition: all 0.2s ease;
}
.language__tab:hover {
  background-color: var(--brand-colour-primary);
  color: var(--colour-lightest);
}

.search-form {
  margin: 7rem 0 0 0;
  position: relative;
}
.search-form::before {
  content: "\f002";
  display: block;
  width: 2rem;
  height: 2rem;
  font-size: 2rem;
  font-family: "Font Awesome 7 Free";
  font-weight: 900;
  color: var(--border-colour-dark);
  position: absolute;
  top: 1.2rem;
  left: 1.1rem;
}
.search-form__input {
  display: block;
  width: 100%;
  padding: 1.2rem 1.5rem 1rem 4rem;
  border: 0.2rem solid var(--border-colour-dark);
  border-radius: 0.4rem;
  font-size: 1.6rem;
  margin: 0 0 2rem;
  color: var(--text-colour-primary);
}
.search-form__input::-moz-placeholder {
  font-size: 1.6rem;
  color: var(--text-colour-100);
}
.search-form__input::placeholder {
  font-size: 1.6rem;
  color: var(--text-colour-100);
}
.search-form__input:focus {
  outline: none;
  border: 0.2rem solid var(--brand-colour-300);
  caret-color: var(--brand-colour-300);
}
.search-form__label {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}
.search-form__btn {
  display: block;
  width: 100%;
  font-size: 2rem;
  font-weight: 500;
  border: 0.2rem solid var(--brand-accent-primary);
  background-color: var(--brand-accent-primary);
  color: var(--colour-lightest);
  padding: 0.8rem 0;
  border-radius: 0.4rem;
  cursor: pointer;
  transition: all 0.2s ease;
}
.search-form__btn:hover {
  background-color: var(--brand-accent-light);
  border: 0.2rem solid var(--brand-accent-light);
}

.search-results {
  padding: 7rem 0 0 0;
}
.search-results__table {
  border-radius: 0.4rem;
  width: 100%;
  border-collapse: collapse;
  background-color: #fff;
  box-shadow: 0.2rem 0 0.4rem rgba(204, 204, 204, 0.3), -0.2rem 0 0.2rem rgba(204, 204, 204, 0.3);
}
.search-results__table thead {
  box-shadow: 0 0.2rem 0.2rem rgba(204, 204, 204, 0.35);
  position: relative;
  z-index: 2;
}
.search-results__table thead tr {
  color: var(--text-colour-primary);
}
.search-results__table thead tr th {
  padding: 1rem 0 1rem 2rem;
  text-align: left;
}
.search-results__table thead tr th:nth-child(1) {
  border-left: none;
  width: 7rem;
  text-align: left;
}
.search-results__table thead tr th:nth-child(2), .search-results__table thead tr th:nth-child(3) {
  width: 39.5rem;
}
.search-results__table thead tr th:nth-child(4) {
  width: 14rem;
}
.search-results__table tbody {
  position: relative;
  z-index: 1;
}
.search-results__table tbody tr {
  color: var(--text-colour-700);
  transition: color 0.1s ease;
}
.search-results__table tbody tr:hover {
  background-color: var(--bg-colour-100);
}
.search-results__table tbody tr:hover .search-results__preview-btn {
  color: var(--brand-colour-300);
  transition: color 0.2s ease;
}
.search-results__table tbody tr:hover .search-results__preview-btn:hover {
  color: var(--brand-colour-primary);
}
.search-results__album {
  text-align: center;
  padding: 2rem;
}
.search-results__album > img {
  width: 7rem;
}
.search-results__track-title {
  padding: 0 0 0 2rem;
}
.search-results__track-title-copy-btn {
  background-color: transparent;
  border: none;
  color: var(--text-colour-100);
  transition: color 0.1s ease;
  font-size: 1.6rem;
  cursor: pointer;
}
.search-results__track-title-copy-btn .fa-check {
  display: none;
}
.search-results__track-title-copy-btn .fa-clone {
  display: inline-block;
}
.search-results__track-title-copy-btn:hover .fa-check {
  display: none;
}
.search-results__track-title-copy-btn:hover .fa-clone {
  color: var(--brand-colour-primary);
  display: inline-block;
}
.search-results__track-title-copy-btn.is-copied .fa-check {
  display: inline-block;
  color: var(--success-colour-text);
}
.search-results__track-title-copy-btn.is-copied .fa-clone {
  display: none;
}
.search-results__artist {
  padding: 0 0 0 2rem;
}
.search-results__artist-copy-btn {
  background-color: transparent;
  border: none;
  color: var(--text-colour-100);
  transition: color 0.1s ease;
  font-size: 1.6rem;
  cursor: pointer;
}
.search-results__artist-copy-btn .fa-check {
  display: none;
}
.search-results__artist-copy-btn .fa-clone {
  display: inline-block;
}
.search-results__artist-copy-btn:hover .fa-check {
  display: none;
}
.search-results__artist-copy-btn:hover .fa-clone {
  color: var(--brand-colour-primary);
  display: inline-block;
}
.search-results__artist-copy-btn.is-copied .fa-check {
  display: inline-block;
  color: var(--success-colour-text);
}
.search-results__artist-copy-btn.is-copied .fa-clone {
  display: none;
}
.search-results__preview {
  width: 7rem;
  padding: 0 0 0 2rem;
}
.search-results__preview-inner {
  display: flex;
  align-items: center;
}
.search-results__preview-audio {
  display: none;
}
.search-results__preview-wave {
  display: none;
  gap: 0.3rem;
  align-items: center;
  margin-left: 0.8rem;
}
.search-results__preview-wave.is-playing {
  display: flex;
}
.search-results__preview-wave-bar {
  width: 0.3rem;
  background-color: var(--brand-colour-300);
  border-radius: 0.2rem;
  animation: wave 0.8s ease-in-out infinite;
}
.search-results__preview-wave-bar:nth-child(1) {
  height: 1.2rem;
  animation-delay: 0s;
}
.search-results__preview-wave-bar:nth-child(2) {
  height: 1.8rem;
  animation-delay: 0.2s;
}
.search-results__preview-wave-bar:nth-child(3) {
  height: 1.4rem;
  animation-delay: 0.4s;
}
.search-results__preview-wave-bar:nth-child(4) {
  height: 1.6rem;
  animation-delay: 0.6s;
}
.search-results__preview-btn {
  border: none;
  color: var(--text-colour-300);
  background-color: transparent;
  font-size: 2.4rem;
  cursor: pointer;
}
.search-results__preview-btn .bi-play-circle {
  display: inline-block;
}
.search-results__preview-btn .bi-pause-circle {
  display: none;
}
.search-results__preview-btn.playing .bi-play-circle {
  display: none;
}
.search-results__preview-btn.playing .bi-pause-circle {
  display: inline-block;
}

@keyframes wave {
  0%, 100% {
    transform: scaleY(1);
  }
  50% {
    transform: scaleY(0.5);
  }
}
.copy-toast {
  position: fixed;
  width: 18rem;
  top: 3rem;
  left: 0;
  padding: 2rem;
  opacity: 0;
  transform: translateX(-18rem);
  pointer-events: none;
  transition: opacity 0.2s ease, transform 0.2s ease;
  z-index: 1000;
  font-size: 1.8rem;
  text-align: right;
  border-top-right-radius: 0.5rem;
  border-bottom-right-radius: 0.5rem;
  color: var(--colour-lightest);
  transition: all 0.3s ease-in-out;
}
.copy-toast.is-visible {
  opacity: 1;
  transform: translateX(0);
}
.copy-toast.is-visible.is-success {
  background-color: var(--success-colour);
}
.copy-toast.is-visible.is-error {
  background-color: var(--error-colour);
}

.privacy-policy {
  display: flex;
  justify-content: center;
  color: var(--text-colour-700);
}
.privacy-policy a {
  color: var(--brand-colour-primary);
  transition: color 0.2s ease;
}
.privacy-policy a:hover {
  color: var(--brand-colour-300);
}

.terms-of-use {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: 0 0 4rem;
}
.terms-of-use dt {
  font-size: 1.8rem;
  color: var(--brand-colour-primary);
  font-weight: 700;
  margin: 1rem 0 0 0;
}
.terms-of-use ul {
  padding: 0 0 0 4rem;
}

.footer {
  padding: 6rem 0 5rem;
}
.footer__container {
  width: var(--content-width);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2.4rem;
}
.footer__sns {
  display: flex;
  justify-content: center;
  font-size: 2.4rem;
  gap: 1.4rem;
}
.footer__sns-github, .footer__sns-x, .footer__sns-bluesky {
  color: var(--brand-colour-300);
  transition: opacity 0.2s ease, transform 0.2s ease;
}
.footer__sns-github:hover, .footer__sns-x:hover, .footer__sns-bluesky:hover {
  opacity: 0.7;
  transform: translateY(-2px);
}
.footer__privacy-policy {
  display: flex;
  justify-content: center;
  font-size: 1.4rem;
  gap: 1rem;
  padding: 0 1rem 0 0;
}
.footer__privacy-policy > a {
  text-decoration: none;
  color: var(--text-colour-100);
  transition: color 0.2s ease;
}
.footer__privacy-policy > a:hover {
  color: var(--text-colour-primary);
}
.footer__copyright {
  font-size: 1.6rem;
  color: var(--text-colour-300);
  display: block;
  text-align: center;
  padding: 1rem 0 0 0;
  line-height: 1.6;
}
.footer__copyright-developer {
  color: var(--brand-colour-primary);
  text-decoration: none;
  transition: color 0.2s ease;
}
.footer__copyright-developer:hover {
  color: var(--brand-colour-300);
}/*# sourceMappingURL=style.css.map */