@import url('https://fonts.googleapis.com/css?family=Josefin+Sans|Source+Code+Pro');

html {
    height: 100%;
    overflow: hidden;
}

body { 
    color: #fff;
    font-family: 'Josefin Sans', 'Helvetica Neue', sans-serif;
    margin:0;
    padding:0;
    height: 100%;
    overflow-y: scroll;
    overflow-x: hidden;
}

p {
    font-size: 140%;
    line-height: 150%;
}



.page {
    position: relative;
    padding: 15vh 10%;
    min-height: 100vh;
    width: 100vw;
    box-sizing: border-box;
}
.page .content {
    overflow: hidden;
    width: 80%;
}
.page .content.full {
    overflow: hidden;
    width: 100%;
}
.page .col {
    box-sizing: border-box;
    float: left;
    padding: 0 0.5em;
}
.page .col.two {
    width: 50%;
}
.page .col.three {
    width: 33%;
}
.page .col.four {
    width: 25%;
}

.frenchBlue {
    color: #0055A4;
}
.frenchRed {
    color: #EF4135;
}
.frenchWhite {
    color: #fff;
}
.greekBlue {
    color: rgb(21,96,173);
}
.greekWhite {
    color: #fff;
}

.color-0  { background-color: #795548; color: #fff; }
.color-1  { background-color: #B71C1C; color: #fff; }
.color-2  { background-color: #3F51B5; color: #fff; }
.color-3  { background-color: #FF9800; color: #fff; }
.color-4  { background-color: #E91E63; color: #fff; }
.color-5  { background-color: #9C27B0; color: #fff; }
.color-6  { background-color: #F44336; color: #fff; }
.color-7  { background-color: #009688; color: #fff; }
.color-8  { background-color: #FF5722; color: #fff; }
.color-9  { background-color: #607D8B; color: #fff; }
.color-10 { background-color: #004D40; color: #fff; }
.color-11 { background-color: #1A237E; color: #fff; }
.color-12 { background-color: #311B92; color: #fff; }
.color-13 { background-color: #2962FF; color: #fff; }
.color-14 { background-color: #827717; color: #fff; }
.color-15 { background-color: #1B5E20; color: #fff; }
.color-16 { background-color: #880E4F; color: #fff; }

.position-bottom-0  { bottom: 0em;  }
.position-bottom-1  { bottom: 1em;  }
.position-bottom-2  { bottom: 2em;  }
.position-bottom-3  { bottom: 3em;  }
.position-bottom-4  { bottom: 4em;  }
.position-bottom-5  { bottom: 5em;  }
.position-bottom-6  { bottom: 6em;  }
.position-bottom-7  { bottom: 7em;  }
.position-bottom-8  { bottom: 8em;  }
.position-bottom-9  { bottom: 9em;  }
.position-bottom-10 { bottom: 10em; }
.position-bottom-11 { bottom: 11em; }
.position-bottom-12 { bottom: 12em; }
.position-bottom-13 { bottom: 13em; }
.position-bottom-14 { bottom: 14em; }

.width-10  { width: 10%;  }
.width-20  { width: 20%;  }
.width-30  { width: 30%;  }
.width-40  { width: 40%;  }
.width-50  { width: 50%;  }
.width-60  { width: 60%;  }
.width-70  { width: 70%;  }
.width-80  { width: 80%;  }
.width-90  { width: 90%;  }
.width-100 { width: 100%; }

.zindex-10 { z-index: 10; }
.zindex-11 { z-index: 11; }
.zindex-12 { z-index: 12; }
.zindex-13 { z-index: 13; }
.zindex-14 { z-index: 14; }
.zindex-15 { z-index: 15; }
.zindex-16 { z-index: 16; }
.zindex-17 { z-index: 17; }
.zindex-18 { z-index: 18; }
.zindex-19 { z-index: 19; }
.zindex-20 { z-index: 20; }
.zindex-21 { z-index: 21; }
.zindex-22 { z-index: 22; }
.zindex-23 { z-index: 23; }
.zindex-24 { z-index: 24; }
.zindex-25 { z-index: 25; }
.zindex-26 { z-index: 26; }
.zindex-27 { z-index: 27; }
.zindex-28 { z-index: 28; }
.zindex-29 { z-index: 29; }
.zindex-30 { z-index: 30; }

.pull-right {
    float: right;
}



#page1 {
    background-color: #111;
    color: rgb(57,252,50);
    font-family: 'Source Code Pro', monospace;
}
#page1 .browserupgrade {
    background: #fff;
    color: #ff0000;
    font-size: 100%;
    padding: 5px;
    text-align: center;
}

#page1 h1,
#page1 h2 {
    text-align: center;
}
#page1 h1 {
    font-size: 150%;
}
#page1 h2 {
    font-size: 80%;
    position: relative;
    text-align: right;
}
#page1 .sloganWrapper {
    position: absolute;
    right: 0;
}
#page1 #title,
#page1 .slogan {
    font-size: 150%;
    position: relative;
}

#page1 .cursor,
#page1 .trail {
    background: #111;
    border-left: .5em solid;
    bottom: 0;
    box-sizing: border-box;
    font-style:normal;
    position: absolute;
    right: 0;
    top: 0;
    width: 0;
}

#page1 #title .trail {
    animation: type 2s steps(11, end),
               trail 2s step-end forwards;
}

#page1 .slogan {
    animation: showAndHide 4s forwards;
    opacity: 0;
}

#page1 .sloganWrapper:last-child .slogan {
    animation: show 4s forwards;
    opacity: 0;
}

#page1 .slogan .cursor {
    animation: typeAndDelete 4s steps(20, end) forwards,
               blinking 1s step-end infinite;
}

#page1 .sloganWrapper:last-child .cursor {
    animation: type .5s steps(21, end) forwards,
               blinking 1s step-end infinite;
}

#page1 .sloganWrapper:nth-child(1)  .slogan, #page1 .sloganWrapper:nth-child(1)  .cursor { animation-delay: 2s;  }
#page1 .sloganWrapper:nth-child(2)  .slogan, #page1 .sloganWrapper:nth-child(2)  .cursor { animation-delay: 6s;  }
#page1 .sloganWrapper:nth-child(3)  .slogan, #page1 .sloganWrapper:nth-child(3)  .cursor { animation-delay: 10s; }
#page1 .sloganWrapper:nth-child(4)  .slogan, #page1 .sloganWrapper:nth-child(4)  .cursor { animation-delay: 14s; }
#page1 .sloganWrapper:nth-child(5)  .slogan, #page1 .sloganWrapper:nth-child(5)  .cursor { animation-delay: 18s; }
#page1 .sloganWrapper:nth-child(6)  .slogan, #page1 .sloganWrapper:nth-child(6)  .cursor { animation-delay: 22s; }
#page1 .sloganWrapper:nth-child(7)  .slogan, #page1 .sloganWrapper:nth-child(7)  .cursor { animation-delay: 26s; }
#page1 .sloganWrapper:nth-child(8)  .slogan, #page1 .sloganWrapper:nth-child(8)  .cursor { animation-delay: 30s; }
#page1 .sloganWrapper:nth-child(9)  .slogan, #page1 .sloganWrapper:nth-child(9)  .cursor { animation-delay: 34s; }
#page1 .sloganWrapper:nth-child(10) .slogan, #page1 .sloganWrapper:nth-child(10) .cursor { animation-delay: 38s; }
#page1 .sloganWrapper:nth-child(11) .slogan, #page1 .sloganWrapper:nth-child(11) .cursor { animation-delay: 42s; }
#page1 .sloganWrapper:nth-child(12) .slogan, #page1 .sloganWrapper:nth-child(12) .cursor { animation-delay: 46s; }
#page1 .sloganWrapper:nth-child(13) .slogan, #page1 .sloganWrapper:nth-child(13) .cursor { animation-delay: 50s; }
#page1 .sloganWrapper:nth-child(14) .slogan, #page1 .sloganWrapper:nth-child(14) .cursor { animation-delay: 54s; }
#page1 .sloganWrapper:nth-child(15) .slogan, #page1 .sloganWrapper:nth-child(15) .cursor { animation-delay: 58s; }
#page1 .sloganWrapper:nth-child(16) .slogan, #page1 .sloganWrapper:nth-child(16) .cursor { animation-delay: 62s; }



#page2 {
    background-color: #2196F3;
}
#page2 strong {
    padding: 3px 2px;
}
/*
 * disable for now
#page2 strong:hover {
    background-color: #B71C1C;
    border-bottom: 1px solid #B71C1C;
    color: #fff;
    cursor: help;
}
 */
#page2 #tasks {
    display: inline-block;
    height: 1em;
    min-width: 18em;
    position: relative;
}
#page2 #tasks .task {
    left: 0;
    opacity: 0;
    position: absolute;
}
#page2 #tasks .task:first-child {
}
#page2 #tasks .task:last-child {
    animation: fadeIn 2s linear forwards;
}
#page2 #tasks .task:nth-child(1)  { animation: toggleFade1  40s linear infinite; }
#page2 #tasks .task:nth-child(2)  { animation: toggleFade2  40s linear infinite; }
#page2 #tasks .task:nth-child(3)  { animation: toggleFade3  40s linear infinite; }
#page2 #tasks .task:nth-child(4)  { animation: toggleFade4  40s linear infinite; }
#page2 #tasks .task:nth-child(5)  { animation: toggleFade5  40s linear infinite; }
#page2 #tasks .task:nth-child(6)  { animation: toggleFade6  40s linear infinite; }
#page2 #tasks .task:nth-child(7)  { animation: toggleFade7  40s linear infinite; }
#page2 #tasks .task:nth-child(8)  { animation: toggleFade8  40s linear infinite; }
#page2 #tasks .task:nth-child(9)  { animation: toggleFade9  40s linear infinite; }
#page2 #tasks .task:nth-child(10) { animation: toggleFade10 40s linear infinite; }
#page2 button {
	background: #B71C1C;
	border: 1px solid #B71C1C;
	border-radius: 4em;
    box-shadow: 0 8px 0 #6a2723;
	color: #fff;
	display: inline-block;
    font-size: 0.7em;
	height: 6em;
	outline: none;
	position: relative;
	text-align: center;
	text-decoration: none;
	top: 0;
	transition: all .1s;
	width: 6em;
}
#page2 button:active {
    box-shadow: 0 2px 0 #6a2723;
    top: 7px;
}
#page2 button:hover {
    cursor: pointer;
}


