/*  ------------------------------------------------------------------------  */
/*  GLOBAL                                                                    */
/*  ------------------------------------------------------------------------  */

*, *::before, *::after {
  box-sizing: border-box;
}

/*  ------------------------------------------------------------------------  */
/*  LAYOUT                                                                    */
/*  ------------------------------------------------------------------------  */

body {
  max-inline-size: 30rem;
  margin: 0 auto;
  padding-inline: 0.5rem;
  color: var(--foreground);
  background-color: var(--background);
}

main {
  block-size: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
}

/*  ------------------------------------------------------------------------  */
/*  HEADER & FOOTER                                                           */
/*  ------------------------------------------------------------------------  */

header,
footer {
  background-color: var(--middleground);
  border-radius: 1.5rem;
}

header {
  text-align: center;
}

footer {
  display: flex;
  align-items: center;

  & .contact-info {
    flex: 1 0 0;
    text-align: center;

    & .person {
      font-size: 1.6rem;
      font-weight: 700;
    }
  }

  & a {
    display: block;
    padding: 1rem;
    border-radius: 50%;
  }

  & svg {
    inline-size: 4rem;
    block-size: auto;
    padding: 0.5rem;
    border: 0.3rem solid var(--foreground);
    border-radius: 50%;
    fill: var(--foreground);
  }
}

/*  ------------------------------------------------------------------------  */
/*  MEDIA SCROLLER                                                            */
/*  ------------------------------------------------------------------------  */

.media-scroller {
  display: flex;
  column-gap: 1rem;
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  scrollbar-width: none;
  &::-webkit-scrollbar { display: none }
  scroll-snap-type: inline mandatory;
}

.media-element {
  padding: 1.5rem 0.5rem;
  border-radius: 1.5rem;
  background-color: var(--middleground);
  flex: 0 0 100%;
  display: flex;
  align-items: center;
  scroll-snap-align: start;

  & img {
    inline-size: 100%;
    block-size: auto;
    border-radius: 1.5rem;
  }
}

/*  ------------------------------------------------------------------------  */
/*  LIGHT & DARK COLOR SCHEMES                                                */
/*  ------------------------------------------------------------------------  */

@media (prefers-color-scheme: light) {
  :root {
    --foreground:   hsl(000 00% 06%);
    --middleground: hsl(000 00% 75%);
    --background:   hsl(000 00% 84%);
  }
}

@media (prefers-color-scheme: dark) {
  :root {
    --foreground:   hsl(000 00% 84%);
    --middleground: hsl(000 00% 15%);
    --background:   hsl(000 00% 06%);
  }
}

/*  ------------------------------------------------------------------------  */