/* layout primitives */

header {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  padding-right: 4vw;
  padding-top: 2vw;
  background: linear-gradient(
    110deg,
    rgba(106, 142, 35, 0.558),
    rgba(128, 128, 0, 0.562)
  );
}

header {
  height: 10vw;
  background-color: beige;
}
header h1 {
  margin: 0;
  padding: 0;
  color: olive;
}
header a {
  padding: 0.1vw;
  min-width: 15vw;
  background-color: rgba(0, 0, 0, 0);
  display: flex;
  justify-content: flex-end;
}

header a:hover {
  color: rgba(255, 0, 255, 0.51);
  color: olive;
}

header a:hover::before {
  content: ' in progress..';
  opacity: 0;
  animation: fadeIn 2s forwards;
}
main {
  display: block;
  display: flex;
  justify-content: center;
  align-items: center;
}

.batch {
  display: block;
  padding: 4rem 1rem;
}

/* optional batch variation hook */
.batch-01 {
}
.batch-02 {
}

/* semantic sections */

.section {
  margin-bottom: 3rem;
}

/* optional section hooks */
.section-hero {
}
.section-intro {
}
.section-feature {
}
.section-detail {
}

/* footer */

/* SECTION-01 */

#site-footer {
  padding: 3rem 1rem;
}

/* AUDIO SECTION */

.section-01 {
  width: 100vw;
  display: flex;
  justify-content: space-around;
}

.section-01 .frame-01 {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0rem;
  background-color: white;
  background: linear-gradient(
    110deg,
    rgba(106, 142, 35, 0.558),
    rgba(128, 128, 0, 0.562)
  );
}
.section-01 .subway-covers.song-animation {
  /* border: solid lime 3px; */
  border-radius: 2px;
  height: 30vw;
  width: 30vw;
  background-image: url('../public/song-animation/subway-covers.png');
  background-size: cover;
  background-position: center;
  background-repeat: repeat-x;
  transition: width 0.1s linear;
  position: relative;
  z-index: 1;
}

.section-01 .subway-covers.song-animation::after {
  content: '';
  position: absolute;
  top: 0px;
  left: 0px;
  right: 0px;
  bottom: 0px;
  background-image: url('/public/song-animation/subway-covers-02.png');
  background-size: cover;
  background-position: center;
  background-repeat: repeat-x;
  z-index: 10;
  /* border: solid red 3px; */
  animation: slideShow 3 0s linear infinite;
}

.section-01 .letters {
  background-color: black;
  width: 100%;
}

.section-01 > * {
  border-radius: 0px;
}

.section-01 .frame-02 {
  height: 30vw;
  width: 30vw;
}

.section-01 .audio,
.section-01 .audio::-webkit-media-controls-panel {
  height: 28px;
  border-radius: 0;
  min-height: 28px;
  width: 100%;
  display: flex;
  align-items: center;
  background: linear-gradient(
    110deg,
    rgba(106, 142, 35, 0.558),
    rgba(128, 128, 0, 0.562)
  );
}
audio,
audio::-webkit-media-controls-panel {
  border-radius: 0;
}
.sky {
  position: absolute;
}

.section-01_5.spacer {
  height: calc(10vw);
}

.section-02 {
  width: 100vw;
  display: flex;
  justify-content: center;
  /* border: solid lime 3px; */
}
#dev-1 {
  border: solid rgba(0, 0, 0, 0.323) 3px;
  background: linear-gradient(
    110deg,
    rgba(57, 59, 53, 0.558),
    rgba(37, 37, 31, 0.562)
  );
  /* height: 50vh; */
  width: 50vw;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 30vw;
}

#dev-1 video {
  min-height: 30vw;
}

@keyframes fadeIn {
  to {
    opacity: 1;
  }
}

.section-03.spacer {
  /* border: solid lime 3px; */
  height: calc(50vh);
}

footer {
  height: 25vw;
  display: flex;
  justify-content: space-around;
  background-color: black;
  position: relative;
}

footer .image-01 {
  /* border: solid purple 3px; */
  height: 15vw;
  width: 15vw;
  background-image: url('/public/crest-obrien.png');
  background-size: contain;
  background-repeat: no-repeat;
  z-index: 2;
}

footer .image-02 {
  /* border: solid purple 3px; */
  background-image: url('/public/heart-flying-sword.png');
  background-size: contain;
  background-repeat: no-repeat;
  height: 17vw;
  width: 15vw;
  z-index: 2;
}

footer .image-03 {
  /* border: solid purple 3px; */
  background-image: url('/public/crest-tomson.png');
  background-size: contain;
  background-repeat: no-repeat;
  height: 17vw;
  width: 15vw;
  z-index: 2;
}

/* small phones */
@media (max-width: 480px) {
  body {
    /* border: 4px solid orange; */
  }
}

/* phones */
@media (max-width: 768px) {
  body {
    /* border: 4px solid yellow; */
  }
}

/* tablets */
@media (max-width: 1024px) {
  body {
    /* border: 4px solid green; */
  }
}

/* small desktops */
@media (max-width: 1280px) {
  body {
    /* border: 4px solid blue; */
  }
  .section-01 .subway-covers.song-animation {
    height: 40vw;
    width: 40vw;
  }
}

@media (max-width: 980px) {
  body {
    /* border: 4px solid orange; */
  }
  .section-01 .subway-covers.song-animation {
    height: 60vw;
    width: 60vw;
  }
}

/* large desktops */
@media (min-width: 1281px) {
  body {
    /* border: 4px solid purple; */
  }
}

/* prefers reduced motion */
@media (prefers-reduced-motion: reduce) {
  body {
    border-style: dashed;
  }
}

@keyframes fadeAnimation {
  from {
    opacity: 1;
  }
  50% {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}