#page3 {
    background-color: #fff;
    color: #222;
}
#page3 abbr {
    border-bottom: 2px dashed #222;
    position: relative;
}
#page3 abbr:hover:after {
    background: #333;
    border-radius: 0.2em;
    bottom: 1.4em;
    color: #fff;
    content: attr(rel);
    font-size: 0.8em;
    right: -20%;
    opacity: 0.8;
    padding: 0.2em 0.5em;
    position: absolute;
    text-align: center;
    width: 14em;
    z-index: 100;
}
#page3 #timeline {
    margin: 2em auto;
    overflow: hidden;
    width: 80%;
}
#page3 #timeline .line {
    background-color: #222;
    height: 7em;
    margin: 0 auto;
    position: relative;
    width: 0.2em;
    z-index: 100;
}
#page3 #timeline .line.half {
    height: 2em;
}
#page3 #timeline .year  {
    position: relative;
    width: 100%;
}
#page3 #timeline .year .date {
    background-color: #fff;
    border-radius: 2em;
    border: 0.2em solid #222;
    color: #222;
    font-size: 1.3em;
    font-weight: bold;
    height: 3em;
    line-height: 3em;
    margin: 0 auto;
    position: relative;
    text-align: center;
    width: 3em;
    z-index: 100;
}
#page3 #timeline .year .techs {
    background: #999;
    position: relative;
    width: 50%;
}
#page3 #timeline .year .techs.left {
    float: left;
}
#page3 #timeline .year .techs.right {
    float: right;
}
#page3 #timeline .year .techs .tech {
    border-radius: 2em;
    box-sizing: border-box;
    font-size: 1em;
    opacity: 0.7;
    overflow: hidden;
    padding: 1em;
    position: absolute;
    text-align: center;
    transition: all 0.5s ease;
}
#page3 #timeline .year .techs .tech:hover {
    opacity: 1;
    z-index: 31;
}
#page3 #timeline .year .techs.left .tech {
    right: 2.5em;
}
#page3 #timeline .year .techs.right .tech {
    left: 2.5em;
}



