pre.wp-block-code code{color:#f8f8f2;padding-left:0;border:none;overflow-x:initial}code[class*=language-],pre[class*=language-]{color:#f8f8f2;background:0 0;font-family:Hack,fira code,Consolas,Menlo,Monaco,andale mono,lucida console,lucida sans typewriter,dejavu sans mono,bitstream vera sans mono,liberation mono,nimbus mono l,courier new,Courier,monospace;text-align:left;white-space:pre;word-spacing:normal;word-break:normal;word-wrap:normal;line-height:1.5;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none}pre.wp-block-code{background:#2b2b2b;overflow:auto}:where(pre.wp-block-code){padding:1em;margin:.5em auto;border-radius:.3em}.token.comment,.token.prolog,.token.doctype,.token.cdata{color:#d4d0ab}.token.punctuation{color:#fefefe}.token.property,.token.tag,.token.constant,.token.symbol,.token.deleted{color:#ffa07a}.token.boolean,.token.number{color:#00e0e0}.token.selector,.token.attr-name,.token.string,.token.char,.token.builtin,.token.inserted{color:#abe338}.token.operator,.token.entity,.token.url,.language-css .token.string,.style .token.string,.token.variable{color:#00e0e0}.token.atrule,.token.attr-value,.token.function{color:gold}.token.keyword{color:#00e0e0}.token.regex,.token.important{color:gold}.token.important,.token.bold{font-weight:700}.token.italic{font-style:italic}.token.entity{cursor:help}@media screen and (-ms-high-contrast:active){code[class*=language-],pre[class*=language-]{color:windowText;background:window}:not( pre )>code[class*=language-],pre[class*=language-]{background:window}.token.important{background:highlight;color:window;font-weight:400}.token.atrule,.token.attr-value,.token.function,.token.keyword,.token.operator,.token.selector{font-weight:700}.token.attr-value,.token.comment,.token.doctype,.token.function,.token.keyword,.token.operator,.token.property,.token.string{color:highlight}.token.attr-value,.token.url{font-weight:400}}pre.line-numbers{position:relative;padding-left:3.8em;counter-reset:linenumber}pre.line-numbers>code{position:relative;padding-top:0!important}.line-numbers .line-numbers-rows{position:absolute;pointer-events:none;top:0;font-size:100%;left:-3.8em;width:3em;letter-spacing:-1px;border-right:0;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.line-numbers-rows>span{pointer-events:none;display:block;counter-increment:linenumber}.line-numbers-rows>span:before{content:counter( linenumber );color:#5c6370;display:block;padding-right:.8em;text-align:right}.prism-titlename{margin:-14px -12px 24px;padding:4px 16px;font-family:-apple-system,BlinkMacSystemFont,segoe ui,Roboto,Oxygen-Sans,Ubuntu,Cantarell,helvetica neue,sans-serif;font-weight:700;color:orange;background-color:#444}
/** Inspiration Boards
---------------------------------------------------------*/
.boards svg .svg-elem-1 {
    stroke-dashoffset: 1149.6400146484375px;
    stroke-dasharray: 1149.6400146484375px;
    fill: transparent;
    -webkit-transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715)
            0s,
        fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 0.8s;
    transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 0s,
        fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 0.8s;
}
.boards svg.active .svg-elem-1 {
    stroke-dashoffset: 0;
    fill: #202040;
}
.boards svg .svg-elem-2 {
    stroke-dashoffset: 1149.639892578125px;
    stroke-dasharray: 1149.639892578125px;
    fill: transparent;
    -webkit-transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715)
            0.12s,
        fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 0.9s;
    transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 0.12s,
        fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 0.9s;
}
.boards svg.active .svg-elem-2 {
    stroke-dashoffset: 0;
    fill: #202040;
}
.boards svg .svg-elem-3 {
    stroke-dashoffset: 1149.639892578125px;
    stroke-dasharray: 1149.639892578125px;
    fill: transparent;
    -webkit-transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715)
            0.24s,
        fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 1s;
    transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 0.24s,
        fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 1s;
}
.boards svg.active .svg-elem-3 {
    stroke-dashoffset: 0;
    fill: #b030b0;
}
.boards svg .svg-elem-4 {
    stroke-dashoffset: 1149.6400146484375px;
    stroke-dasharray: 1149.6400146484375px;
    fill: transparent;
    -webkit-transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715)
            0.36s,
        fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 1.1s;
    transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 0.36s,
        fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 1.1s;
}
.boards svg.active .svg-elem-4 {
    stroke-dashoffset: 0;
    fill: #202060;
}
.boards svg .svg-elem-5 {
    stroke-dashoffset: 1149.64013671875px;
    stroke-dasharray: 1149.64013671875px;
    fill: transparent;
    -webkit-transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715)
            0.48s,
        fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 1.2000000000000002s;
    transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 0.48s,
        fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 1.2000000000000002s;
}
.boards svg.active .svg-elem-5 {
    stroke-dashoffset: 0;
    fill: #b030b0;
}
.boards svg .svg-elem-6 {
    stroke-dashoffset: 1149.6400146484375px;
    stroke-dasharray: 1149.6400146484375px;
    fill: transparent;
    -webkit-transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715)
            0.6s,
        fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 1.3s;
    transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 0.6s,
        fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 1.3s;
}
.boards svg.active .svg-elem-6 {
    stroke-dashoffset: 0;
    fill: #602080;
}
.boards svg .svg-elem-7 {
    stroke-dashoffset: 1149.6400146484375px;
    stroke-dasharray: 1149.6400146484375px;
    fill: transparent;
    -webkit-transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715)
            0.72s,
        fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 1.4000000000000001s;
    transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 0.72s,
        fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 1.4000000000000001s;
}
.boards svg.active .svg-elem-7 {
    stroke-dashoffset: 0;
    fill: #202040;
}
.boards svg .svg-elem-8 {
    stroke-dashoffset: 1149.639892578125px;
    stroke-dasharray: 1149.639892578125px;
    fill: transparent;
    -webkit-transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715)
            0.84s,
        fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 1.5s;
    transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 0.84s,
        fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 1.5s;
}
.boards svg.active .svg-elem-8 {
    stroke-dashoffset: 0;
    fill: #b030b0;
}
.boards svg .svg-elem-9 {
    stroke-dashoffset: 1149.6400146484375px;
    stroke-dasharray: 1149.6400146484375px;
    fill: transparent;
    -webkit-transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715)
            0.96s,
        fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 1.6s;
    transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 0.96s,
        fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 1.6s;
}
.boards svg.active .svg-elem-9 {
    stroke-dashoffset: 0;
    fill: #202040;
}
.boards svg .svg-elem-10 {
    stroke-dashoffset: 2462.26025390625px;
    stroke-dasharray: 2462.26025390625px;
    fill: transparent;
    -webkit-transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715)
            1.08s,
        fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 1.7000000000000002s;
    transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 1.08s,
        fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 1.7000000000000002s;
}
.boards svg.active .svg-elem-10 {
    stroke-dashoffset: 0;
    fill: #602080;
}
.boards svg .svg-elem-11 {
    stroke-dashoffset: 2409.47998046875px;
    stroke-dasharray: 2409.47998046875px;
    fill: transparent;
    -webkit-transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715)
            1.2s,
        fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 1.8s;
    transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 1.2s,
        fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 1.8s;
}
.boards svg.active .svg-elem-11 {
    stroke-dashoffset: 0;
    fill: #202060;
}
.boards svg .svg-elem-12 {
    stroke-dashoffset: 2409.480224609375px;
    stroke-dasharray: 2409.480224609375px;
    fill: transparent;
    -webkit-transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715)
            1.3199999999999998s,
        fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 1.9000000000000001s;
    transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715)
            1.3199999999999998s,
        fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 1.9000000000000001s;
}
.boards svg.active .svg-elem-12 {
    stroke-dashoffset: 0;
    fill: #b030b0;
}
.boards svg .svg-elem-13 {
    stroke-dashoffset: 1651.0400390625px;
    stroke-dasharray: 1651.0400390625px;
    fill: transparent;
    -webkit-transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715)
            1.44s,
        fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 2s;
    transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 1.44s,
        fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 2s;
}
.boards svg.active .svg-elem-13 {
    stroke-dashoffset: 0;
    fill: #602080;
}
.boards svg .svg-elem-14 {
    stroke-dashoffset: 1908.080078125px;
    stroke-dasharray: 1908.080078125px;
    fill: transparent;
    -webkit-transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715)
            1.56s,
        fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 2.1s;
    transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 1.56s,
        fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 2.1s;
}
.boards svg.active .svg-elem-14 {
    stroke-dashoffset: 0;
    fill: #202060;
}

