@font-face {
    font-family: 'Noto Serif';
    src: url('notoSerif.woff') format('woff');
}

@font-face {
    font-family: 'Office Code';
    src: url('officeCode.woff') format('woff');
}

/* --- HTML Basics ---------------------------------------------------------- */
html {
    width: 100%;
    height: 100%;
}

body {
	color: #aaa;
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
	display: flex;
    width: 100%;
    height: 100%;
    background: #242423; 
}

h1 {
    font-size: 36pt;
    font-weight: normal;
    margin: 0px 0px 40px 0px;
}

a {
    text-decoration: none;
}

a:hover {
    text-decoration: none;
}

p {
    /*margin-bottom: 30px 0px;*/
}

p a {
    background: #f6d479;
    color: #242423;
}

p a:hover {
    background: #848d89;
    color: #242423;
}

img {
	width: 100%;
}

/* --- Page Background ------------------------------------------------------ */
div.bg_column {
    position: relative;
	height: 200vh; /*approximated value – is corrected by script*/
	display: flex;
    flex-grow: 1;
}

div.bg_column1 {
	background: #e8eddf;
}

div.bg_column2 {
    background: #333533;
    color: #e8eddf;
}

/* --- Page Grid ------------------------------------------------------------ */
h1.hiddenH, h2.hiddenH {
    display: none;
}

div.column_wrapper {
    position: relative;
    font-family: 'Noto Serif', times;
    font-size: 14pt;
    line-height: 26pt;
    display: grid;
    display: -ms-grid;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
    grid-template-rows: auto;

    -ms-grid-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
    -ms-grid-rows: auto;

    max-width: 1700px;
    margin: auto auto;
    
}

div.center_wrapper {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;

}

div.column_wrapper img {
    width: 98%;
    border: 10px solid #f8f8f8;
}

a img {
    background: none;
    transition: transform .2s;
    border: none;
}

a img:hover {
    transform: scale(1.2);
}

div.noJS {
    position: absolute;
    top: 0;
    left: 0;
    background: #333533;
    height: 3000px;
    width: 95%;
    z-index: 2;
    padding: 40px;
    font-family: 'Office Code', courier new;
    font-size: 14pt;
    line-height: 26pt;
}

/* --- Rows ------------------------------------------------------------ */
div.row1 {
    grid-row-start: 1;
    grid-row-end: 2;
    -ms-grid-row: 1;
    -ms-grid-row-span: 1;
    margin-top: 50px;
}

div.row2 {
    grid-row-start: 2;
    grid-row-end: 3;
    -ms-grid-row: 2;
    -ms-grid-row-span: 1;
    margin-top: 20px;
}

div.row3 {
    grid-row-start: 3;
    grid-row-end: 4;
    -ms-grid-row: 3;
    -ms-grid-row-span: 1;
    margin-top: 30px;
}

div.row4 {
    grid-row-start: 4;
    grid-row-end: 5;
    -ms-grid-row: 4;
    -ms-grid-row-span: 1;
    margin-top: 20px;
}

div.row5 {
    grid-row-start: 5;
    grid-row-end: 6;
    -ms-grid-row: 5;
    -ms-grid-row-span: 1;
    margin-top: 20px;
    min-height: 400px;
}

div.row6 {
    grid-row-start: 6;
    grid-row-end: 7;
    -ms-grid-row: 6;
    -ms-grid-row-span: 1;
    margin-top: 30px;
}

div.row7 {
    grid-row-start: 7;
    grid-row-end: 8;
    -ms-grid-row: 7;
    -ms-grid-row-span: 1;
    margin-top: 20px;
}

/* --- Columns ------------------------------------------------------------ */
div.column1 {
    grid-column-start: 2;
    grid-column-end: 5;
    -ms-grid-column: 2;
    -ms-grid-column-span: 3; 
    color: #333533;
}

div.column2 {
    grid-column-start: 5;
    grid-column-end: 8;
    -ms-grid-column: 5;
    -ms-grid-column-span: 3;
    color: #e8eddf;
    /*border: 1px solid red;*/
}

