@font-face{font-family:Inconsolata;font-style:normal;font-weight:200 900;font-stretch:100%;font-display:swap;src:url(/_next/static/media/d4fbdff1b926f9f7-s.woff2) format("woff2");unicode-range:u+0102-0103,u+0110-0111,u+0128-0129,u+0168-0169,u+01a0-01a1,u+01af-01b0,u+0300-0301,u+0303-0304,u+0308-0309,u+0323,u+0329,u+1ea0-1ef9,u+20ab}@font-face{font-family:Inconsolata;font-style:normal;font-weight:200 900;font-stretch:100%;font-display:swap;src:url(/_next/static/media/e1bfc245270dd1fc-s.woff2) format("woff2");unicode-range:u+0100-02ba,u+02bd-02c5,u+02c7-02cc,u+02ce-02d7,u+02dd-02ff,u+0304,u+0308,u+0329,u+1d00-1dbf,u+1e00-1e9f,u+1ef2-1eff,u+2020,u+20a0-20ab,u+20ad-20c0,u+2113,u+2c60-2c7f,u+a720-a7ff}@font-face{font-family:Inconsolata;font-style:normal;font-weight:200 900;font-stretch:100%;font-display:swap;src:url(/_next/static/media/d8c14dc5fcaf3a63-s.p.woff2) format("woff2");unicode-range:u+00??,u+0131,u+0152-0153,u+02bb-02bc,u+02c6,u+02da,u+02dc,u+0304,u+0308,u+0329,u+2000-206f,u+20ac,u+2122,u+2191,u+2193,u+2212,u+2215,u+feff,u+fffd}@font-face{font-family:Inconsolata Fallback;src:local("Arial");ascent-override:76.59%;descent-override:16.94%;line-gap-override:0.00%;size-adjust:112.16%}.__className_c86147{font-family:Inconsolata,Inconsolata Fallback,monospace;font-style:normal}.__variable_c86147{--font-inconsolata:"Inconsolata","Inconsolata Fallback",monospace}@font-face{font-family:Roboto;font-style:normal;font-weight:100 900;font-stretch:100%;font-display:swap;src:url(/_next/static/media/456105d6ea6d39e0-s.woff2) format("woff2");unicode-range:u+0460-052f,u+1c80-1c8a,u+20b4,u+2de0-2dff,u+a640-a69f,u+fe2e-fe2f}@font-face{font-family:Roboto;font-style:normal;font-weight:100 900;font-stretch:100%;font-display:swap;src:url(/_next/static/media/24c15609eaa28576-s.woff2) format("woff2");unicode-range:u+0301,u+0400-045f,u+0490-0491,u+04b0-04b1,u+2116}@font-face{font-family:Roboto;font-style:normal;font-weight:100 900;font-stretch:100%;font-display:swap;src:url(/_next/static/media/84602850c8fd81c3-s.woff2) format("woff2");unicode-range:u+1f??}@font-face{font-family:Roboto;font-style:normal;font-weight:100 900;font-stretch:100%;font-display:swap;src:url(/_next/static/media/63b255f18bea0ca9-s.woff2) format("woff2");unicode-range:u+0370-0377,u+037a-037f,u+0384-038a,u+038c,u+038e-03a1,u+03a3-03ff}@font-face{font-family:Roboto;font-style:normal;font-weight:100 900;font-stretch:100%;font-display:swap;src:url(/_next/static/media/70bd82ac89b4fa42-s.woff2) format("woff2");unicode-range:u+0302-0303,u+0305,u+0307-0308,u+0310,u+0312,u+0315,u+031a,u+0326-0327,u+032c,u+032f-0330,u+0332-0333,u+0338,u+033a,u+0346,u+034d,u+0391-03a1,u+03a3-03a9,u+03b1-03c9,u+03d1,u+03d5-03d6,u+03f0-03f1,u+03f4-03f5,u+2016-2017,u+2034-2038,u+203c,u+2040,u+2043,u+2047,u+2050,u+2057,u+205f,u+2070-2071,u+2074-208e,u+2090-209c,u+20d0-20dc,u+20e1,u+20e5-20ef,u+2100-2112,u+2114-2115,u+2117-2121,u+2123-214f,u+2190,u+2192,u+2194-21ae,u+21b0-21e5,u+21f1-21f2,u+21f4-2211,u+2213-2214,u+2216-22ff,u+2308-230b,u+2310,u+2319,u+231c-2321,u+2336-237a,u+237c,u+2395,u+239b-23b7,u+23d0,u+23dc-23e1,u+2474-2475,u+25af,u+25b3,u+25b7,u+25bd,u+25c1,u+25ca,u+25cc,u+25fb,u+266d-266f,u+27c0-27ff,u+2900-2aff,u+2b0e-2b11,u+2b30-2b4c,u+2bfe,u+3030,u+ff5b,u+ff5d,u+1d400-1d7ff,u+1ee??}@font-face{font-family:Roboto;font-style:normal;font-weight:100 900;font-stretch:100%;font-display:swap;src:url(/_next/static/media/627d916fd739a539-s.woff2) format("woff2");unicode-range:u+0001-000c,u+000e-001f,u+007f-009f,u+20dd-20e0,u+20e2-20e4,u+2150-218f,u+2190,u+2192,u+2194-2199,u+21af,u+21e6-21f0,u+21f3,u+2218-2219,u+2299,u+22c4-22c6,u+2300-243f,u+2440-244a,u+2460-24ff,u+25a0-27bf,u+28??,u+2921-2922,u+2981,u+29bf,u+29eb,u+2b??,u+4dc0-4dff,u+fff9-fffb,u+10140-1018e,u+10190-1019c,u+101a0,u+101d0-101fd,u+102e0-102fb,u+10e60-10e7e,u+1d2c0-1d2d3,u+1d2e0-1d37f,u+1f0??,u+1f100-1f1ad,u+1f1e6-1f1ff,u+1f30d-1f30f,u+1f315,u+1f31c,u+1f31e,u+1f320-1f32c,u+1f336,u+1f378,u+1f37d,u+1f382,u+1f393-1f39f,u+1f3a7-1f3a8,u+1f3ac-1f3af,u+1f3c2,u+1f3c4-1f3c6,u+1f3ca-1f3ce,u+1f3d4-1f3e0,u+1f3ed,u+1f3f1-1f3f3,u+1f3f5-1f3f7,u+1f408,u+1f415,u+1f41f,u+1f426,u+1f43f,u+1f441-1f442,u+1f444,u+1f446-1f449,u+1f44c-1f44e,u+1f453,u+1f46a,u+1f47d,u+1f4a3,u+1f4b0,u+1f4b3,u+1f4b9,u+1f4bb,u+1f4bf,u+1f4c8-1f4cb,u+1f4d6,u+1f4da,u+1f4df,u+1f4e3-1f4e6,u+1f4ea-1f4ed,u+1f4f7,u+1f4f9-1f4fb,u+1f4fd-1f4fe,u+1f503,u+1f507-1f50b,u+1f50d,u+1f512-1f513,u+1f53e-1f54a,u+1f54f-1f5fa,u+1f610,u+1f650-1f67f,u+1f687,u+1f68d,u+1f691,u+1f694,u+1f698,u+1f6ad,u+1f6b2,u+1f6b9-1f6ba,u+1f6bc,u+1f6c6-1f6cf,u+1f6d3-1f6d7,u+1f6e0-1f6ea,u+1f6f0-1f6f3,u+1f6f7-1f6fc,u+1f7??,u+1f800-1f80b,u+1f810-1f847,u+1f850-1f859,u+1f860-1f887,u+1f890-1f8ad,u+1f8b0-1f8bb,u+1f8c0-1f8c1,u+1f900-1f90b,u+1f93b,u+1f946,u+1f984,u+1f996,u+1f9e9,u+1fa00-1fa6f,u+1fa70-1fa7c,u+1fa80-1fa89,u+1fa8f-1fac6,u+1face-1fadc,u+1fadf-1fae9,u+1faf0-1faf8,u+1fb??}@font-face{font-family:Roboto;font-style:normal;font-weight:100 900;font-stretch:100%;font-display:swap;src:url(/_next/static/media/4f77bef990aad698-s.woff2) format("woff2");unicode-range:u+0102-0103,u+0110-0111,u+0128-0129,u+0168-0169,u+01a0-01a1,u+01af-01b0,u+0300-0301,u+0303-0304,u+0308-0309,u+0323,u+0329,u+1ea0-1ef9,u+20ab}@font-face{font-family:Roboto;font-style:normal;font-weight:100 900;font-stretch:100%;font-display:swap;src:url(/_next/static/media/2c07349e02a7b712-s.woff2) format("woff2");unicode-range:u+0100-02ba,u+02bd-02c5,u+02c7-02cc,u+02ce-02d7,u+02dd-02ff,u+0304,u+0308,u+0329,u+1d00-1dbf,u+1e00-1e9f,u+1ef2-1eff,u+2020,u+20a0-20ab,u+20ad-20c0,u+2113,u+2c60-2c7f,u+a720-a7ff}@font-face{font-family:Roboto;font-style:normal;font-weight:100 900;font-stretch:100%;font-display:swap;src:url(/_next/static/media/47cbc4e2adbc5db9-s.p.woff2) format("woff2");unicode-range:u+00??,u+0131,u+0152-0153,u+02bb-02bc,u+02c6,u+02da,u+02dc,u+0304,u+0308,u+0329,u+2000-206f,u+20ac,u+2122,u+2191,u+2193,u+2212,u+2215,u+feff,u+fffd}@font-face{font-family:Roboto Fallback;src:local("Arial");ascent-override:92.98%;descent-override:24.47%;line-gap-override:0.00%;size-adjust:99.78%}.__className_15be99{font-family:Roboto,Roboto Fallback,sans-serif;font-style:normal}.__variable_15be99{--font-roboto:"Roboto","Roboto Fallback",sans-serif}@font-face{font-family:Press Start\ 2P;font-style:normal;font-weight:400;font-display:swap;src:url(/_next/static/media/dbbdd2d89d2ef0ef-s.woff2) format("woff2");unicode-range:u+0460-052f,u+1c80-1c8a,u+20b4,u+2de0-2dff,u+a640-a69f,u+fe2e-fe2f}@font-face{font-family:Press Start\ 2P;font-style:normal;font-weight:400;font-display:swap;src:url(/_next/static/media/a06229eb79a83cfc-s.woff2) format("woff2");unicode-range:u+0301,u+0400-045f,u+0490-0491,u+04b0-04b1,u+2116}@font-face{font-family:Press Start\ 2P;font-style:normal;font-weight:400;font-display:swap;src:url(/_next/static/media/c9e224327ce7933e-s.woff2) format("woff2");unicode-range:u+0370-0377,u+037a-037f,u+0384-038a,u+038c,u+038e-03a1,u+03a3-03ff}@font-face{font-family:Press Start\ 2P;font-style:normal;font-weight:400;font-display:swap;src:url(/_next/static/media/d85064eaed4b8683-s.woff2) format("woff2");unicode-range:u+0100-02ba,u+02bd-02c5,u+02c7-02cc,u+02ce-02d7,u+02dd-02ff,u+0304,u+0308,u+0329,u+1d00-1dbf,u+1e00-1e9f,u+1ef2-1eff,u+2020,u+20a0-20ab,u+20ad-20c0,u+2113,u+2c60-2c7f,u+a720-a7ff}@font-face{font-family:Press Start\ 2P;font-style:normal;font-weight:400;font-display:swap;src:url(/_next/static/media/db234bd00cda6a96-s.p.woff2) format("woff2");unicode-range:u+00??,u+0131,u+0152-0153,u+02bb-02bc,u+02c6,u+02da,u+02dc,u+0304,u+0308,u+0329,u+2000-206f,u+20ac,u+2122,u+2191,u+2193,u+2212,u+2215,u+feff,u+fffd}@font-face{font-family:Press Start\ 2P Fallback;src:local("Arial");ascent-override:44.58%;descent-override:0.00%;line-gap-override:0.00%;size-adjust:224.32%}.__className_6d0c14{font-family:Press Start\ 2P,Press Start\ 2P Fallback,cursive;font-weight:400;font-style:normal}.__variable_6d0c14{--game-font:"Press Start 2P","Press Start 2P Fallback",cursive}@font-face{font-family:Shojumaru;font-style:normal;font-weight:400;font-display:swap;src:url(/_next/static/media/911d421484d6c16e-s.woff2) format("woff2");unicode-range:u+0100-02ba,u+02bd-02c5,u+02c7-02cc,u+02ce-02d7,u+02dd-02ff,u+0304,u+0308,u+0329,u+1d00-1dbf,u+1e00-1e9f,u+1ef2-1eff,u+2020,u+20a0-20ab,u+20ad-20c0,u+2113,u+2c60-2c7f,u+a720-a7ff}@font-face{font-family:Shojumaru;font-style:normal;font-weight:400;font-display:swap;src:url(/_next/static/media/781d017190d9e45a-s.p.woff2) format("woff2");unicode-range:u+00??,u+0131,u+0152-0153,u+02bb-02bc,u+02c6,u+02da,u+02dc,u+0304,u+0308,u+0329,u+2000-206f,u+20ac,u+2122,u+2191,u+2193,u+2212,u+2215,u+feff,u+fffd}@font-face{font-family:Shojumaru Fallback;src:local("Arial");ascent-override:64.65%;descent-override:22.15%;line-gap-override:0.00%;size-adjust:152.57%}.__className_006460{font-family:Shojumaru,Shojumaru Fallback,sans-serif;font-weight:400;font-style:normal}.__variable_006460{--font-shojumaru:"Shojumaru","Shojumaru Fallback",sans-serif}body{margin:0;padding:0;font-family:var(--font-inconsolata);background-color:var(--headline-section-bg-color)}:root{--main-color:rgb(171,178,190);--main-bg-color:rgb(41,45,52);--main-bg-color-light:rgb(67,74,86);--main-bg-color-lighter:rgb(101,111,129);--main-bg-color-lightest:rgb(141,149,165);--string-declaration-color:rgb(153,194,124);--contact-form-gray:rgb(158,158,158);--default-main-color:rgb(171,178,190);--default-main-bg-color:rgb(41,45,52);--main-console-color:rgb(171,178,190);--main-console-bg-color:rgb(41,45,52);--headline-section-bg-color:#0e1116;--about-section-bg-color:#253237;--experience-section-bg-color:#5c6b73;--skills-section-bg-color:#79858c;--contact-section-bg-color:#e0fbfc}.app-wrapper{width:100%;min-height:100vh;display:flex;flex-direction:column}.no-select{-webkit-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;user-select:none}.app-wrapper>.welcome-page{display:none}@media only screen and (min-width:64rem){body{overflow:hidden;background-color:unset}.app-wrapper>.welcome-page{display:flex}.app-wrapper>.mobile-home-page{display:none}}.plain-text,.string-declaration{display:inline-block;max-width:70%;text-align:justify}.plain-text{color:var(--main-console-color)}.plain-text.custom{line-height:20px}.plain-text a{color:var(--main-console-color)}.plain-text svg{fill:var(--main-console-color)}.string-declaration{line-height:20px;color:var(--string-declaration-color)}.highlighted-text{color:var(--main-console-bg-color);background-color:var(--main-console-color);padding:0 4px;margin:0 8px}.option-description{width:50%;min-width:650px;display:flex;justify-content:space-between}.option-description .plain-text{flex:.4 1}.option-description .plain-text:last-child{flex:1 1;max-width:100%}.editor.line{display:block;font-weight:700}.editor>.word{color:#000}.editor>.type{color:#d0996a}.editor>.string{color:var(--string-declaration-color)}.editor>.dynamic{color:#ff5370}.editor>.keyword{color:#c57bdb}.editor>.function{color:#65ade1}.editor>.tab{width:32px;display:inline-block}.icon-tiny{height:12px}.icon-sm{height:18px}.icon-md{height:24px}.icon-lg{height:30px}.icon-xl{height:36px}.icon-xxl{height:42px}.icon-xxxl{height:48px}.experience-diagram.animate .time-line{stroke-dashoffset:0}.experience-diagram.animate .fifth-milestone text,.experience-diagram.animate .first-milestone text,.experience-diagram.animate .fourth-milestone text,.experience-diagram.animate .second-milestone text,.experience-diagram.animate .seventh-milestone text,.experience-diagram.animate .sixth-milestone text,.experience-diagram.animate .third-milestone text{opacity:1}.experience-diagram.animate .fifth-milestone line,.experience-diagram.animate .first-milestone line,.experience-diagram.animate .fourth-milestone line,.experience-diagram.animate .second-milestone line,.experience-diagram.animate .seventh-milestone line,.experience-diagram.animate .sixth-milestone line,.experience-diagram.animate .third-milestone line{stroke-dashoffset:0}.experience-diagram .time-line{stroke-width:2;stroke:var(--main-color);stroke-dasharray:1000;stroke-dashoffset:1000;transition:3s linear}.experience-diagram .fifth-milestone text,.experience-diagram .first-milestone text,.experience-diagram .fourth-milestone text,.experience-diagram .second-milestone text,.experience-diagram .seventh-milestone text,.experience-diagram .sixth-milestone text,.experience-diagram .third-milestone text{opacity:0;transition:1s}.experience-diagram .fifth-milestone line,.experience-diagram .first-milestone line,.experience-diagram .fourth-milestone line,.experience-diagram .second-milestone line,.experience-diagram .seventh-milestone line,.experience-diagram .sixth-milestone line,.experience-diagram .third-milestone line{stroke-width:2;stroke:var(--main-color);stroke-dasharray:100;stroke-dashoffset:100;transition:1.5s}.experience-diagram .fifth-milestone circle,.experience-diagram .first-milestone circle,.experience-diagram .fourth-milestone circle,.experience-diagram .second-milestone circle,.experience-diagram .seventh-milestone circle,.experience-diagram .sixth-milestone circle,.experience-diagram .third-milestone circle{stroke-width:2;stroke:var(--main-color);fill:none;fill-opacity:0}.experience-diagram .first-milestone text{transition-delay:1s}.experience-diagram .first-milestone line{transition-delay:.75s}.experience-diagram .second-milestone text{transition-delay:1.25s}.experience-diagram .second-milestone line{transition-delay:1s}.experience-diagram .third-milestone text{transition-delay:1.5s}.experience-diagram .third-milestone line{transition-delay:1.25s}.experience-diagram .fourth-milestone text{transition-delay:1.75s}.experience-diagram .fourth-milestone line{transition-delay:1.5s}.experience-diagram .fifth-milestone text{transition-delay:2s}.experience-diagram .fifth-milestone line{transition-delay:1.75s}.experience-diagram .sixth-milestone text{transition-delay:2.25s}.experience-diagram .sixth-milestone line{transition-delay:2s}.experience-diagram .seventh-milestone text{transition-delay:2.5s}.experience-diagram .seventh-milestone line{transition-delay:2.25s}svg.full-circle circle{fill:var(--main-color)}svg.half-circle{transform:rotate(90deg)}svg.half-circle path{fill:var(--main-color)}svg.empty-circle circle,svg.full-rect rect,svg.half-circle circle{stroke:var(--main-color);stroke-width:8}svg.full-rect rect,svg.half-rect path{fill:var(--main-color)}svg.empty-rect rect,svg.half-rect rect{stroke:var(--main-color);stroke-width:8}.arrow-right{transform:rotate(90deg)}.arrow-down{transform:rotate(180deg)}.arrow-left{transform:rotate(270deg)}.colorful-spinner{width:100%;height:100%;animation:animateColorfulSpinner .5s linear infinite}@keyframes animateColorfulSpinner{0%{transform:rotate(0)}to{transform:rotate(540deg)}}.material-input{position:relative;margin-bottom:35px;font-family:var(--font-roboto)}.material-input:after{content:"";width:calc(100% + 15px);height:1px;position:absolute;left:0;bottom:0;background-color:#d3d3d3;z-index:1}.material-input input{width:300px;padding:10px 10px 10px 5px;display:block;border:none;font-size:16px;color:rgba(0,0,0,.8);outline:none;font-family:var(--font-roboto)}.material-input label{position:absolute;left:5px;top:20px;transition:all .2s ease;color:#d3d3d3;font-size:16px;font-weight:400;pointer-events:none}.material-input input.not-empty:invalid~label,.material-input input.not-empty:valid~label,.material-input input:focus~label{top:-10px;font-size:14px}.material-input input.not-empty:invalid~label{color:#ff5c33}.material-input input.not-empty:invalid~.error-icon{display:inline}.material-input input.not-empty:focus:valid~label,.material-input input.not-empty:valid~label,.material-input input:focus~label{color:#1ac6ff}.material-input input.not-empty:focus:valid~.bar:after,.material-input input.not-empty:focus:valid~.bar:before,.material-input input.not-empty:valid~.bar:after,.material-input input.not-empty:valid~.bar:before,.material-input input:focus~.bar:after,.material-input input:focus~.bar:before{background-color:#1ac6ff}.material-input input.not-empty:focus:valid~.error-icon,.material-input input.not-empty:valid~.error-icon,.material-input input:focus~.error-icon{display:none}.material-input input:focus.is-invalid~label,.material-input input:valid.is-invalid~label{color:#ff5c33}.material-input input:focus.is-invalid~.bar:after,.material-input input:focus.is-invalid~.bar:before,.material-input input:valid.is-invalid~.bar:after,.material-input input:valid.is-invalid~.bar:before{background-color:#ff5c33}.material-input input:focus.is-invalid~.error-icon,.material-input input:valid.is-invalid~.error-icon{display:inline}.material-input .bar{width:300px;display:block;position:relative;top:1px;z-index:2}.material-input .bar:after,.material-input .bar:before{content:"";width:0;height:2px;position:absolute;bottom:1px;background-color:#1ac6ff;transition:all .2s ease}.material-input .bar:before{left:calc(50% + 5px)}.material-input .bar:after{right:calc(50% - 10px)}.material-input input:focus~.bar:after,.material-input input:focus~.bar:before{width:calc(50% + 10px)}.material-input input.not-empty:invalid~.bar:after,.material-input input.not-empty:invalid~.bar:before{width:calc(50% + 10px);background-color:#ff5c33}.material-input .highlight{width:100px;height:60%;position:absolute;top:25%;left:0;pointer-events:none;opacity:.5}.material-input input:focus~.highlight{animation:inputHighlighter .3s ease}.material-input .error-message{position:absolute;bottom:-20px;font-size:14px;display:flex;align-items:center;justify-content:center;color:#ff5c33;height:20px}.material-input .error-message>svg{margin-right:8px;fill:#ff5c33}.material-textarea{position:relative;margin-top:10px;margin-bottom:35px;font-family:var(--font-roboto)}.material-textarea:after{content:"";width:calc(100% + 15px);height:1px;position:absolute;left:0;bottom:0;background-color:#d3d3d3;z-index:1}.material-textarea textarea{width:300px;margin-top:5px;padding:10px 10px 10px 5px;display:block;border:none;font-size:16px;font-family:var(--font-roboto);color:rgba(0,0,0,.8);outline:none;resize:none}.material-textarea textarea:focus{outline:none}.material-textarea label{position:absolute;left:5px;top:20px;transition:all .2s ease;color:#d3d3d3;font-size:16px;font-weight:400;pointer-events:none}.material-textarea textarea.not-empty:invalid~label,.material-textarea textarea.not-empty:valid~label,.material-textarea textarea:focus~label{top:-14px;font-size:14px}.material-textarea textarea.not-empty:invalid~label{color:#ff5c33}.material-textarea textarea.not-empty:invalid~.error-icon{display:inline}.material-textarea textarea.not-empty:focus:valid~label,.material-textarea textarea.not-empty:valid~label,.material-textarea textarea:focus~label{color:#1ac6ff}.material-textarea textarea.not-empty:focus:valid~.bar:after,.material-textarea textarea.not-empty:focus:valid~.bar:before,.material-textarea textarea.not-empty:valid~.bar:after,.material-textarea textarea.not-empty:valid~.bar:before,.material-textarea textarea:focus~.bar:after,.material-textarea textarea:focus~.bar:before{background-color:#1ac6ff}.material-textarea textarea.not-empty:focus:valid~.error-icon,.material-textarea textarea.not-empty:valid~.error-icon,.material-textarea textarea:focus~.error-icon{display:none}.material-textarea textarea:focus.is-invalid~label,.material-textarea textarea:valid.is-invalid~label{color:#ff5c33}.material-textarea textarea:focus.is-invalid~.bar:after,.material-textarea textarea:focus.is-invalid~.bar:before,.material-textarea textarea:valid.is-invalid~.bar:after,.material-textarea textarea:valid.is-invalid~.bar:before{background-color:#ff5c33}.material-textarea textarea:focus.is-invalid~.error-icon,.material-textarea textarea:valid.is-invalid~.error-icon{display:inline}.material-textarea .bar{width:300px;display:block;position:relative;top:1px;z-index:2}.material-textarea .bar:after,.material-textarea .bar:before{content:"";width:0;height:2px;position:absolute;bottom:1px;background-color:#1ac6ff;transition:all .2s ease}.material-textarea .bar:before{left:calc(50% + 5px)}.material-textarea .bar:after{right:calc(50% - 10px)}.material-textarea textarea:focus~.bar:after,.material-textarea textarea:focus~.bar:before{width:calc(50% + 10px)}.material-textarea textarea.not-empty:invalid~.bar:after,.material-textarea textarea.not-empty:invalid~.bar:before{width:calc(50% + 10px);background-color:#ff5c33}.material-textarea .highlight{width:100px;height:60%;position:absolute;top:25%;left:0;pointer-events:none;opacity:.5}.material-textarea textarea:focus~.highlight{animation:inputHighlighter .3s ease}@keyframes inputHighlighter{0%{background:rgba(0,0,0,0)}to{width:0;background:rgba(0,0,0,0)}}.material-textarea .error-message{position:absolute;bottom:-20px;font-size:14px;display:flex;align-items:center;justify-content:center;color:#ff5c33;height:20px}.material-textarea .error-message>svg{margin-right:8px;fill:#ff5c33}.radio-button{display:flex;align-items:center;cursor:pointer}.radio-button.selected div:after{content:"";width:10px;height:10px;border-radius:100%;background-color:#000}.radio-button div{width:18px;height:18px;display:flex;align-items:center;justify-content:center;border-radius:100%;border:1px solid #000}.radio-button span{margin-left:12px}.welcome-page{width:100vw;height:100vh;position:relative;display:flex;align-items:center;justify-content:center;overflow:hidden}.welcome-page.zoom-in{background-color:var(--main-bg-color)}.welcome-page.zoom-in .inner{animation:zoomIn 1.5s linear}.welcome-page.zoom-out{background-color:var(--main-bg-color)}.welcome-page.zoom-out .inner{transform:scale(0)}.welcome-page.slice-out .inner .up{left:100%}.welcome-page.slice-out .inner .down{left:-100%}.welcome-page.slice-in .inner .up{animation:sliceInTop 1.5s linear}.welcome-page.slice-in .inner .down{animation:sliceInBottom 1.5s linear}.welcome-page .inner{width:100vw;height:100vh;position:relative;transition:1s;transform:scale(1)}.welcome-page .inner .down,.welcome-page .inner .up{width:100%;height:50%;position:absolute;left:0;transition:1.5s;background-color:var(--main-bg-color);z-index:4}.welcome-page .inner .up{top:0}.welcome-page .inner .down{top:50%}.welcome-page .inner .blue-pill,.welcome-page .inner .red-pill{width:140px;height:60px;position:absolute;transition:1s;cursor:pointer}.welcome-page .inner .blue-pill:hover .pill,.welcome-page .inner .red-pill:hover .pill{top:-50px}.welcome-page .inner .blue-pill:hover .shadow,.welcome-page .inner .red-pill:hover .shadow{top:-50px;box-shadow:0 60px 5px 0 rgba(0,0,0,.75)}.welcome-page .inner .blue-pill:hover .shadow:after,.welcome-page .inner .red-pill:hover .shadow:after{top:75px}.welcome-page .inner .blue-pill .pill,.welcome-page .inner .blue-pill .shadow,.welcome-page .inner .red-pill .pill,.welcome-page .inner .red-pill .shadow{width:100%;height:100%;position:absolute;top:0;border-radius:40px;transition:1s}.welcome-page .inner .blue-pill .pill,.welcome-page .inner .red-pill .pill{z-index:2;box-shadow:inset 0 -6px 5px 0 rgba(0,0,0,.45)}.welcome-page .inner .blue-pill .pill:after,.welcome-page .inner .red-pill .pill:after{content:"";width:80%;height:33%;position:absolute;left:calc(50% - 55px);top:8px;border-radius:18px;background-color:hsla(0,0%,100%,.6)}.welcome-page .inner .blue-pill .pill:before,.welcome-page .inner .red-pill .pill:before{content:"";width:2px;height:100%;position:absolute;left:calc(50% - 1px);top:0;z-index:1}.welcome-page .inner .blue-pill .shadow,.welcome-page .inner .red-pill .shadow{z-index:1;box-shadow:0 10px 5px 0 rgba(0,0,0,.75)}.welcome-page .inner .blue-pill .shadow:after,.welcome-page .inner .red-pill .shadow:after{width:100%;height:30px;position:absolute;top:0;line-height:30px;text-align:center;font-size:14px;font-family:var(--font-shojumaru);color:#d3d3d3;transition:1s}.welcome-page .inner .blue-pill{top:55%;left:60%}.welcome-page .inner .blue-pill .pill,.welcome-page .inner .blue-pill .shadow{transform:rotate(30deg)}.welcome-page .inner .blue-pill .shadow:after{content:"Reality"}.welcome-page .inner .blue-pill .pill{background-color:#39f}.welcome-page .inner .blue-pill .pill:before{background-color:#06c}.welcome-page .inner .red-pill{top:20%;left:30%}.welcome-page .inner .red-pill .pill,.welcome-page .inner .red-pill .shadow{transform:rotate(-20deg)}.welcome-page .inner .red-pill .shadow:after{content:"Wonderland"}.welcome-page .inner .red-pill .pill{background-color:#f66}.welcome-page .inner .red-pill .pill:before{background-color:#b30000}.welcome-page .inner .mock-background{width:100vw;height:100vh;position:relative;z-index:3}.welcome-page .inner .mock-background:after,.welcome-page .inner .mock-background:before{content:"";width:100vw;height:100vh;position:absolute;top:0;left:0}.welcome-page .inner .mock-background:before{-webkit-clip-path:polygon(0 0,100% 0,100% calc(100% - 30vh),0 100%);clip-path:polygon(0 0,100% 0,100% calc(100% - 30vh),0 100%);background-color:#0e1116;z-index:2}.welcome-page .inner .mock-background:after{background-color:#253237;z-index:1}@keyframes zoomIn{0%{transform:scale(0)}to{transform:scale(1)}}@keyframes sliceInTop{0%{left:100%;opacity:0}to{left:0;opacity:1}}@keyframes sliceInBottom{0%{left:-100%;opacity:0}to{left:0;opacity:1}}.not-found-page{width:100vw;height:100vh;display:flex;align-items:center;justify-content:center;flex-direction:column;color:var(--main-color);background-color:var(--main-bg-color)}.not-found-page>.header{margin-bottom:20px;display:block;font-size:42px}.not-found-page>.message{display:block;font-size:18px}.not-found-page>.dunno{font-size:52px;margin-bottom:40px}.not-found-page>.exit{display:flex;align-items:center;justify-content:center;margin-top:150px;cursor:pointer}.not-found-page>.exit svg{margin-right:14px;fill:var(--main-color)}.not-found-page>.exit .text{height:24px;line-height:24px}.portfolio2.about .logo,.portfolio2.headline .logo{color:var(--main-color)}.portfolio2.about>.menu>.menu-item .text-wrapper:after,.portfolio2.about>.menu>.menu-item .text-wrapper:before,.portfolio2.headline>.menu>.menu-item .text-wrapper:after,.portfolio2.headline>.menu>.menu-item .text-wrapper:before{background-color:var(--main-color)}.portfolio2.about>.menu>.menu-item .text-wrapper .text,.portfolio2.headline>.menu>.menu-item .text-wrapper .text{color:var(--main-color)}.portfolio2.about>.menu>.menu-item .symbol,.portfolio2.headline>.menu>.menu-item .symbol{background-color:var(--main-color)}.portfolio2.about .wheel,.portfolio2.headline .wheel{border-color:var(--main-color)}.portfolio2.about .action-button .button,.portfolio2.about .wheel:after,.portfolio2.headline .action-button .button,.portfolio2.headline .wheel:after{background-color:var(--main-color)}.portfolio2.about .action-button .button:after,.portfolio2.headline .action-button .button:after,.portfolio2>.logo{color:var(--main-bg-color)}.portfolio2>.logo{position:fixed;top:50px;left:50px;font-size:34px;font-weight:700;text-decoration:none;z-index:10;transition:color 1s}.portfolio2>.logo:before{content:"<";margin-right:4px;font-size:28px}.portfolio2>.logo:after{content:"/>";margin-left:4px;font-size:28px}.portfolio2 #about,.portfolio2 #contact,.portfolio2 #experience,.portfolio2 #fun,.portfolio2 #headline,.portfolio2 #skills{height:100vh;position:relative}.portfolio2 .wheel{width:20px;height:40px;position:fixed;bottom:10px;left:calc(50% - 11px);border:2px solid var(--main-bg-color);border-radius:12px;transition:border-color 1s;z-index:4;cursor:pointer}.portfolio2 .wheel:after{content:"";width:14px;height:14px;position:absolute;top:4px;left:calc(50% - 7px);border-radius:100%;background-color:var(--main-bg-color);animation:animateScrolling 1.5s infinite;transition:background-color 1s}@keyframes animateScrolling{0%{top:4px}20%{top:22px}to{top:4px}}.portfolio2>#about{display:flex;align-items:center;justify-content:center;color:var(--main-color);background-color:var(--about-section-bg-color);z-index:1}.portfolio2>#about>.inner{width:50%;font-size:17px;line-height:22px}.portfolio2>#about>.inner p{margin-bottom:30px}.portfolio2>#about>.inner p:last-of-type{margin-bottom:0}.portfolio2>#about>.inner>p::selection,.portfolio2>#about>.inner>p>a::selection,.portfolio2>#about>.inner>p>span::selection{color:#000;background-color:var(--main-color)}.portfolio2>#about>.inner>p>a{color:var(--main-color)}.portfolio2>.action-button{width:50px;height:50px;position:fixed;right:50px;bottom:50px;z-index:10}.portfolio2>.action-button.toggled .button{transform:rotate(135deg)}.portfolio2>.action-button.toggled .console{transform:rotate(90deg) translate(-90px)}.portfolio2>.action-button.toggled .console svg{transform:rotate(-90deg)}.portfolio2>.action-button.toggled .cv{transform:rotate(56.25deg) translate(-90px)}.portfolio2>.action-button.toggled .cv svg{transform:rotate(-56.25deg)}.portfolio2>.action-button.toggled .other{transform:rotate(22.5deg) translate(-90px)}.portfolio2>.action-button.toggled .other svg{transform:rotate(-22.5deg)}.portfolio2>.action-button.toggled .exit{transform:rotate(-11.25deg) translate(-90px)}.portfolio2>.action-button.toggled .exit svg{transform:rotate(11.25deg)}.portfolio2>.action-button .button{width:50px;height:50px;position:absolute;text-align:center;line-height:50px;border-radius:100%;background-color:var(--main-bg-color);transition:background-color 1s,transform .4s;z-index:2;cursor:pointer}.portfolio2>.action-button .button:after{content:"+";font-size:48px;color:var(--main-color);transition:color 1s}.portfolio2>.action-button .console,.portfolio2>.action-button .cv,.portfolio2>.action-button .exit,.portfolio2>.action-button .other{width:40px;height:40px;position:absolute;top:5px;left:5px;display:flex;align-items:center;justify-content:center;border-radius:100%;transition:transform .5s;cursor:pointer}.portfolio2>.action-button .console svg,.portfolio2>.action-button .cv svg,.portfolio2>.action-button .exit svg,.portfolio2>.action-button .other svg{fill:var(--main-bg-color)}.portfolio2>.action-button .console{background-color:#4285f4}.portfolio2>.action-button .other{background-color:#f4b400}.portfolio2>.action-button .cv{background-color:#0f9d58}.portfolio2>.action-button .exit{background-color:#db4437}.portfolio2>#contact{display:flex;align-items:center;justify-content:center;flex-direction:column;background-color:#e0fbfc}.portfolio2>#contact .contact-form{width:465px;display:flex;margin-top:27px;flex-direction:column}.portfolio2>#contact .contact-form .material-input:first-child input{text-transform:capitalize}.portfolio2>#contact .contact-form .material-input:nth-child(2) input{text-transform:lowercase}.portfolio2>#contact .contact-form .material-input:after,.portfolio2>#contact .contact-form .material-textarea:after{background-color:var(--main-bg-color)}.portfolio2>#contact .contact-form .material-input input,.portfolio2>#contact .contact-form .material-input textarea,.portfolio2>#contact .contact-form .material-textarea input,.portfolio2>#contact .contact-form .material-textarea textarea{width:100%;background-color:rgba(0,0,0,0)}.portfolio2>#contact .contact-form .material-input textarea::-webkit-scrollbar,.portfolio2>#contact .contact-form .material-textarea textarea::-webkit-scrollbar{width:8px}.portfolio2>#contact .contact-form .material-input textarea::-webkit-scrollbar-thumb,.portfolio2>#contact .contact-form .material-input textarea::-webkit-scrollbar-track,.portfolio2>#contact .contact-form .material-textarea textarea::-webkit-scrollbar-thumb,.portfolio2>#contact .contact-form .material-textarea textarea::-webkit-scrollbar-track{border-radius:4px;cursor:pointer}.portfolio2>#contact .contact-form .material-input textarea::-webkit-scrollbar-track,.portfolio2>#contact .contact-form .material-textarea textarea::-webkit-scrollbar-track{background-color:#ccc}.portfolio2>#contact .contact-form .material-input textarea::-webkit-scrollbar-thumb,.portfolio2>#contact .contact-form .material-textarea textarea::-webkit-scrollbar-thumb{background-color:#3e92cc}.portfolio2>#contact .contact-form .material-input textarea::-webkit-scrollbar-thumb:hover,.portfolio2>#contact .contact-form .material-textarea textarea::-webkit-scrollbar-thumb:hover{background-color:#307eb5}.portfolio2>#contact .contact-form .material-input input.not-empty:invalid~label,.portfolio2>#contact .contact-form .material-input input.not-empty:valid~label,.portfolio2>#contact .contact-form .material-input input:focus~label,.portfolio2>#contact .contact-form .material-input textarea.not-empty:invalid~label,.portfolio2>#contact .contact-form .material-input textarea.not-empty:valid~label,.portfolio2>#contact .contact-form .material-input textarea:focus~label,.portfolio2>#contact .contact-form .material-textarea input.not-empty:invalid~label,.portfolio2>#contact .contact-form .material-textarea input.not-empty:valid~label,.portfolio2>#contact .contact-form .material-textarea input:focus~label,.portfolio2>#contact .contact-form .material-textarea textarea.not-empty:invalid~label,.portfolio2>#contact .contact-form .material-textarea textarea.not-empty:valid~label,.portfolio2>#contact .contact-form .material-textarea textarea:focus~label{font-weight:700}.portfolio2>#contact .contact-form .material-input input.empty~label,.portfolio2>#contact .contact-form .material-input textarea.empty~label,.portfolio2>#contact .contact-form .material-textarea input.empty~label,.portfolio2>#contact .contact-form .material-textarea textarea.empty~label{color:var(--main-bg-color)}.portfolio2>#contact .contact-form .material-input input.empty:focus~label,.portfolio2>#contact .contact-form .material-input input.not-empty:valid~label,.portfolio2>#contact .contact-form .material-input input:focus:valid~label,.portfolio2>#contact .contact-form .material-input textarea.empty:focus~label,.portfolio2>#contact .contact-form .material-input textarea.not-empty:valid~label,.portfolio2>#contact .contact-form .material-input textarea:focus:valid~label,.portfolio2>#contact .contact-form .material-textarea input.empty:focus~label,.portfolio2>#contact .contact-form .material-textarea input.not-empty:valid~label,.portfolio2>#contact .contact-form .material-textarea input:focus:valid~label,.portfolio2>#contact .contact-form .material-textarea textarea.empty:focus~label,.portfolio2>#contact .contact-form .material-textarea textarea.not-empty:valid~label,.portfolio2>#contact .contact-form .material-textarea textarea:focus:valid~label{color:#3e92cc}.portfolio2>#contact .contact-form .material-input .bar,.portfolio2>#contact .contact-form .material-textarea .bar{width:100%}.portfolio2>#contact .contact-form .material-input input.empty:focus~.bar:after,.portfolio2>#contact .contact-form .material-input input.empty:focus~.bar:before,.portfolio2>#contact .contact-form .material-input input.not-empty:valid~.bar:after,.portfolio2>#contact .contact-form .material-input input.not-empty:valid~.bar:before,.portfolio2>#contact .contact-form .material-input textarea.empty:focus~.bar:after,.portfolio2>#contact .contact-form .material-input textarea.empty:focus~.bar:before,.portfolio2>#contact .contact-form .material-input textarea.not-empty:valid~.bar:after,.portfolio2>#contact .contact-form .material-input textarea.not-empty:valid~.bar:before,.portfolio2>#contact .contact-form .material-textarea input.empty:focus~.bar:after,.portfolio2>#contact .contact-form .material-textarea input.empty:focus~.bar:before,.portfolio2>#contact .contact-form .material-textarea input.not-empty:valid~.bar:after,.portfolio2>#contact .contact-form .material-textarea input.not-empty:valid~.bar:before,.portfolio2>#contact .contact-form .material-textarea textarea.empty:focus~.bar:after,.portfolio2>#contact .contact-form .material-textarea textarea.empty:focus~.bar:before,.portfolio2>#contact .contact-form .material-textarea textarea.not-empty:valid~.bar:after,.portfolio2>#contact .contact-form .material-textarea textarea.not-empty:valid~.bar:before{background-color:#3e92cc}.portfolio2>#contact .contact-form .submit-row{width:100%;padding-left:5px;padding-right:10px;display:flex;justify-content:flex-end}.portfolio2>#contact .contact-form .submit-row button{width:100px;height:35px;display:flex;align-items:center;justify-content:center;color:#fff;font-size:14px;outline:none;border:2px solid #307eb5;border-radius:20px;background-color:#307eb5;transition:width .5s;cursor:pointer}.portfolio2>#contact .contact-form .submit-row button span{opacity:1;transition:opacity .3s}.portfolio2>#contact .contact-form .submit-row button svg{opacity:0;transition:opacity .3s .3s;fill:#fff}.portfolio2>#contact .contact-form .submit-row button:hover{color:#307eb5;background-color:#fff}.portfolio2>#contact .contact-form .submit-row button:focus{outline:2px solid #023457}.portfolio2>#contact .contact-form .submit-row button.loading{width:35px}.portfolio2>#contact .contact-form .submit-row button.loading:hover{color:#fff;background-color:#307eb5}.portfolio2>#contact .contact-form .submit-row button.loading span{opacity:0}.portfolio2>#contact .contact-form .submit-row button.loading svg{opacity:1;animation:load 1s infinite}@keyframes load{0%{transform:rotate(0deg)}90%{transform:rotate(359deg)}to{transform:rotate(1turn)}}.portfolio2>#experience{display:flex;align-items:center;justify-content:flex-end;margin-bottom:calc(-20vh - 1px);-webkit-clip-path:polygon(0 0,100% 0,100% 100%,0 calc(100% - 20vh));clip-path:polygon(0 0,100% 0,100% 100%,0 calc(100% - 20vh));background-color:#5c6b73;z-index:2}.portfolio2>#experience .experience-diagram{width:80%;max-height:700px;color:var(--main-bg-color)}.portfolio2>#experience .experience-diagram text{fill:var(--main-bg-color)}.portfolio2>#experience .experience-diagram circle,.portfolio2>#experience .experience-diagram line{stroke:var(--main-bg-color)}.portfolio2>#fun{padding:0 200px;justify-content:space-around;background-color:#c2dfe3}.portfolio2>#fun,.portfolio2>#fun .game-button{display:flex;align-items:center;flex-direction:column}.portfolio2>#fun .game-button{min-width:300px;min-height:200px;cursor:pointer}.portfolio2>#fun .game-button>video{width:300px}.portfolio2>#fun .game-button>.title{margin-top:15px}@media only screen and (min-width:1000px){.portfolio2>#fun{flex-direction:row}}@media only screen and (min-width:1400px){.portfolio2>#fun{flex-direction:row}.portfolio2>#fun>.game-button>video{width:500px}}.portfolio2>#headline{display:flex;align-items:center;justify-content:center;flex-direction:column;margin-bottom:calc(-30vh - 1px);-webkit-clip-path:polygon(0 0,100% 0,100% calc(100% - 30vh),0 100%);clip-path:polygon(0 0,100% 0,100% calc(100% - 30vh),0 100%);z-index:2;background-color:#0e1116}.portfolio2>#headline span{font-size:48px;color:var(--main-color)}.portfolio2>#headline .message-wrapper{height:50px;display:flex;align-items:center;justify-content:center}.portfolio2>#headline .cursor{width:4px;height:80%;display:inline-block;background-color:teal;animation:blinkingCursor 1.5s step-end infinite}.portfolio2>#headline .cursor.is-typing{animation:none}@keyframes blinkingCursor{0%{background-color:teal}50%{background-color:rgba(0,0,0,0)}to{background-color:teal}}.portfolio2>.menu{height:50vh;display:flex;align-items:center;flex-direction:column;justify-content:space-around;position:fixed;top:25vh;left:5%;z-index:10}.portfolio2>.menu .menu-item{width:110px;height:22px;position:relative;color:var(--main-bg-color);text-decoration:none;overflow:hidden}.portfolio2>.menu .menu-item .symbol{width:12px;height:12px;position:absolute;top:4px;left:5px;transform:rotate(45deg);transition:1s;cursor:pointer;background-color:var(--main-bg-color)}.portfolio2>.menu .menu-item .text-wrapper{height:16px;padding:0 2px;position:relative;left:28px;top:2px}.portfolio2>.menu .menu-item .text-wrapper:after,.portfolio2>.menu .menu-item .text-wrapper:before{content:"";width:0;height:1px;position:absolute;bottom:0;left:50%;background-color:var(--main-bg-color);transition:.3s ease}.portfolio2>.menu .menu-item .text-wrapper .text{height:16px;position:relative;bottom:-100%;font-size:16px;font-weight:700;line-height:16px;transition:bottom .3s .3s}.portfolio2>.menu .menu-item.selected .symbol,.portfolio2>.menu .menu-item:hover .symbol{width:14px;height:14px;transform:rotate(405deg)}.portfolio2>.menu .menu-item.selected .text-wrapper:after,.portfolio2>.menu .menu-item:hover .text-wrapper:after{width:50%;left:0}.portfolio2>.menu .menu-item.selected .text-wrapper:before,.portfolio2>.menu .menu-item:hover .text-wrapper:before{width:50%}.portfolio2>.menu .menu-item.selected .text-wrapper .text,.portfolio2>.menu .menu-item:hover .text-wrapper .text{bottom:0}.portfolio2>#skills{padding:0 200px;display:flex;align-items:center;justify-content:center;background-color:#79858c}.portfolio2>#skills .backend,.portfolio2>#skills .frontend,.portfolio2>#skills .other,.portfolio2>#skills .soft{height:300px;display:flex;align-items:center;flex-direction:column}.portfolio2>#skills .backend>.plain-text,.portfolio2>#skills .frontend>.plain-text,.portfolio2>#skills .other>.plain-text,.portfolio2>#skills .soft>.plain-text{margin-bottom:8px}.portfolio2>#skills .backend>.skill,.portfolio2>#skills .frontend>.skill,.portfolio2>#skills .other>.skill,.portfolio2>#skills .soft>.skill{display:flex;margin-bottom:8px}.portfolio2>#skills .backend>.skill>.skill-percentage,.portfolio2>#skills .frontend>.skill>.skill-percentage,.portfolio2>#skills .other>.skill>.skill-percentage,.portfolio2>#skills .soft>.skill>.skill-percentage{width:240px;width:180px;display:flex;align-items:center;justify-content:space-between}.portfolio2>#skills .backend>.skill>.skill-percentage svg,.portfolio2>#skills .frontend>.skill>.skill-percentage svg,.portfolio2>#skills .other>.skill>.skill-percentage svg,.portfolio2>#skills .soft>.skill>.skill-percentage svg{width:500px;fill:var(--main-bg-color)}.portfolio2>#skills .backend>.skill>.skill-percentage svg .shadow,.portfolio2>#skills .frontend>.skill>.skill-percentage svg .shadow,.portfolio2>#skills .other>.skill>.skill-percentage svg .shadow,.portfolio2>#skills .soft>.skill>.skill-percentage svg .shadow{fill:#79858c;transform:translateX(101px);animation:animateSkills 3s .5s}.portfolio2>#skills .backend .skill .plain-text,.portfolio2>#skills .frontend .skill .plain-text{min-width:90px}.portfolio2>#skills .other .skill .plain-text{min-width:105px}.portfolio2>#skills .soft .skill .plain-text{width:120px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.portfolio2>#skills .backend{margin-left:40px}.portfolio2>#skills .other{margin-left:30px}.portfolio2>#skills .soft .skill .skill-percentage{margin-left:20px}.portfolio2>#skills .backend>.plain-text,.portfolio2>#skills .frontend>.plain-text,.portfolio2>#skills .other>.plain-text,.portfolio2>#skills .soft>.plain-text{font-size:20px}.portfolio2>#skills .backend .skill,.portfolio2>#skills .frontend .skill,.portfolio2>#skills .other .skill,.portfolio2>#skills .soft .skill{cursor:pointer}.portfolio2>#skills .backend .plain-text,.portfolio2>#skills .frontend .plain-text,.portfolio2>#skills .other .plain-text,.portfolio2>#skills .soft .plain-text{font-weight:700;color:var(--main-bg-color)}.portfolio2>#skills .frontend .skill:nth-child(2):hover svg{fill:#6ecb2e}.portfolio2>#skills .frontend .skill:nth-child(3):hover svg{fill:#53d2f9}.portfolio2>#skills .frontend .skill:nth-child(4):hover svg{fill:#6231ae}.portfolio2>#skills .frontend .skill:nth-child(5):hover svg{fill:#f4db19}.portfolio2>#skills .frontend .skill:nth-child(6):hover svg,.portfolio2>#skills .frontend .skill:nth-child(7):hover svg{fill:#0d5096}.portfolio2>#skills .frontend .skill:nth-child(8):hover svg{fill:#c14b88}.portfolio2>#skills .frontend .skill:nth-child(9):hover svg{fill:#1c3766}.portfolio2>#skills .frontend .skill:nth-child(10):hover svg{fill:#3189cd}.portfolio2>#skills .frontend .skill:nth-child(11):hover svg{fill:#c14b88}.portfolio2>#skills .frontend .skill:nth-child(12):hover svg{fill:#35bef9}.portfolio2>#skills .frontend .skill:nth-child(13):hover svg{fill:var(--main-color)}.portfolio2>#skills .frontend .skill:nth-child(14):hover svg{fill:#eb4e20}.portfolio2>#skills .backend .skill:nth-child(2):hover svg{fill:#7b3978}.portfolio2>#skills .backend .skill:nth-child(3):hover svg{fill:#160f22}.portfolio2>#skills .backend .skill:nth-child(4):hover svg{fill:var(--main-color)}.portfolio2>#skills .backend .skill:nth-child(5):hover svg{fill:#609a4f}.portfolio2>#skills .backend .skill:nth-child(6):hover svg,.portfolio2>#skills .backend .skill:nth-child(7):hover svg{fill:var(--main-color)}.portfolio2>#skills .backend .skill:nth-child(8):hover svg{fill:#0d627c}.portfolio2>#skills .backend .skill:nth-child(9):hover svg{fill:#159e3d}.portfolio2>#skills .backend .skill:nth-child(10):hover svg,.portfolio2>#skills .other .skill:nth-child(2):hover svg{fill:var(--main-color)}.portfolio2>#skills .other .skill:nth-child(3):hover svg{fill:#92e7f7}.portfolio2>#skills .other .skill:nth-child(4):hover svg{fill:var(--main-color)}.portfolio2>#skills .other .skill:nth-child(5):hover svg{fill:#e93827}.portfolio2>#skills .other .skill:nth-child(6):hover svg{fill:#6e88bd}.portfolio2>#skills .other .skill:nth-child(7):hover svg{fill:#39a5bd}.portfolio2>#skills .other .skill:nth-child(8):hover svg{fill:var(--main-color)}.portfolio2>#skills .other .skill:nth-child(9):hover svg{fill:#9aacc2}.portfolio2>#skills .other .skill:nth-child(10):hover svg{fill:#09458a}.portfolio2>#skills .other .skill:nth-child(11):hover svg{fill:#0d62e0}.portfolio2>#skills .other .skill:nth-child(12):hover svg{fill:#ea691f}.portfolio2>#skills .soft .skill:hover svg{fill:var(--main-color)}.console-app{width:100%;flex:1 1;display:flex;justify-content:center;background-color:var(--main-console-bg-color);overflow:hidden}.console-app>.content{width:80%;padding-top:25px}.console-app>.content .sidenote{transition:1s;opacity:0}.console-app>.content .sidenote.fade-in{opacity:1}.console-app>.content .history{max-height:65vh;margin-bottom:-2px;overflow-y:auto;scrollbar-width:none}.console-app>.content .history::-webkit-scrollbar{display:none}.console-app>.content .history .history-node{margin-top:12px;margin-bottom:12px;max-width:70%}.console-app>.content .history .history-node .plain-text{max-width:100%;word-break:break-word}.console-app>.content .history .history-node .key{margin:0 8px;padding:0 4px;border-radius:4px;color:var(--main-console-bg-color);background-color:var(--main-console-color)}.console-app>.content .history .history-node:first-child{margin-top:0}.console-app>.content .history .history-node.suggestions .plain-text{margin-right:20px;margin-bottom:4px}.console-app>.content .history .history-node.suggestions .plain-text:last-child{margin-right:0}.console-app>.content .history .history-node>.experience-diagram{color:var(--main-console-color)}.console-app>.content .history .history-node>.experience-diagram circle,.console-app>.content .history .history-node>.experience-diagram line{stroke:var(--main-console-color)}.console-app>.content .history .history-node>.experience-diagram text{fill:var(--main-console-color)}.console-app>.content .console-input{display:flex;align-items:center;margin-bottom:80px;opacity:0;transition:opacity 1.5s}.console-app>.content .console-input.contact-form,.console-app>.content .console-input.fade-in{opacity:1}.console-app>.content .console-input.message{align-items:flex-start;margin-bottom:0}.console-app>.content .console-input.message textarea{scrollbar-width:none}.console-app>.content .console-input.message textarea::-webkit-scrollbar{display:none}.console-app>.content .console-input input{width:430px;height:20px;background:rgba(0,0,0,0)}.console-app>.content .console-input input,.console-app>.content .console-input textarea{border:none;margin-left:8px;color:var(--main-console-color);font-size:16px;font-family:var(--font-inconsolata);outline:none}.console-app>.content .console-input textarea{resize:none;padding-top:0;word-break:break-word;background-color:var(--main-console-bg-color)}.console-app>.content .personal-info .custom{margin-top:8px;height:24px;display:flex;align-items:center}.console-app>.content .personal-info .custom .svg-wrapper{width:30px;height:24px;display:flex;align-items:center;justify-content:center}.console-app>.content .personal-info .custom .text{margin-left:12px}.console-app>.content .skills{display:flex}.console-app>.content .skills .backend,.console-app>.content .skills .frontend,.console-app>.content .skills .other{display:flex;align-items:center;flex-direction:column}.console-app>.content .skills .backend>.plain-text,.console-app>.content .skills .frontend>.plain-text,.console-app>.content .skills .other>.plain-text{margin-bottom:8px}.console-app>.content .skills .backend,.console-app>.content .skills .other{margin-left:20px}.console-app>.content .skills .skill{display:flex;margin-bottom:8px}.console-app>.content .skills .skill .plain-text{min-width:105px}.console-app>.content .skills .skill-percentage{width:240px;display:flex;align-items:center;justify-content:space-between}.console-app>.content .skills .skill-percentage svg{width:500px;fill:var(--main-console-color)}.console-app>.content .skills .skill-percentage svg .shadow{fill:var(--main-console-bg-color);transform:translateX(100px);animation:animateSkills 3s}@keyframes animateSkills{0%{transform:translateX(0)}to{transform:translateX(100px)}}.manual .title{display:block;text-align:center}.manual .subtitle{display:block;font-weight:700}.manual .description{margin-top:4px}.manual .description,.manual .options{display:block;margin-left:30px}.manual .options .description{margin-top:0;margin-bottom:12px}.history-node.help ul{padding-left:20px}.history-node.help ul li>span{display:flex}.history-node.help ul li>span .command{min-width:180px}.snake-container{width:100vw;height:100vh;display:flex;align-items:center;justify-content:center;position:fixed;top:0;left:0;background-color:var(--main-bg-color);z-index:11;cursor:none}.snake-container #snake-input{position:absolute;top:-500px;left:-500px}.snake-container .start-screen{width:100vw;height:100vh;display:flex;align-items:center;flex-direction:column;justify-content:space-around;color:var(--main-color);font-family:var(--game-font);cursor:none}.snake-container .start-screen .title{font-size:104px;margin-bottom:0}.snake-container .start-screen .button-group{display:flex;align-items:center;flex-direction:column}.snake-container .start-screen .button-group span{height:30px;font-size:24px;margin-bottom:28px}.snake-container .start-screen .button-group span.focused{color:#c3c074}.snake-container .start-screen .footer-container{display:flex;flex-direction:column;justify-content:center;align-items:center}.snake-container .start-screen .footer{position:relative;margin-bottom:24px}.snake-container .start-screen .footer:after{content:"";width:45px;height:20px;position:absolute;top:0;right:0;animation:animateDots 4s steps(4) infinite;background:var(--main-bg-color)}.snake-container .settings-screen{width:100vw;height:100vh;display:flex;align-items:center;flex-direction:column;justify-content:space-around;color:var(--main-color);font-family:var(--game-font);background-color:var(--main-bg-color);cursor:none}.snake-container .settings-screen .title{font-size:68px}.snake-container .settings-screen .settings{width:100%;display:flex;align-items:center;justify-content:center;flex-wrap:wrap}.snake-container .settings-screen .settings .column{width:100%;margin-bottom:40px;display:flex;align-items:center;flex-direction:column;justify-content:center;background-color:var(--main-bg-color)}.snake-container .settings-screen .settings .column .title{margin-bottom:20px;font-size:18px}.snake-container .settings-screen .settings .column .option{display:flex;align-items:center;justify-content:center}.snake-container .settings-screen .settings .column .option svg{height:24px;fill:#c3c074}.snake-container .settings-screen .settings .column .option .text{width:140px;height:24px;line-height:24px;text-align:center}.snake-container .settings-screen .settings .column .option.focused{color:#c3c074}.snake-container .settings-screen .footer{display:flex;flex-direction:column;align-items:center}.snake-container .settings-screen .footer>span:first-child{margin-bottom:24px}.snake-container .game-screen{width:100vw;height:100vh;display:flex;align-items:center;justify-content:center;background:#181818;cursor:none}.snake-container .game-screen .left-placeholder{box-sizing:border-box;width:100%;height:800px;padding-top:10px;display:flex;align-items:center;flex-direction:column;color:var(--main-color);font-family:var(--game-font)}.snake-container .game-screen .left-placeholder .title{font-size:24px;margin-bottom:32px}.snake-container .game-screen .left-placeholder .highscores{width:240px;height:50%;display:flex;justify-content:center;flex-direction:column}.snake-container .game-screen .left-placeholder .highscores .highscore{flex:1 1;display:flex}.snake-container .game-screen .left-placeholder .highscores .highscore .username{margin-right:auto}.snake-container .game-screen .left-placeholder .highscores .spinner{fill:var(--main-color);animation:spin 1s ease-in-out infinite}.snake-container .game-screen .left-placeholder .error-message{width:60%;margin:auto;line-height:24px;animation:blink 3s step-end infinite}.snake-container .game-screen .right-placeholder{box-sizing:border-box;width:100%;height:800px;padding-top:10px;display:flex;align-items:center;justify-content:center;flex-direction:column;color:var(--main-color);font-family:var(--game-font)}.snake-container .game-screen .right-placeholder .player-score{display:flex;align-items:center;justify-content:center;flex-direction:column;margin-bottom:auto}.snake-container .game-screen .right-placeholder .player-score .title{font-size:24px;margin-bottom:18px}.snake-container .game-screen .right-placeholder .player-score .score{font-size:20px}.snake-container .game-screen .right-placeholder .instructions{width:80%;position:relative;display:flex;align-items:flex-start;justify-content:center;flex-direction:column;font-size:14px;margin-bottom:30px}.snake-container .game-screen .right-placeholder .instructions span{margin-bottom:15px}.snake-container .game-screen .right-placeholder .instructions span:first-child{line-height:20px}.snake-container .game-screen .right-placeholder .instructions span svg{margin:0 8px;fill:var(--main-color)}.snake-container .game-screen .right-placeholder .instructions span svg.arrow-left{margin-left:16px}.snake-container .game-screen .right-placeholder .instructions span svg.arrow-down{margin-right:16px}.snake-container .game-screen .right-placeholder .instructions .audio{width:40px;position:absolute;left:0;bottom:-30px;fill:var(--main-color)}.snake-container .game-screen .game{width:800px;height:800px;position:relative;color:var(--main-color);font-family:var(--game-font)}.snake-container .game-screen .game canvas{background-color:var(--main-bg-color)}.snake-container .game-screen .game .game-over-screen,.snake-container .game-screen .game .game-won-screen,.snake-container .game-screen .game .paused-screen{width:100%;height:100%;position:absolute;top:0;left:0;display:flex;align-items:center;justify-content:center;font-size:32px;background-color:rgba(24,24,24,.6)}.snake-container .game-screen .game .game-over-screen,.snake-container .game-screen .game .game-won-screen{flex-direction:column}.snake-container .game-screen .game .game-over-screen .title,.snake-container .game-screen .game .game-won-screen .title{margin-bottom:24px}.snake-container .game-screen .game .game-over-screen .subtitle,.snake-container .game-screen .game .game-won-screen .subtitle{font-size:16px}.snake-container .game-screen .game .game-over-screen .username,.snake-container .game-screen .game .game-won-screen .username{width:100%;height:50px;display:flex;align-items:center;justify-content:center;margin-bottom:20px}.snake-container .game-screen .game .game-over-screen .username .letter,.snake-container .game-screen .game .game-won-screen .username .letter{width:32px;height:32px;margin-right:14px;position:relative}.snake-container .game-screen .game .game-over-screen .username .letter:after,.snake-container .game-screen .game .game-won-screen .username .letter:after{content:"_";position:absolute;left:0;bottom:-5px}.snake-container .game-screen .game .game-over-screen .username .letter.focused:after,.snake-container .game-screen .game .game-won-screen .username .letter.focused:after{color:orange}.snake-container .game-screen .game .game-over-screen .congratulations,.snake-container .game-screen .game .game-won-screen .congratulations{font-size:8px}.snake-container .game-screen .game .game-over-screen .spinner-container,.snake-container .game-screen .game .game-won-screen .spinner-container{margin-top:24px}.snake-container .game-screen .game .game-over-screen .spinner-container .spinner,.snake-container .game-screen .game .game-won-screen .spinner-container .spinner{fill:var(--main-color);animation:spin 1s ease-in-out infinite}@keyframes animateDots{0%{right:0}to{right:-52px}}@keyframes spin{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}@keyframes blink{0%{color:rgba(0,0,0,0)}50%{color:var(--main-color)}to{color:rgba(0,0,0,0)}}.memory-game{width:100vw;height:100vh;position:fixed;top:0;left:0;display:flex;align-items:center;justify-content:space-between;z-index:11;background-color:var(--main-bg-color)}.memory-game.mode-selection{flex-direction:column;justify-content:center}.memory-game .close-button{position:absolute;top:20px;right:25px;cursor:pointer}.memory-game .close-button svg{fill:var(--main-color)}.memory-game .back-button{position:absolute;top:20px;left:20px;display:flex;align-items:center;justify-content:center;cursor:pointer}.memory-game .back-button svg{fill:var(--main-color)}.memory-game .back-button:after{content:"Select Mode";margin-left:10px;color:var(--main-color)}.memory-game .header{margin-bottom:50px;font-size:38px;color:var(--main-color)}.memory-game .options{width:500px;margin-bottom:100px;display:flex;justify-content:space-between}.memory-game .options .difficulty,.memory-game .options .theme{width:150px;height:250px;display:flex;flex-direction:column}.memory-game .options .difficulty .title,.memory-game .options .theme .title{font-size:24px;color:var(--main-color);margin-bottom:30px}.memory-game .options .difficulty .radio-button,.memory-game .options .theme .radio-button{margin-bottom:12px;color:var(--main-color)}.memory-game .options .difficulty .radio-button div,.memory-game .options .theme .radio-button div{border-color:var(--main-color)}.memory-game .options .difficulty .radio-button div:after,.memory-game .options .theme .radio-button div:after{background-color:var(--main-color)}.memory-game .play-game-button{width:200px;height:40px;padding:0;margin-top:15px;position:relative;display:block;font-size:16px;text-align:center;color:var(--main-color);outline:none;border:2px solid var(--main-color);background-color:var(--main-bg-color);cursor:pointer;box-sizing:content-box;overflow:hidden}.memory-game .play-game-button:before{content:"";width:100%;height:100%;position:absolute;top:0;left:-100%;transition:.5s;background-color:var(--main-color)}.memory-game .play-game-button:after{content:"Play Game";width:100%;height:100%;position:absolute;top:0;left:0;font-size:16px;text-align:center;line-height:40px;color:var(--main-bg-color);z-index:-1}.memory-game .play-game-button:hover{color:var(--main-bg-color)}.memory-game .play-game-button:hover:before{left:0}.memory-game .play-game-button:hover:after{z-index:1}.memory-game .board{display:grid;grid-row-gap:20px;grid-column-gap:20px}.memory-game .board.easy{grid-template:"item item item item item item" "item item item item item item" "item item item item item item" "item item item item item item"}.memory-game .board.medium{grid-template:"item item item item item item" "item item item item item item" "item item item item item item" "item item item item item item" "item item item item item item" "item item item item item item"}.memory-game .board.hard{grid-template:"item item item item item item item item" "item item item item item item item item" "item item item item item item item item" "item item item item item item item item" "item item item item item item item item" "item item item item item item item item"}.memory-game .board.hard .tile{width:100px;height:100px}.memory-game .board.insane{grid-template:"item item item item item item item item item item" "item item item item item item item item item item" "item item item item item item item item item item" "item item item item item item item item item item" "item item item item item item item item item item" "item item item item item item item item item item" "item item item item item item item item item item" "item item item item item item item item item item"}.memory-game .board.insane .tile{width:80px;height:80px}.memory-game .board .tile{width:120px;height:120px;font-size:24px;font-weight:700;perspective:1000px;cursor:pointer}.memory-game .board .tile.revealed .inner{transform:rotateY(180deg)}.memory-game .board .tile.is-out .inner .front{background:var(--string-declaration-color)}.memory-game .board .tile>.inner{width:100%;height:100%;position:relative;transition:transform .6s;transform-style:preserve-3d;box-shadow:0 4px 8px 0 rgba(0,0,0,.2)}.memory-game .board .tile>.inner>.back,.memory-game .board .tile>.inner>.front{position:absolute;width:100%;height:100%;-webkit-backface-visibility:hidden;backface-visibility:hidden}.memory-game .board .tile>.inner>.front{display:flex;align-items:center;justify-content:center;color:#000;background-color:#bbb;z-index:2}.memory-game .board .tile>.inner>.front>img{width:40px}.memory-game .board .tile>.inner>.back{display:flex;align-items:center;justify-content:center;color:#fff;transform:rotateY(180deg);z-index:1}.memory-game .board .tile>.inner>.back.pokemon img,.memory-game .board .tile>.inner>.back.webstack img{max-width:80%;max-height:80%}.memory-game .board .tile>.inner>.back.pokemon{background-color:#2980b9}.memory-game .board .tile>.inner>.back.webstack{background-color:#fff}.memory-game .game-complete{width:100%;height:100%;position:absolute;top:0;left:0;display:flex;align-items:center;justify-content:center;flex-direction:column;font-size:8px;font-family:var(--game-font);color:var(--main-color);background-color:rgba(0,0,0,.8);z-index:1}.memory-game .game-complete svg{width:60%;margin-top:-150px}.memory-game .game-complete .username{width:100%;height:50px;display:flex;align-items:center;justify-content:center;margin-bottom:20px;font-size:33px}.memory-game .game-complete .username .letter{width:32px;height:32px;margin-right:14px;position:relative}.memory-game .game-complete .username .letter:after{content:"_";position:absolute;left:0;bottom:-5px}.memory-game .game-complete .username .letter.focused:after{color:orange}.memory-game .game-complete .instructions{margin-top:24px;font-size:18px}.memory-game .left,.memory-game .right{flex:.4 1;height:100%;font-family:var(--font-roboto)}.memory-game .left{padding-top:140px;display:flex;align-items:center;flex-direction:column;color:var(--main-color);text-transform:uppercase;box-sizing:border-box}.memory-game .left .title{font-size:24px;margin-bottom:50px}.memory-game .left .spinner-container{margin-top:50%}.memory-game .left .spinner-container .spinner{fill:var(--main-color);animation:spin 1s ease-in-out infinite}.memory-game .left .highscores{display:flex;flex-direction:column}.memory-game .left .highscores .row{width:220px;height:20px;margin-bottom:12px;display:flex;justify-content:space-between;line-height:20px;font-size:18px}.memory-game .left .highscores .row .name,.memory-game .left .highscores .row .score,.memory-game .left .highscores .row .time{display:block;width:60px;text-align:center}.memory-game .right{padding:15% 0;display:flex;align-items:center;justify-content:space-between;flex-direction:column;color:var(--main-color);box-sizing:border-box}.memory-game .right .player-score,.memory-game .right .time{display:flex;align-items:center;flex-direction:column;font-size:24px;text-transform:uppercase}.memory-game .right .player-score .title,.memory-game .right .time .title{margin-bottom:10px}.memory-game #memory-game-input{position:absolute;left:-500px;top:-500px}