html{font-size:100%;overflow-y:scroll;-webkit-tap-highlight-color:rgba(0, 0, 0, 0);-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%;height:100%}
body{font-family:"Comfortaa", cursive;font-weight:300;font-size:16px;line-height:23px;color:#fff2e9;-webkit-font-smoothing:antialiased;height:100%;position:relative;overflow:hidden;background:#10121e;margin:0}
section{position:absolute;top:50%;left:50%;transform:translate(-50%, -50%);text-align:center;width:100%;padding:10px;box-sizing:border-box}
section>a:first-child{max-width:60%;margin:18px auto;}
.fade-in{opacity:0;animation:fadeIn;animation-duration:.1s;animation-timing-function:linear;animation-iteration-count:1;animation-fill-mode:forwards;will-change:opacity}
.fade-in-blur{opacity:0;animation:fadeInBlur;animation-duration:.1s;animation-timing-function:linear;animation-iteration-count:1;animation-fill-mode:forwards;will-change:filter, opacity}
.bg{display:block;position:absolute;top:-20px;left:-20px;width:calc(100% + 40px);height:calc(100% + 40px);object-fit:cover;filter:blur(10px) brightness(0.5);opacity:0;pointer-events:none}
a, a:link, a:visited, a:hover, a:active, a:link:hover, a:link:active, a:visited:hover, a:visited:active{
color:#fff2e9;text-decoration:none;outline:none;backface-visibility:hidden;position:relative}
.link,.link:link,.link:visited{transition:color .1s linear, transform .1s linear;transform:translateZ(0) scale(1);will-change:transform}
.link:hover,.link:active,.link:link:hover,.link:link:active,.link:visited:hover,.link:visited:active{color:#108dcf;transform:scale(1.1)}
.name,.emoji,.icons{line-height:1.2em;margin:20px 0;font-weight:300;display:block}
.name{position:relative;font-size:44px;animation-delay:.5s!important;animation-duration:.4s!important;user-select:none}.name > .en{transition:transform .15s .15s linear}
.name>.fr{transition:transform .15s linear;transform:perspective(400px) rotate3d(180, 0, 0, -90deg);position:absolute;top:0; bottom:0; left:0; right:0}
.name:hover>.en{transform:perspective(400px) rotate3d(180, 0, 0, 90deg);transition:transform .15s linear}.name:hover > .fr{transform:perspective(400px) rotate3d(180, 0, 0, 0);transition:transform .15s .15s linear}
.lname{color:#108dcf}
.emoji{font-size:30px;max-width:400px;margin:0 auto;animation-delay:.8s!important;animation-duration:.4s!important;white-space:nowrap}
.emoji:hover, .emoji:active, .emoji:link:hover, .emoji:link:active, .emoji:visited:hover, .emoji:visited:active{transform:scale(1.05)}
.icons{font-size:28px;animation-delay:1.1s!important;animation-duration:.4s!important;display:flex;justify-content:center}
.icons>a{display:block;padding:0 25px}
.icons>.mdi-google-chrome:hover,.icons>.mdi-edge:hover,.icons>.mdi-firefox:hover,.icons>.mdi-opera:hover{animation:rotate 2s linear infinite}
@keyframes fadeIn{0%{opacity:0}100%{opacity:1}}
@keyframes fadeInBlur{0%{opacity:0;filter:blur(50px)}100%{opacity:1;filter:blur(0)}}
@keyframes rotate{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}