@keyframes opening-background{0%{background-color:#000}15%{background-color:#000}30%{background-color:#9acd32}75%{background-color:#9acd32}95%{background-color:#000}to{background-color:#9acd32}}@keyframes opening-logo{0%{opacity:0;transform:translateY(50%) scale(0)}50%{opacity:0;transform:translateY(50%) scale(0)}70%{opacity:1;transform:translateY(0) scale(.1)}75%{opacity:1;transform:translateY(0) scale(0)}95%{opacity:1;transform:translateY(0) scale(20)}98%{opacity:1;transform:translateY(0) scale(.9)}99%{opacity:1;transform:translateY(0) scale(1.1)}to{opacity:1;transform:translateY(0) scale(1)}}@keyframes opening-header{0%{opacity:0;transform:scale(20)}15%{opacity:0;transform:scale(20)}30%{opacity:1;transform:scale(0)}38%{opacity:1;transform:scale(0)}42%{opacity:1;transform:scale(2)}47%{opacity:1;transform:scale(2)}48%{opacity:1;transform:scale(.9)}49%{opacity:1;transform:scale(1.1)}50%{opacity:1;transform:scale(1)}to{opacity:1;transform:scale(1)}}@keyframes opening-misc{0%{opacity:0;transform:translateY(.5rem)}85%{opacity:0;transform:translateY(.5rem)}95%{opacity:1;transform:translateY(0)}to{opacity:1;transform:translateY(0)}}@keyframes opening-footer{0%{opacity:0;transform:translateY(.5rem)}85%{opacity:0;transform:translateY(.5rem)}95%{opacity:1;transform:translateY(0)}to{opacity:1;transform:translateY(0)}}@keyframes line-1{94%{transform:translateY(2.5em);opacity:0}0%,99%,to{transform:translateY(0);opacity:1}28%{transform:translateY(0);opacity:1}33%{transform:translateY(-2.5em);opacity:0}}@keyframes line-2{0%,28%,to{transform:translateY(2.5em);opacity:0}33%{transform:translateY(0);opacity:1}61%{transform:translateY(0);opacity:1}66%{transform:translateY(-2.5em);opacity:0}}@keyframes line-3{0%,61%,to{transform:translateY(2.5em);opacity:0}66%{transform:translateY(0);opacity:1}94%{transform:translateY(0);opacity:1}99%{transform:translateY(-2.5em);opacity:0}}*{margin:0;transform-origin:center}html{background-color:#9acd32;font-family:sans-serif}#root,html{height:100%;width:100%;position:fixed}#root.opening{animation-name:opening-background;animation-duration:4s}header{width:100%;height:calc(40% - 4rem);position:fixed;left:0;top:0;margin:2rem 0}.opening header{animation-name:opening-header;animation-duration:4s}header>*{margin:1rem}@media (max-width:639px){h1{font-size:3rem}}@media (min-width:640px){h1{font-size:4rem}}h1{max-width:80%}h2{font-size:1rem;font-weight:lighter}.opening h2{animation-name:opening-misc;animation-duration:5s}.logo{width:100%;height:100%;position:fixed;left:0;top:0}.opening .logo{animation-name:opening-logo;animation-duration:4s}#logo{display:block;width:30rem;max-width:80%;max-height:80%}main{width:100%;height:30%;position:fixed;left:0;top:60%;font-weight:lighter;opacity:0}.opening main{animation-name:opening-misc;animation-duration:5s}main>h2{margin:1rem}.content{position:absolute;width:100%;height:5em}ul.seplist{width:90%;padding:0;margin:.5em 0}footer{width:100%;height:10%;position:fixed;left:0;bottom:0;opacity:0}.opened footer,.opened main{opacity:1}.opening footer{animation-name:opening-footer;animation-duration:5s}footer>p{margin:.25rem}.mail{font-family:monospace}.content>ul,footer>p{position:absolute;animation-duration:15s;animation-iteration-count:infinite}.opened .line-1{animation-name:line-1}.opened .line-2{animation-name:line-2}.opened .line-3{animation-name:line-3}ul.seplist{display:flex;flex-wrap:wrap;justify-content:center;list-style-type:none}ul.seplist>li:not(:first-child):before{content:"/";padding:0 .25em}