html {
    background-image: url('images/background.gif');
    height: 100%;
}

* {
    font-family: sans-serif;
    color: cyan;
    cursor: url('images/cursor/frame1.png'), auto;
    -webkit-animation: cursor 400ms infinite;
    animation: cursor 400ms infinite;
}

h1 {
    font-size: 5em;
}

h2 {
    font-size: 4em;
}

h3 {
    font-size: 2em;
}

p, li {
    font-size: 1.2em;
}

@-webkit-keyframes cursor {
  0% {cursor: url('images/cursor/frame1.png'), auto;}
  33% {cursor: url('images/cursor/frame2.png'), auto;}
  67% {cursor: url('images/cursor/frame3.png'), auto;}
  100% {cursor: url('images/cursor/frame4.png'), auto;}
} 

@keyframes cursor {
  0% {cursor: url('images/cursor/frame1.png'), auto;}
  33% {cursor: url('images/cursor/frame2.png'), auto;}
  67% {cursor: url('images/cursor/frame3.png'), auto;}
  100% {cursor: url('images/cursor/frame4.png'), auto;}
}

body {
    width: 75%;
    margin: auto;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
}

nav {
    display: flex;
    justify-content: space-around;
}

nav a {
    color: purple;
    font-size: 2em;
    text-decoration: none;
    transition: 0.2s;
}

nav a:hover {
    transition: 0.2s;
    color: black;
    background-color: purple;
}

.text-container {
    margin: auto;
    border: 3px dashed green;
    background-color: black;
}

.body-container {
    width: 100%;
    display: flex;
    justify-content: space-between;
}

.header {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.header .banner {
    width: 100%;
    height: 9.5em;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.header nav {
    width: 65%;
    margin-top: 10px;
}

#moon, #sun {
    max-height: 100%;
    max-width: 20%;
    height: 100%;
}

#logo {
    max-width: 60%;
    max-height: 100%;
}

.page-column {
    /* width of the image */
    width: 345px;
    text-align: center;
}

.page-column img {
    max-width: 100%;
    height: auto;
}

.right-rainbow-checkers {
    background-image: url('images/right-rainbow-checkers.gif');
}

.left-rainbow-checkers {
    background-image: url('images/left-rainbow-checkers.gif');
}

.content {
    width: 100%; 
    margin: 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.blinkies {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}