/** cdn fonts **/
@import url('http://fonts.cdnfonts.com/css/open-sans');
@import url('http://fonts.cdnfonts.com/css/fira-mono?styles=19417');
@import url('http://fonts.cdnfonts.com/css/exo-3?styles=20224');

/** google fonts **/
@import url('https://fonts.googleapis.com/css2?family=Open+Sans&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Fira+Mono:wght@500');
@import url('https://fonts.googleapis.com/css2?family=Exo+2:wght@700&display=swap');

/** other imports **/
@import url('https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css');

  /********/
 /* defs */
/********/
:root {
    /* color-definitions */
    --terminal-green: #4af626;

    --base-color: #000;
    --bright-accent: var(--terminal-green);
    --main-text: #dddddd;
    --sub-text: #aaa;
    --accent: #aaa;
}

@keyframes fadeIn {
    0% {opacity: 0;}
    100% {opacity: 1;}
}

@-webkit-keyframes fadeIn {
    0% {opacity: 0;}
    100% {opacity: 1;}
}

@keyframes blink {
    from, to { opacity: 0;}
    50% {opacity: 1;}
}

  /********/
 /* tags */
/********/
html {
    max-width: 100%;
    overflow-x: hidden;
    overflow-y: scroll;
    height: 100vh;
}

body {
    margin: 0;
    padding: 0;
    max-width: 100%;
    overflow-x: hidden;
    scroll-snap-type: y mandatory;
    background-color: black;
    font-size: max(min(1.5vw, 1.8vh), 10pt);
    font-family: 'Open Sans', sans-serif;
    color: var(--main-text);
    -ms-overflow-style: none;  /* IE and Edge */
    scrollbar-width: none;  /* Firefox */
    -webkit-tap-highlight-color: transparent;
}

a, a:hover {
	text-decoration: none;
    color: inherit;
}

  /***********/
 /* classes */
/***********/

/** header **/
.page-header {
    min-height: 80px;
    height: min(5vh, 5vw);
    width: 100vw;
    display: flex;
    flex-flow: row nowrap;
    justify-content: space-between;
    margin: 0;
    padding: 0;
    background-color: var(--base-color);
    z-index: 100;
    color: var(--main-text);
    position: fixed;
    box-shadow: 0 2px 20px 1px rgba(255, 255, 255, 0.05);
}

.page-title {
    padding-left: 5%;
    padding-top: 1.25em;
    padding-bottom: 1.25em;
    line-height: 1em;
    font-size: min(max(min(8vw, 15vh), 20pt), 40pt)
}

.header-menu-button {
    width: max(7.5vw, 80px);
    height: 100%;
    display: flex;
    flex-flow: column nowrap;
    justify-content: space-around;
    margin: 0;
    padding: 0;
    font-family: 'Open Sans', sans-serif;
    font-size: max(min(2vh, 1vw), 10pt);
    text-align: center;
}
.header-menu-button:hover {
    background-color: var(--main-text);
    color: black;
    transition: background-color 300ms, color 100ms;
}
.header-menu-button:after {
    content: '';
    position: absolute;
    width: max(7.5vw, 80px);
    transform: scaleX(0);
    height: 2px;
    bottom: 0.3vh;
    background-color: var(--bright-accent);
    transform-origin: bottom;
    transition: transform 0.25s ease-out;
}
.header-menu-button:hover:after {
    transform: scaleX(1);
    transform-origin: bottom;
}
.title-logo {
    font-family: 'Fira Mono', 'Avenir', 'Bauhaus 93', monospace;
    color: var(--bright-accent);
    width: 60vw;
    white-space: nowrap;
    padding: 2vw;
    padding: 2vw;
}

/** body **/

.subtitle {
    color: var(--sub-text);
    font-family: 'Open Sans', sans-serif;
    font-size: max(min(2vw, 2.5vh), 12pt);
}

.hovertext {
    position: relative;
    text-decoration: underline dotted var(--accent) 1px;
}

.hovertext:before {
    min-width: 40vw;
    content: attr(data-hover);
    visibility: hidden;
    opacity: 0;
    background-color: black;
    color: #fff;
    border-radius: 5px;
    padding: 1vh 1vw;
    transition: opacity 0.2s ease-in-out;

    position: absolute;
    z-index: 1;
    left: 0;
    top: 110%;
}

.hovertext:hover:before {
    opacity: 1;
    visibility: visible;
}
.code-mono {
    font-family: 'Courier New', Courier, monospace;
}

/** classes **/

ul {
    padding-left: 3vw;
    margin: 0;
    text-align: left;
}
ul li {
    padding-right: 5px;
}

.comment {
    font-size: 80%;
}


/** footer **/

.footer {
    height: 15vh;
    width: 100vw;
    display: flex;
    flex-flow: column nowrap;
    margin: 0;
    padding: 0 0 0 0;
    scroll-snap-align: start;
    color: var(--main-text);
}

.socialbtns, .socialbtns ul, .socialbtns li {
    margin: 0;
    padding: min(1.5vh, 0.6vw);
    text-align: center;
}

.socialbtns li {
    list-style: none outside none;
    display: inline-block;
}

