diff --git a/index.html b/index.html index 00ef591..080cfea 100644 --- a/index.html +++ b/index.html @@ -1,4 +1,761 @@ -Bennett Feely
Photo of Bennett Feely

Hello! My name is Bennett Feely. 
I make websites so you don't have to.

Update July 2020:

I'm currently available for freelance web design and development, logo design, brand design, and graphic design work.

Let's get in touch!

Recent Work

Recent Personal Projects

Contact

+ \ No newline at end of file + gtag('config', 'UA-35724550-1'); + + + diff --git a/style.min.css b/style.min.css index b8fa7ee..656a6aa 100644 --- a/style.min.css +++ b/style.min.css @@ -1 +1,959 @@ -html{line-height:1.15;-webkit-text-size-adjust:100%}body{margin:0}h1{font-size:2em;margin:.67em 0}hr{box-sizing:content-box;height:0;overflow:visible}pre{font-family:monospace,monospace;font-size:1em}a{background-color:transparent}abbr[title]{border-bottom:none;text-decoration:underline;-webkit-text-decoration:underline dotted;text-decoration:underline dotted}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace,monospace;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}img{border-style:none}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0}button,input{overflow:visible}button,select{text-transform:none}[type=button],[type=reset],[type=submit],button{-webkit-appearance:button}[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button::-moz-focus-inner{border-style:none;padding:0}[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring,button:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:.35em .75em .625em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal}progress{vertical-align:baseline}textarea{overflow:auto}[type=checkbox],[type=radio]{box-sizing:border-box;padding:0}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}details{display:block}summary{display:list-item}[hidden],template{display:none}*,:after,:before{box-sizing:border-box}blockquote,button,details,h1,h2,h3,h4,h5,h6,li,ol,p,q,summary,ul{margin:0}blockquote,li,ol,ul{padding:0}html{scroll-behavior:smooth}body{text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-smoothing:antialiased;-webkit-font-variant-ligatures:common-ligatures;font-variant-ligatures:common-ligatures}input[type=range]{-webkit-appearance:none;background:transparent}input[type=range]::-webkit-slider-thumb{-webkit-appearance:none}input[type=range]::-ms-track{width:100%;cursor:pointer;background:transparent;border-color:transparent;color:transparent}.copyright,.dark-toggle,h2,img,ul{-ms-user-select:none;-webkit-user-select:none;-moz-user-select:none;user-select:none}img{-webkit-user-drag:none;-moz-user-drag:none;-ms-user-drag:none;user-drag:none}:root{--radius-small:0.25em;--radius-medium:0.5em;--radius-large:1em;--transition:0.35s;--transition-hover:0.1s;--duration:4s;--black:#16161d;--black-a:rgba(22,22,29,.15);--gray:#909099;--blue:#1e90ff;--blue-a:rgba(30,144,255,.1);--blue-dark:#005cb8;--blue-light:#52c3fb;--purple:#a029de;--purple-dark:#5f267d;--purple-muted:#a377d2;--white:#fff;--offwhite:#ccc;--sky-100:#3b2f4a;--sky-150:#302944;--sky-200:#1f1f3a;--sky-300:#16161d;--background-gradient:radial-gradient(circle at center bottom,var(--sky-100),var(--sky-200),var(--sky-300));--background:var(--white);--toggle-background:var(--white);--text-color:var(--black);--text-color-a:var(--gray);--link-color:var(--blue);--link-color-hover:var(--blue-dark);--link-color-visited:var(--purple);--link-color-visited-hover:var(--purple-dark)}.dark{--toggle-background:var(--sky-100);--text-color:var(--offwhite);--link-color:var(--blue);--link-color-hover:var(--blue);--link-color-visited:var(--purple-muted);--link-color-visited-hover:var(--purple-muted)}body{position:relative;font:100%/1.5 Nunito,sans-serif;color:var(--text-color);background:var(--background);overflow-x:hidden}.header-wrapper{max-width:35em;margin:0 auto;text-align:center;padding-top:1.5em}@media (min-width:40em){.header-wrapper{max-width:42em;padding-top:5em}}@media (min-width:60em){.header-wrapper{max-width:50em}}.main-wrapper{margin:1.5em auto 0;max-width:35em}@media (min-width:40em){.main-wrapper{margin:0 auto;max-width:25em;padding:2.5em 0}}.container{position:relative;margin:1.5rem}.footer-wrapper .container,.header-wrapper .container{padding:1.5em 0;margin:0 1.5em}.contact-wrapper .container{text-align:center;margin:1.5rem auto;padding:0 1.5rem}@media (min-width:40em){.contact-wrapper .container{max-width:42em}}@media (min-width:60em){.contact-wrapper .container{max-width:50em}}h1,h2{font-weight:400;line-height:1.2}h1{font-size:1.5em}@media (min-width:60em){h1{font-size:2em}}h2{display:block;cursor:default;text-align:center;font-size:1.25em;opacity:.75}a{text-decoration:none}.outline,a{color:var(--text-color)}.outline{display:inline-block;border:thin solid hsla(0,0%,50%,.4);padding:.5em 1em;border-radius:var(--radius-large)}header .container{text-align:center}@media (min-width:40em){header .container{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;text-align:left}}@media (min-width:40em){header h1{-ms-flex:1;flex:1;-ms-flex-align:center;align-items:center}}@media (max-width:40em){header br{display:none}}.me{width:6em;height:6em;border-radius:50%;margin:0 0 .5rem}@media (min-width:40em){.me{width:7em;height:7em;margin:0 1.5rem 0 0}}@media (min-width:60em){.me{width:8em;height:8em}}.job-wrapper{max-width:40em;margin:2em auto 0;text-align:center}.job-wrapper .outline{margin:0 1.5em;border-radius:var(--radius-large);padding:1.5em;border-color:hsla(0,0%,50%,.3)}.job-wrapper p{font-size:1em;margin-top:1em}.job-wrapper a{display:inline-block;margin-top:1em;font-weight:700;color:var(--link-color);padding:.5em 1.5em;border-radius:var(--radius-medium);transition:background var(--transition),color var(--transition),box-shadow var(--transition);box-shadow:inset 0 0 0 .1em var(--blue-a),0 0 0 0 transparent}.job-wrapper a:hover{background:var(--blue-a);color:var(--link-color-hover);box-shadow:inset 0 0 0 .1em transparent,0 0 0 .25em var(--blue-a)}ul{font-size:1.2em}li{position:relative;list-style:none}.contacts,.projects,.works{margin:1rem 0}@media (min-width:40em){.works{margin-bottom:5em}}.contact-link,.project-link{display:block;position:relative;cursor:pointer;padding:1.5rem 0}.contact-link strong,.project-link strong{color:var(--link-color);transition:color var(--transition)}.contact-link:hover strong,.project-link:hover strong{color:var(--link-color-hover)}.contact-link:visited strong,.project-link:visited strong{color:var(--link-color-visited)}.contact-link:visited:hover strong,.project-link:visited:hover strong{color:var(--link-color-visited-hover)}@media (min-width:40em){.contact-link,.project-link{transition:background-color var(--transition);border-radius:var(--radius-medium);margin:1rem 0;padding:1.5rem}.contact-link:hover,.project-link:hover{background:var(--blue-a);transition-duration:var(--transition-hover)}}.project-link{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center}.project:nth-child(odd) .project-link{-ms-flex-direction:row-reverse;flex-direction:row-reverse}.screenshot-wrapper{min-width:50%;max-width:50%;height:auto;margin:0 1.5rem 0 0;transition:transform var(--transition);transform:scale(.9)}.project:nth-child(odd) .screenshot-wrapper{margin:0 0 0 1.5rem}.project-link:hover .screenshot-wrapper{transform:scale(1);transition-duration:var(--transition-hover)}@media (min-width:40em){.screenshot-wrapper{position:absolute;z-index:1;width:12em;height:9em}.project:nth-child(odd) .screenshot-wrapper{margin:0}}.screenshot{width:100%;height:auto;border-radius:var(--radius-small);box-shadow:0 .5em 1.5em var(--black-a)}@media (min-width:40em){.screenshot{display:block;width:100%;height:auto;transition:box-shadow var(--transition)}}.project-link:hover .screenshot{box-shadow:0 .5em 3em var(--gray)}.dark .project-link:hover .screenshot{box-shadow:0 .5em 3em var(--sky-100)}@media (min-width:40em){.line{position:absolute;content:"";width:10em;height:1px;background:var(--text-color);opacity:.15;pointer-events:none;top:50%;transition:opacity var(--transition)}.project-link:hover .line{opacity:1}}.project:nth-child(odd) .line{right:calc(100% + .5em);transform-origin:center right}@media (min-width:40em){.project:nth-child(odd) .screenshot-wrapper{right:calc(100% + 2.5rem)}}@media (min-width:60em){.project:nth-child(odd) .screenshot-wrapper{right:calc(100% + 5rem)}}.project:nth-child(odd) .screenshot-wrapper .screenshot{transform:rotate(5deg)}@media (min-width:40em){.project:first-child .line{transform:rotate(6deg)}.project:first-child .screenshot-wrapper{top:-40%}.project:first-child .screenshot-wrapper .screenshot{transform:rotate(4deg)}.project:nth-child(3) .line{transform:rotate(14deg)}.project:nth-child(3) .screenshot-wrapper{top:-45%}.project:nth-child(3) .screenshot-wrapper .screenshot{transform:rotate(-2deg)}.project:nth-child(5) .line{transform:rotate(-5deg)}.project:nth-child(5) .screenshot-wrapper{top:-35%}.project:nth-child(5) .screenshot-wrapper .screenshot{transform:rotate(8deg)}.project:nth-child(7) .line{transform:rotate(5deg)}.project:nth-child(7) .screenshot-wrapper{top:-20%}.project:nth-child(7) .screenshot-wrapper .screenshot{transform:rotate(-8deg)}}.project:nth-child(2n) .line{left:calc(100% + .5em);transform-origin:center left}@media (min-width:40em){.project:nth-child(2n) .screenshot-wrapper{left:calc(100% + 2.5rem)}}@media (min-width:60em){.project:nth-child(2n) .screenshot-wrapper{left:calc(100% + 5rem)}}.project:nth-child(2n) .screenshot-wrapper .screenshot{transform:rotate(-5deg)}@media (min-width:40em){.project:nth-child(2n) .line{transform-origin:left center}.project:nth-child(2n) .screenshot img{transform:rotate(-5deg)}.project:nth-child(2) .line{transform:rotate(-25deg)}.project:nth-child(2) .screenshot-wrapper{top:-80%}.project:nth-child(2) .screenshot-wrapper .screenshot{transform:rotate(-8deg)}.project:nth-child(4) .line{transform:rotate(-25deg)}.project:nth-child(4) .screenshot-wrapper{top:-60%}.project:nth-child(4) .screenshot-wrapper .screenshot{transform:rotate(2deg)}.project:nth-child(6) .line{transform:rotate(-18deg)}.project:nth-child(6) .screenshot-wrapper{top:-70%}.project:nth-child(6) .screenshot-wrapper .screenshot{transform:rotate(8deg)}}.contact-wrapper{padding:1.5rem 0}@media (min-width:40em){.contacts{display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;border:none;margin:1.5rem 0}}.contact{-ms-flex:1 0 50%;flex:1 0 50%}.contact-link{display:block;padding:1rem 1.5rem}.email-link span{-webkit-user-select:initial;-moz-user-select:initial;-ms-user-select:initial;user-select:auto}.email-link strong{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.footer-wrapper{font-size:smaller;text-align:center}.copyright{cursor:default;margin:0 0 1.5rem}.dark-toggle{cursor:pointer;background:var(--toggle-background);transition:opacity var(--transition),background var(--transition)}.dark-toggle strong{color:var(--blue)}.footer-wrapper:hover .dark-toggle{box-shadow:0 .5em 1em var(--black-a);color:var(--offwhite);opacity:1;background:var(--sky-100)}.dark-toggle:focus{outline:0}.stars,.stars-wrapper{display:none;position:absolute;top:0;left:0;right:0;bottom:0;overflow:hidden}.dark .stars,.dark .stars-wrapper{display:block}.stars-wrapper{background:var(--background-gradient)}.dark .stars{animation:a var(--duration) ease-in-out infinite}.stars:nth-child(2){animation-delay:calc(var(--duration) * -.33)}.stars:nth-child(3){animation-delay:calc(var(--duration) * -.66)}@keyframes a{25%{opacity:0}}.star{fill:#fff}.star:nth-child(3n){opacity:.8}.star:nth-child(7n){opacity:.6}.star:nth-child(13n){opacity:.4}.star:nth-child(19n){opacity:.2}.comet{position:absolute;left:calc(50% - 75px)}.dark .comet{animation:10s linear infinite both}.comet.comet-a{top:50vh;animation-name:b;animation-delay:1s}.comet.comet-b{top:50%;animation-name:c;animation-delay:6.6s}.comet.comet-c{top:calc(100% - 50vh);animation-name:d;animation-delay:7.6s}@keyframes b{0%{transform:rotate(-135deg) translate3d(50vmax,0,0);opacity:0}20%{opacity:1}40%,to{transform:rotate(-135deg) translate3d(-50vmax,0,0);opacity:0}}@keyframes c{0%{transform:rotate(35deg) translate3d(50vmax,0,0);opacity:0}20%{opacity:1}40%,to{transform:rotate(35deg) translate3d(-50vmax,0,0);opacity:0}}@keyframes d{0%{transform:rotate(120deg) translate3d(50vmax,0,0);opacity:0}20%{opacity:1}40%,to{transform:rotate(120deg) translate3d(-50vmax,0,0);opacity:0}} \ No newline at end of file + + +html { + line-height: 1.15; + -webkit-text-size-adjust: 100% +} + +body { + margin: 0 +} + +h1 { + font-size: 2em; + margin: .67em 0 +} + +hr { + box-sizing: content-box; + height: 0; + overflow: visible +} + +pre { + font-family: monospace, monospace; + font-size: 1em +} + +a { + background-color: transparent +} + +abbr[title] { + border-bottom: none; + text-decoration: underline; + -webkit-text-decoration: underline dotted; + text-decoration: underline dotted +} + +b, +strong { + font-weight: bolder +} + +code, +kbd, +samp { + font-family: monospace, monospace; + font-size: 1em +} + +small { + font-size: 80% +} + +sub, +sup { + font-size: 75%; + line-height: 0; + position: relative; + vertical-align: baseline +} + +sub { + bottom: -.25em +} + +sup { + top: -.5em +} + +img { + border-style: none +} + +button, +input, +optgroup, +select, +textarea { + font-family: inherit; + font-size: 100%; + line-height: 1.15; + margin: 0 +} + +button, +input { + overflow: visible +} + +button, +select { + text-transform: none +} + +[type=button], +[type=reset], +[type=submit], +button { + -webkit-appearance: button +} + +[type=button]::-moz-focus-inner, +[type=reset]::-moz-focus-inner, +[type=submit]::-moz-focus-inner, +button::-moz-focus-inner { + border-style: none; + padding: 0 +} + +[type=button]:-moz-focusring, +[type=reset]:-moz-focusring, +[type=submit]:-moz-focusring, +button:-moz-focusring { + outline: 1px dotted ButtonText +} + +fieldset { + padding: .35em .75em .625em +} + +legend { + box-sizing: border-box; + color: inherit; + display: table; + max-width: 100%; + padding: 0; + white-space: normal +} + +progress { + vertical-align: baseline +} + +textarea { + overflow: auto +} + +[type=checkbox], +[type=radio] { + box-sizing: border-box; + padding: 0 +} + +[type=number]::-webkit-inner-spin-button, +[type=number]::-webkit-outer-spin-button { + height: auto +} + +[type=search] { + -webkit-appearance: textfield; + outline-offset: -2px +} + +[type=search]::-webkit-search-decoration { + -webkit-appearance: none +} + +::-webkit-file-upload-button { + -webkit-appearance: button; + font: inherit +} + +details { + display: block +} + +summary { + display: list-item +} + +[hidden], +template { + display: none +} + +*, +:after, +:before { + box-sizing: border-box +} + +blockquote, +button, +details, +h1, +h2, +h3, +h4, +h5, +h6, +li, +ol, +p, +q, +summary, +ul { + margin: 0 +} + +blockquote, +li, +ol, +ul { + padding: 0 +} + +html { + scroll-behavior: smooth +} + +body { + text-rendering: optimizeLegibility; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; + font-smoothing: antialiased; + -webkit-font-variant-ligatures: common-ligatures; + font-variant-ligatures: common-ligatures +} + +input[type=range] { + -webkit-appearance: none; + background: transparent +} + +input[type=range]::-webkit-slider-thumb { + -webkit-appearance: none +} + +input[type=range]::-ms-track { + width: 100%; + cursor: pointer; + background: transparent; + border-color: transparent; + color: transparent +} + +.copyright, +.dark-toggle, +h2, +img, +ul { + -ms-user-select: none; + -webkit-user-select: none; + -moz-user-select: none; + user-select: none +} + +img { + -webkit-user-drag: none; + -moz-user-drag: none; + -ms-user-drag: none; + user-drag: none +} + +:root { + --radius-small: 0.25em; + --radius-medium: 0.5em; + --radius-large: 1em; + --transition: 0.35s; + --transition-hover: 0.1s; + --duration: 4s; + --black: #16161d; + --black-a: rgba(22, 22, 29, .15); + --gray: #909099; + --blue: #1e90ff; + --blue-a: rgba(30, 144, 255, .1); + --blue-dark: #005cb8; + --blue-light: #52c3fb; + --purple: #a029de; + --purple-dark: #5f267d; + --purple-muted: #a377d2; + --white: #fff; + --offwhite: #ccc; + --sky-100: #3b2f4a; + --sky-150: #302944; + --sky-200: #1f1f3a; + --sky-300: #16161d; + --background-gradient: radial-gradient(circle at center bottom, var(--sky-100), var(--sky-200), var(--sky-300)); + --background: var(--white); + --toggle-background: var(--white); + --text-color: var(--black); + --text-color-a: var(--gray); + --link-color: var(--blue); + --link-color-hover: var(--blue-dark); + --link-color-visited: var(--purple); + --link-color-visited-hover: var(--purple-dark) +} + +.dark { + --toggle-background: var(--sky-100); + --text-color: var(--offwhite); + --link-color: var(--blue); + --link-color-hover: var(--blue); + --link-color-visited: var(--purple-muted); + --link-color-visited-hover: var(--purple-muted) +} + +body { + position: relative; + font: 100%/1.5 Nunito, sans-serif; + color: var(--text-color); + background: var(--background); + overflow-x: hidden +} + +.header-wrapper { + max-width: 35em; + margin: 0 auto; + text-align: center; + padding-top: 1.5em +} + +@media (min-width:40em) { + .header-wrapper { + max-width: 42em; + padding-top: 5em + } +} + +@media (min-width:60em) { + .header-wrapper { + max-width: 50em + } +} + +.main-wrapper { + margin: 1.5em auto 0; + max-width: 35em +} + +@media (min-width:40em) { + .main-wrapper { + margin: 0 auto; + max-width: 25em; + padding: 2.5em 0 + } +} + +.container { + position: relative; + margin: 1.5rem +} + +.footer-wrapper .container, +.header-wrapper .container { + padding: 1.5em 0; + margin: 0 1.5em +} + +.contact-wrapper .container { + text-align: center; + margin: 1.5rem auto; + padding: 0 1.5rem +} + +@media (min-width:40em) { + .contact-wrapper .container { + max-width: 42em + } +} + +@media (min-width:60em) { + .contact-wrapper .container { + max-width: 50em + } +} + +h1, +h2 { + font-weight: 400; + line-height: 1.2 +} + +h1 { + font-size: 1.5em +} + +@media (min-width:60em) { + h1 { + font-size: 2em + } +} + +h2 { + display: block; + cursor: default; + text-align: center; + font-size: 1.25em; + opacity: .75 +} + +a { + text-decoration: none +} + +.outline, +a { + color: var(--text-color) +} + +.outline { + display: inline-block; + border: thin solid hsla(0, 0%, 50%, .4); + padding: .5em 1em; + border-radius: var(--radius-large) +} + +header .container { + text-align: center +} + +@media (min-width:40em) { + header .container { + display: -ms-flexbox; + display: flex; + -ms-flex-align: center; + align-items: center; + text-align: left + } +} + +@media (min-width:40em) { + header h1 { + -ms-flex: 1; + flex: 1; + -ms-flex-align: center; + align-items: center + } +} + +@media (max-width:40em) { + header br { + display: none + } +} + +.me { + width: 6em; + height: 6em; + border-radius: 50%; + margin: 0 0 .5rem +} + +@media (min-width:40em) { + .me { + width: 7em; + height: 7em; + margin: 0 1.5rem 0 0 + } +} + +@media (min-width:60em) { + .me { + width: 8em; + height: 8em + } +} + +.job-wrapper { + max-width: 40em; + margin: 2em auto 0; + text-align: center +} + +.job-wrapper .outline { + margin: 0 1.5em; + border-radius: var(--radius-large); + padding: 1.5em; + border-color: hsla(0, 0%, 50%, .3) +} + +.job-wrapper p { + font-size: 1em; + margin-top: 1em +} + +.job-wrapper a { + display: inline-block; + margin-top: 1em; + font-weight: 700; + color: var(--link-color); + padding: .5em 1.5em; + border-radius: var(--radius-medium); + transition: background var(--transition), color var(--transition), box-shadow var(--transition); + box-shadow: inset 0 0 0 .1em var(--blue-a), 0 0 0 0 transparent +} + +.job-wrapper a:hover { + background: var(--blue-a); + color: var(--link-color-hover); + box-shadow: inset 0 0 0 .1em transparent, 0 0 0 .25em var(--blue-a) +} + +ul { + font-size: 1.2em +} + +li { + position: relative; + list-style: none +} + +.contacts, +.projects, +.works { + margin: 1rem 0 +} + +@media (min-width:40em) { + .works { + margin-bottom: 5em + } +} + +.contact-link, +.project-link { + display: block; + position: relative; + cursor: pointer; + padding: 1.5rem 0 +} + +.contact-link strong, +.project-link strong { + color: var(--link-color); + transition: color var(--transition) +} + +.contact-link:hover strong, +.project-link:hover strong { + color: var(--link-color-hover) +} + +.contact-link:visited strong, +.project-link:visited strong { + color: var(--link-color-visited) +} + +.contact-link:visited:hover strong, +.project-link:visited:hover strong { + color: var(--link-color-visited-hover) +} + +@media (min-width:40em) { + .contact-link, + .project-link { + transition: background-color var(--transition); + border-radius: var(--radius-medium); + margin: 1rem 0; + padding: 1.5rem + } + .contact-link:hover, + .project-link:hover { + background: var(--blue-a); + transition-duration: var(--transition-hover) + } +} + +.project-link { + display: -ms-flexbox; + display: flex; + -ms-flex-align: center; + align-items: center +} + +.project:nth-child(odd) .project-link { + -ms-flex-direction: row-reverse; + flex-direction: row-reverse +} + +.screenshot-wrapper { + min-width: 50%; + max-width: 50%; + height: auto; + margin: 0 1.5rem 0 0; + transition: transform var(--transition); + transform: scale(.9) +} + +.project:nth-child(odd) .screenshot-wrapper { + margin: 0 0 0 1.5rem +} + +.project-link:hover .screenshot-wrapper { + transform: scale(1); + transition-duration: var(--transition-hover) +} + +@media (min-width:40em) { + .screenshot-wrapper { + position: absolute; + z-index: 1; + width: 12em; + height: 9em + } + .project:nth-child(odd) .screenshot-wrapper { + margin: 0 + } +} + +.screenshot { + width: 100%; + height: auto; + border-radius: var(--radius-small); + box-shadow: 0 .5em 1.5em var(--black-a) +} + +@media (min-width:40em) { + .screenshot { + display: block; + width: 100%; + height: auto; + transition: box-shadow var(--transition) + } +} + +.project-link:hover .screenshot { + box-shadow: 0 .5em 3em var(--gray) +} + +.dark .project-link:hover .screenshot { + box-shadow: 0 .5em 3em var(--sky-100) +} + +@media (min-width:40em) { + .line { + position: absolute; + content: ""; + width: 10em; + height: 1px; + background: var(--text-color); + opacity: .15; + pointer-events: none; + top: 50%; + transition: opacity var(--transition) + } + .project-link:hover .line { + opacity: 1 + } +} + +.project:nth-child(odd) .line { + right: calc(100% + .5em); + transform-origin: center right +} + +@media (min-width:40em) { + .project:nth-child(odd) .screenshot-wrapper { + right: calc(100% + 2.5rem) + } +} + +@media (min-width:60em) { + .project:nth-child(odd) .screenshot-wrapper { + right: calc(100% + 5rem) + } +} + +.project:nth-child(odd) .screenshot-wrapper .screenshot { + transform: rotate(5deg) +} + +@media (min-width:40em) { + .project:first-child .line { + transform: rotate(6deg) + } + .project:first-child .screenshot-wrapper { + top: -40% + } + .project:first-child .screenshot-wrapper .screenshot { + transform: rotate(4deg) + } + .project:nth-child(3) .line { + transform: rotate(14deg) + } + .project:nth-child(3) .screenshot-wrapper { + top: -45% + } + .project:nth-child(3) .screenshot-wrapper .screenshot { + transform: rotate(-2deg) + } + .project:nth-child(5) .line { + transform: rotate(-5deg) + } + .project:nth-child(5) .screenshot-wrapper { + top: -35% + } + .project:nth-child(5) .screenshot-wrapper .screenshot { + transform: rotate(8deg) + } + .project:nth-child(7) .line { + transform: rotate(5deg) + } + .project:nth-child(7) .screenshot-wrapper { + top: -20% + } + .project:nth-child(7) .screenshot-wrapper .screenshot { + transform: rotate(-8deg) + } +} + +.project:nth-child(2n) .line { + left: calc(100% + .5em); + transform-origin: center left +} + +@media (min-width:40em) { + .project:nth-child(2n) .screenshot-wrapper { + left: calc(100% + 2.5rem) + } +} + +@media (min-width:60em) { + .project:nth-child(2n) .screenshot-wrapper { + left: calc(100% + 5rem) + } +} + +.project:nth-child(2n) .screenshot-wrapper .screenshot { + transform: rotate(-5deg) +} + +@media (min-width:40em) { + .project:nth-child(2n) .line { + transform-origin: left center + } + .project:nth-child(2n) .screenshot img { + transform: rotate(-5deg) + } + .project:nth-child(2) .line { + transform: rotate(-25deg) + } + .project:nth-child(2) .screenshot-wrapper { + top: -80% + } + .project:nth-child(2) .screenshot-wrapper .screenshot { + transform: rotate(-8deg) + } + .project:nth-child(4) .line { + transform: rotate(-25deg) + } + .project:nth-child(4) .screenshot-wrapper { + top: -60% + } + .project:nth-child(4) .screenshot-wrapper .screenshot { + transform: rotate(2deg) + } + .project:nth-child(6) .line { + transform: rotate(-18deg) + } + .project:nth-child(6) .screenshot-wrapper { + top: -70% + } + .project:nth-child(6) .screenshot-wrapper .screenshot { + transform: rotate(8deg) + } +} + +.contact-wrapper { + padding: 1.5rem 0 +} + +@media (min-width:40em) { + .contacts { + display: -ms-flexbox; + display: flex; + -ms-flex-wrap: wrap; + flex-wrap: wrap; + border: none; + margin: 1.5rem 0 + } +} + +.contact { + -ms-flex: 1 0 50%; + flex: 1 0 50% +} + +.contact-link { + display: block; + padding: 1rem 1.5rem +} + +.email-link span { + -webkit-user-select: initial; + -moz-user-select: initial; + -ms-user-select: initial; + user-select: auto +} + +.email-link strong { + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none +} + +.footer-wrapper { + font-size: smaller; + text-align: center +} + +.copyright { + cursor: default; + margin: 0 0 1.5rem +} + +.dark-toggle { + cursor: pointer; + background: var(--toggle-background); + transition: opacity var(--transition), background var(--transition) +} + +.dark-toggle strong { + color: var(--blue) +} + +.footer-wrapper:hover .dark-toggle { + box-shadow: 0 .5em 1em var(--black-a); + color: var(--offwhite); + opacity: 1; + background: var(--sky-100) +} + +.dark-toggle:focus { + outline: 0 +} + +.stars, +.stars-wrapper { + display: none; + position: absolute; + top: 0; + left: 0; + right: 0; + bottom: 0; + overflow: hidden +} + +.dark .stars, +.dark .stars-wrapper { + display: block +} + +.stars-wrapper { + background: var(--background-gradient) +} + +.dark .stars { + animation: a var(--duration) ease-in-out infinite +} + +.stars:nth-child(2) { + animation-delay: calc(var(--duration) * -.33) +} + +.stars:nth-child(3) { + animation-delay: calc(var(--duration) * -.66) +} + +@keyframes a { + 25% { + opacity: 0 + } +} + +.star { + fill: #fff +} + +.star:nth-child(3n) { + opacity: .8 +} + +.star:nth-child(7n) { + opacity: .6 +} + +.star:nth-child(13n) { + opacity: .4 +} + +.star:nth-child(19n) { + opacity: .2 +} + +.comet { + position: absolute; + left: calc(50% - 75px) +} + +.dark .comet { + animation: 10s linear infinite both +} + +.comet.comet-a { + top: 50vh; + animation-name: b; + animation-delay: 1s +} + +.comet.comet-b { + top: 50%; + animation-name: c; + animation-delay: 6.6s +} + +.comet.comet-c { + top: calc(100% - 50vh); + animation-name: d; + animation-delay: 7.6s +} + +@keyframes b { + 0% { + transform: rotate(-135deg) translate3d(50vmax, 0, 0); + opacity: 0 + } + 20% { + opacity: 1 + } + 40%, + to { + transform: rotate(-135deg) translate3d(-50vmax, 0, 0); + opacity: 0 + } +} + +@keyframes c { + 0% { + transform: rotate(35deg) translate3d(50vmax, 0, 0); + opacity: 0 + } + 20% { + opacity: 1 + } + 40%, + to { + transform: rotate(35deg) translate3d(-50vmax, 0, 0); + opacity: 0 + } +} + +@keyframes d { + 0% { + transform: rotate(120deg) translate3d(50vmax, 0, 0); + opacity: 0 + } + 20% { + opacity: 1 + } + 40%, + to { + transform: rotate(120deg) translate3d(-50vmax, 0, 0); + opacity: 0 + } +} +