@font-face
{
font-family: 'Bodoni MT Compressed';
src: url('bodoni_cbi.ttf') format('truetype');
font-style: italic;
font-weight: bold;
}

@font-face
{
font-family: 'Bodoni MT Compressed';
src: url('bodoni_cb.ttf') format('truetype');
font-weight: bold;
}

body
{
background: #1a1715 url(bg.jpg) no-repeat fixed center center;
background-size: cover;
font: bold 4.1vw/.9 "Bodoni MT Compressed", "Times New Roman", Georgia, serif;
color: #fff;
letter-spacing: -2.5px;
margin: 0;
overflow-x: hidden;
}

body:before
{
content: " ";
width: 100%;
height: 150vh;
position: absolute;
z-index: -1;
top: 0;
left: 0;
background: -moz-linear-gradient(top,  rgba(125,185,232,0) 0%, rgba(26,23,21,0.3) 75%, rgba(26,23,21,1) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top,  rgba(125,185,232,0) 0%,rgba(26,23,21,0.3) 75%,rgba(26,23,21,1) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom,  rgba(125,185,232,0) 0%,rgba(26,23,21,0.3) 75%,rgba(26,23,21,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#007db9e8', endColorstr='#1a1715',GradientType=0 ); /* IE6-9 */
}

a
{
-webkit-transition: all 0.15s ease-out; 
-moz-transition: all 0.15s ease-out; 
-o-transition: all 0.15s ease-out; 
transition: all 0.15s ease-out;
}

a
{
color: #fff;
}

header
{
display: inline-block;
color: #fff;
font: bold italic 2.5em "Century Gothic", "TW Cen", Arial, sans-serif;
margin: 5vh 0 0 7vw;
z-index: 1000;
}

#intro, #sites, #artsites, #links, #and:first-line, #update
{
background-color: #1a1715;
}

#intro
{
margin-top: 150vh;
padding: 0 15vw 500px 23vw;
z-index: 500;
}

#sites a, #artsites a
{
display: block;
text-decoration: none;
background-repeat: no-repeat;
background-size: cover;
height: 58vh;
position: relative;
}

#sites a
{
width: 100%;
margin-bottom: .7em;
}

#artsites a
{
width: 25%;
float: left;
margin: .7em 0 2em;
text-align: center;
}

#sites a:last-of-type
{
margin-bottom: 0;
}

#sites a[href="q3a"] { background-image: url(sites/q3a.png); }
#sites a[href="malice"] { background-image: url(sites/malice.png); }
#sites a[href="mordecai"] { background-image: url(sites/mordecai.png); }
#sites a[href="ai"] { background-image: url(sites/ai.png); }
#sites a[href="sneasel"] { background-image: url(sites/sneasel.png); }
#sites a[href="amvs"] { background-image: url(sites/amvs.png); }
#sites a[href="galaxy"] { background-image: url(sites/galaxy.png); }
#sites a[href="toys"] { background-image: url(sites/toys.png); }
#sites a[href="oblivion"] { background-image: url(sites/oblivion.png); }
#sites a[href="staircase"] { background-image: url(sites/staircase.png); }
#sites a[href="agarest"] { background-image: url(sites/agarest.png); }
#sites a[href="giuseppi"] { background-image: url(sites/giuseppi.png); }
#sites a[href="rangerspenser"] { background-image: url(sites/rangerspenser.png); }

#artsites a[href="http://hugtherobots.tumblr.com"] { background-image: url(sites/artsites/artblog.png); }
#artsites a[href="http://cyborgize.it"] { background-image: url(sites/artsites/portfolio.png); }
#artsites a[href="http://italianformygirlfriend.tumblr.com"] { background-image: url(sites/artsites/ifmg.png); }
#artsites a[href="http://thegiftsofdarkness.com"] { background-image: url(sites/artsites/tgod.png); }

#sites a[href="oblivion"], #sites a[href="agarest"], #sites a[href="ai"], #sites a[href="amvs"], #artsites a[href="http://hugtherobots.tumblr.com"]
{
background-position: right; /* since the pictures have the focus towards the right, smaller screens can use that as a reference point */
}

#sites a[href="sneasel"]
{
background-position: bottom;  /* because I've since shrunk the height of each link and sneasel's face gets cut out */
}

#sites a[href="toys"]
{
background-position: center;
}

#sites a b, #artsites a b
{
display: block;
font: bold italic 1.6em/.9 "Century Gothic", "TW Cen", Arial, sans-serif;
margin: 0;
}

#sites a b
{
padding: 15vh 0 0 23vw;
}

#artsites a b
{
font-size: .8em;
padding: 3vh 2vw 0;
}

#sites a i, #artsites a i
{
display: block;
font-style: normal;
}

#sites a i
{
margin: .1em 0 0;
padding: 0 0 0 24vw;
}

#sites em 
{
font-size: .55em;
letter-spacing: -1px;
display: block;
margin-top: .25em;
}

#artsites a i
{
position: absolute;
bottom: .5em;
font-size: .6em;
width: 100%;
}

#sites a span
{
display: block;
width: 100%;
bottom: .5em;
right: .75em;
position: absolute;
}

#sites a span, #links p + div
{
text-align: right;
font-size: .5em;
font-style: italic;
letter-spacing: -1px;
}


#links, #about
{
padding: 5vw 8vw;
}

#links p
{
margin-bottom: 0;
}

#links div span
{
font-style: normal;
}

#links ul
{
margin-top: 2.5em;
list-style-type: none;
font: bold italic .425em "Century Gothic", "TW Cen", Arial, sans-serif;
letter-spacing: -1.25px;
text-transform: capitalize;
column-count: 3;
-moz-column-count: 3;
-webkit-column-count: 3;
padding: 0 13vw;
}

#links ul a, a[href="/dr"]
{
text-decoration: none;
letter-spacing: -1.25px;
}

@keyframes movearrow {
from {transform: translateX(-5px);}
to {transform:translateX(-12px);}
}

#links ul a:before, #sites a b:after, #artsites a b:after
{
content: "\25B6";
font-style: normal;
display: inline-block;
opacity: 0;
animation: movearrow .35s linear alternate infinite;
}

#sites a b:after
{
margin-left: .5em;
}

#artsites a b:after
{
position: absolute;
top: 25vh;
left: 10.5vw;
font-size: 1.75em;
}

#links ul a:hover:before, #sites a:hover b:after, #artsites a:hover b:after
{
opacity: 1;
}

#and
{
text-align: center;
border-bottom: solid 6px;
height: .5em;
margin-bottom: 2em;
width: 20vw;
margin: .75em auto 0;
position: relative;
left: -2vw;
}

#and:before
{
content: "\2008";
}

#and:after
{
content: "\2004";
}

#and + p
{
text-align: center;
margin: .4em 0 0 -3.5vw;
}

#links a[href="/dr"]
{
font: bold italic .425em "Century Gothic", "TW Cen", Arial, sans-serif;
}

@keyframes supergay {
16% { color: red;}
32% { color: yellow;}
48% { color: #16ff2c;}
64% { color: #45c0ff;}
80% { color: #ae45ff;}
100% { color: #fff;}
}

#links a[href="/dr"]:hover
{
animation: supergay 1s linear 1;
}

#about
{
background-color: #fff;
color: #1a1715;
}

#about p
{
position: relative;
left: 45%;
width: 55%;
font-size: .75em;
}

#about a
{
color: #1a1715;
text-decoration: underline;
}

p#lastlinks
{
font-size: .5em;
letter-spacing: -1.75px;
}

#update
{
padding: .75em 2em;
font-size: .65em;
text-align: center;
}

/**** BANNERS PAGE ****/

#banners
{
background: #1a1715;
padding: 10vh 10vw;
text-align: center;
}

#banners img
{
margin: 10px;
}

/**** UPDATES PAGE ****/

#updates
{
background: #fff;
color: #000;
padding: 10vh 15vw;
}

#updates:before
{
display: none;
}

#updates p
{
font-family: Arial;
font-size: 21px;
font-weight: normal;
letter-spacing: -.75px;
line-height: 1.5;
}

#updates a
{
color: #000;
text-decoration: underline;
}

#updates h2
{
font: bold italic 1.5em "Century Gothic", "TW Cen", Arial, sans-serif;
margin-top: -.25em;
}

#updates h3
{
font: bold italic 1em "Century Gothic", "TW Cen", Arial, sans-serif;
margin-bottom: 0;
}

/**** ADAPTATIONS ****/

@media only screen and (max-device-width: 1000px) {
body
{
background-size: auto;
background-position: top center;
}
}

@media screen and (max-width: 1000px) {
body
{
font-size: 45px;
letter-spacing: -1.75px;
}

#links ul
{
padding: 0 0 0 5vw;
}

#sites a, #sites a span
{
text-align: center;
}

#sites a b
{
padding: 6vh 3vw 2vh;
line-height: 1;
hyphens: auto;
}

#sites a b:after
{
display: none;
}

#sites a i
{
padding: 0 3vw;
}

#sites a span
{
right: 0;
}

#about p
{
left: 0;
width: 100%;
}

#links ul
{
-moz-column-count: 2;
-webkit-column-count: 2;
column-count: 2;
}
}

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


header
{
font-size: 20vw;
}

body
{
font-size: 35px;
}

p#lastlinks 
{
letter-spacing: -1px;
}
}