/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline; }

/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
  display: block; }

body {
  line-height: 1; }

ol, ul {
  list-style: none; }

blockquote, q {
  quotes: none; }

blockquote:before, blockquote:after,
q:before, q:after {
  content: '';
  content: none; }

table {
  border-collapse: collapse;
  border-spacing: 0; }

:root {
  background: #F2F2F2; }

* {
  box-sizing: border-box; }

main {
  font-family: system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  margin: 0 auto;
  max-width: 650px;
  padding: 16px;
  color: black; }

main > header {
  padding-top: 64px;
  padding-bottom: 100px; }
  main > header h1 {
    font-size: 100px;
    font-weight: 800;
    text-transform: lowercase;
    color: #FC59FF;
    transform: rotate(-2deg);
    text-shadow: 1px 1px 0px #00E0FF, 2px 2px 0px #00E0FF, 3px 3px 0px #00E0FF, 4px 4px 0px #00E0FF, 5px 5px 0px #00E0FF; }
    @media only screen and (max-width: 600px) {
      main > header h1 {
        font-size: 50px; } }

main .stuff {
  margin-bottom: 64px; }
  main .stuff .item {
    padding: 32px;
    background: white;
    box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.025);
    color: #4F4F4F;
    font-size: 15px;
    line-height: 1.4; }
    main .stuff .item:not(:last-child) {
      margin-bottom: 64px; }
    main .stuff .item a {
      color: inherit;
      font-weight: 500; }
    main .stuff .item em {
      font-style: italic; }
    main .stuff .item hgroup * + * {
      margin-top: 0.25em; }
    @media only screen and (max-width: 600px) {
      main .stuff .item {
        margin-left: -16px;
        margin-right: -16px; }
        main .stuff .item .gallery {
          margin: -32px;
          margin-bottom: 0; }
          main .stuff .item .gallery .thumbnails {
            padding-top: 16px;
            padding-left: 32px;
            padding-right: 32px; } }
    main .stuff .item .title {
      font-size: 21px;
      font-weight: 600;
      color: black; }
    main .stuff .item .price {
      font-size: 17px;
      color: #4F4F4F; }
    main .stuff .item .availability {
      color: #828282; }
    main .stuff .item .old-price {
      color: #828282;
      font-weight: 600; }
      main .stuff .item .old-price b {
        color: #FC59FF;
        font-weight: 700; }
    main .stuff .item .header {
      height: 400px;
      overflow: hidden;
      overflow-x: scroll; }
    main .stuff .item .gallery * + * {
      margin-top: 8px; }
    main .stuff .item .gallery .view {
      overflow-y: hidden;
      overflow-x: scroll;
      font-size: 0;
      scroll-snap-type: x mandatory;
      border-radius: 0px; }
      main .stuff .item .gallery .view .images {
        white-space: nowrap; }
        main .stuff .item .gallery .view .images .image {
          display: inline-block;
          scroll-snap-align: start;
          vertical-align: top;
          margin-top: 0px; }
          main .stuff .item .gallery .view .images .image:not(:last-child) {
            margin-right: 8px; }
      main .stuff .item .gallery .view .image {
        border-radius: 0px;
        background-color: color(srgb 0.967 0.967 0.967);
        background-repeat: no-repeat;
        background-size: contain;
        background-position: center;
        width: 100%;
        padding-top: 75.18797%; }
      main .stuff .item .gallery .view::-webkit-scrollbar {
        display: none; }
    main .stuff .item .gallery .thumbnails * + * {
      margin-top: 0; }
    main .stuff .item .gallery .thumbnails .thumb {
      position: relative;
      display: inline-block;
      vertical-align: top;
      background-color: #F2F2F2;
      background-size: cover;
      background-position: center;
      opacity: 0.5;
      border-radius: 5px;
      transition: all 0.2s ease-out;
      width: 51px;
      height: 51px;
      margin-bottom: 8px; }
      main .stuff .item .gallery .thumbnails .thumb:not(:last-child) {
        margin-right: 8px; }
      main .stuff .item .gallery .thumbnails .thumb:after {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        border: 3px solid black;
        border-radius: 5px;
        opacity: 0; }
      main .stuff .item .gallery .thumbnails .thumb.selected {
        opacity: 1; }
        main .stuff .item .gallery .thumbnails .thumb.selected:after {
          opacity: 1; }
      main .stuff .item .gallery .thumbnails .thumb:hover {
        cursor: pointer;
        opacity: 1; }
    main .stuff .item .make-offer {
      display: inline-block;
      font-size: 15px;
      font-weight: 700;
      text-decoration: none;
      padding: 10px 20px;
      color: black;
      border: 3px solid black;
      border-radius: 8px; }
    main .stuff .item * + * {
      margin-top: 1em; }
    main .stuff .item.sold {
      position: relative;
      background-color: rgba(255, 255, 255, 0.25);
      overflow: hidden; }
      main .stuff .item.sold .content {
        opacity: 0.25; }
      main .stuff .item.sold .sold-badge {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%; }
        main .stuff .item.sold .sold-badge h1 {
          font-size: 51px;
          font-weight: 700;
          margin-top: 32px;
          padding: 8px 32px;
          color: white;
          background: #00D1FF;
          box-shadow: 0px 10px 32px 0px rgba(0, 0, 0, 0.1); }

main > footer {
  text-align: center;
  font-size: 15px;
  font-weight: 500;
  color: #4F4F4F;
  padding: 64px 0px; }
  main > footer > * {
    margin-bottom: 16px; }