@charset "UTF-8";

body {
         font-family: Helvetica;
         margin: 0;
         background-color: #fff;
}

header {
         background-color: #fff;
         padding: 0px;
         width: 100%;
         position: fixed;
         border-bottom: 1px solid #000;
}


h1 {
         padding-left: 10px;
}

h2 {
         font-weight: bold;
         margin-top: 30px;
}


section {
         padding-left: 10px;
         padding-right: 10px;
         padding-top: 140px;
         padding-bottom: 0px;
         margin-bottom: 20px
}

article {
         background-color: #blue;
         padding: 10px;
         margin-top: 0px;
         margin-left: 10px;
         margin-right: 10px;
         margin-bottom: 30px;
         box-shadow: 0px 2px 4px #666;
         border-radius: 10px;
         background-image: -webkit-linear-gradient(top, #eee, #fff);
         page-break-inside: avoid;
}

footer {
         padding: 10px;
         border-top: 1px solid #000;
         margin-top: 30px;
         margin-bottom: 45px;
}

hr {
         margin-top: 10px;
         margin-bottom: 10px;
}

header img {
         padding: 10px;
         width: 350px;
         height: auto;


}

section img {
         padding: 10px;
         box-shadow: 0px 0px 15px rgba(50, 50, 50, 0.85);
         width: 320px;
         height: auto;
}

article img {
         padding: 4px;
         box-shadow: 0px 0px 15px rgba(50, 50, 50, 0.85);
         margin-right: 20px;
         margin-bottom: 20px;
         width: 120px;
         height: auto;
         }


@media screen and (min-width: 768px) {
         aside {
         -webkit-column-count: 3;
         -webkit-column-gap: 15px;
         }
}

a {
    color: black;
    text-decoration: none;
    padding-top: 20px;
}

@media screen and (min-width: 1000px) {
         body {
         position: absolute;
         left: 50%;
         width: 1000px;
         margin-left: -500px;
         }

         header {
         position: fixed;
         left: 50%;
         width: 1000px;
         margin-left: -500px;
         }
}