:root {
    --smallpurple: #D5AEFF;
    --mediumpurple: #B978FF;
    --largepurple: #8D23FF;
    --giantpurple: #7B00FF;
}

a:link {color:var(--giantpurple) !important; }
a:active {color:var(--largepurple) !important;}
a:hover {color:var(--mediumpurple) !important;}
a:visited {color:var(--mediumpurple) !important;}

#header {
	display: block;
	background-color: var(--mediumpurple);
	height: 128px;
	text-align: center;
	background-image:url('images/colours-aa.png');
	background-position: center 0%;
	background-repeat: no-repeat;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

#menu {
	display: block;
	background-color: white;
	height: 40px;
	text-align: center;
}

.container {max-width:100% !important;}

.comic {display:block;
    margin: auto;
    max-width:100%;
    padding-top:0px;
}
    
.comic img {display: block;
    margin-left: auto;
    margin-right: auto;
    max-width:100%;
}


    
@media all and (orientation:landscape) {
.comic_img {width:100%; height:auto;}
}

.newspost {width:100%;}
.newspost-header {font-weight:bold;}
    
.nav {margin:auto; max-width:100%; text-align: center; padding-bottom:30px;}
.nav > a {padding:20px;}

.footer {margin:auto; max-width:100%; text-align:center; color:grey; font-size:0.8em;}
#footerlogo {max-width:50%;}

div.comictitle {width:100%; margin:auto; margin-top:5px; margin-bottom:-20px;}
h1.comictitle {font-family:"Myriad Pro", serif; font-size:2em; font-weight:bold; color:black; grey; padding:10px;}

body::after {
    float: left;
    top: 1.5em;
    position: absolute;
    transform: rotate(-45deg);
    background: orange;
    color: white;
    font-weight: bold;
    left: -3em;
    padding-left: 3em;    padding-right: 3em;
    padding-top: .5em;    padding-bottom: .5em;
    border: 0px;
    margin: 0;
    z-index: 999999999;
    content: "INFINITY";
}

span.kingofthedomes {font-family:"Myriad Pro", sans-serif;}
span.kingofthedomes > strike {color:darkgrey;}

/* SCREENPLAY CSS */

.screenbox {
    list-style: none;
    width: 500px;
    padding: 5px 14px;
}

.screenbox li { font: 15px/17px Courier, fixed; }

.sceneheader, .action, .character { padding-top: 1.5ex; }

.action { padding-right: 5%; }

.character { margin-left: 40%; }

.dialogue { margin-left: 25%; padding-right: 25%; }

.parenthetical { margin-left: 32%; padding-right: 30%; }

/* special case: dialogue followed by a parenthetical; the extra line needs to be suppressed */

.dialogue + .parenthetical { padding-bottom: 0; }

.transition { padding-top: 3ex; margin-left: 65%; padding-bottom: 1.5ex; }

.oldschooltranscript {font:15px/17px Courier, fixed;}