body {
  margin: 0;
  padding: 100vh 0 0 0;
  width: 100%;
  color: white;
}

@keyframes sticky-parallax-header-move-and-size {
  from {
    background-position: 50% 0;
    height: 100vh;
    font-size: calc(5vw + 1em);
  }
  to {
    background-position: 50% 100%;
    background-color: red;
    height: 10vh;
    font-size: 5vh;
    transform: translate(0, 0);
  }
}

#sticky-parallax-header {
  position: fixed;
	top: 0;
  background-image: url("../res/channel-art.png");
  background-size: cover;
  background-blend-mode: soft-light;
  width: 100%;
  height: 100vh;

	animation: sticky-parallax-header-move-and-size linear forwards;
	animation-timeline: scroll();
	animation-range: 0vh 90vh;

  display: flex;
  justify-content: center;
  align-items: center;
}

@keyframes youtube-id-transform {
  from {
    transform: translate(0, -300px);
  }
  to {
    transform: translate(0, 0px);
  }
}

#youtube-id {
  transform: translate(0, -300px);
  animation: youtube-id-transform ease-out forwards;
  animation-timeline: scroll();
  animation-range: 0vh 90vh;
}

@media (pointer: coarse)  {
  /* device */
  #main-body {
    width: 90vw;
    margin: 0 auto;
  }
}

@media (pointer: fine), (pointer: none) {
  /* desktop */
  #main-body {
    width: 50vw;
    margin: 0 auto;
  }
}

.channel-info {
  display: flex;
  align-items: center;
  padding-top: 30px;
  padding-bottom: 30px;
  background-color: black;

  position: sticky;
  top: 10vh;
}

@media (pointer: coarse)  {
  /* device */
  @keyframes profile-move-and-size {
    from {
      transform: translate(calc(50vw - 5vw - 50%), -50vh) scale(3);
    }
    to {
      transform: scale(1);
    }
  }
}

@media (pointer: fine), (pointer: none) {
  /* desktop */
  @keyframes profile-move-and-size {
    from {
      transform: translate(calc(50vw - 25vw - 50%), -50vh) scale(3);
    }
    to {
      transform: scale(1);
    }
  }
}

/* below is from main.css */

.channel-info .profile {
  width: 200px;
  height: 200px;
  background-position: center center;
  border-radius: 100px;
  object-fit: cover;
  border: 2px solid red;
  display: inline;
  margin-right: 30px;

  animation: profile-move-and-size linear forwards;
	animation-timeline: scroll();
	animation-range: 0vh 80vh;
}

.channel-info .channel-details {
  display: inline-block;
  margin: auto 0;
}

.channel-name {
  display: inline;
  margin: 0 0 21.4px 0;
}

.channel-handle {
  font-weight: lighter;
}

.channel-tagline {
  font-weight: lighter;
}

.subscribe-button {
  padding: 15px 30px;
  border-radius: 30px;
  font-size: 1em;
  width: 380px;
  border-style: none;
  background-color: #eeeeee;
}

.tabs-container {
  display: flex;
  align-items: center;
  margin-top: 25px;
}

.tabs-container a {
  color: var(--ytc-gray-200);
  font-weight: 600;
  text-decoration: none;
}

.tabs-container a {
  margin-right: 20px;
}

hr {
  border-width: 2px;
  border-color: var(--ytc-gray-77);
}

.recommend-tools {

}

.recommend-tool {
  display: flex;
  margin-top: 20px;
  text-decoration: none;
  color: white;
}

.recommend-tool-thumbnail {
  flex: 0;
  width: 380px;
  height: 213px;
  border-radius: 10px;
}

.recommend-tool-description {
  flex: 1;
  margin-left: 30px;
  text-wrap: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}