body {
    background-color: #202020;
    font-family: 'Roboto', helvetica, sans-serif;
    color: #fff;
    font-size: 15px;
}
 
::-webkit-scrollbar-track {
     background-color: #303030;
}
 
::-webkit-scrollbar{  
    width: 6px;
    background-color: #303030;
}
 
::-webkit-scrollbar-thumb{
    background-color: #9370db;
}
 
::selection {
background: #ccc;
color: #fff;
}
 
::-moz-selection {
background: #ccc;
color: #fff;
}
 
::-webkit-selection {
background: #ccc;
color: #fff;
}
 
.con {    
    position:relative;
    width:650px;
    height:605px;
    margin:auto;
    overflow:auto;
    background:#000;
    padding:10px;
   
}
 
.header {
    position:relative;
    width:100%;
    height:40px;
    padding: 20px 0;
    font-family: 'Oswald', times;
    font-size: 30px;
    color:#fff;
    text-transform: uppercase;
    text-align:center;
    background:#9370db;
}
 
.nav {
    position:relative;
    width:100%;
    height:20px;
    padding: 5px 0;
    font-size:14px;
    text-align:center;
    letter-spacing:1px;
    color:#fff;
    font-family: 'Oswald', times;
    background:#202020;
   
}
 
.quote {
    position:relative;
    width:100%;
    height:48px;
    padding: 5px 0;
    text-align:center;
    letter-spacing:1px;
    font-size:13px;
    color:#fff;
    font-family: 'Roboto', helvetica, sans-serif;
    background:#404040;
    text-transform:lowercase;
    font-style:italic;
    overflow:auto;
   
}
 
.qsource {
    position:relative;
    width:100%;
    height:17px;
    padding: 5px 0;
    text-align:center;
    text-transform:uppercase;
    letter-spacing:2px;
    font-size:15px; 
    color:#ccc; 
    font-family: 'Oswald', helvetica, sans-serif;
    background:#303030; 
   
}
 
.flex-container {
  display: flex;
}
.left {
    width:200px;
    height:390px;
    overflow:auto;
    background:#cc0000;
    padding:10px;
    text-align:center;
}
 
.right {
    width:450px;
    height:390px;
    overflow:auto;
    background:#ffffff;
    padding:10px;
    color:000000;
    font-family: 'Verdana', sans-serif;
}
 
 
b, strong {
    color: #b25555;
    letter-spacing:1px;
    text-transform:uppercase;
}
 
i, em {color: #000000;}
 
hr {
    display: block;
    margin-left: auto;
    margin-right: auto;
    border-style: solid;
    border-width: 1.5px;
    color:#404040; 
}
 
h1 {
    color: #000000;
    font-family: 'Oswald', times;
    text-transform: uppercase;
    text-align:center;
}
 
h2 {
    color:#aaa;
    font-family: 'Oswald', times;
    text-transform: uppercase;
   
}
 
a {
    color: #888;
    background-color: transparent;
    text-decoration: none;
    text-transform:uppercase;
    -moz-transition-duration: 0.5s;
    -o-transition-duration: 0.5s;
    -webkit-transition-duration: 0.5s;
     transition-duration: 0.5s;
}
 
a:hover {
    color: #ff0000;
}
 
img {
    width: 150px;
    height: 150px;
    border-radius: 50%;
    border:black 1px solid;
}
 
 
#vamp {
position:fixed;
font-size:11px;
font-weight:normal;
line-height:150%;
letter-spacing:0px;
right:10px;
bottom:10px;
text-align:center;
text-transform:uppercase;
}
   
#vamp a {
font-style:normal;
padding:3px;
color: #ff0000;
-moz-transition-duration:0.5s;
-webkit-transition-duration:0.5s;
-o-transition-duration:0.5s;}
 
#vamp a:hover {
font-style:normal;
padding:3px;
color: #888;
}