#page4 {
    background-color: #FF5722;
}
#page4 h2 {
    text-align: center;
}
#page4 a {
    background-color: #FFCCBC;
    border-radius: 0.2em;
    color: #FF5722;
    display: inline-block;
    left: 0;
    margin: 0.5em 0;
    padding: 0.5em 0;
    position: relative;
    top: 0;
    text-align: center;
    text-decoration: none;
    transition: all 0.5s ease;
    width: 100%;
}
#page4 a:active {
    top: 1px;
    left: 1px;
}
#page4 a:hover {
    background-color: #fff;
}

footer {
    bottom: 10vh;
    left: 0;
    margin: 5em 0 0;
    position: absolute;
    width: 100%;
}
footer p {
    font-family: 'Source Code Pro', monospace;
    font-size: 80%;
    text-align: center;
}


@media (max-width: 600px) {
    .page .content {
        width: 100%;
    }

    .page .col.two,
    .page .col.three,
    .page .col.four {
        width: 100%;
    }

    #page1 h2 {
        font-size: 50%;
    }

    #page3 abbr:hover:after{
        font-size: 0.7em;
        line-height: 1em;
        right: -10%;
        width: 10em;
    }

    #page3 #timeline {
        width: 100%;
    }

    #page3 #timeline .year .techs .tech {
        padding: 0.5em;
    }

    footer {
        bottom: 2vh;
    }
}