div.column1_showCase_right {
    grid-column-start: 2;
    grid-column-end: 4;
    -ms-grid-column: 2;
    -ms-grid-column-span: 2; 
    color: #333533;
}

div.column2_showCase_right {
    position: relative;
    grid-column-start: 4;
    grid-column-end: 8;
    -ms-grid-column: 4;
    -ms-grid-column-span: 4;
    z-index: 1;
}

div.column1_showCase_left {
    grid-column-start: 2;
    grid-column-end: 6;
    -ms-grid-column: 2;
    -ms-grid-column-span: 4;
    color: #333533;
}

div.column2_showCase_left {
    position: relative;
    grid-column-start: 6;
    grid-column-end: 8;
    -ms-grid-column: 6;
    -ms-grid-column-span: 2;
    color: #e8eddf;
}

div.column1_showCase_middle {
    grid-column-start: 2;
    grid-column-end: 5;
    -ms-grid-column: 2;
    -ms-grid-column-span: 3;
    /*color: #333533;*/
}

div.column2_showCase_middle {
    position: relative;
    grid-column-start: 5;
    grid-column-end: 8;
    -ms-grid-column: 5;
    -ms-grid-column-span: 3;
    z-index: 1;
}

div.text_wrapper_column1 {
    position: relative;
    margin: 0px 8% 0px 0px;
    text-align: right;
    color: #333533;
}

div.text_wrapper_column2 {
    position: relative;
    margin: 0px 0px 0px 8%;
}

/* --- Special Stuff ------------------------------------------------------------ */
div.code {
    position: relative;
    background: #cfdbd5;
    font-family: 'Office Code', courier new;
    font-size: 10pt;
    padding: 15px 20px 15px 20px;
    line-height: 16pt;
    white-space: pre;
    z-index: 2;
    color: #333533;
}

div.code .comment {
    color: #848d89;
}

div.css:before {
    position: absolute;
    font: bold 14pt 'Noto Serif';
    color: #aebab4;
    top: 10px;
    right: 20px;
    content: 'CSS';
}

div.jquery:before {
    position: absolute;
    font:  bold 14pt 'Noto Serif';
    color: #aebab4;
    top: 10px;
    right: 20px;
    content: 'jQuery';
}

div.javascript:before {
    position: absolute;
    font:  bold 14pt 'Noto Serif';
    color: #aebab4;
    top: 10px;
    right: 20px;
    content: 'JavaScript';
}

div.contact_link {
    position: absolute;
    top: 16px;
    left: 16px;
    z-index: 1;
}

div.github_link {
    position: absolute;
    top: 16px;
    right: 16px;
    z-index: 1;
}

img.icon {
    position: relative;
    width: 48px;
}

div.row5 .text_wrapper_column1 {
    margin-top: 30px;
}


div.column_wrapper .row4 img,
div.column_wrapper .row5 img,
div.column_wrapper .row6 img {
    border: none;
}

div.column_wrapper .row4 p img {
    width: 156px;
    float: right;
}

div.column_wrapper .row6 p img {
    width: 300px;
    float: left;
    margin-left: 40px;
}

div#card img {
    width: 100%;
}

/* --- Overlays ------------------------------------------------------------ */
@keyframes flicker {
    1%  {opacity: 0;}
    2%   {opacity: 1;}
    10%   {opacity: 0;}
    15%   {opacity: 0;}
    16%  {opacity: 1;}
}

@keyframes gray {
    0%  {filter: grayscale(0); -webkit-filter: grayscale(0);}
    100%  {filter: grayscale(1); -webkit-filter: grayscale(1);}
}

div#light_switch {
    position: absolute;
    width: 5%;
    height: 8%;
    left: 65%;
    top: 50%;
    /*border: 1px solid red;*/
    cursor: pointer;
    z-index: 4;
}

div.column_wrapper img.overlay1 {
    position: absolute;
    width: 98%;
    top: 0px;
    left: 0px;
    z-index: 2;
    animation-name: flicker;
    animation-duration: 3s;
    animation-iteration-count: infinite;
}

