/* ---------------------------------------------------------
   HTML5 Bones
   This stylesheet contains print styling and a section for
   you to simply add your own. This is a basic template
   after all.
   ---------------------------------------------------------*/
    body {

    }
    /* Default link styling */
    a:link { color:#0271fb; }
    a:visited { color:#bd02fb; }
    a:hover, a:focus { color:#000; }
    a:active { color:#fb0e02; }



/* ---------------------------------------------------------
   Author's styles
   ---------------------------------------------------------*/

    html {
      height: 100%;
      background: url(../images/bg.jpg) no-repeat center center fixed;
      -webkit-background-size: cover;
      -moz-background-size: cover;
      -o-background-size: cover;
      background-size: cover;
    }

    body { position:absolute; top:0; bottom:0; right:0; left:0; }

    header, footer {
      height: 8%;
      padding: 0;
      margin: 0;
      background-color: rgba(55,55,55,0.3);
      display: flex;
      align-items: center;
      justify-content: center;
    }

    footer {
      color: #EEE;
      height: 5%;
    }

    h1 {
      margin: 0;
      color: #EEE;
    }

    h1, footer {
      text-align: center;
    }

    .wrap {
      height: 87%;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    #index {
      text-align: center;
    }

    #index li {
      display: inline-block;
      margin: 0.5em;
      border: 1px solid #000;
      width: 7.5em;
      height: 7.5em;
      text-align: center;
      background-color: rgba(44,44,44,0.8);
    }

    #index li img{
      display: block;
      padding: 0.1em;
      margin: 0 auto;
      clear: right;
      height: 6em;
      width: 6em;
    }

    #index li a{
      text-decoration: none;
    }

    #index a:visited, #index a:link{
      color: #DDD;
    }

    #index a:hover{
      opacity: 0.5;
    }

    #index li a span {
      display:inline-block;
      margin: 0.2em;
    }


/* ---------------------------------------------------------
   Print styles
   ---------------------------------------------------------*/
@media print {
    * {
        color:#000 !important;
        box-shadow:none !important;
        text-shadow:none !important;
        background:transparent !important;
    }
    html { background-color:#fff; }
    /* Hide navigation */
    nav { display:none; }

    /* Show link destinations in brackets after the link text */
    a[href]:after { content: " (" attr(href) ") "; }
    a[href] {
        font-weight:bold;
        text-decoration:underline;
        color:#06c;
        border:none;
    }
    /* Don't show link destinations for JavaScript or internal links */
    a[href^="javascript:"]:after, a[href^="#"]:after { content:""; }

    /* Show abbr title value in brackets after the text */
    abbr[title]:after { content: " (" attr(title) ")"; }

    figure {
        margin-bottom:1em;
        overflow:hidden;
    }

    figure img { border:1px solid #000; }
}