/** Browser Bar
---------------------------------------------------------*/
.inspiring-sites svg .svg-elem-1 {
    stroke-dashoffset: 94.87004852294922px;
    stroke-dasharray: 94.87004852294922px;
    fill: transparent;
    -webkit-transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715)
            0s,
        fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 0.8s;
    transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 0s,
        fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 0.8s;
}
.inspiring-sites svg.active .svg-elem-1 {
    stroke-dashoffset: 0;
    fill: rgb(63, 202, 74);
}
.inspiring-sites svg .svg-elem-2 {
    stroke-dashoffset: 94.86991882324219px;
    stroke-dasharray: 94.86991882324219px;
    fill: transparent;
    -webkit-transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715)
            0.12s,
        fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 0.9s;
    transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 0.12s,
        fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 0.9s;
}
.inspiring-sites svg.active .svg-elem-2 {
    stroke-dashoffset: 0;
    fill: rgb(247, 95, 96);
}
.inspiring-sites svg .svg-elem-3 {
    stroke-dashoffset: 94.87004089355469px;
    stroke-dasharray: 94.87004089355469px;
    fill: transparent;
    -webkit-transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715)
            0.24s,
        fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 1s;
    transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 0.24s,
        fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 1s;
}
.inspiring-sites svg.active .svg-elem-3 {
    stroke-dashoffset: 0;
    fill: rgb(249, 192, 72);
}
.inspiring-sites svg .svg-elem-4 {
    stroke-dashoffset: 695.5987548828125px;
    stroke-dasharray: 695.5987548828125px;
    fill: transparent;
    -webkit-transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715)
            0.36s,
        fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 1.1s;
    transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 0.36s,
        fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 1.1s;
}
.inspiring-sites svg.active .svg-elem-4 {
    stroke-dashoffset: 0;
    fill: rgb(25, 25, 25);
}

/** Design
---------------------------------------------------------*/
.design svg .svg-elem-1 {
    stroke-dashoffset: 2715.92333984375px;
    stroke-dasharray: 2715.92333984375px;
    fill: transparent;
    -webkit-transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715)
            0s,
        fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 0.8s;
    transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 0s,
        fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 0.8s;
}
.design svg.active .svg-elem-1 {
    stroke-dashoffset: 0;
    fill: rgb(255, 255, 255);
}

/** Web Dev
---------------------------------------------------------*/
.web-dev svg .svg-elem-1 {
    stroke-dashoffset: 3069.655029296875px;
    stroke-dasharray: 3069.655029296875px;
    fill: transparent;
    -webkit-transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715)
            0s,
        fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 0.8s;
    transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 0s,
        fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 0.8s;
}
.web-dev svg.active .svg-elem-1 {
    stroke-dashoffset: 0;
    fill: rgb(255, 255, 255);
}
.web-dev svg .svg-elem-2 {
    stroke-dashoffset: 368.6865234375px;
    stroke-dasharray: 368.6865234375px;
    fill: transparent;
    -webkit-transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715)
            0.12s,
        fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 0.9s;
    transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 0.12s,
        fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 0.9s;
}
.web-dev svg.active .svg-elem-2 {
    stroke-dashoffset: 0;
    fill: rgb(255, 255, 255);
}

/** Music
---------------------------------------------------------*/
.music svg .svg-elem-1 {
    stroke-dashoffset: 2522.842529296875px;
    stroke-dasharray: 2522.842529296875px;
    fill: transparent;
    -webkit-transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715)
            0s,
        fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 0.8s;
    transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 0s,
        fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 0.8s;
}
.music svg.active .svg-elem-1 {
    stroke-dashoffset: 0;
    fill: rgb(255, 255, 255);
}

/** Articles
---------------------------------------------------------*/
.articles svg .svg-elem-1 {
    stroke-dashoffset: 54.606956481933594px;
    stroke-dasharray: 54.606956481933594px;
    -webkit-transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715)
            0s,
        fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 0.8s;
    transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 0s,
        fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 0.8s;
}

.articles svg.active .svg-elem-1 {
    stroke-dashoffset: 0;
}

.articles svg .svg-elem-2 {
    stroke-dashoffset: 809.4344482421875px;
    stroke-dasharray: 809.4344482421875px;
    fill: transparent;
    -webkit-transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715)
            0.12s,
        fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 0.9s;
    transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 0.12s,
        fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 0.9s;
}

.articles svg.active .svg-elem-2 {
    stroke-dashoffset: 0;
    fill: rgb(255, 255, 255);
}

.articles svg .svg-elem-3 {
    stroke-dashoffset: 295.65374755859375px;
    stroke-dasharray: 295.65374755859375px;
    -webkit-transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715)
            0.24s,
        fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 1s;
    transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 0.24s,
        fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 1s;
}

.articles svg.active .svg-elem-3 {
    stroke-dashoffset: 0;
}

/** SwiftUI
---------------------------------------------------------*/
.swiftui svg .svg-elem-1 {
    stroke-dashoffset: 139.87957763671875px;
    stroke-dasharray: 139.87957763671875px;
    -webkit-transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715)
            0s,
        fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 0.8s;
    transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 0s,
        fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 0.8s;
}
.swiftui svg.active .svg-elem-1 {
    stroke-dashoffset: 0;
}
.swiftui svg .svg-elem-2 {
    stroke-dashoffset: 143.51304626464844px;
    stroke-dasharray: 143.51304626464844px;
    fill: transparent;
    -webkit-transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715)
            0.12s,
        fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 0.9s;
    transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 0.12s,
        fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 0.9s;
}
.swiftui svg.active .svg-elem-2 {
    stroke-dashoffset: 0;
    fill: rgb(255, 255, 255);
}

/*
Theme Name: Main Theme
Theme URI: https://joekotlan.com
Author: Joe Kotlan
Author URI: https://joekotlan.com
Description: I build websites. I'll mix design & code to create 🔥🔥🔥 stuff.
Version: 1.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: main
*/

/** General
---------------------------------------------------------*/
:root {
    --dark-grey: #1a1b1d;
    --grey: #363a3e;
    --light-grey: #656c75;
    --bg-grey: #f3f3f3;
    --white: #ffffff;
    --red: #ff034a;
    --orange: #ff6f00;
    --yellow: #ff9400;
    --green: #009d91;
    --blue: #0b5fa5;
    --purple: #7e07a9;
    --box-shadow: 0 0 25px rgba(0,0,0,.06);
    --border-radius:  25px;
}

html {
    background: var(--light-grey);
}

body {
    font-family: "Noto Sans JP", sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: greyscale;
    color: var(--dark-grey);
    background: var(--white);
    margin: 0;
    padding-left: 40px;
}

main {
    background-image: url("https://www.joekotlan.com/wp-content/themes/main/assets/depth-map-bg.svg");
    background-size: 100% auto;
    background-repeat: repeat-y;
}