div.column_wrapper img.overlay2 {
    position: absolute;
    width: 98%;
    top: 0px;
    left: 0px;
    z-index: 3;
}

.displayed {
    display: none;
}


/* --- Card Flip ---------------------------------------------------------------- */
#card.flipped {
    -webkit-transform: rotateY(180deg);
    transform: rotateY(180deg);
}

#card_container {
    position: relative;
    height: 100%;
    perspective: 1600px;
    transform-style: preserve-3d;
    display: block;
    padding-bottom:13px;
    height: 400px;
    width: auto;
}


#card {
    transition: 0.6s;
    transform-style: preserve-3d;

    position: relative;
        height: auto;
    width: auto;
}

.front, .back {
    backface-visibility: hidden;
    transition: 0.6s;
    transform-style: preserve-3d;
    position: absolute;
    top: 0;
    left: 0;
    height: auto;
    width: auto;
}

.front {
    z-index: 2;
    transform: rotateY(0deg);
}

.back {
    transform: rotateY(-180deg);
}

/* --- Footer ------------------------------------------------------------ */
div.footer {
    height: 400px;
    display: block;
    margin-top: 100px;
}

div.footer_left {
    position: relative;
    width: 50%;
    float: left;
    background: #333533;
    height: 400px;
}

div.footer_right {
    position: relative;
    width: 50%;
    float: right;
    background: #242423; 
    height: 400px
}

div.footer_left img {
    position: absolute;
    top: 0;
    right: 0;
    border: none;
    height: 400px;
    width: auto;
}

div.footer_right img {
    width: 110px;
    height: 50px;
    position: absolute;
    top: 90px;
    left: 230px;
}

div.footer_text {
    position: relative;
    font-family: 'Noto Serif', times;
    font-size: 14pt;
    line-height: 26pt;
    margin: 36px 290px 0px 0px;
    color: #e8eddf;
    text-align: right;
}

div.footer_left div:last-of-type {
    position: absolute;
    font-size: 8pt;
    line-height: 10pt;
    left: 5px;
    bottom: 4px;
    color: #4d504d;
}

.small_txt {
    line-height: 20pt;
    font-size: 12pt;
}

.grey_txt {
    color: #848d89;
}

/* --- Form Footer ------------------------------------------------------------ */
form {
    font-family: 'Office Code', courier new;
    font-size: 10pt;
    line-height: 24pt;
    margin: 40px 0px 0px 42px;
    color: #848d89;;
}

input,
textarea {
    font-family: 'Office Code', courier new;
    font-size: 10pt;
    line-height: 20pt;
    min-height: 32px;
    color: #848d89;
    background: #333533;
    border: 1px solid #242423;
    /*border: none;*/
    padding: 0px 10px 0px 10px;
    margin-bottom: 10px;
    width: 200px;
    -webkit-transition: all 0.30s ease-in-out;
    -moz-transition: all 0.30s ease-in-out;
    -ms-transition: all 0.30s ease-in-out;
    outline: none;
}

input#name:focus,
input#email:focus,
input#result:focus,
textarea:focus {
    outline-style: none;
    box-shadow: none;
    border: 1px solid #848d89;
}

input#result {
    width: 20px;
    margin: 0px 5px 0px 0px;
}

input#submit {
    border: 1px solid #848d89;
    line-height: 20pt;
    cursor: pointer;
    margin-bottom: 30px;
    padding: 0px 10px 0px 10px;
    width: 100px;
    opacity: 0.3;
}

textarea {
    margin-top: 0px;
    width: 350px;
    height: 170px;
    line-height: 18pt;
    padding: 5px 10px 5px 10px;
    margin-bottom: 10px;
    color: #e8eddf;
}

div.form_response {
    position: absolute;
    top: 0;
    width: calc(100% - 62px);
    background: #bbe7a1;
    color: #333533;
    font-family: 'Noto Serif', times;
    font-size: 14pt;
    line-height: 20pt;
    /*min-height: 40px;*/
    padding: 5px 20px 5px 42px;
    display: none;
}