@charset "UTF-8";
/* CSS Document */
body {
   -webkit-background-size: 4px 4px;
   -moz-background-size: 4px 4px;
   background-size: 4px 4px;
   background-color: #DCD6CF;
   background-image: -webkit-gradient(linear, 0 0, 100% 100%, color-stop(.25, rgba(255, 255, 255, .4)), color-stop(.25, transparent), color-stop(.5, transparent), color-stop(.5, rgba(255, 255, 255, .4)), color-stop(.75, rgba(255, 255, 255, .4)), color-stop(.75, transparent), to(transparent));
   background-image: -webkit-linear-gradient(-45deg, rgba(255, 255, 255, .4) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .4) 50%, rgba(255, 255, 255, .4) 75%, transparent 75%, transparent);
   background-image: -moz-linear-gradient(-45deg, rgba(255, 255, 255, .4) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .4) 50%, rgba(255, 255, 255, .4) 75%, transparent 75%, transparent);
   background-image: -ms-linear-gradient(-45deg, rgba(255, 255, 255, .4) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .4) 50%, rgba(255, 255, 255, .4) 75%, transparent 75%, transparent);
   background-image: -o-linear-gradient(-45deg, rgba(255, 255, 255, .4) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .4) 50%, rgba(255, 255, 255, .4) 75%, transparent 75%, transparent);
   background-image: linear-gradient(-45deg, rgba(255, 255, 255, .4) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .4) 50%, rgba(255, 255, 255, .4) 75%, transparent 75%, transparent);
    letter-spacing: 2px;
   color: #666;
}
wrapper {
   width: 100%;
   max-width: 900px;
   display: flex;
   flex-direction: column;
   min-height: 100vh;
   margin: 0;
   background: #EEE;
}
.title {
   margin: 1.5rem;
   font-size: 200%;
   font-weight: 600;
   color: rgba(0, 0, 0, .4);
   text-shadow: 0 1px 0 #FFF, 0px 1px 0px #eee, 0 0 0 #AAA;
}
article {
   padding: 0 1.5rem 1.5rem 1.5rem;
}
.subtitle {
   color: #AAA;
   margin: 1.5rem 0;
   font-size: 140%;
   font-weight: 600;
    text-shadow: -1px -1px 0 rgba(255,255,255,.5);
}
p {
   font-size: 100%;
    margin-bottom: 3em;
    line-height: 1.4;
}
p::first-letter {
   font-size: 140%;
   font-weight: 600;
   color: #666;
}
p::after {
   content: "";
   display: block;
   clear: both;
}
.img-left {
   width: 50%;
   float: left;
   margin: 0 1.5rem 0 0;
    border: 10px solid #FFF;
}
.img-right {
   width: 50%;
   float: right;
   margin: 0 0 0 1.5rem;
    border: 10px solid #FFF;
}
.img-middle {
   width: 100%;
   margin: 1.5rem 0;
    border: 10px solid #FFF;
}
nav {
   box-shadow: 2px 2px 2px inset rgba(0, 0, 0, .2);
}
nav li{
    padding-right: 2em;
}
nav li:first-child{
    padding-right: 0;
}
nav a {
   display: block;
   background: #EEE;
   margin-bottom: 1rem;
   padding: .75rem .75rem .75rem .5rem;
   border-top-right-radius: 2rem;
   border-bottom-right-radius: 2rem;
   border-bottom-left-radius: 0;
   box-shadow: 2px 2px 2px 0 rgba(0, 0, 0, .2);
   font-size: 90%;
}
nav li:first-child a{
   border-bottom-left-radius: 2rem;
    text-align: center;
    border-top: 1px dashed #CCC;
}
.back-home {
   background: #AAA;
   border-top-right-radius: 0;
   padding: 1rem 0 1rem .5rem;
   color: rgba(255, 255, 255, 1);
}
hr {
   border: 0;
   height: 0;
   border-top: 1px dashed #BBB;
   border-bottom: 1px dashed rgba(255, 255, 255, 1);
   margin: 3.5rem;
}
article hr:first-child {
   margin-top: 0;
}
footer {
   margin-top: auto;
   background: #AAA;
   line-height: 100px;
   text-align: center;
   color: rgba(255, 255, 255, 1);
}
footer::first-letter {
   font-weight: 600;
   padding-right: .25rem;
}
@media (min-width:1000px) {
   body {
      display: flex;
      flex-direction: row;
   }
   wrapeer {
      flex-grow: 2;
   }
   .title {
      letter-spacing: 5px;
      font-size: 240%;
   }
   nav {
      width: 230px;
      flex-shrink: 0;
   }
nav li{
    padding-right: 0;
}
nav li:first-child a{
   border-bottom-left-radius: 0;
    text-align: left;
    border-top: 0;
}
nav a:first-child{
   border-bottom-left-radius: 0;
}
}