div.bg {
    background: var(--bg-grey);
    background-image: url("https://www.joekotlan.com/wp-content/themes/main/assets/depth-map-bg.svg");
    background-size: 100% auto;
    background-repeat: repeat-y;
}

p {
    font-family: Muli, sans-serif;
    line-height: 1.25em;
}

a {
    font-family: "Noto Sans JP", sans-serif;
    line-height: 1em;
    text-decoration: none;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    line-height: 1em;
}

h1 {
    font-size: 3.5em;
    margin-bottom: 0.5em;
    letter-spacing: -1px;
}

h2 {
    font-size: 2em;
    letter-spacing: -1px;
}

.btn {
    font-size: 2em;
    text-decoration: none;
    padding: 2px 10px;
    transition: all 0.25s ease;
    border-radius: 0;
    background: transparent;
    border: none;
    cursor: pointer;
    width: initial;
    position: relative;
    white-space: nowrap;
    z-index: 1;
}

.btn-inline {
    font-size: inherit;
    padding-left: 2px;
}

.btn.btn-white {
	color: var(--red);
}

.btn.btn-white:before,
.btn.btn-white:hover:before {
	background-color:  var(--white);
}

.btn.btn-blue:before,
.btn.btn-blue:hover:before {
    background-color: var(--blue);
}

.btn.btn-yellow:before,
.btn.btn-yellow:hover:before {
    background-color: var(--yellow);
}

.btn:before,
.single a:before,
.gform_footer:before,
.work-info a:before {
    content: "";
    position: absolute;
    top: 2px;
    left: 0px;
    bottom: 0px;
    right: 0px;
    z-index: -1;
    background-color: var(--red);
    transform: skewX(10deg) skewY(-2deg);
    margin: 0px -16px -8px -20px;
    border-radius: 12px;
    transition: all 0.2s ease;
}

.btn:hover:before,
.gform_footer:hover:before {
    transform: skewX(-20deg) skewY(-2deg);
    background-color: var(--blue);
}

main.front {
    overflow: hidden;
}

.transition-fade {
    transition: 0.4s;
    opacity: 1;
}

html.is-animating .transition-fade {
    opacity: 0;
}

/** Header
---------------------------------------------------------*/

header {
    position: sticky;
    position: -webkit-sticky;
    top: 0;
    height: 40px;
    width: 100%;
    background: #fff;
    z-index: 2; /* To overlap main content on page */
}

header > img.corner {
    position: absolute;
    bottom: -40px;
    left: 0;
    height: 40px;
    width: auto;
}

header nav {
    float: right;
    height:  100%;
    transition: all 0.25s ease;
}

header ul {
    display: flex;
    margin: 0;
    padding: 0;
    list-style-type: none;
    height:  100%;
}

header ul a {
    display: inline-block;
    color: var(--grey);
    padding: 13px 35px 14px;
    font-size: 0.875em;
    text-transform: uppercase;
    transition: all 0.25s ease-out;
}

header ul a:hover {
    background: var(--red);
    color: var(--white);
}

header ul li.current a {
    color: var(--red);
}

header ul li.current a:hover {
    color: var(--white);
}

.social-sidebar {
    position: fixed;
    display: flex;
    flex-direction: column;
    align-items: center;
    bottom: 10px;
    left: 10px;
    color: var(--light-grey);
}

.social-sidebar a {
    height: 20px;
    width: 20px;
    margin-top: 12px;
    transition: all 0.2s ease;
}

.social-sidebar a:last-child {
    margin-top: 8px; /* Twitter icon isn't sqaure */
}

.social-sidebar a:hover {
    opacity: 0.5;
}

.menu {
    background: var(--red);
    height: 75px;
    width: 75px;
    border-radius: 50%;
    position: fixed;
    top: 50px;
    right: 25px;
    border: none;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    box-shadow: 0 0 30px rgba(252, 27, 112, 0.5);
    z-index: 5; /* Overlap everything - should be the highest z-index */
    transition: all 0.2s ease;
    display: none;
}

.menu span {
    width: 51%;
    height: 5px;
    margin: 3px 0;
    border-radius: 2px;
    background: #fff;
    display: block;
    transition: all 0.2s ease;
}

.menu-open .menu {
    background: var(--yellow);
    cursor: pointer;
    box-shadow: 0 0 30px rgba(239, 178, 53, 0.5);
}

.menu-open .menu span {
    background: var(--dark-grey);
}

.menu span {
    margin: 5px auto;
}

.menu:focus,
.menu:active {
    outline: none;
}

body.menu-open header nav {
    z-index: 4;
    opacity: 1;
    height: 100vh;
    pointer-events: all;
}

body.menu-open {
    overflow: hidden;
    position: relative;
}

body.menu-open main {
    pointer-events: none;
    overflow: hidden;
}

/** Footer 
---------------------------------------------------------*/
footer {
    background: var(--dark-grey);
    padding: 7vw 7vw 5vw 7vw;
    display: grid;
    grid-template: 1fr / 2fr 1fr;
    grid-gap: 75px;
}

.footer-form {
    grid-row: 1 / -1;
}

.footer-form p {
    font-family: "Noto Sans JP", sans-serif;
    line-height: 1.25em;
    font-size: 1.75em;
    margin-top: 0;
    color: var(--bg-grey);
}

.footer-form input,
.footer-form textarea {
    padding: 12px 15px;
    background: var(--bg-grey);
    border-radius: 10px;
    width: calc(100% - 35px);
    transition: all 0.2s ease;
    font-size: 1em;
    border: 3px solid var(--bg-grey);
    font-family: "Noto Sans JP", sans-serif;
    color: var(--grey);
    -webkit-appearance: none;
}

.footer-form input:focus,
.footer-form textarea:focus {
    outline: none;
    border-bottom: 3px solid var(--red);
    border-style: inset;
    box-shadow: 0 0 20px rgba(252, 27, 112, 0.5);
}

.gform_footer {
    text-decoration: none;
    transition: all 0.25s ease;
    width: fit-content;
    position: relative;
    z-index: 1;
    margin: 25px 0 0 25px;
}

.footer-form input[type="submit"] {
    width: initial;
    padding: 2px 10px;
    border-radius: 0;
    border: none;
    color: var(--white);
    background: transparent;
    font-size: 1.5em;
    cursor: pointer;
}

.footer-form #field_1_1 {
    width: calc(50% - 10px);
    margin-right: 10px;
    display: inline-block;
}

.footer-form #field_1_3 {
    width: calc(50% - 10px);
    margin-left: 10px;
    display: inline-block;
}

.footer-form #field_1_5 {
    display: none;
}

.footer-social {
    display: flex;
    justify-content: space-between;
}

.footer-social a {
    width: 50px;
    margin-bottom: 50px;
}

.footer-social a div {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

.footer-social img {
    width: 100%;
    height: auto;
    transition: all 0.2s ease;
}

.footer-social img:nth-of-type(2) {
    position: absolute;
    opacity: 0;
}

.footer-social a:hover img:nth-of-type(2) {
    opacity: 1;
}

.footer-social a:hover img:nth-of-type(1) {
    opacity: 0;
}

.footer-form ul {
    list-style-type: none;
    padding: 0;
}

.footer-form ul li {
    margin-bottom: 20px;
}

.footer-form ul li label {
    font-size: 1em;
    color: var(--bg-grey);
    margin-bottom: 8px;
    display: block;
}

footer nav ul {
    list-style-type: none;
    padding: 0;
    margin: 0;
    font-size: 1.25em;
}

footer nav ul ul {
    font-size: 1em;
}

footer nav ul li a {
    color: var(--bg-grey);
    text-decoration: none;
    transition: all 0.2s ease;
    padding: 10px;
    display: inline-block;
}

footer nav ul li.current > a {
    color: var(--red);
}

footer nav ul ul li a {
    color: var(--light-grey);
    margin-left: 20px;
}

footer nav ul li a:hover {
    color: var(--red);
}

/** Home Page
---------------------------------------------------------*/
.hero {
    position: relative;
    height: calc(100vh - 40px);
    width: calc(100vw - 40px);
}

.intro {
    position: absolute;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    height: 100%;
}

.intro h1 {
    color: var(--dark-grey);
    width: calc(50% - 8vw);
    line-height: 1em;
    padding: 0 4vw;
    visibility: hidden;
}

.intro picture {
    width: 50%;
    height: 100%;
}

.intro img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top;
    mix-blend-mode: darken;
}

