@keyframes background {
    0% {
        background-position: 0px 0px;
    }
    100% {
        background-position: 256px 256px;
    }
}

body {
    background:#e3e3e3;
    margin:0;
    margin-bottom:-100;
}

#logo a img {
    max-width:800px;
    font-family:sans-serif;
    text-decoration:none;
    color:orange;
    font-weight:bold;
    background:#ffffff;
    padding: 10px 5px;
    user-select: none;
    rotate: 0.001deg;
    transition: padding 0.4s;
    border:2px solid black;
    border-radius:5px;
}

#logo a img:hover {
    padding: 14px 40px;
}

#buttonRow {
    user-select: none;
}

.greenButton a, .pinkButton a, .blueButton a, .grayButton a, .dbButton a {
    font-family: sans-serif;
    padding:7px 20px;
    display:inline-block;
    text-decoration:none;
    color:black;
    font-size:16pt;
    border:2px solid black;
    margin: 0px 2px;
    transition: padding .2s, font-size 0.2s, background 0.2s;
    border-radius:5px;
}

.greenButton a:hover, .pinkButton a:hover, .blueButton a:hover, .grayButton a:hover {
    padding: 14px 40px;
}

.greenButton a {
    background:#3ed93e;
}

.greenButton a:hover {
    background:#7fe67f;
}

.blueButton a {
    background:#5cbff7;
}

.blueButton a:hover {
    background:#99d6fa;
}

.pinkButton a {
    background:#f072b6;
}

.pinkButton a:hover {
    background:hsl(328 81% 84% / 1);
}

.grayButton a {
    background:#ad9d9c;
}

.grayButton a:hover {
    background:#706665;
}

.dbButton a {
    background:#3d5485;
}

.dbButton a:hover {
    background:#2d3e63;
}

#latestComic img {
    width:500px;
    user-select: none;
}

#latestComic a {
    position:relative;
    z-index: 2;
}

#latestComic a:hover {
    filter:brightness(1.25);
}

#content {
    background:white;
    max-width:650px;
    z-index: 1;
    font-family: sans-serif;
    display: block;
    padding:15px;
    padding-top:100px;
    padding-bottom:15px;
}

#container {
    top: -100px;
    position:relative;
    width:100%;
    background: url(https://westcritterssociety.com/wcs/pixil-frame-0.png) #3ca8a3;
    background-attachment:fixed;
    background-size: 48px;
    image-rendering:pixelated;
    animation: 6s linear infinite background;
}

.blogTitle, .blogDate {
    border: 1px solid black;
    padding:2px 8px;
    display: block;
}

.blogTitle {
    float:left;
    width:75%
}

.blogpost {
    width:70%;
    display:table;
    border:1px solid black
}

.blogContent {
    display: block;
    border: 1px solid black
}

.bouncy-img {
width: 200px;
margin: 10px;
}

.bouncy-img.big {
width: 230px;
}

.bouncy-img:hover {
animation: bounce 0.3s infinite;
}

@keyframes bounce {
0%, 100% {
transform: translateY(0);
}
50% {
transform: translateY(-15px);
}
}