/* base */

body {

    font-family      : 'Courier New', Courier, monospace  ;
    background-color : #ffffff                          ;
    color            : #000000                          ;
    max-width        : 800px                              ;
    margin           : 40px auto                          ;
    padding          : 0 20px                             ;
    line-height      : 1.6                                ;

}

a {

    color           : #0000ee  ;
    text-decoration : none       ;

}

a:hover {

    text-decoration : underline  ;

}

h1 {

    font-size     : 1.2rem  ;
    font-weight   : normal  ;
    margin-bottom : 5px     ;

}

.left-img {

    display       : block  ;
    margin-bottom : 30px   ;
    width         : 250px  ;
    max-width     : 100%   ;
    height        : auto   ;

}

.no-wrap {

    white-space : nowrap  ;

}


/* home page */

#clock {

    margin-bottom : 20px       ;
    color         : #555555  ;

}

.content p {

    margin-bottom : 15px  ;

}

.floating-link {

    position        : absolute                           ;
    color           : #0000ee                          ;
    text-decoration : none                               ;
    font-family     : 'Courier New', Courier, monospace  ;
    z-index         : 100                                ;
    padding         : 10px                               ;
    cursor          : pointer                            ;

}

.floating-link:hover {

    text-decoration : underline  ;
    color           : #000000  ;

}

#linkArea {

    position   : relative  ;
    width      : 100%      ;
    height     : 50vh      ;
    margin-top : 20px      ;
    overflow   : hidden    ;

}


/* about page */

.about-content {

    max-width   : 800px              ;
    margin      : 200px auto 0 auto  ;
    text-align  : justify            ;
    padding     : 0 40px             ;
    line-height : 1.8                ;

}

.about-img {

    position : fixed  ;
    bottom   : 0      ;
    right    : 0      ;
    width    : 250px  ;
    height   : auto   ;

}


/* coming soon pages ( blog + resume ) */

.blog-page,
.resume-page {

    display         : flex    ;
    justify-content : center  ;
    align-items     : center  ;
    height          : 100vh   ;
    margin          : 0 auto  ;

}

.blog-content,
.resume-content {

    text-align : center  ;

}


/* links page ( open button in the middle of the screen , 24px = half the button ) */

.stack-container {

    position        : absolute                                 ;
    top             : 50vh                                     ;
    left            : 50%                                      ;
    transform       : translate( -50%, calc( -100% + 24px ) )  ;
    width           : 120px                                    ;
    height          : 360px                                    ;
    display         : flex                                     ;
    flex-direction  : column                                   ;
    justify-content : flex-end                                 ;
    align-items     : center                                   ;

}

.folder-trigger {

    padding     : 10px 20px         ;
    background  : #fcfcfc         ;
    border      : 1px solid #eee  ;
    width       : 120px             ;
    box-sizing  : border-box        ;
    text-align  : center            ;
    user-select : none              ;
    cursor      : pointer           ;

}

.folder-trigger .arrow {

    display        : none              ;
    transform      : rotate( -90deg )  ;
    letter-spacing : -1px              ;

}

.stack-container.open .folder-trigger .label { display : none         ; }
.stack-container.open .folder-trigger .arrow { display : inline-block ; }

.item {

    display         : block                                      ;
    padding         : 10px 20px                                  ;
    background      : #fcfcfc                                  ;
    border          : 1px solid #eee                           ;
    text-decoration : none                                       ;
    color           : #333                                     ;
    transition      : all 0.4s cubic-bezier( 0.2, 0.8, 0.2, 1 )  ;
    position        : absolute                                   ;
    bottom          : 0                                          ;
    left            : 0                                          ;
    width           : 120px                                      ;
    box-sizing      : border-box                                 ;
    text-align      : center                                     ;
    box-shadow      : 0 5px 14px rgba( 0, 0, 0, 0.1 )          ;
    opacity         : 0                                          ;
    pointer-events  : none                                       ;

}

.item:hover {

    text-decoration : none  ;

}

.stack-container.open .item {

    opacity        : 1     ;
    pointer-events : auto  ;

}

.stack-container.open .item:nth-child( 1 ) { transform : translate( 26px, -192px ) rotate( 6deg ) ; }
.stack-container.open .item:nth-child( 2 ) { transform : translate( 16px, -128px ) rotate( 4deg ) ; }
.stack-container.open .item:nth-child( 3 ) { transform : translate(  6px,  -64px ) rotate( 2deg ) ; }


/* buttons ( dark mode + line up ) */

#darkModeBtn,
#lineUpBtn,
#motionBtn {

    position    : fixed      ;
    top         : 20px       ;
    right       : 20px       ;
    background  : none       ;
    border      : none       ;
    font-family : inherit    ;
    font-size   : 1rem       ;
    color       : #0000ee  ;
    cursor      : pointer    ;
    z-index     : 9999       ;

}

#lineUpBtn {

    top : 50px  ;

}

#motionBtn {

    top    : auto  ;
    right  : auto  ;
    bottom : 20px  ;
    left   : 20px  ;

}

#darkModeBtn:hover,
#lineUpBtn:hover,
#motionBtn:hover {

    text-decoration : underline  ;

}


/* dark mode */

body.dark-theme {

    background-color : #121212 !important  ;
    color            : #e0e0e0 !important  ;

}

body.dark-theme a,
body.dark-theme #darkModeBtn,
body.dark-theme #lineUpBtn,
body.dark-theme #motionBtn {

    color : #8ab4f8 !important  ;

}

body.dark-theme .folder-trigger,
body.dark-theme .item {

    background   : #1e1e1e             ;
    border-color : #333                ;
    color        : #e0e0e0 !important  ;

}


/* animations on low ( motion.js ) */

body.low-motion .item {

    transition : none  ;

}


/* mobile */

@media screen and ( max-width : 768px ) {

    body {

        word-wrap  : break-word  ;
        overflow-x : hidden      ;

    }

    .floating-link {

        position   : static !important  ;
        display    : block              ;
        text-align : center             ;
        padding    : 10px 0             ;
        margin     : 5px 0              ;

    }

    #linkArea {

        height     : auto !important  ;
        margin-top : 40px             ;

    }

    .about-img,
    .contact-img {

        position  : relative !important  ;
        display   : block                ;
        margin    : 0 auto 20px auto     ;
        width     : 100% !important      ;
        max-width : 300px                ;

    }

    .about-content,
    .faq-content,
    .contact-content {

        margin-top : 20px !important    ;
        padding    : 0 20px !important  ;
        text-align : left               ;

    }

    .stack-container {

        position  : relative   ;
        top       : auto       ;
        left      : auto       ;
        transform : none       ;
        margin    : 40px auto  ;

    }

    #lineUpBtn {

        display : none  ;

    }

}