.dribbble {
    position: absolute;
    top: 42px;
    left: 48px;
    height: 35px;
    width: 35px;
    z-index: 3; /* to overlap corner image */
}

.dribbble img {
    height: 100%;
    width: 100%;
    transition: all 1s cubic-bezier(1, 0, 0, 1);
}

.dribbble:hover img {
    transform: rotate(540deg);
}

#rotating-text {
    position: relative;
    z-index: 2; /* To overlap header curve */
}

#rotating-text text {
    font-size: 14px;
}

#rotating-text svg {
    position: absolute;
    left: -85px;
    top: -90px;
    animation-name: rotate;
    animation-duration: 10s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
}

@keyframes rotate {
    from {
        transform: rotate(-240deg);
    }
    to {
        transform: rotate(120deg);
    }
}

.daily-sites {
    position: absolute;
    bottom: 50px;
    left: 50px;
}

.daily-sites a {
    padding: 20px 40px;
    font-size: 0.75em;
    background: var(--white);
    color: var(--white);
    top: 0;
    position: relative;
    text-transform: uppercase;
    border-radius: 100px;
    transition: all 0.25s ease;
}

.daily-sites a:hover {
    color: var(--red);
    top: -5px;
    box-shadow: var(--box-shadow);
}

.latest {
    display: grid;
    grid-template: repeat(auto-fit, minmax(100px, 1fr)) / 1fr 1fr 1fr;
    padding: 0 calc(4vw - 25px);
}

.latest h2 {
    grid-column: 1 / -1;
    font-size: 2.75em;
    margin: 60px 7vw 0 7vw;
    text-align: center;
    visibility: hidden;
}

.latest h3 {
    font-size: 1.5em;
    margin: 0 0 40px 0;
    line-height: 1.25em;
    color: var(--dark-grey);
}

.latest h3 img {
    margin-bottom: -4px;
    margin-left: 2px;
}

.latest > p {
    grid-column: 1 / -1;
    font-size: 1.5em;
    line-height: 1.33em;
    padding: 0 14vw calc(40px - 1em) 14vw;
    text-align: center;
    max-width: 62ch;
    margin-left: auto;
    margin-right: auto;
}

.latest a {
    color: var(--white);
    text-decoration: none;
    align-self: flex-end;
}

.latest > div {
    padding: 40px;
    margin: 25px;
    border-radius: var(--border-radius);
    box-shadow: var(--box-shadow);
    background: var(--white);
    height:  min-content;
}

.latest a img {
    max-width: 100%;
    border-radius: var(--border-radius);
}

.latest-twitter h3 img,
.latest-instagram h3 img ,
.latest-github h3 img {
    width: auto;
    height: 34px;
}

/** Latest - Work
----------------------------*/
.latest-work a {
    display: block;
    overflow: hidden;
}
.latest-work img {
	width:  calc(100% - 6px);
    height: auto;
    border:  3px solid transparent;
    transition: all 0.25s ease;
}
.latest-work a:hover img {
   border: 3px solid var(--red);
}

/** Latest - Literature
----------------------------*/
.latest > div.latest-literature {
    position: relative;
    padding: 0;
}
.latest-literature img {
    position: absolute;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.15;
}
.latest-literature h3 {
    margin: 60px 40px 40px;
    z-index: 1; /* To overlap the background image on the box on the home page */
    position: relative;
}
.latest-literature h4 {
    font-size: 2em;
    transition: all 0.25s ease;
}

.latest-literature > a {
    display: block;
    position: relative;
    z-index: 1; /* To overlap the background image on the box on the home page */
    background: var(--dark-grey);
    margin: 0 40px 40px 40px;
    border-radius: var(--border-radius);
    border:  3px solid transparent;
    transition: all 0.25s ease;
}
.latest-literature > a > div {
    padding: 4vw 50px;
    transition: all 5s ease;
    position: relative;
    z-index: 1;
}
.latest-literature > a > div p {
    color: var(--light-grey);
}

.latest-literature > a:hover {
   border:  3px solid var(--red);
}

/** Latest - Twitter
----------------------------*/
.latest-twitter iframe {
    padding: 10px !important;
    width: calc(100% - 20px) !important;
    background: #fff;
    border-radius: var(--border-radius);
    align-self: flex-end;
    max-height: 380px;
}

/** Latest - Instagram
----------------------------*/
.latest > div.latest-instagram {
    background: radial-gradient(
        circle at 30% 107%,
        #fdf497 0%,
        #fdf497 5%,
        #fd5949 45%,
        #d6249f 60%,
        #285aeb 90%
    );
}

.latest-instagram ul {
    margin: 0;
    padding: 0;
    list-style-type: none;
}

.latest-instagram img,
.latest-instagram video {
    width: 49%;
    height: auto;
}

.timestamp {
    display: none;
}

/** Latest - Inspiration Links
----------------------------*/
.latest-inspiration-links a {
    display: block;
    overflow: hidden;
}

.latest-inspiration-links img {
	width: calc(100% - 6px);
   height: auto;
   transition: all 0.25s ease;
   border: 3px solid transparent;
}

.latest-inspiration-links a:hover img {
    border:  3px solid var(--red);
}

/** Latest - Inspiration Images
----------------------------*/
.latest-inspiration-images a {
    display: grid;
    grid-template: 1fr 1fr / 1fr 1fr;
    grid-gap: 10px;
}

.latest-inspiration-images picture {
    overflow: hidden;
}

.latest-inspiration-images img {
    width: calc(100% - 6px);
    height: 150px;
    border:  3px solid transparent;
    transition: all .25s ease;
    object-fit: cover;
}

.latest-inspiration-images a:hover img {
    border:  3px solid var(--red);
}

/** Latest - Twitter
----------------------------*/
.latest-github a {
    border: 3px solid var(--dark-grey);
    padding: 20px;
    border-radius: var(--border-radius);
    transition: all 0.25s ease;
    color: #8b959e;
    display: grid;
    grid-template: 1fr / 1fr 1fr;
    background:  var(--dark-grey);
}

.latest-github a:hover {
	border: 3px solid var(--red);
}

.latest-github div {
    display: flex;
    align-items: center;
}

.latest-github div div {
    height: 9px;
    width: 9px;
    display: inline-block;
    background: #f05138;
    margin-right: 5px;
    border-radius: 10px;
}

.latest-github .repo-name img {
    margin-bottom: -1px;
}

.latest-github h4 {
    color: #58a6ff;
    margin-left: 10px;
    margin: 0 0 0 10px;
}

.latest-github h5 {
    margin: 0;
    text-align: right;
}

.latest-github h5 span {
    padding: 1px 6px;
    border: 1px solid #8b959e;
    border-radius: 50px;
}

.latest-github h6 {
    margin: 0 10px 0 0;
}

.latest-github p.repoDescription {
    grid-column: 1 / -1;
}

.latest-github p.repoDate {
    margin: 0;
    font-size: 0.875em;
}

.latest-github .language {
    grid-column: 1 / -1;
}

.bio {
    padding-top: 4vw;
    padding-bottom: 7vw;
    color: var(--dark-grey);
    font-size: 1.5em;
    font-family: "Noto Sans JP", sans-serif;
}

.bio h2 {
    color: var(--dark-grey);
    text-align: center;
    margin-top: 0;
}

