/* stylez.css */

/* Colourz */
:root {
  --yellow: #ffd600ff;
  --blue: #0057b7ff;
  --black: #001731ff;
  --white: #fcfaf9ff;
  --white--sec: #fffae0ff;
  --easing: cubic-bezier(0.68, -0.55, 0.27, 1.55);
}

body {
  color: var(--black);
  background-color: var(--white);
  margin: 0;
  font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont,
    "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif,
    "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
}

.main {
  height: 100vh;
  display: flex;
  align-items: start;
  justify-content: center;
  width: 90vw;
  margin: 0 auto;
}

.cover-art {
  width: 30em;
  height: 30em;
  max-width: 100%;
}
.cover-art__heading {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.cover-art__subheading {
  font-size: smaller;
}
.cover-art__artist-names {
  font-style: italic;
}
.cover-art__svg {
  background-color: var(--white);
  border: var(--black) solid 1px;
}

.cover-art__controls {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 0.5rem;
}
.cover-art__controls button {
  padding: 1rem 0.6rem;
}
.cover-art__btn--all {
  grid-column: 1 / 4;
}

.cover-art__svg--yellow {
  transition: all var(--easing) 1s;
  transform: translateY(1210px);
}
.cover-art__svg--yellow.toggle-on {
  transform: translateY(0px);
}

.cover-art__svg--blue {
  transform: translateY(-1210px);
  transition: all var(--easing) 1s;
}
.cover-art__svg--blue.toggle-on {
  transform: translateY(0px);
}

.cover-art__svg--sun {
  transform-origin: center;
  transform: rotate(0turn) scale(0);
  transition: transform var(--easing) 1s;
}
.cover-art__svg--sun.toggle-on {
  transform: rotate(1turn) scale(0.7);
}

.cover-art__svg--birds {
  transform-origin: center;
  transform: scale(0);
  transition: transform var(--easing) 1s;
}
.cover-art__svg--birds.toggle-on {
  transform: scale(1);
}

.cover-art__svg--text-song-title {
  opacity: 0;
  transition: opacity var(--easing) 1s;
}
.cover-art__svg--text-song-title.toggle-on {
  opacity: 1;
  transition: opacity var(--easing) 1s;
}
.cover-art__svg--text-artist-names {
  fill: var(--blue);
  opacity: 0;
  transition: opacity var(--easing) 1s;
}
.cover-art__svg--text-artist-names.toggle-on {
  opacity: 1;
  transition: opacity var(--easing) 1s;
}

.cover-art__svg--corner-tr {
  opacity: 0;
  transition: opacity var(--easing) 1s;
}
.cover-art__svg--corner-tr.toggle-on {
  opacity: 1;
  transition: opacity var(--easing) 1s;
}
.cover-art__svg--corner-bl {
  opacity: 0;
  fill: var(--white);
  transition: opacity var(--easing) 1s, fill var(--easing) 1s;
}
.cover-art__svg--corner-bl.toggle-on {
  opacity: 1;
  fill: var(--blue);
  transition: opacity var(--easing) 1s, fill var(--easing) 1s;
}