/* 

~~ Stylesheet for ~~

       _ _      _ _       _ _        _ 
      | (_)    | (_)     (_) |      | |
  ___ | |_   __| |_  __ _ _| |_ __ _| |
 / _ \| | | / _` | |/ _` | | __/ _` | |
| (_) | | || (_| | | (_| | | || (_| | |
 \___/|_|_(_)__,_|_|\__, |_|\__\__,_|_|
                     __/ |
                    |___/

*/

/* minireset.css v0.0.6 | MIT License | github.com/jgthms/minireset.css */

html,body,p,ol,ul,li,dl,dt,dd,blockquote,figure,fieldset,legend,textarea,pre,iframe,hr,h1,h2,h3,h4,h5,h6{margin:0;padding:0}
h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal}
ul{list-style:none}
button,input,select{margin:0}
html{box-sizing:border-box}
*,*::before,*::after{box-sizing:inherit}
img,video{height:auto;max-width:100%}
iframe{border:0}
table{border-collapse:collapse;border-spacing:0}
td,th{padding:0}

/* Basics */

html,
body{align-items:center;background:#111;color:#fff;display:flex;font:18px/1.75 "Martel",serif;justify-content:center;min-height:100%;z-index:0}

@media (min-width:400px){
  html,
  body{font-size:20px}}
@media (min-width:600px){
  html,
  body{font-size:22px}}

/* Layout */

main{max-width:675px;padding:75px 25px}

/* Text */

h1 svg{fill:#fff;height:5.4em;margin:0 0 .5em}
p{margin-top:25px}
p span{white-space:nowrap}

/* Links */

a,
button{background:none;border:none;color:inherit;cursor:pointer;font:inherit;padding:0;position:relative;text-decoration:none;white-space:nowrap}
a:before,
a:after,
button:before,
button:after{content:"";height:3px;position:absolute;right:0;top:1.25em;transition:.3s cubic-bezier(.25,.8,.25,1)}
a:before,
button:before{background:rgba(255,255,255,.3);width:100%;z-index:-10}
a:after,
button:after{background:#ffa500;width:0;z-index:-5}
a:hover:after,
button:hover:after{left:0;width:100%}

/* Logo Animations (JS) */

h1{cursor:pointer;display:inline-block}
h1 svg{overflow:visible;pointer-events:none}
h1 path{transform-box:fill-box;transform-origin:center center;transition:.3s cubic-bezier(.25,1.25,.5,1)}
h1 path.jumping{transform:translateY(-15px);transition:.3s cubic-bezier(.34,1.56,.64,1)}
.exploding{cursor:pointer}
.exploding h1 path{transition:.5s cubic-bezier(.25,1,.5,1)}
.particle{background:#ffa500;border-radius:50%;left:0;position:fixed;top:0;z-index:-5}

/* Page Animations (JS) */

h1 path,
p,
.content-toggle{opacity:0;visibility:hidden}
.loaded h1 path{animation:oli .6s cubic-bezier(.22,1,.36,1),fadeIn .6s cubic-bezier(.22,1,.36,1) forwards}
.loaded h1 path:nth-of-type(2){animation-delay:.1s}
.loaded h1 path:nth-of-type(3){animation-delay:.2s}
.loaded p,
.loaded .content-toggle{animation:main .8s cubic-bezier(.22,1,.36,1) .25s,fadeIn .8s cubic-bezier(.22,1,.36,1) .25s forwards}
.loaded p:nth-of-type(2){animation-delay:.3s}
.loaded p:nth-of-type(3){animation-delay:.4s}
.loaded .content-toggle{animation-delay:.35s}

@keyframes fadeIn{
  from{opacity:0;visibility:hidden}
  to{opacity:1;visibility:visible}}
@keyframes oli{
  from{transform:translateY(75px)}
  to{transform:translateY(0)}}
@keyframes main{
  from{transform:translateY(50px)}
  to{transform:translateY(0)}}

/* Cursor (JS) */

.cursor{clip-path:circle(.5em);display:none;height:25vw;left:-12.5vw;position:fixed;top:-12.5vw;transition:.4s clip-path cubic-bezier(.25,.8,.25,1),.1s transform cubic-bezier(.25,.8,.25,1);width:25vw;z-index:-5}
.cursor *{height:100%;pointer-events:none;position:absolute;transition:.2s;width:100%}
.cursor div{background:#ffa500;opacity:1}
.cursor img{object-fit:cover;opacity:0}
.cursor img.active{opacity:.8}
.cursor.logo{clip-path:circle(3em)}
.cursor.link{clip-path:circle(50%)}
.cursor.link div{opacity:0}
.cursor.button{clip-path:circle(1.5em);transition:.2s clip-path cubic-bezier(.25,.8,.25,1)}
.cursor.pressed{clip-path:circle(.35em);transition:.05s clip-path cubic-bezier(.25,.8,.25,1)}
.cursor-enabled .cursor{display:block}

/* See More (JS) */

.hidden-content{height:0;overflow:hidden;transition:.5s cubic-bezier(.25,.8,.25,1);visibility:hidden}
.hidden-content:not(.expanded) *{transition:inherit;visibility:hidden}
.hidden-content.expanded{visibility:visible}

/* Email Copied Alert (JS) */

.copied-alert{background:#333;border-radius:6px;bottom:30px;font-size:.7em;max-width:90%;opacity:0;padding:12px 20px 10px;position:fixed;transform:translateY(20px);transition:.2s cubic-bezier(.25,.8,.25,1);visibility:hidden}
.copied-alert.active{opacity:1;transform:translateY(0);visibility:visible}

/* Fonts */

@font-face{font-family:"Martel";font-style:normal;font-weight:200;font-display:swap;src:url(../fonts/Martel-UltraLight.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}