.bio p {
    line-height: 1.33em;
    max-width: 60ch;
    margin: 0 auto 20px;
}

.cta {
	padding-bottom:  7vw;
}

.cta div {
	background:  var(--red);
	margin:  0 7vw;
	padding:  4vw;
	border-radius:  var(--border-radius);
	color:  var(--white);
	display:  flex;
	align-items: center;
	justify-content: center;
}

.cta .btn {
	display:  inline-block;
	margin-left:  75px;
	font-size:  1.25em;
	padding:  15px;
}

/** My Work
---------------------------------------------------------*/
.work {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    grid-auto-rows: 300px;
    grid-gap: 40px;
    grid-auto-flow: dense;
    margin: 0 40px 40px 0;
}

.work > div {
    grid-column: 1 / -1;
    margin: 0;
    padding: 0;
    align-self: center;
}

.work > div * {
    text-align: center;
    visibility: hidden;
}

.work > div h1 {
    width: 100%;
    margin: 0;
    color: var(--dark-grey);
}

.work > div p {
    max-width: 70ch;
    font-size: 1.25em;
    color: var(--light-grey);
    margin: 1em auto 0;
}

.work a {
    position: relative;
    overflow: hidden;
    will-change: transform;
    border-radius: var(--border-radius);
    box-shadow: var(--box-shadow);
}

.work a.featured {
    grid-column: span 2;
    grid-row: span 2;
}

.work a.horizontal {
    grid-column: span 2;
}

.work a.vertical {
    grid-row: span 2;
}

.work img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: all 5s ease;
}

.work a > div {
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    background: rgba(0, 0, 0, 0);
    transition: all 0.25s ease;
}

.work h2 {
    position: relative;
    padding: 20px;
    margin: 0;
    text-align: center;
    top: 10px;
    opacity: 0;
    color: var(--white);
    transition: all 0.25s ease;
}

.work .badges {
    position: absolute;
    left: 15px;
    bottom: 0;
    opacity: 0;
    transition: opacity 0.25s ease, bottom 0.25s ease;
    transition-delay: 0.15s;
}

.badges img {
    width: 35px;
    height: 35px;
    margin: 0 5px;
}

.work .badges img {
    -webkit-filter: drop-shadow(0 0 12px rgba(200, 200, 200, 0.4));
    filter: drop-shadow(0 0 12px rgba(200, 200, 200, 0.4));
}

.badges img:nth-of-type(1) {
    margin-left: 0;
}

.work a:hover picture img {
    transform: scale(1.1);
}

.work a:hover > div {
    background: rgba(0, 0, 0, 0.75);
}

.work a:hover h2 {
    top: 0;
    opacity: 1;
}

.work a:hover .badges {
    bottom: 15px;
    opacity: 1;
}

/** My Work - Single
---------------------------------------------------------*/
.single-work {
    display: flex;
    flex-wrap: wrap;
}

.work-info {
    width: calc(30% - 120px);
    height: calc(100vh - 200px);
    background: var(--bg-grey);
    color: var(--dark-grey);
    padding: 80px 60px;
    overflow: scroll;
    position: sticky;
    position: -webkit-sticky;
    top: 40px;
}

.work-info h1 {
    margin-top: 0;
    font-size: 2.5em;
}

.work-info p {
    color: var(--light-grey);
}

.shots {
    width: 70%;
    display: grid;
    grid-template: 1fr / 1fr 1fr;
    grid-auto-flow: dense;
    padding-bottom: 20px;
}

.shots video {
	grid-column:  1 / -1;
	width:  calc(100% - 40px);
	height:  auto;
	padding:  20px 20px 0 20px;
}

.shots a {
    display: flex;
    justify-content: center;
    padding: 20px 20px 0 20px;
}

.shots a.double {
    grid-column: 1 / -1;
}

.shots img {
    max-width: 100%;
    min-height: 100%;
    margin: 0 auto;
    height: auto;
    object-fit: cover;
    display: flex;
}

/** Inspiration - Boards
---------------------------------------------------------*/
.inspiration {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    grid-gap: 15px;
    grid-auto-rows: 250px;
    grid-auto-flow: dense;
    margin: 0 40px 80px 0;
}

.inspiration .head {
    grid-column: 1 / -1;
    text-align: center;
    position: sticky;
    position: -webkit-sticky;
    align-self: center;
    top: 39px;
    padding-bottom: 40px;
    background: var(--white);
}

.inspiration .title {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
}

.inspiration h1 {
    margin: 0;
}

.inspiration .head a {
    color: var(--light-grey);
    display: inline-block;
    margin: 0 20px;
    transition: all 0.25s ease;
}

.inspiration .head a:hover {
    color: var(--red);
}

.inspiration .dots {
    width: 100%;
    margin-top: 5px;
}

.inspiration .dots a {
    height: 7px;
    width: 7px;
    border-radius: 50%;
    background: var(--light-grey);
    line-height: 0;
    font-size: 0;
    margin: 0 10px;
    color: transparent;
}

.inspiration .dots a:hover,
.inspiration .dots a.current {
    background: var(--red);
}

.inspiration a {
    overflow: hidden;
}

.inspiration img {
    max-width: 100%;
    min-width: 100%;
    min-height: 100%;
    object-fit: cover;
}

.inspiration .horizontal {
    grid-column: span 2;
}

.inspiration .horizontal img {
    height: 100%;
}

.inspiration .vertical {
    grid-row: span 2;
}

.inspiration .featured {
    grid-column: span 2;
    grid-row: span 2;
}

.lightbox .lb-image {
    border-radius: 0;
    border: none;
}

.lb-dataContainer {
    display: none !important;
}

/** Inspiration - Links
---------------------------------------------------------*/
.sites {
    padding: 40px 7vw 80px 7vw;
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-gap: 40px;
    grid-auto-rows: min-content;
    background: var(--bg-grey);
}

.description {
    padding: 100px;
    background: var(--dark-grey);
    color: var(--white);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
}

.design-links .description {
    background: var(--red);
}
.web-dev-links .description {
    background: var(--blue);
}
.music .description {
    background: var(--green);
}
.articles .description {
    background: var(--yellow);
}
.swiftui-links .description {
    background: var(--purple);
}
.inspiring-websites .description {
    color: var(--bg-grey);
}
.inspiring-websites .description p {
    color: var(--white);
}

.description h1 {
    margin: 0 60px 0 0;
}

.description p {
    max-width: 60ch;
    margin: 0;
    line-height: 1.5em;
}

.sites h2 {
    color: var(--dark-grey);
    margin-bottom: 20px;
}

.sites ul {
    font-size: 1em;
    padding: 0;
    margin: 0;
    list-style-type: none;
    display: flex;
    flex-wrap: wrap;
    flex-direction: column-reverse;
}

.sites li {
    display: flex;
    align-items: center;
    border-bottom: 1px solid rgba(54, 58, 62, 0.1);
}

.sites li:last-of-type {
    border-top: 1px solid rgba(54, 58, 62, 0.1);
}

.sites a {
    width: 100%;
    text-decoration: none;
    color: var(--dark-grey);
    padding: 20px 0;
    transition: all 0.25s ease, background 0.1s ease;
}

.sites a:hover {
    background: rgba(255, 255, 255, 0.5);
    padding-left: 20px;
}

.sites svg {
    width: 35px;
    height: auto;
    margin: 0 15px;
}

.sites .attribute {
    display: inline-block;
    margin: 0 0 0 30px;
    position: relative;
    font-size: 0.75em;
    z-index: 1; /* To get the backgroudn to show up */
}

.sites .attribute:before {
    content: "";
    position: absolute;
    top: 2px;
    left: 0px;
    bottom: 0px;
    right: 0px;
    z-index: -1; /* Pop the background behind the text */
    background-color: var(--yellow);
    transform: skewX(10deg) skewY(-2deg);
    margin: -8px -24px -16px -28px;
    margin: 0px -16px -8px -20px;
    border-radius: 12px;
    transition: all 0.2s ease;
}

