/*----------------\
---General Shit---
\----------------*/
body {
    background-color:#464646;
    color: azure;
    font-family: sans-serif;
    overflow: hidden;
}

* {
    margin: 0;
    padding: 0;
}

.webpage_info {
/*	background-color: #656565;*/
    color: black;
    position: absolute;
    bottom: 0vh;
    text-align: left;
    z-index: 10;
    width: 100%;
    font-family: sans-serif;
    text-shadow: 0px 0px 6px #A3A3A4;
/*    box-shadow: 0px 0px 32px black;*/
	padding-bottom: 1vh;
	padding-top: 1vh;
    padding-left: 1vw;
}
.webpage_info p {
    font-size: 75%;
}

.nav {
	background-color: #656565;
    color: #818181;
    position: absolute;
    top: 0vh;
    text-align: center;
    z-index: 10;
    width: 100%;
    font-family: sans-serif;
    text-shadow: 0px 0px 6px black;
    box-shadow: 0px 0px 32px black;
	padding-bottom: 2vh;
	padding-top: 2.5vh;
}
.nav a {
	background-color: #464646;
    color: #818181;
    font-weight: 100;
    margin-left: 1vh;
    margin-right: 1vh;
	padding-top: 1vh;
	padding-bottom: 1vh;
	padding-left: 1vh;
	padding-right: 1vh;
    border-radius: 4px;
    box-shadow: 0px 0px 6px black;
    text-decoration: none;
    transition: all 0.5s ease;
}
.nav a:hover {
    background-color: #1F1F20;
    color: #A3A3A4;
    text-shadow: 0px 0px 6px #A3A3A4;
    box-shadow: 0px 0px 12px #A3A3A4;
}

/*----------------\
---Parallax Shit---
\----------------*/
.parallax {
    height: 100vh;
    overflow-x: hidden;
    overflow-y: auto;
    perspective: 300px;
    -webkit-perspective-origin-x: 100%;
    perspective-origin-x: 100%;
}

.parallax_group {
    position: relative;
    height: 135vh;
    transform-style: preserve-3d;
/*    transform: translate3d(700px, 0, -800px) rotateY(30deg);*/
}

.parallax_layer {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    -webkit-transform-origin-x: 100%;
    transform-origin-x: 100%;
}

.parallax_layer-fore {
    transform: translateZ(90px) scale(.7);
}

.parallax_layer-base {
    transform: translateZ(0);
    background-repeat: no-repeat;
    background-size: cover;
}

.parallax_layer-back {
    transform: translateZ(-300px) scale(2);
    background-repeat: no-repeat;
    background-size: cover;
}

.layer_content {
    text-align: center;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    box-shadow: 0px 0px 32px black;
    transition: transform 0.5s;
    transition-timing-function: ease;
}

.layer_content iframe {
    width: 66vw;
    height: 66vh;
}

/*----------------\
---Specific Pages---
\----------------*/
#title_card {
    z-index: 5;
    height: 100vh;
}
#title_card .parallax_layer-base {
    background-color: #656565;
    color: #818181;
    text-shadow: 0px 0px 8px black;
    font-size: 400%;
}
.title_layer_content {
    text-align: center;
    position: absolute;
    width: 100%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

#scroll_down {
    position: absolute;
    bottom: 16vh;
    width: 100%;
    text-align: center;
    padding-top: 2vh;
    padding-bottom: 2vh;
    opacity: 0.5;
    transition: opacity 0.5s;
}

#scroll_down:hover {
    opacity: 1;
}

#batman {
    z-index: 3;
}

#batman .parallax_layer-back {
    background-image: url(imgs/batman_1920x1080.png);
    background-position: center;
}

#walkingDeadMichonne {
    z-index: 4;
}
#walkingDeadMichonne .parallax_layer-base {
    background-image: url(imgs/wdm_1920x1080.png);
    background-position: center;
}

#minecraft {
    z-index: 2;
}
#minecraft .parallax_layer-back {
    background-image: url(imgs/minecraft_1920x1080.png);
    background-position: center;
}

#gameOfThrones {
    z-index: 3;
}
#gameOfThrones .parallax_layer-base {
    background-image: url(imgs/gameOfThrones_1920x1080.png);
    background-position: center;
}

#talesFromTheBorderlands {
    z-index: 2;
}
#talesFromTheBorderlands .parallax_layer-back {
    background-image: url(imgs/tales_from_the_borderlands_1920x1080.png);
}

#BFH {
    z-index: 3;
}
#BFH .parallax_layer-base {
    background-image: url(imgs/bfh_1920x1080.jpg);
    background-position: center;
}

/*----------------\
------Resume------
\----------------*/

#resume_content {
    position: relative;
    width: 70vw;
    top: 10vh;
    margin: auto;
    padding: 32px;
    background-color: #656565;
    box-shadow: 0px 0px 32px black;
    text-shadow: 0px 0px 8px black;
}

#resume_content h1 {
    text-align: left;
    font-size: 200%;
    padding: 8px;
}

#shipped_games {
    padding-top: 16px;
    padding-bottom: 16px;
}

#shipped_games h3 {
    text-align: left;
    padding:  4px;
}

#shipped_games table {
    width: 75%;
    margin-left: 10vw;
    font-size: 80%;
}

#shipped_games table tr td {
    border-bottom: 1px solid;
    padding-bottom: 8px;
    padding-top: 8px;
    padding-left: 4px;
    padding-right: 4px;
}

.game_title {
    text-align: center;
    font-weight: 600;
}

.episodes {
    text-align: left;
}

.episodes ol {
    list-style-position: inside;
}

#work_xp {
    padding-top: 16px;
    padding-bottom: 16px;
}

#work_xp table {
    width: 82.5%;
    margin-left: 5vw;
}

#work_xp table tr td {
    border-bottom: 1px solid;
    padding: 8px;
}

.job {
    list-style-position: inside;
}

.job ul {
    font-size: 80%;
    margin-left: 5%;
    padding-top: 8px;
}

.dates {
    vertical-align: top;
    font-size: 80%;
    text-align: right;
}

#skills {
    padding-top: 16px;
    padding-bottom: 16px;
}

#skills table {
    width: 82.5%;
    margin-left: 5vw;
}

#skills table tr td {
    border-bottom: 1px solid;
    padding: 8px;
}

.software {
    font-size: 80%;
    text-align: right;
}

#education {
    padding-top: 16px;
    padding-bottom: 16px;
}

#education table {
    width: 82.5%;
    margin-left: 5vw;
}

#education table tr td {
    border-bottom: 1px solid;
    padding: 8px;
}

.university {
    font-size: 80%;
    text-align: right;
}

/*----------------\
------Contact------
\----------------*/

#contact_content {
    position: relative;
    width: 70vw;
    top: 10vh;
    margin: auto;
    padding: 32px;
    background-color: #656565;
    box-shadow: 0px 0px 32px black;
    text-shadow: 0px 0px 8px black;
}

#contact_content h1 {
    text-align: left;
    font-size: 200%;
    padding: 8px;
}

#contact_content table {
    width: 82.5%;
    margin-left: 5vw;
}

#contact_content table tr td {
    border-bottom: 1px solid;
    padding: 8px;
}

#contact_content img {
    width: 50%;
    position: relative;
    box-shadow: 0px 0px 32px black;
    margin-top: 10vh;
}