@charset "UTF-8";
/* CSS Document */

/*	@import url('https://fonts.googleapis.com/css2?family=Kablammo&display=swap'); */
@import url("https://fonts.googleapis.com/css2?family=Kablammo&family=Kirang+Haerang&family=Modak&family=Shizuru&family=Space+Grotesk:wght@300..700&display=swap");

:root {
  --white-w: 40px;
  --white-h: 200px;
  --black-w: 26px;
  --black-h: 120px;
  --borderRadiusLg: 10px;
  --borderRadius: 5px;
  --beige: #fff3d7;
  --beigeDark: #edb66a;
  --orange: #ea912a;
  --orangeDark: #d47216;
  --brown: #c15922;
  --dark: #1f2114;
  --outline: 4px solid var(--dark);
  --outlineOffset: -2px;
}
body,
#playMelody {
  font-family: "Kirang Haerang", system-ui;
  font-optical-sizing: auto;
  font-weight: 200 !important;
  font-style: normal;
  font-variation-settings: "MORF" 0;
}
body {
  margin: 20px;
  text-align: center;
  body: flex;
  align-content: center;
  background: #fce1a9 url("img/background.webp") center/cover no-repeat;
}
#thesinger {
  max-height: 50vh;
}
h1 {
  font-size: 5rem;
  font-weight: 200 !important;
  margin: 0.5em 0 0 0 !important;
  color: var(--brown);
  line-height: 2rem;
}
h1 span {
  color: var(--orange);
  font-size: 2rem;
}
a {
  color: currentColor;
  text-decoration: none;
}
#playMelody {
  font-size: 1.5rem;
  background-color: transparent;
  border: solid 2px transparent;
  color: var(--orangeDark);
  margin-top: 1rem;
  border-radius: var(--borderRadiusLg);
  padding: 10px 18px;
}
#playMelody.active {
  border-color: var(--orangeDark);
  background: var(--orangeDark);
  color: var(--beige);
  position: relative;
  overflow: hidden;
}
#playMelody.active::after {
  content: "";
  position: absolute;
  background-color: var(--orange);
  top: 0;
  left: 0;
  bottom: 0;
  z-index: -1;
  width: var(--progress, 0%);
  pointer-events: none;
}
#imprint {
  background-color: var(--beige);
  width: fit-content;
  padding: 10px 20px;
  border-radius: 100px;
  font-family: "Space Grotesk";
  color: var(--dark);
  font-size: 0.8rem;
  font-weight: 400;
  margin-top: 2em;
  box-shadow: 0 6px 20px 0 var(--beigeDark);
}

.piano,
h1,
button {
  mix-blend-mode: multiply;
  text-transform: uppercase;
}

.piano {
  position: relative;
  display: flex;
  justify-content: center;
  margin-top: 20px;
}
.white {
  width: var(--white-w);
  height: var(--white-h);
  background: var(--prange);
  outline: var(--outline);
  outline-offset: var(--outlineOffset);
  position: relative;
  box-sizing: border-box;
}
.white.pressed::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(to bottom, var(--orangeDark), var(--orange));
  pointer-events: none;
  outline: var(--outline);
  outline-offset: var(--outlineOffset);
}
.black {
  width: var(--black-w);
  border-radius: 0 0 var(--borderRadius) var(--borderRadius);
  height: var(--black-h);
  background: var(--dark);
  position: absolute;
  top: 2px;
  left: calc(var(--white-w) - var(--black-w) / 2);
  z-index: 2;
}
.black.pressed {
  background: linear-gradient(to bottom, var(--orangeDark), var(--orange));
}
.key.white:first-of-type,
.white:first-of-type.pressed::after {
  border-radius: var(--borderRadiusLg) 0 0 var(--borderRadiusLg) !important;
}
.key.white:last-of-type,
.white:last-of-type.pressed::after {
  border-radius: 0 var(--borderRadiusLg) var(--borderRadiusLg) 0 !important;
}
@media (max-width: 600px) {
  :root {
	--white-w: 20px;
	--white-h: 140px;
	--black-w: 18px;
	--black-h: 90px;
	--outline: 3px solid var(--dark);
	--outlineOffset: -1.5px;
  }
  .black {
    top: 1.5px;
  }
  #playMelody {
	display: none;
  }
}