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

        /* end of reset */

        #wrapper{
          
          width: 1000px;
          margin: 1% auto;
          padding: 0%;
          border: 1px solid white;
          position: relative;

        }

        #hands{
          height: 600px;
          position:  relative;
          border: 1px solid white;
          background-image: url("image/hands.jpg");
          background-color: #000000;
          /*background-size: contain;*/
          /*background-attachment: fixed;*/
          background-position: center;
          color: #ffffff;
          background-repeat: no-repeat; 
        }


        body{

        }


        h1{
          text-align: center;
          font-size: 40px; 
          font-family: Michroma;
        }


        h2{
          text-align: center;
          font-size: 20px;
          font-family: Nanum Myeongjo;
        }

        h3{
          text-align: center;
          font-size: 20px;
          font-family: Michroma;
        }

        p a {
          color: black;
          opacity: 40%;
          font-family: Nanum Myeongjo;
        }


        p a:hover{
          color: black;
          opacity: 100%;
          font-family: Nanum Myeongjo;
        }

        p{
          font-family: Nanum Myeongjo;
        }


        footer{
         text-align: center;

        }

          footer a {
          color: black;
          opacity: 40%;
        }

        footer a:hover{
          color: black;
          opacity: 100%;
        }


        .finger p {
          display:  none;
          font-family: Nanum Myeongjo;
        }

         .finger:hover p {
          display:  block;
          position: absolute;
          left: -100px;
          top:  100px;
          background-color: white;
          color: black;
          border-radius: 6px;
          padding: 10px;
         }

        .finger {
          
          width:  90px;
          height:  90px;
        }

        #finger-1 {
          width:  40px;
          height:  90px;
          position:  absolute;
          left: 240px;
          top:  150px;
          cursor: pointer;
        }
        #finger-2 {
           width:  40px;
          height:  150px;
          position:  absolute;
          left: 350px;
          top:  100px;
          cursor: pointer;
        }

        #finger-3 {
          width:  50px;
          height:  100px;
          position:  absolute;
          left: 520px;
          top:  160px;
          cursor: pointer;
        }

        #finger-4 {
           width:  50px;
          height:  90px;
          position:  absolute;
          left: 420px;
          top:  300px;
          cursor: pointer;
        }

        #finger-5 {
          width:  40px;
          height:  100px;
          position:  absolute;
          left: 700px;
          top:  150px;
          cursor: pointer;
        }








        /*tablet styles*/

         @media only screen and (min-width: 600px) and (max-width: 800px){

            #data ul{
              display: grid;
              grid-template-columns: 1fr 1fr ;
              grid-gap: 3px;
            }

              #steps ul{
              display: grid;
              grid-template-columns: 1fr 1fr ;
              grid-gap: 3px;
            }
            }


        /*desktop styles*/

        @media only screen and (min-width: 801px){

            #data ul{
              display: grid;
              grid-template-columns: 1fr 1fr ;
              grid-gap: 3px;
            }

            #steps ul{
              display: grid;
              grid-template-columns: 1fr 1fr ;
              grid-gap: 3px;
            }