@media screen and (min-width:481px) {
    
html
{
background-color: #813131;
background: linear-gradient(#813131,#561313);
}

body
{
margin: 0px;
font-family: Arial;
color: #f5ad58;
}
p
{
font-size: 16px;
}
h1
{
font-size: 50px;
font-family: "Times New Roman";
/* border-bottom: 4px solid #f5ad58; */
}
h2
{
font-size: 25px;
border-bottom: 4px solid #f5ad58;
}
h3
{
padding-top: 10px;
padding-bottom: 1px;
margin-bottom: 0px;
}
h4
{
border-top: 2px solid #f5ad58;
border-style: dotted none none none;
font-size: 13px;
margin-top: 0px;
text-align: right;
}
a
{
color: #d67c17;
text-decoration: none;
}
a:hover
{
color: #ffe1bf;
}
b
{
color: yellow;
}

/* --------------------Divisions-------------------- */

#container
{
margin: 0 auto;
width: 960px;
}
#header
{
margin-top: 0px;
padding-top: 20px;
}

/* --------------------Page Content-------------------- */

#content
{
margin-top: 25px;
margin-bottom: 25px;
}

#headBox
{
background-image: url("../images/headTest.png");
width: 960px;
height: 175px;
margin: 0px;
margin-bottom: 4px;
padding: 0px;
}

#headBox h1
{
text-shadow: 0px 0px 4px yellow;
padding-left: 190px;
padding-top: 53px;
margin: 0px;
border: none;
color: yellow;
font-size: 54px;
font-weight: bold;
}

#splashBox 
{
padding-left: 190px;
}

#splash
{
}

#splash p
{
text-shadow: 0px 0px 2px yellow;
margin-top: 7px;
font-family: "Times New Roman";
font-size: 25px;
color: gold;
font-style: italic;
}

/* --------------------Navigation-------------------- */


#navi
{
padding: 8px;
text-align: center;
background: linear-gradient(to right, rgba(135, 24, 24,0), rgba(135, 24, 24,1), rgba(135, 24, 24,1), rgba(135, 24, 24,1), rgba(135, 24, 24,1), rgba(135, 24, 24,0));
}
.naviB1
{
background: linear-gradient(to right, rgba(245,173,88,0), rgba(245,173,88,1), rgba(245,173,88,1), rgba(245,173,88,0));
height: 5px;
margin: 0px;
}
.naviB2
{
background: linear-gradient(to right, rgba(255,255,0,0), rgba(255,255,0,1), rgba(255,255,0,1), rgba(255,255,0,0));
height: 2px;
margin: 0px;
}
.naviB3
{
background: linear-gradient(to right, rgba(255,255,0,1), rgba(255,255,0,0));
height: 4px;
margin: 0px;
}
.naviB4
{
background: linear-gradient(to right, rgba(255,255,0,1), rgba(255,255,0,0.4), rgba(255,255,0,0), rgba(255,255,0,0.4), rgba(255,255,0,1));
height: 2px;
margin: 0px;
}
#navi p
{
font-size: 25px;
padding: 0px;
margin: 0px;
}
#navi a
{
padding: 4px;
margin: 1px;
text-decoration: none;
font-weight: bold;
font-size: 20px;
color: yellow;
vertical-align: middle;
text-shadow: 0px 0px 2px gold;
}
#navi a:hover
{
color: gold;
text-shadow: 0px 0px 3px yellow;
}
#navi a:active
{
color: #f5ad58;
}
#navi img
{
vertical-align: middle;
}

/* --------------Contents Container-------------- */

.box
{
width: 860px;
border: 5px solid #f5ad58;
background-color: #871818;
padding: 30px 30px 20px 30px;
margin: 25px 25px 0px 25px;
overflow: auto;
}

.box img
{
box-shadow: 0px 0px 7px black;
}

#gall
{
width: 150px;
float: right;
margin-left: 25px;
}

#gall p
{
margin-top: 0px;
text-align: justify;
font-size: 14px;
}

/* --------------Comic Text-------------- */

.dl
{
margin-left: 30px;
}

.dd
{
margin: 10px 0 10px 0;
}

.comicdiv
{
height: 100px;
background-color: blue;
margin-bottom: 30px;
margin-top: 30px;
float: left;
width: 100%;
}

.comicdiv p 
{
color: black;
font-size: 20px;
margin-left: 10px;
}

.options 
{
clear: both;
}

.readnow
{
display: inline;
font-weight: bold;
}

.otherlinksmob
{
display: none;
}

.otherlinks
{
display: inline;
float: right;
}

.comicBox
{
float: left;
margin-bottom: 20px;
}


.desc
{
width: 800px;
margin-left: auto;
margin-right: auto;
overflow: auto;
}

.desc h1
{
color: yellow;
margin: 0px;
margin-top: 10px;
padding: 0px;
font-family: Arial;
font-size: 25px;
/* border-bottom: 4px solid #f5ad58; */
}

.desc p
{
text-align: justify;
}

.desc h2
{
font-size: 20px;
color: yellow;
border: none;
text-decoration: underline;
}

.desc h3
{
margin-top: 3px;
margin-bottom: 3px;
font-weight: normal;
font-size: 18px;
text-decoration: underline;
}

.desc img
{
float: right;
}

.desc a
{
color: yellow;
}

.desc a:hover
{
color: gold;
text-shadow: 0px 0px 2px gold;
}

.desc a:hover
{
color: gold;
text-shadow: 0px 0px 2px gold;
}

.desc2
{
background-color: #561313;
border-radius: 25px;
padding: 30px;
padding-bottom: 10px;
padding-top: 10px;
margin-bottom: 10px;
float: left;
width: 800px;
}

.desc2 h1
{
color: yellow;
margin: 0px;
margin-top: 10px;
padding: 0px;
font-family: Arial;
font-size: 23px;
/* border-bottom: 2px solid #f5ad58; */
}

.desc2 p
{
text-align: justify;
}

.desc2 h2
{
font-size: 20px;
color: yellow;
border: none;
text-decoration: underline;
}

.desc2 h3
{
margin-top: 3px;
margin-bottom: 3px;
font-weight: normal;
font-size: 18px;
text-decoration: underline;
}

.desc2 img
{
}

.desc2 a
{
color: yellow;
}

.desc2 a:hover
{
color: gold;
text-shadow: 0px 0px 2px gold;
}

.desc2 a:hover
{
color: gold;
text-shadow: 0px 0px 2px gold;
}

.noverflow
{
width: 800px;
margin-left: auto;
margin-right: auto;
margin-bottom: 600px;
overflow: auto;
}

.noverflow h1
{
color: yellow;
margin: 0px;
margin-top: 10px;
padding: 0px;
font-family: Arial;
font-size: 25px;
border-bottom: 4px solid #f5ad58;
}

.noverflow p
{
text-align: justify;
}

.noverflow h2
{
font-size: 20px;
color: yellow;
border: none;
text-decoration: underline;
}

.noverflow h3
{

}

.noverflow img
{
float: right;
}

.noverflow a
{
color: yellow;
}

.noverflow a:hover
{
color: gold;
text-shadow: 0px 0px 2px gold;
}

.preview
{
margin-left: 30px;
margin-top: 16px;
display: inline;
}

.preview img
{
border-radius: 8px;
width: 160px;
height: auto;
margin-top: 16px;
margin-bottom: 10px;
}

.mob
{
display: none;
}

#arch
{
}

#arch h1
{
font-size: 20px;
border-bottom: 2px solid #f5ad58;
margin-bottom: 10px;
margin-top: 20px;
color: #f5ad58;
}

#arch p
{
font-size: 13px;
margin-top: 2px;
margin-bottom: 2px;
}

#arch a
{
color: yellow;
text-decoration: none;
font-weight: bold;
}

#searchBar
{
border: 1px solid #000000;
font-size: 16px;
padding: 10px;
outline: none;
width: 250px;
}

#searchBtn
{
border: 1px solid #000000;
font-size: 16px;
padding: 10px;
background: #f1d829;
font-weight: bold;
cursor: pointer;
outline: none;
}

#searchBtn:hover
{
background: #f6e049
}

.linkHolder
{
height: auto;
width: 800px;
display: block;
clear: both;
text-align: center;
margin-right: auto;
margin-left: auto;
}

.linkHolder p
{
text-align: center;
}


/* --------------Footer-------------- */

#footer
{
float: left;
width: 1000px;
padding: 75px 0px 0px 0px;
}

}








/* ---------------- Mobile Testing --------------------- */


@media screen and (max-width:480px) {
    


html
{
background-color: #813131;
background: linear-gradient(#813131,#561313);
height: auto;
}

body
{
margin: 0px;
font-family: Arial;
color: #f5ad58;
}
p
{
font-size: 16px;
}
h1
{
font-size: 50px;
font-family: "Times New Roman";
}
h2
{
font-size: 20px;
border-bottom: 3px solid #f5ad58;
}
a
{
color: #d67c17;
text-decoration: none;
}
a:hover
{
color: #ffe1bf;
}

b
{
color: yellow;
}


/* --------------------Divisions-------------------- */

#container
{
margin: 0 auto;
}
#header
{
margin-top: 0px;
padding-top: 20px;
}




/* --------------------Page Content-------------------- */

#content
{
margin-top: 10px;
}

#headBox
{
max-width:100%;
max-height:100%;
margin: 0px;
margin-bottom: 4px;
padding: 0px;
}

#headBox h1
{
text-shadow: 0px 0px 4px yellow;
margin: 0px;
border: none;
color: yellow;
font-size: 30px;
font-weight: bold;
text-align: center;
}

#splashBox 
{
    
}

#splash
{
}

#splash p
{
text-shadow: 0px 0px 2px yellow;
margin-top: 7px;
font-family: "Times New Roman";
font-size: 15px;
color: gold;
font-style: italic;
text-align: center;
}


/* --------------------Navigation-------------------- */


#navi
{
padding: 1px;
text-align: center;
background: linear-gradient(to right, rgba(160, 160, 0,0), rgba(160, 160, 0,1), rgba(160, 160, 0,1), rgba(160, 160, 0,0));
margin: 0;
}
.naviB1
{
background: linear-gradient(to right, rgba(245,173,88,0), rgba(245,173,88,1), rgba(245,173,88,1), rgba(245,173,88,0));
height: 5px;
margin: 0px;
}
.naviB2
{
background: linear-gradient(to right, rgba(255,255,0,0), rgba(255,255,0,1), rgba(255,255,0,1), rgba(255,255,0,0));
height: 2px;
margin: 0px;
}
.naviB3
{
background: linear-gradient(to right, rgba(255,255,0,1), rgba(255,255,0,0));
height: 4px;
margin: 0px;
}
.naviB4
{
background: linear-gradient(to right, rgba(255,255,0,1), rgba(255,255,0,0.4), rgba(255,255,0,0), rgba(255,255,0,0.4), rgba(255,255,0,1));
height: 2px;
margin: 0px;
display: none;
}
#navi p
{
font-size: 0px;
padding: 0px;
margin: 0px;
}
#navi a
{
padding: 3px;
margin: 1px;
text-decoration: none;
font-weight: bold;
font-size: 12px;
color: yellow;
background: linear-gradient(#813131,#561313);
vertical-align: middle;
text-shadow: 0px 0px 2px gold;
border-radius: 3px;
}
#navi a:hover
{
color: gold;
text-shadow: 0px 0px 3px yellow;
}
#navi a:active
{
color: #f5ad58;
}
#navi img
{
display: none;
}


/* --------------Contents Container-------------- */

.box
{
max-width: 100%;
border: 3px solid #f5ad58;
background-color: #871818;
padding: 20px 10px 20px 10px;
margin-top: 10px;
overflow: auto;
border-radius: 5px;
}

.box img
{
box-shadow: 0px 0px 7px black;
}

#gall
{
width: 150px;
float: right;
margin-left: 25px;
}

#gall p
{
margin-top: 0px;
text-align: justify;
font-size: 14px;
}

/* --------------Comic Text-------------- */
	
	


.comicdiv
{
height: 100px;
background-color: blue;
margin-bottom: 30px;
margin-top: 30px;
float: left;
max-width: 100%;
width: 100%;
}

.comicdiv p 
{
color: black;
font-size: 20px;
margin-left: 10px;
}

.options 
{
}

.readnow
{
font-weight: bold;
margin-left: 20px;
font-size: 20px;
text-align: center;
}

.otherlinksmob
{
text-align: center;
}

.otherlinks
{
display: none;
}

.comicBox
{
max-width: 100%;
float: left;
margin-bottom: 20px;
}

.desc
{
max-width: 56%;
margin-left: 10px;
margin-right: auto;
overflow: auto;
}

.desc h1
{
color: yellow;
margin: 0px;
margin-top: 10px;
padding: 0px;
font-family: Arial;
font-size: 25px;
}

.desc p
{
text-align: justify;
}

.desc h2
{
font-size: 20px;
color: yellow;
border: none;
text-decoration: underline;
}

.desc h3
{
margin-top: 3px;
margin-bottom: 3px;
font-weight: normal;
font-size: 15px;
text-decoration: underline;
}

.desc img
{
float: right;
max-width: 100%;
height: auto;
}

.desc a
{
color: yellow;
}

.desc a:hover
{
color: gold;
text-shadow: 0px 0px 2px gold;
}

.desc a:hover
{
color: gold;
text-shadow: 0px 0px 2px gold;
}

.desc ul
{
font-size: 12px;
}

.desc2
{
background-color: #561313;
border-radius: 5px;
padding: 5px;
padding-top: 5px;
margin-bottom: 5px;
max-width: 98%;
float:left;
}

.desc2 h1
{
color: yellow;
margin: 0px;
margin-top: 10px;
padding: 0px;
font-family: Arial;
font-size: 25px;
}

.desc2 p
{
text-align: justify;
}

.desc2 h2
{
font-size: 20px;
color: yellow;
border: none;
text-decoration: underline;
}

.desc2 h3
{
margin-top: 3px;
margin-bottom: 3px;
font-weight: normal;
font-size: 18px;
text-decoration: underline;
}

.desc2 img
{
float: right;
}

.desc2 a
{
color: yellow;
}

.desc2 a:hover
{
color: gold;
text-shadow: 0px 0px 2px gold;
}

.desc2 a:hover
{
color: gold;
text-shadow: 0px 0px 2px gold;
}

.noverflow
{
max-width: 100%;
margin-left: auto;
margin-right: auto;
margin-bottom: 600px;
overflow: auto;
}

.noverflow h1
{
color: yellow;
margin: 0px;
margin-top: 10px;
padding: 0px;
font-family: Arial;
font-size: 25px;
border-bottom: 4px solid #f5ad58;
}

.noverflow p
{
text-align: justify;
}

.noverflow h2
{
font-size: 20px;
color: yellow;
border: none;
text-decoration: underline;
}

.noverflow h3
{

}

.noverflow img
{
float: right;
}

.noverflow a
{
color: yellow;
}

.noverflow a:hover
{
color: gold;
text-shadow: 0px 0px 2px gold;
}



.preview
{
margin-left: 0px;
margin-top: 16px;
display: inline;
}

.preview img
{
border-radius: 8px;
width: 35%;
height: auto;
margin-top: 16px;
margin-bottom: 10px;
margin-right: 10px;
}

.mob
{
}

.mob img
{
max-width: 100%;
height: auto;
margin-left: auto;
margin-right: auto;
display: block;
margin-top: 10px;
box-shadow: 0px 0px 7px black;
}

#arch
{
}

#arch h1
{
font-size: 20px;
border-bottom: 2px solid #f5ad58;
margin-bottom: 10px;
margin-top: 20px;
color: #f5ad58;
}

#arch p
{
font-size: 13px;
margin-top: 2px;
margin-bottom: 2px;
}

#arch a
{
color: yellow;
text-decoration: none;
font-weight: bold;
}

#searchBar
{
border: 1px solid #000000;
font-size: 16px;
padding: 10px;
outline: none;
width: 250px;
}

#searchBtn
{
border: 1px solid #000000;
font-size: 16px;
padding: 10px;
background: #f1d829;
font-weight: bold;
cursor: pointer;
outline: none;
}

#searchBtn:hover
{
background: #f6e049
}

.linkHolder
{
height: auto;
max-width: 100%;
display: block;
clear: both;
text-align: center;
margin-right: auto;
margin-left: auto;
}

.linkHolder p
{
text-align: center;
font-size: 11px;
}


/* --------------Footer-------------- */

#footer
{
float: left;
max-width: 100%;
padding: 75px 0px 0px 0px;
} 
    
}