/** Journal
---------------------------------------------------------*/
main.blog {
	background:  var(--bg-grey);
	background-image: url("https://www.joekotlan.com/wp-content/themes/main/assets/depth-map-bg.svg");
   background-size: 100% auto;
   background-repeat: repeat-y;
}

.blog-header {
    padding: 7vw 7vw 1vw;
    color: var(--dark-grey);
}

.blog-header h1 {
    margin: 0;
}

.blog-header p {
    max-width: 70ch;
    margin-bottom:  50px;
    padding-right:  50px;
}

.category {
    font-size: 0.75em;
    padding: 7px 14px;
    margin: 0 10px 0 0;
    text-transform: uppercase;
    display: inline-block;
    border-radius: 50px;
}

.posts a .category {
	color:  var(--white);
}

.date {
    font-size: 0.75em;
    padding: 5px 0;
    margin: 20px 0 0 0;
    text-transform: uppercase;
    display: inline-block;
    color: var(--grey);
    transition: color 0.25s ease;
}

/*
Hiding because I like the style of the category page better, this causes too many layout issues.
.journal {
	display:  grid;
	grid-template: repeat(auto-fit, minmax(50px, auto)) / 1fr 1fr 1fr;
	grid-gap:  20px;
} */

/** Old Category bar stuff
---------------------------------------------------------

.blog-header ul {
    list-style-type: none;
    padding: 0;
    margin: 0;
    display: flex;
    margin-top: 30px;
    text-transform: uppercase;
}

.blog-header ul ul {
    background: var(--white);
    border-radius: 50px;
    overflow: hidden;
    margin-top: 15px;
    visibility: hidden;
}

.blog-header ul ul li {
    font-size: 0.75em;
}

.blog-header ul ul li a {
    display: inline-block;
    padding: 15px 30px;
    color: var(--white);
    transition: all 0.25s ease-out;
}

.blog-header ul ul li a:hover {
    background: var(--white);
}

.blog-header ul ul li.cat-item-all a {
    color: var(--dark-grey);
}

.blog-header ul ul li.cat-item-all a:hover {
    background: var(--dark-grey);
    color: var(--white);
}

*/

.category.Design,
.cat-item-4,
.cat-item-4 a {
    background: var(--red);
}
.cat-item-4 a:hover {
    color: var(--red);
}
.category.Web.Dev,
.cat-item-3,
.cat-item-3 a {
    background: var(--blue);
}
.cat-item-3 a:hover {
    color: var(--blue);
}
.category.Book.Notes,
.cat-item-5,
.cat-item-5 a {
    background: var(--yellow);
}
.cat-item-5 a:hover {
    color: var(--yellow);
}
.category.Snippets,
.cat-item-6,
.cat-item-6 a {
    background: var(--green);
}
.cat-item-6 a:hover {
    color: var(--green);
}
.category.Ramblings,
.cat-item-9,
.cat-item-9 a {
    background: var(--orange);
}
.cat-item-9 a:hover {
    color: var(--orange);
}
.category.SwiftUI,
.cat-item-10,
.cat-item-10 a {
    background: var(--purple);
}
.cat-item-10 a:hover {
    color: var(--purple);
}

.categories {
	grid-column:  2 / span 2;
	grid-row:  1 / span 2;
	padding:  25px;
	background:  var(--white);
	display:  grid;
	grid-template:  1fr / repeat(auto-fit, minmax(100px, auto));
	grid-gap:  25px;
	align-items:  center;
	border-radius: var(--border-radius);
}

.categories h3 {
	font-size:  1.5em;
	text-align:  center;
}

.categories a {
	display:  flex;
	align-items: center;
	justify-content: center;
	position: relative;
}

.categories img {
	width:  100%;
	height:  auto;
	max-height: 9vw;
	object-fit: cover;
	border-radius: var(--border-radius);
}

.categories .overlay {
	position: absolute;
	height:  100%;
	width:  100%;
	border-radius: var(--border-radius);
	background:  rgba(0,0,0,0.6);
	transition: all 0.25s ease;
}

.categories a:hover .overlay {
	background:  rgba(0,0,0,0.4);
}

.categories h4 {
	color:  var(--white);
	position: absolute;
	left:  0;
	right:  0;
	margin:  0 15%;
	padding:  7px 14px;
	text-align:  center;
	line-height:  1.25em;
	border-radius: 16px;
	background:  transparent;
	transition: all 0.25s ease;
}

.categories a:nth-of-type(1):hover h4,
.categories.book-notes a:nth-of-type(1) h4 {
	background:  var(--yellow);
}

.categories a:nth-of-type(2):hover h4,
.categories.design a:nth-of-type(2) h4 {
	background:  var(--red);
}

.categories a:nth-of-type(3):hover h4,
.categories.snippets a:nth-of-type(3) h4 {
	background:  var(--green);
}

.categories a:nth-of-type(4):hover h4,
.categories.swiftui a:nth-of-type(4) h4 {
	background:  var(--purple);
}

.categories a:nth-of-type(5):hover h4,
.categories.web-dev a:nth-of-type(5) h4 {
	background:  var(--green);
}

.posts {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    grid-auto-rows: minmax(600px, auto);
    grid-auto-flow: dense;
    grid-gap: 40px;
    padding: 4vw 7vw;
}

.posts > a {
    margin: 0px;
    color: var(--dark-grey);
    text-decoration: none;
    background: var(--white);
    border: 0;
    box-sizing: border-box;
    font-weight: 700;
    position: relative;
    vertical-align: middle;
    transition: color 0.25s;
    box-shadow: var(--box-shadow);
}

.posts > a::before,
.posts > a::after {
    box-sizing: inherit;
    content: "";
    position: absolute;
    width: calc(100% + 8px);
    height: calc(100% + 8px);
    border: 4px solid transparent;
    width: 0;
    height: 0;
    top: -4px;
    left: -4px;
    z-index: 1; /* To show over post background */
}

.posts > a:hover::before {
    width: calc(100% + 8px);
    height: calc(100% + 8px);
    border-top-color: var(--red);
    border-right-color: var(--red);
    transition: width 0.4s ease, height 0.4s ease 0.4s;
    border-top-color: var(--red);
    border-right-color: var(--red);
}
.posts > a:hover::after {
    width: calc(100% + 8px);
    height: calc(100% + 8px);
    border-bottom-color: var(--red);
    border-left-color: var(--red);
    transition: border-color 0s ease 0.5s, width 0.25s ease 0.5s,
        height 0.25s ease 0.75s;
    border-bottom-color: var(--red);
    border-left-color: var(--red);
    transition: height 0.25s ease, width 0.25s ease 0.25s;
}

.posts > a:hover h2,
.posts > a:hover p,
.posts > a:hover h3 {
    color: var(--grey);
}

.posts > a:hover > div > div {
    transform: scale(1.1);
}

.posts > .double {
    grid-column: span 2;
}

.posts > a img {
    width: 100%;
    max-height: 20vw;
    object-fit: cover;
}

.posts > a > div {
    display: flex;
    align-items: center;
    position: relative;
    z-index: 1;
    overflow: hidden;
}

.posts > a > div > div {
    padding: 60px;
    background: var(--white);
    transition: transform 5s ease;
}

.posts h2 {
    margin: 20px 0;
    transition: color 0.25s ease;
}

.posts p {
    margin-bottom: 20px;
    color: var(--light-grey);
    transition: color 0.25s ease;
}

.wp-block-separator {
    width: 75%;
    border-width: 1px;
    border-style: solid;
    margin-top: 50px;
    margin-bottom: 50px;
    border-color: var(--light-grey);
}

