:root {
  /* planets */
  --sun-color: rgb(255, 214, 10);
  --mercury-color: rgb(136, 120, 113);
  --venus-color: rgb(141, 87, 58);
  --earth-color: rgb(89, 159, 215);
  --mars-color: rgb(177, 87, 67);
  --jupiter-color: rgb(164, 149, 135);
  --saturn-color: rgb(250, 210, 153);
  --uranus-color: rgb(63, 143, 172);
  --neptune-color: rgb(56, 103, 176);
  --pluto-color: rgb(226, 192, 144);
  
  /* text */
  --text-accient-color: #f5f5f7;
  --text-color: #86868b;
  
  --accient-color: #4cd265;
  --link-color: #2997ff;

  /* background colors */
  --card-color: #1d1d1f;
  --background-color: #000;
}

body {
  font-family: "SF Pro Display", "SF Pro Icons", "Helvetica Neue", Helvetica, Arial, sans-serif;
  background-color: var(--background-color);
  color: var(--text-color);
  
  margin: 0;
}

a[href="index.html"] { color: var(--sun-color); }
a[href="mercury.html"] { color: var(--mercury-color); }
a[href="venus.html"] { color: var(--venus-color); }
a[href="earth.html"] { color: var(--earth-color); }
a[href="mars.html"] { color: var(--mars-color); }
a[href="jupiter.html"] { color: var(--jupiter-color); }
a[href="saturn.html"] { color: var(--saturn-color); }
a[href="pluto.html"] { color: var(--pluto-color); }

p, h1, h2, h3, ul, blockquote, hr, div.card {
  margin: 1rem 4rem;
}

h1, h2, h3 {
  color: var(--text-accient-color);
}

a {
  color: var(--link-color);
  font-weight: bold;
  text-decoration: none;
}

img:not(.planet) {
  border-radius: 1rem;
}

main > img:not(.planet) {
  margin: 1rem 4rem;
  width: calc(100% - 8em - 2px);
}

main > video {
  border-radius: 1rem;

  margin: 1rem 4rem;
  width: calc(100% - 8em - 2px);
}

strong {
  color: var(--accient-color);
}

hr {
  border: 1px solid var(--text-color);
}

ul {
  padding-left: 1.5rem;
}

li {
  margin-top: 1rem;
}

blockquote {
  border-left: 2px solid var(--accient-color);
}

blockquote > p {
  margin-left: 1em;
}

header {
  overflow-x: clip;
  height: 200vh;
}

footer {
  background-color: var(--card-color);
  padding: 0 1em;
  padding-top: 1em;

  padding-bottom: 1em;

  display: flex;
  justify-content: space-between;
}

/* grid of cards */
.card img, .card video {
  border-radius: 1rem;
  box-sizing: border-box;
  border: 2px solid var(--card-color);

  max-width: 50vw;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.card {
  margin-bottom: 1em;
  display: grid;
  grid-gap: 1em;
  grid-template-columns: repeat(2, 1fr);
}

.card-text {
  background-color: var(--card-color);
  border-radius: 1em;
}

.card-text p, .card-text h3 {
  margin: 1rem;
}

.img:hover p {
  display: block;
  position: absolute;
  opacity: 1;
  transform: translateY(-4rem);
}

/* planet with proportional scaling */
.planet {
  overflow: hidden;
  transition: 1s cubic-bezier(0, 0, 0.58, 1);
  
  --planet-scale: 1;
  --planet-size: min(var(--planet-scale) * 1vw, var(--planet-scale) * 1vh);
  
  height: var(--planet-size);
  margin-left: 50%;
  transform: translateX(-50%);
}

img.planet {
  margin-top: 1em;
  margin-bottom: 1em;
}

header .planet  {
  position: sticky;
  top: calc(50vh - var(--planet-size) / 2);
}

header .planet-big {
  --planet-size: min(100vh, 100vw) !important;
}

/* adapt site on phones */
@media screen and (max-width: 800px) {
  p, h1, h2, h3, ul, hr, div.card {
    margin: 1rem 1rem;
  }

  blockquote {
    margin-left: 1rem;
  }

  main > img:not(.planet) {
    margin: 1rem 1rem;
    width: calc(100% - 2em - 2px);
  }

  footer {
    flex-direction: column;
    align-items: left baseline;

  }

  footer :nth-child(2) {
    margin-top: 1em;
  }

  footer :nth-child(2) {
    order: 1;
  }

  .card {
    grid-template-columns: repeat(1, 1fr);
  }

  .card img, .card video {
    max-width: 100%;
  } 
}