body {
    color:LawnGreen;
    background-image: url("res/bg.gif");
    background-repeat: repeat;
    font-family: "Lucida Console", "Courier New", monospace;
    margin: 0px;
}

main {
	display: flex;
}

.content_div {
	background-color: black;
	margin: 1%;
	padding: 1%;
}

a {
	text-decoration: none;
	color: green;
	
}

a:hover {
	font-weight: bold;
}

header {
	display: flex;
	align-items: flex-end;
	margin-left: 5%;
	
}

header h1 {
	margin: 0;
	padding: 0.5%;
	background-color: black;
}

header a {
	color:LawnGreen;
}

header img {
	height: 15vh;
	width: auto;
}

#navigation {
	margin-left: 1%;
}

#navigation ul {
	display: flex;
	padding: 0;
	margin: 0;	
}

#navigation ul li {
	list-style-type: none;
	padding: 15px;
	background-color: black;
}

#navigation ul li:hover {
	list-style-type: none;
	padding: 15px;
	background-color: DarkGray;
}

#comic_links {
	flex: 1;
}

#comic {
	flex: 4;
	text-align: center;
	padding: 2%;
} 

#comic_image {
    width: 80%;
    margin: 20px auto 20px auto;
    background-color: white;
    color: black;
    padding: 5px;

    border-style: double;
}

#comic_image img {
    width: 100%;
    
}

/* Character info page stuff */

#character_bios_main {
	flex-direction: column;
}

table {
	width: 100%;
}

th {
	text-align: left;
}

.character_info_container {
	display: flex;
	width: 90%;
}

/* Every second info box is on the right */
.character_info_container:nth-child(even) {
	align-self: flex-end;
}

.character_info_container:nth-child(even) .character_info_main {
	order: 2;
}

.character_info_main {
	flex: 2;	
}

.character_info_side {
	flex: 1;
	color: white;
}

.character_info_side figcaption {
	text-align: center;
	padding: 1%;
}

/* Bouncing joint */

#bouncing {
    width: 500px;
    display: grid;
    grid-template-columns: auto auto;
}

#bouncing img {
    display: block;
    width: 150px;
}

.bounce_area {
    margin: 0 0 0 0;
    width: 100vw;
    height: 100vh;
    position: fixed;
    overflow: hidden;
    left: 0;
    bottom: 0;
    pointer-events: none;
}

#bouncing {
    position: absolute;
    
    -webkit-animation: moveX 8s linear 0s infinite alternate, moveY 9s linear 0s infinite alternate;
    -moz-animation: moveX 8s linear 0s infinite alternate, moveY 9s linear 0s infinite alternate;
    -o-animation: moveX 8s linear 0s infinite alternate, moveY 9s linear 0s infinite alternate;
    animation: moveX 8s linear 0s infinite alternate, moveY 9s linear 0s infinite alternate;
}

@-webkit-keyframes moveX {
    from { left: 0; } to { left: calc(100% - 150px); }
}
@-moz-keyframes moveX {
    from { left: 0; } to { left: calc(100% - 150px); }
}
@-o-keyframes moveX {
    from { left: 0; } to { left: calc(100% - 150px); }
}
@keyframes moveX {
    from { left: 0; } to { left: calc(100% - 150px); }
}

@-webkit-keyframes moveY {
    from { top: 0; } to { top: calc(100% - 150px); }
}
@-moz-keyframes moveY {
    from { top: 0; } to { top: calc(100% - 150px); }
}
@-o-keyframes moveY {
    from { top: 0; } to { top: calc(100% - 150px); }
}
@keyframes moveY {
    from { top: 0; } to { top: calc(100% - 150px); }
}