/* 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;
    }

    /* my css */

      * {
        box-sizing: border-box;
      }

      html {
        font-size: 62.5%;
        font-family: arial;
        color: black;
      }
      main{
        margin: 1em;
      }

      section{
        display: flex;
        border-top: 1px black solid;
        overflow-x: scroll;
        }

      img {
        width: 100%;
      }

      div.item{
        padding: 1.5em;
      }

      /* div.Top {
        background-color: red;
      }

      div.Bottom {
        background-color: blue;
      } */

      p { 
        display: inline; 
        padding-right: .3em;
        line-height: 1.2;
      }

      p.brand {
        font-weight: bold;
      }

      p.condition{
        border-bottom: 1px dotted black;
      }

      p.condition::after{
        content: ' condition';
      }

      p.brand, p.cost, p.status, p.condition{
        text-transform: uppercase;
      }

      h1 {
        text-transform: lowercase;
        writing-mode: vertical-lr;
        align-self: flex-start;
        padding-bottom: 10px;
        position: absolute;
        right: 10px;
      }

      h2 {
        text-transform: uppercase;
        margin: 15px 0px;
        font-weight: bold;
        writing-mode: vertical-lr;
      }

      aside#fitting-room{
        height: 100vh;
        background-color: aliceblue;
        padding: 15px 25px 15px 15px;
        display: flex;
        flex-direction: column;
        position: fixed;
        top: 0;
        right: 0;
        align-items: center;
      }

      #fitting-room > img {
        width: 250px;
        height: 100%;
        object-fit: cover;
        vertical-align: top;
      }

      footer {
        display: flex;
        position: fixed;
        bottom: 10px;
        left: 10px;
        background: aliceblue;
      }

      footer a{
        margin-left: 5px;
      }

  @media only screen and (max-width: 500px) {
      #fitting-room > img {
      width: 170px;
    }
}