/* -------------------------------- Normalize ------------------------------- */

html {
    box-sizing: border-box;
}
*, *:before, *:after {
    box-sizing: inherit;
}
img, video, iframe {
    display: block;
}
a, a:link, a:visited, a:hover { 
    text-decoration: underline;
    white-space: nowrap;
    color: #99f;
}
a:hover { 
    color: #bbf;
}
abbr[title] {
    text-decoration: none;
}
summary {
    outline: none;
}

/* --------------------------- Body and Container --------------------------- */

html { 
    height: 100%;
    background-color: #000;
}
@media screen and (orientation: landscape) { html {
    background: url("../images/mark.jpg") no-repeat center center fixed;
    background-size: cover;
}}
@media screen and (orientation: portrait) { html {
    background: url("../images/mark.jpg") no-repeat left center fixed;
    background-size: cover;
}}
body {
    height: 100%;
    font: normal 1.5em "Lucida Console", Monaco, monospace;
    text-shadow: 0 .3em .3em #000;
}
@media screen and (orientation: landscape) { body {
    font-size: 1.6vw;
}}
@media screen and (orientation: portrait) { body {
    font-size: 1.92vh;
}}

/* ------------------------------- Typography ------------------------------- */

h1, h2, h3, h4, h5, h6 {
    margin: .2em 0;
}
h1 a, h1 a:link, h1 a:visited, h1 a:hover { 
    font: normal 1.85em Go2OldWestern-Roman, Tahoma, Verdana, Arial, Georgia, sans-serif;
    white-space: nowrap;
    color: #f55;
}
h1 a:hover { 
    color: #f77;
}
p, details, summary {
    margin: 0 0 1em 0;
    line-height: 1.4em;   
}
ul li, ol li {
    margin: .8em 0;
    line-height: 1.2em;
}
ul li:last-child, ol li:last-child {
    margin: 1em 0 1em 0;
}

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

main {
    position: absolute;
    color: #ccc;
    background-color: #000;
    background-image: url("../images/wood-sign.jpg");
    background-size: 100% auto;
    opacity: 0.85;
    box-shadow: 0 2em 2em #000;
}
@media screen and (orientation: landscape) { main {
    padding: 1.1em 2.8em;
    right: 10%;
    top: 50%;
    transform: translate(0, -50%);
}}
@media screen and (orientation: portrait) { main {
    padding: .8em 2.2em;
    left: 50%;
    bottom: 5%;
    transform: translate(-50%, 0);
}}

/* ------------------------------- Screw Head ------------------------------- */

.screw-head { 
    margin: 0;
    padding: 0;
}
.screw-head li { 
    list-style: none;
} 
.screw-head li:before { 
    content: '';
    display: inline-block;
    margin-right: .5em;
    height: 1.1em;
    width: 1.1em;
    background-image: url('../images/screw-head.png');
    background-size: contain; 
    background-repeat: no-repeat;
    box-shadow: 0 .3em .3em #000;
}
.screw-head li:nth-child(4n+1):before {
    transform: rotate(20deg);    
}
.screw-head li:nth-child(4n+2):before {
    transform: rotate(45deg);    
}
.screw-head li:nth-child(4n+3):before {
    transform: rotate(70deg);    
}

/* ------------------------------- Bullet Hole ------------------------------ */

.bullet-hole {
    position: absolute; 
    z-index: 1000;
    opacity: 0.80;
    pointer-events: none;
}
@media screen and (orientation: landscape) { .bullet-hole {
    width: 10vw; 
    height: 10vw;
}}
@media screen and (orientation: portrait) { .bullet-hole {
    width: 10vh; 
    height: 10vh;
}}
.bullet-hole:nth-child(4n+1) {
    transform: rotate(15deg);    
}
.bullet-hole:nth-child(4n+2) {
    transform: rotate(145deg);    
}
.bullet-hole:nth-child(4n+3) {
    transform: rotate(210deg);    
}

/* ------------------------------- Arvixe Logo ------------------------------ */

a.arvixe {
    float: right;
}
a.arvixe img {
    padding: 0 .3em;
    width: auto;
    height: 1.7em;
    background-color: #777;
    border-radius: .3em;
    box-shadow: 0 .3em .3em #000;
    opacity: 0.60;
}
a.arvixe img:hover {
    background-color: #999;
}
a.arvixe:after {
    content: "";
    clear: both;
    display: table;
}