/** Journal - Single
---------------------------------------------------------*/
.single {
    background: var(--white);
    background-image: url("https://www.joekotlan.com/wp-content/themes/main/assets/depth-map-bg.svg");
   background-size: 100% auto;
   background-repeat: repeat-y;
}

.single article {
	max-width: 60ch;
    margin: 0 auto;
    font-family: "Muli", sans-serif;
    margin: 0 auto 7vw;
    max-width: 60ch;
    font-size: 1.33em;
    background: var(--white);
    color: var(--dark-grey);
    padding:  0 25px;
}

.single h1 {
    font-size: 2em;
    color: var(--dark-grey);
    font-family: "Noto Sans JP", sans-serif;
    margin-top: 0;
    visibility: hidden;
}

.single .content .date {
    color: var(--grey);
    margin: 10px 20px 0 0;
    text-transform: initial;
    visibility: hidden;
}

.single .category {
    color: var(--white);
    font-family: "Noto Sans JP", sans-serif;
    font-size: 0.625em;
    margin-top: 0;
}

.feat-img {
    display: block;
    max-width: 100%;
    height: auto;
    margin-bottom: 40px;
}

.single .content h2 {
    font-size: 1.5em;
    margin-top: 1.5em;
    font-family: "Noto Sans JP", sans-serif;
}

.single .content h3 {
    font-size: 1.25em;
    line-height: 1.25em;
    margin-top: 1.5em;
    font-family: "Noto Sans JP", sans-serif;
}

.single .content h4 {
    font-size: 1em;
    margin-top: 1.5em;
    font-family: "Noto Sans JP", sans-serif;
    color: var(--grey);
}

.single .content h4.category {
    font-size: 0.625em;
    margin-top: 0;
    color: var(--white);
}

.single .content h5 {
    text-transform: uppercase;
}

.single .content h6 {
    color: var(--grey);
    text-transform: uppercase;
}

.single .content li {
    margin-bottom: 10px;
    line-height: 1.33em;
}

.single .content li ul {
    margin-top: 10px;
}

.single .content :not(pre) code {
    font-family: Hack, "Fira Code", Consolas, Menlo, Monaco, "Andale Mono",
        "Lucida Console", "Lucida Sans Typewriter", "DejaVu Sans Mono",
        "Bitstream Vera Sans Mono", "Liberation Mono", "Nimbus Mono L",
        "Courier New", Courier, monospace;
    font-size: 0.825em;
    line-height: 1.5;
    color: black;
    font-weight: bold;
    display: inline-block;
}

.wp-block-image img {
    height: auto;
}

.wp-block-image figcaption,
.wp-block-image figcaption code {
    text-align: center;
    font-size: 0.75em;
    color: var(--light-grey) !important;
}

.single figure {
    margin: 40px 0;
}

.single a,
.btn-inline,
.work-info a {
    font-family: "Muli", sans-serif;
    color: var(--white);
    position: relative;
    white-space: nowrap;
    z-index: 1;
    transition: all 0.25s ease;
}

.single a:before,
.btn-inline:before,
.work-info a:before {
    opacity: 0.6;
    margin: -3px -6px -6px -6px;
}

.single a:hover:before,
.btn-inline:hover:before,
.work-info a:hover:before {
    opacity: 0.95;
    transform: skewX(-20deg) skewY(-2deg);
    background-color: var(--red);
}

.single a.cat-link:before {
    content: none;
}

.single a.cat-link:hover {
    opacity: 0.5;
}

.single blockquote {
    padding: 25px 20px 1px;
    margin: 20px 0;
    border-radius: 7px;
    background: var(--bg-grey);
    position: relative;
    overflow: scroll;
}

.single blockquote::before {
    content: "NOTE";
    position: absolute;
    top: 15px;
    left: 20px;
    color: var(--red);
    font-size: 0.5em;
    text-transform: uppercase;
    font-weight: bold;
    font-family: "Noto Sans JP", sans-serif;
}

.single pre {
    padding: 50px 20px 20px;
    color: var(--white);
    font-size: 0.875em;
    font-weight: bold;
    border-radius: 7px;
    box-shadow: 0 0 20px rgba(182, 183, 176, 0.5);
    background-color: var(--dark-grey);
    background-image: url("https://www.joekotlan.com/wp-content/themes/main/assets/code-icons.svg");
    background-position: 20px 20px;
    background-repeat: no-repeat;
    background-size: 40px auto;
    white-space: pre-wrap;
}

.single p {
    line-height: 1.33em;
}

.single ol li {
    counter-increment: list;
    list-style-type: none;
    position: relative;
}

.single ol li:before {
    font-weight: bold;
    content: counter(list) ".";
    left: -32px;
    position: absolute;
    text-align: right;
    width: 26px;
}

.blog-post-ending {
    color: var(--grey);
    margin-top: 120px;
}

.blog-post-ending a {
    color: var(--blue);
    transition: all 0.25s ease;
}

.blog-post-ending a:hover {
    color: var(--red);
}

.blog-post-ending a:before {
    content: none;
}

.single .intro-block {
    display: grid;
    grid-template: 1fr / 1fr 1fr;
    align-items: center;
    margin-top: 100px;
    grid-gap: 20px;
}

.single .no-featured-image .intro-block {
    grid-template: 1fr / 1fr;
    grid-gap: 0;
}

.single table {
	width: 100%;
   border-collapse: separate;
   border-spacing: 5px;
}

.single table td {
	padding:  10px 15px;
	background: var(--bg-grey);
	border-radius:  7px;
}

/** Inspiration
---------------------------------------------------------*/
.inspiration-types {
    display: grid;
    grid-template: 1.75fr 1fr / repeat(8, 1fr);
    background: var(--bg-grey);
    background-image: url("https://www.joekotlan.com/wp-content/themes/main/assets/depth-map-bg.svg");
    background-size: 100% auto;
    background-repeat: repeat-y;
}

.inspiration-types h1 {
    display: none;
}

.inspiration-types article {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 3vw;
    grid-column: span 2;
    position: relative;
    margin: 25px;
    border-radius: var(--border-radius);
    box-shadow: var(--box-shadow);
}

.inspiration-types h2 {
    margin-bottom: 0;
}

.inspiration-types p {
    line-height: 1.25em;
    color: var(--white);
}

.inspiration-types a {
    color: var(--white);
    text-decoration: none;
    transition: opacity 0.25s ease, transform 5s ease;
}

.inspiration-types a:hover {
    opacity: 0.4;
    transform: scale(1.1);
}

.inspiration-types .swiftui a:hover {
	transform: scale(1.025);
}

.inspiration-types svg {
    width: 50px;
    height: auto;
}

article.boards {
    grid-column: 1 / 7;
    padding: 0;
    display: grid;
    grid-template: 2fr 1fr / 1fr 1fr;
    background-color: var(--white);
}

.boards h2 {
    font-size: 3em;
}

.boards p {
    color: var(--light-grey);
}

.boards a {
    color: var(--dark-grey);
    grid-column: 1;
    align-self: end;
    justify-self: center;
    padding: 20px;
}

.boards div {
    overflow: hidden;
}

.boards svg {
    width: 100%;
    height: auto;
}

article.inspiring-sites {
    grid-column: 7 / 9;
    padding: 7vw 3vw;
    background: var(--dark-grey);
}

.inspiring-sites p {
    color: var(--light-grey);
}

.inspiring-sites svg {
    width: calc(100% - 6vw);
    position: absolute;
    top: 80px;
}

article.design,
article.web-dev,
article.music {
    grid-row: 2;
    background: var(--red);
}

article.web-dev {
    background: var(--blue);
}

article.music {
    background: var(--green);
}

.articles {
    background: var(--yellow);
}

article.swiftui {
    grid-row: 3;
    grid-column: 1/-1;
    background: var(--purple);
}

@media (max-width: 1200px) {
h1 {
font-size: 2.5em;
}
}

