body {
    background-color: #888;
}

* {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 12pt;
    color: black;
}

h1 {
    font-size: 16pt;
}

h2 {
    font-size: 14pt;
}

h3 {
    font-size: 12pt;
}

header h1, header h2 {
    text-align: center;
    color: #ccc;
}

header h2 {
    font-style: italic;
}

strong {
    color: #000;
    transition: color 0.25s;
}

span, a {
    color: #444;
    transition: color 0.25s;
}

span:hover, strong:hover, a:hover {
    color: #fff;
}

p {
    text-align: justify;
}

img {
    width: 240px;
}

img:hover {
    animation: shake 0.5s;
    animation-iteration-count: infinite;
}

@keyframes shake {
  0% { transform: translate(0px, 1px) rotate(0deg); }
  10% { transform: translate(-2px, 3px) rotate(-1deg); }
  20% { transform: translate(1px, 2px) rotate(1deg); }
  30% { transform: translate(3px, -1px) rotate(0deg); }
  40% { transform: translate(2px, 3px) rotate(1deg); }
  50% { transform: translate(-1px, 2px) rotate(-1deg); }
  60% { transform: translate(3px, 1px) rotate(0deg); }
  70% { transform: translate(2px, -3px) rotate(-1deg); }
  80% { transform: translate(1px, 2px) rotate(1deg); }
  90% { transform: translate(-3px, 1px) rotate(0deg); }
  100% { transform: translate(-2px, -3px) rotate(-1deg); }
}

header, article, footer {
    max-width: 480px;
    margin: auto;
    padding: 10px;
    background: #ccc;
}

header {
    background: #000;
}

article {

}

footer {
    border-top: 2px solid #000;
}

.copyright {

}

.contact {
    float: right;
}