.socialbtns .fa {
    width: max(min(4.8vw, 2.4vh), 45px);
    height: max(min(3.36vw, 1.68vh), 35px);
    color: #FFF;
    background-color: rgba(50, 50, 50, 0.1);
    /*border: 1px solid #FFF;*/
    padding-top: max(min(1.6vw, 0.8vh), 8px);
    padding-bottom: max(min(0.2vw, 0.1vh), 1.5px);
    margin-left: 10px;
    margin-right: 10px;
    border-radius: max(min(4.8vw, 2.4vh), 48px);
    -moz-border-radius: max(min(4.8vw, 2.4vh), 48px);
    -webkit-border-radius: max(min(4.8vw, 2.4vh), 48px);
    -o-border-radius: max(min(4.8vw, 2.4vh), 48px);
    font-size: max(min(1.68vw, 0.84vh), 18px);
    line-height: max(min(1.8vw, 0.9vh), 25px);
}

.socialbtns .fa:hover {
    color: #000;
    background-color: #FFF;
    border: 1px solid var(--accent);
}

/** slides **/

.slide {
    width: 100vw;
    display: flex;
    flex-flow: column nowrap;
    margin: 0;
    padding: 0 0 0 0;
    scroll-snap-align: start;
    color: var(--main-text);
}
.full-slide {
    height: 80vh;
}

.short-slide {
    height: 50vh;
}

.shortest-slide {
    min-height: 30vh;
}

.slide-container {
    display: flex;
    flex-flow: row nowrap;
}

.spacer:not(#page-top) {
    height: 5vh;
}

/** options **/

.evenly-justify {
    justify-content: space-evenly;
}

.noselect {
    -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
     -khtml-user-select: none; /* Konqueror HTML */
       -moz-user-select: none; /* Old versions of Firefox */
        -ms-user-select: none; /* Internet Explorer/Edge */
            user-select: none; /* Non-prefixed version, currently
                                  supported by Chrome, Edge, Opera and Firefox */
}

.around-justify {
    justify-content: space-around;
}
.center-justify {
    justify-content: center;
}

.two-column {
    columns: 2;
}
.three-column {
    columns: 3;
}
.four-column {
    columns: 4;
}

.center-text-container {
    justify-self: center;
    height: 1em;
}

  /**************/
 /* ID element */
/**************/

/** header **/
#page-top.spacer {
    min-height: 80px;
    height: min(5vh, 5vw);
}
.page-header.invisible {
    opacity: 0;
    z-index: 0;
    display: block;
    position: static;
}

#header-logo-container {
    height: 100%;
    width: 0;
    padding: 0;
    display: flex;
    align-items: center;
}

#menu-bar-container {
    width: max(30vw, 360px);
    height: 90%;
    padding: 0 2.5vw;
    display: flex;
    flex-flow: row nowrap;
    justify-content: space-around;
}

#home-button {
    width: max(5vw, 30px);
    margin-left: 0;
    padding-left: 0;
}

#home-button:after {
    width: max(5vw, 30px);
}

#hello_world_message {
    font-family: 'Fira Mono', 'Avenir', 'Bauhaus 93', monospace;
    font-size: max(min(6vh, 3vw), 14pt);
    color: var(--bright-accent);
    width: 60vw;
    white-space: nowrap;
}

:focus-visible {
    outline: none;
    background-color: var(--terminal-green);
    color: black;
}
:focus-visible * {
    background-color: var(--terminal-green);
    color: black;
}

a.fa.fa-lg:focus-visible {
    background-color: var(--terminal-green);
    color: black;
    border: black;
}

  /*****************/
 /* media queries */
/*****************/

/** both header and footer **/


@media only screen and (orientation: portrait) {

    /** for phone screens **/
    .slide:not(.shortest-slide) {
        min-height: 95vh;
    }
    body .shortest-slide {
        min-height: 20vh;
    }
    .content-main-text .hovertext.linked:hover:before {
        display: none;
    }


    /** header **/

    @media (max-width: 380px) {
        .page-header {
            overflow-x: scroll;
            -ms-overflow-style: none;
            scrollbar-width: none;
        }
        .page-title {
            text-align: center;
            padding-left: 0;
            padding-right: 0;
        }
    }

    .page-header {
        height: 8vh;
    }
    #page-top {
        height: 8vh;
    }

    /** body **/
    .hovertext:before {
        overflow: scroll;
        -ms-overflow-style: none;  /* IE and Edge */
        scrollbar-width: none;  /* Firefox */
    }

    /** footer **/

    .socialbtns, .socialbtns ul, .socialbtns li {
        margin: 0;
        padding: min(0.6vw, 0.3vh);
        text-align: center;
    }
    
    .socialbtns li {
        list-style: none outside none;
        display: inline-block;
    }
}

/** header **/

@media screen and (max-width: 650px) {
    /** header adjustments for small screens **/
    #header-logo-container {
        display: none;
    }
}

@media only screen and (min-width: 450px) {
    .small-screen-break {
        display: none;
    }
}

@media only screen and (max-width: 450px) {
    .big-screen-break {
        display: none;
    }
}

/** footer **/

@media only screen and (orientation: landscape) and (max-height: 400px) {
    /** social button adjustment for short widescreen **/
    .socialbtns .fa {
        width: 6vh;
        height: 4.2vh;
        border-radius: 4vh;
    }
}

@media only screen and (min-height: 1000px) {
    .socialbtns .fa {
        border: 1px solid #FFF;
        background-color: transparent;
    }
}

@media only print {
    .page-header {
        position: absolute;
    }
}