/*very important*/
html {
background-color: #000;

color: #000;
}

body {
font-family: Verdana, sans-serif;
text-rendering: optimizeLegibility;

margin: 0%;
}
/*important*/

#wrapper{
margin: auto;
width: 64vw;
}
  
#flex {
display: flex;
}

/*main and aside*/
main{
background-color: #333;
color: #fff;
height: auto;
font-size: 12px;
width: 100%;

margin: 1%;
}

footer{
background-color: #000;
color: #bbb;

font-size: 11px;

text-align: center;
}

/*headings*/
h1, h2, h3, h4{
margin: 0%;
margin-left: 0%;
margin-right: 0%;
margin-top: 0%;
padding: 0.5%;
}

h4{
display: block;
padding: 1%;


color: #fff;
text-shadow: #000 0px 1px 2px;
text-decoration: none;

background-image:linear-gradient(0deg,#ff8800 0%, #ce0000 100%);
border-top: 1px solid #da6e08;
border-bottom: 1px solid #6d1003;
font-weight: bold;
}

p {
padding: 0.5%;
}

/*horizontal lines*/
hr {
border-top: none;
border-bottom: 1px dotted #fff;
border-right: none;
border-left: none;
}

/*lists*/

li, ol, ul {
text-align: left;

margin: 1px;
padding-left: 0%;

list-style-position: inside;
}

/*tabcontent*/

.tabcontent {
display: none;
height: auto;
}

/*hyperlinks*/
a {
text-decoration: underline;
color: #ffee00;
}

a:hover {
text-decoration: none;
}

#longlink {
display: block;
padding: 2%;
text-decoration: none;


background-color: #555;
border-top: 1px solid #777;
border-bottom: 1px solid #333;

color: #fff;
height: auto;
width: auto;
}

#longlink:hover{
color: #ffee00;
}

/*tables*/
table, td, th {
border-collapse: collapse;
border: 1px solid #fff;


overflow:hidden;
word-break:normal;

padding: 5px;
margin: 5px;
}

th{
background-color: #1e223f;
color: #fff;
}

#archive {
display: block;
padding: 1%;
margin: 1%;
text-decoration: none;

color: #fff;

border-bottom: #fff 1px dotted;

height: auto;
width: auto;
}

#archive:hover{
color: #ffee00;
}

#rating {
    background-color: #222;
    color: #ffee00;

    width: 100px;
    height: 100px;
    display: block;
}