body {
	margin: 0;
	font-family: "Roboto Mono";
    font-size: 1.3vw;
    background-color: #454545;
}

a {
    text-decoration: none;
}

a:hover {
  	color: rgba(180.00000447034836, 126.00000008940697, 54.00000058114529, 1);
}

.accent {
	color: rgba(180.00000447034836, 126.00000008940697, 54.00000058114529, 1);
}

.text-subdued {
    color: #454545;
    font-weight: 300;
}

.text-subdued-white {
    color: #eeeeee;
    font-weight: 300;
}

.heading {
    color: rgba(180.00000447034836, 126.00000008940697, 54.00000058114529, 1);
    font-size: 3vw;
    font-family: "Roboto Slab";
    padding-bottom: 2vw;
}

.white {
    color: white;
}

.subheading {

}

.subsubheading {
    color: #454545;
}

.quote {
    color: rgba(180.00000447034836, 126.00000008940697, 54.00000058114529, 1);
    font-style: italic;
    font-size: 1.5vw;
    font-weight: bold;
}

p {
    margin: 0;
}

.vspacer-1 {
    margin-top: 2vw;
}
.vspacer-2 {
    margin-top: 5vw;
}

#splash {
	width: 100%;
	padding-top: 56.25%;
	background-image: url("../images/mars_yard.jpg");
    background-size: cover;
    margin-bottom: -4vh;
}

#title-box {
	position: absolute;
	top: -1.5%;
	left: 0;
	width: 61%;
	padding-top: 23%;
	background-color: white;
	transform: skewY(-1.5deg);
}

#title-box span {
	transform: skewY(1.5deg);
}
#title-box #nav {
	transform: skewY(1.5deg);
}

#title {
	position: absolute;
	top: 10%;
	left: 7.5%;
	font-family: "Roboto Slab";
	font-size: 4vw;
}

#subtitle {
	position: absolute;
	top: 35%;
	left: 7.5%;
	font-style: italic;
	font-weight: 300;
}

#nav {
	position: absolute;
	top: 65%;
	left: 7.5%;
}

#nav a {
	font-size: 1.7vw;
    vertical-align: middle;
    color: #454545
}

#nav a:hover {
    color: rgba(180.00000447034836, 126.00000008940697, 54.00000058114529, 1);
}

#nav #nav_block {
	background-color: #454545;
	width: 2px;
	height: 2vw;
	display: inline-block;
	margin-left: 0.5vw;
	margin-right: 0.5vw;
	vertical-align: middle;
}

.card {
    background-color: white;
    transform: skewY(-1.5deg);
    width: 100%;
    padding-top: 5vh;
    padding-bottom: 5vh;
}

.card-inner {
    transform: skewY(1.5deg);
    padding-left: 15%;
    padding-right: 15%;
}

#ip {
    margin: auto;
    width: 80%;
}

#modules {
    display:grid;
    width: 105%;
    margin-left: 2vw;
    grid-template-columns: 8% auto 6% 8% auto;
    grid-template-rows: auto auto auto auto auto;
}

#modules img {
    width: 100%;
    filter: invert(57%) sepia(9%) saturate(3040%) hue-rotate(354deg) brightness(90%) contrast(87%);
}

#modules img {
    align-self: center;
}
#modules div {
    padding-left: 1vw;
    align-self: center;
}
#modules div .subheading {
    padding-bottom: 0.5vw;
}

#mod-1-img {
    grid-column: 1;
}
#mod-1-div {
    grid-column: 2;
}

#mod-2-img {
    grid-column: 4;
}
#mod-2-div {
    grid-column: 5;
}

#mod-space-1 {
    grid-row: 2;
    grid-column: span;
}

#mod-3-img {
    grid-column: 1;
    grid-row: 3;
}
#mod-3-div {
    grid-column: 2;
    grid-row: 3;
}

#mod-4-img {
    grid-column: 4;
    grid-row: 3;
}
#mod-4-div {
    grid-column: 5;
    grid-row: 3;
}

#mod-space-2 {
    grid-row: 4;
    grid-column: span;
}

#mod-5-img {
    grid-column: 1;
    grid-row: 5;
}
#mod-5-div {
    grid-column: 2;
    grid-row: 5;
}

#mod-6-img {
    grid-column: 4;
    grid-row: 5;
}
#mod-6-div {
    grid-column: 5;
    grid-row: 5;
}

#experience {
    padding-left: 15vw;
    padding-right: 15vw;
    padding-top: 2vw;
    padding-bottom: 2vw;
}

#exm-grid {
    grid-template-columns: 49% 2% 49%;
    grid-template-rows: auto;
    display: grid;
}

#exm-vid {
    grid-column: 1;
    grid-row: 1;
    width: 100%;
    padding-top: 56.25%;
    position: relative;
}

#exm-vid iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
}

#exm-vid p {
    position: relative;
    text-align: right;
    width: 100%;
}

#exm-vid a {
    color: #eeeeee;
}

#exm-grid iframe {
    width: 100%;
    height: 100%;
}

#exm-text {
    grid-column: 3;
    grid-row: 1;
}

#exm-text li {
    color: white;
    font-weight: 300;
    list-style-type: none;
    text-indent: -0.6em;
}

#exm-text li:before {
    content: "-";
    text-indent: -1em;
}

#ort-grid {
    display: grid;
    grid-template-columns: 59% 2% 39%;
    grid-template-rows: auto;
}

#ort-text {
    grid-column: 1;
}

#ort-text a:hover {
    color: #454545;
}

#ort-img {
    grid-column: 3;
    width: 100%;
}

#skills {
    padding-left: 15vw;
    padding-right: 15vw;
    padding-top: 2vw;
    padding-bottom: 2vw;
}

#contact-grid {
    display: grid;
    grid-template-columns: 49% 2% 49%;
    grid-template-rows: auto;
}

#contact img {
    height: 7vw;
    padding-bottom: 1vw;
}

#contact-email {
    grid-column: 1;
}

#contact-github {
    grid-column: 3;
}

.contact-box {
    display: flex;
    flex-direction: column;
    place-self: center;
    justify-items: center;
}

.contact-box img {
    filter: invert(57%) sepia(9%) saturate(3040%) hue-rotate(354deg) brightness(90%) contrast(87%);
}

.contact-box:hover img {
    filter: invert(25%) sepia(0%) saturate(466%) hue-rotate(147deg) brightness(97%) contrast(87%);
}

.contact-box p {
    color: rgba(180.00000447034836, 126.00000008940697, 54.00000058114529, 1);
}

.contact-box:hover p {
    color: #454545;
}

#footer {
    padding-left: 15vw;
    padding-right: 15vw;
    padding-top: 2vw;
    padding-bottom: 2vw;
    font-size: 1vw;
}