@media (max-width: 961px) {
    /** General
	---------------------------------------------------------*/
    body {
        padding-left: 0;
    }

    .daily-sites {
        display: none;
    }

    .social-sidebar {
        top: 0;
        bottom: unset;
        right: 10px;
        left: unset;
        flex-direction: row;
        z-index: 4; /* To overlap top white bar */
    }

    .social-sidebar.front {
        display: none;
    }

    .social-sidebar a,
    .social-sidebar a:last-child {
        margin: 10px;
        display: flex;
    }

    h1,
    h2,
    h3,
    h4,
    h5,
    h6 {
        line-height: 1.25em;
    }

    h1 {
        font-size: 2em;
    }

    h2 {
        font-size: 1.5em;
    }

    /** Header
	---------------------------------------------------------*/
    .menu {
        display: initial;
        bottom: 100px;
        top: unset;
    }

    header nav {
        position: absolute;
        left: 0;
        height: 80vh;
        width: 100vw;
        background: var(--bg-grey);
        opacity: 0;
        z-index: -1;
        pointer-events: none;
    }

    header nav ul {
        position: fixed;
        bottom: 200px;
        width: 100%;
        margin: 0 50px 0 0;
        flex-direction: column-reverse;
        text-align: right;
    }

    header nav ul li a {
        color: var(--dark-grey);
        font-size: 2em;
        padding-right: 25px;
    }

    header nav ul li a:hover {
        background: initial;
        color: var(--red);
    }

    /** Footer
	---------------------------------------------------------*/
    footer {
        display: block;
        padding: 50px 35px 100px;
    }

    .footer-form p {
        font-size: 1.5em;
    }

    .footer-form ul li label {
        margin-bottom: 5px;
    }

    .footer-social {
        margin: 15vw 0 0;
    }

    .footer-social a {
        width: 25%;
    }

    .footer-social img {
        width: 50%;
        height: auto;
    }

    footer nav ul {
        width: 80%;
    }

    footer nav a {
        line-height: 1.25em;
    }

    /** Home Page
	---------------------------------------------------------*/
    .hero {
        width: 100vw;
    }
    .intro {
        height: calc(100vh - 40px);
        top: 0;
    }

    .intro img {
    	mix-blend-mode: normal;
    }

    .intro picture {
        width: 100%;
        height: 100%;
    }

    .intro picture img {
        margin-left: -25%;
    }

    .intro h1 {
        position: absolute;
        bottom: 15%;
        left: 0;
        right: 0;
        margin: 0 auto;
        width: calc(100% - 110px);
        font-size: 2.25em;
        background: rgba(255, 255, 255, 0.65);
        padding: 20px;
        border-radius: 30px;
        box-shadow: 0 0 40px rgba(0, 0, 0, 0.3);
    }

    #rotating-text {
        height: 100%;
        width: 100%;
        margin-left: auto;
        overflow: hidden;
        z-index: 1;
    }

    #rotating-text svg {
        right: -45px;
        top: -85px;
        left: unset;
    }

    .dribbble {
        right: 87px;
        top: 45px;
        left: unset;
        z-index: 2;
    }

    .latest {
        grid-template: repeat(auto-fit, minmax(100px, 1fr)) / 1fr;
        padding: 0 35px;
    }

    .latest h2 {
        grid-column: 1;
        font-size: 1.75em;
        margin: 50px 10px 0 10px;
        text-align: left;
    }

    .latest h3 {
        font-size: 1.75em;
    }

    .latest > p {
        padding: 0 10px;
        font-size: 1.25em;
        text-align: left;
    }

    .byDateDescription {
        display: none;
    }

    .latest > div {
        padding: 50px 35px;
        margin: 25px 0;
    }

    .latest-literature > a {
        margin: 50px 35px;
    }

    .bio {
        padding: 50px 35px;
        font-size: 1.25em;
    }

    .bio h2 {
        margin-top: 0;
        margin-bottom: 0.5em;
    }

    /** My Work
	---------------------------------------------------------*/
    .work {
        grid-template: 1fr / 1fr 1fr;
        grid-auto-rows: 200px;
        margin: 0 20px;
        grid-gap: 20px;
    }

    .work > div p {
        font-size: 1em;
        margin: 20px 40px 40px;
    }

    .badges img {
        height: 20px;
        width: 20px;
    }

    /** My Work - Single
	---------------------------------------------------------*/
    .work-info {
        width: 100%;
        height: initial;
        padding: 50px 35px;
        position: initial;
        overflow: auto;
    }

    .shots {
        width: 100%;
    }

    /** Journal
	---------------------------------------------------------*/
    .blog-header {
        padding: 50px 35px;
    }

    .blog-header ul ul {
        flex-wrap: wrap;
        border-radius: 0;
        background: none;
    }

    .blog-header ul ul li {
        display: flex;
        align-items: center;
        margin: 5px;
        border-radius: 50px;
    }

    .blog-header ul ul li.cat-item-all {
        background: var(--white);
    }

    .blog-header ul ul li a {
        padding: 12px;
        font-size: 0.825em;
        border-radius: 50px;
    }

    .posts {
        grid-template: 1fr / 1fr;
        padding: 50px 35px;
        grid-auto-rows: minmax(min-content, auto);
    }

    .posts > .double {
        grid-column: 1;
    }

    .posts > a > div > div {
        padding: 50px 35px;
    }

    .posts > a img {
    	max-height:  60vw;
    }

    .categories {
    	grid-template:  1fr / 1fr 1fr;
    	grid-column:  1;
    	grid-row:  3;
    }

    .categories h3 {
    	grid-column:  1 / -1;
    }

    .categories h4 {
    	margin:  0 10%;
    	padding:  10%;
    }

    .journal {
   	grid-template:  repeat(auto-fit, minmax(50px, auto)) / 1fr;
    }

    /** Journal - Single
	---------------------------------------------------------*/
    .single article {
        padding: 50px 12vw;
    }

    .single h1 {
        font-size: 1.5em;
    }

    .single .content .date {
        font-size: 0.625em;
    }

    .single .content h4.category {
        font-size: 0.5em;
    }

    .single p,
    .single ul,
    .single ol {
        font-size: 0.825em;
    }

    .blog-post-ending {
        margin-top: 60px;
    }

    .single .intro-block {
        margin-top: 0;
    }

    /** Inspiration
	---------------------------------------------------------*/
    .inspiration-types {
        display:  block;
        overflow: hidden;
    }

    .inspiration-types article {
        grid-column: 1;
        grid-template: 1fr / 1fr;
        padding: 50px 35px;
    }

    article.boards {
        grid-column: 1;
        padding: 0 35px 50px;
    }

    .boards div {
        grid-row: 1;
        display: flex;
        justify-content: flex-end;
        overflow: initial;
    }

    .boards svg {
        width: auto;
        height: 50vw;
        margin-right: -10vw;
    }

    .boards a {
        grid-row: 2;
    }

    .boards h2 {
        font-size: 2em;
    }

    article.inspiring-sites {
        grid-column: 1;
        grid-row: 2;
        padding: 50px 35px;
    }

    .inspiring-sites svg {
        width: 100%;
        position: initial;
    }

    .web-dev {
        grid-row: 3;
    }

    .design {
        grid-row: 4;
        text-align: right;
    }

    .music {
        grid-row: 5;
    }

    /** Inspiration - Boards
	---------------------------------------------------------*/
    .inspiration {
        grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
        grid-auto-rows: 150px;
        margin: 0;
    }

    /** Inspiration - Links
	---------------------------------------------------------*/
    .description {
        padding: 50px 35px;
        justify-content: flex-start;
    }

    .sites {
        grid-template: 1fr / 1fr;
    }

    .description h1 {
        margin-bottom: 0.5em;
    }
}

@media (max-width: 767px) {
    .single article {
        padding: 50px 35px;
    }

    .work {
        margin: 0 20px;
        grid-gap: 20px;
    }
}