@media (max-width: 350px) {
    #page3 abbr:hover:after{
        left: 10%;
    }

}


@keyframes blinking {
    from,to { border-color: transparent; }
    50% { border-color: rgb(57,252,50); }
}
@keyframes fadeIn {
    from { opacity: 0;   }
    50%  { opacity: 0.5; }
    to   { opacity: 1;   }
}
@keyframes showAndHide {
    0% {
        opacity: 0;
    }
    1% {
        opacity: 1;
    }
    99% {
        opacity: 1;
    }
    100% {
        opacity: 0;
    }
}
@keyframes show {
    0% {
        opacity: 0;
    }
    1% {
        opacity: 1;
    }
    100% {
        opacity: 1;
    }
}
@keyframes toggleFade1 {
    0%   { opacity: 0 }
    5%   { opacity: 1 }
    10%  { opacity: 0 }
    100% { opacity: 0 }
}
@keyframes toggleFade2 {
    0%   { opacity: 0 }
    10%  { opacity: 0 }
    15%  { opacity: 1 }
    20%  { opacity: 0 }
    100% { opacity: 0 }
}
@keyframes toggleFade3 {
    0%   { opacity: 0 }
    20%  { opacity: 0 }
    25%  { opacity: 1 }
    30%  { opacity: 0 }
    100% { opacity: 0 }
}
@keyframes toggleFade4 {
    0%   { opacity: 0 }
    30%  { opacity: 0 }
    35%  { opacity: 1 }
    40%  { opacity: 0 }
    100% { opacity: 0 }
}
@keyframes toggleFade5 {
    0%   { opacity: 0 }
    40%  { opacity: 0 }
    45%  { opacity: 1 }
    50%  { opacity: 0 }
    100% { opacity: 0 }
}
@keyframes toggleFade6 {
    0%   { opacity: 0 }
    50%  { opacity: 0 }
    55%  { opacity: 1 }
    60%  { opacity: 0 }
    100% { opacity: 0 }
}
@keyframes toggleFade7 {
    0%   { opacity: 0 }
    60%  { opacity: 0 }
    65%  { opacity: 1 }
    70%  { opacity: 0 }
    100% { opacity: 0 }
}
@keyframes toggleFade8 {
    0%   { opacity: 0 }
    70%  { opacity: 0 }
    75%  { opacity: 1 }
    80%  { opacity: 0 }
    100% { opacity: 0 }
}
@keyframes toggleFade9 {
    0%   { opacity: 0 }
    80%  { opacity: 0 }
    85%  { opacity: 1 }
    90%  { opacity: 0 }
    100% { opacity: 0 }
}
@keyframes toggleFade10 {
    0%   { opacity: 0 }
    90%  { opacity: 0 }
    95%  { opacity: 1 }
    100% { opacity: 0 }
}
@keyframes trail {
    from { border-color: rgb(57,252,50); }
    to   { border-color: transparent; }
}
@keyframes type {
    from { width: 100%; }
    to   { width: 0; }
}
@keyframes typeAndDelete {
    from { width: 100%; }
    10%  { width: 0; }
    25%  { width: 0; }
    50%  { width: 0; }
    75%  { width: 0; }
    90%  { width: 0; }
    to   { width: 100%; }
}