:root {
  --sun: rgb(250, 215, 151);
  --light-sun: rgb(255, 241, 215);
  --cyan: rgb(0, 176, 186);
  --deep-blue: rgb(0, 0, 60);
  --obsidian: rgb(14, 12, 18);
  --bright-red: rgb(190, 0, 0);
  --deep-green: rgb(0, 43, 34);
}

* {
  font-family: Helvetica, sans-serif;
  margin: 0;
  padding: 0;
  border: 0;
  color: white;
}

html {
  height: 100%;
}

h1 {
  margin: 0;
}

body {
  height: 100%;
  width: 100%;
  background: var(--obsidian);
  overflow-x: hidden;
  padding-top: 64px;
}

p {
  filter: opacity(0.75);
  width: 100%;
}

button {
  filter: opacity(0.8);
  background: transparent;
  border: 0;
  transition: color 0.5s ease-out;
}

.social-link img:hover,
button:hover {
  filter: brightness(150%) opacity(100%);
}

img {
  height: 100%;
  object-fit: cover;
}

nav {
  max-width: 256px;
}

.flex {
  display: flex;
  flex-wrap: wrap;
}

.flex.col {
  flex-direction: column;
}

.flex.jcenter {
  justify-content: center;
}

.flex.jevenly {
  justify-content: space-evenly;
}

.flex.jaround {
  justify-content: space-around;
}

.flex.jbetween {
  justify-content: space-between;
}

.flex.acenter {
  align-items: center;
}

.flex.aend {
  align-items: end;
}

.flex.astart {
  align-items: flex-start;
}

.flex.pad {
  padding: 1rem;
}

.flex.pad1 {
  padding: 8px;
}

.flex.pad2 {
  padding: 16px;
}

.flex.pad3 {
  padding: 24px;
}

.flex.pad4 {
  padding: 32px;
}

.flex.pad5 {
  padding: 48px;
}

.flex.pad6 {
  padding: 64px;
}

.flex.gap {
  gap: 1rem;
}

.flex.gap1 {
  gap: 8px;
}

.flex.gap2 {
  gap: 16px;
}

.flex.gap3 {
  gap: 24px;
}

.flex.gap4 {
  gap: 32px;
}

.flex.gap5 {
  gap: 48px;
}

.flex.gap6 {
  gap: 64px;
}

.flex.l-pad {
  padding-left: 1rem;
}

.f1 {
  flex: 1;
}

.f2 {
  flex: 2;
}

.social-link {
  height: 32px;
  width: 32px;
  text-align: center;
}

.social-link img {
  transition: color 0.5s ease-out;
  filter: opacity(0.8);
}

.panel {
  margin-bottom: 33%;
  max-width: 512px;
}

@media (width <= 600px) {
  .panel {
    max-width: 300px;
  }
  .slider {
    max-width: 300px;
  }
}

@media (width <= 300px) {
  .panel {
    max-width: 230px;
  }
  .slider {
    max-width: 230px;
  }
}

.slider-wrapper {
  position: relative;
  max-width: 48rem;
  margin: 0 auto;
}

.slider {
  width: 512px;
  max-height: 256px;
  display: flex;
  aspect-ratio: 16/9;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
}

.slider img {
  flex: 1 0 100%;
  scroll-snap-align: start;
  object-fit: contain;
  border-radius: 12px;
}

.slider-nav {
  position: absolute;
  display: flex;
  column-gap: 1rem;
  bottom: 1.25rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1;
}

.slider-nav a {
  width: 0.5rem;
  height: 0.5rem;
  background-color: white;
  opacity: 0.75;
  transition: opacity ease 250ms;
}

.slider-nav a:hover {
  opacity: 1;
}