@layer normalize{html{line-height:1.15;-webkit-text-size-adjust:100%}body{margin:0}main{display:block}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}button,[type=button],[type=reset],[type=submit]{-webkit-appearance:button}button::-moz-focus-inner,[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner{border-style:none;padding:0}button:-moz-focusring,[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-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}template{display:none}[hidden]{display:none}}.phonebook{background:#111;height:100vh;overflow:hidden;position:relative;width:100vw}@media(min-width:768px){.phonebook{height:480px;width:320px}}.phonebook--loading *{opacity:0}.phonebook__contacts{-webkit-overflow-scrolling:touch;background:#111;height:100%;list-style:none;margin:50px 0 0;overflow:auto;padding:30vh 0 55vh}@media(min-width:768px){.phonebook__contacts{padding:144px 0 264px}}.phonebook__contacts--opening .phonebook__contact{transition:none}.phonebook__contacts--fake{background:#111;left:0;margin:0;padding:0;position:absolute;right:0;z-index:3}.phonebook__contact{align-items:center;background:#111;cursor:pointer;display:flex;font-size:.75rem;height:50px;opacity:.1;padding:0;transition:background .1s,height .1s,opacity .1s}.phonebook__contact:hover{background:#1d1d1d}.phonebook__contact-name{overflow:hidden;padding:0 20px;text-align:center;text-overflow:ellipsis;white-space:nowrap;width:100%}.phonebook__contact-avatar{height:50px;flex:1 0 50px;position:relative;width:50px}.phonebook__contact--next,.phonebook__contact--prev{height:75px;font-size:1rem;opacity:.75}.phonebook__contact--next .phonebook__contact-avatar,.phonebook__contact--prev .phonebook__contact-avatar{height:75px;flex:1 0 75px;width:75px}.phonebook__contact--active{height:100px;font-size:1.25rem;opacity:1}.phonebook__contact--active .phonebook__contact-avatar{height:100px;flex:1 0 100px;width:100px}.phonebook-header{align-items:center;background:#292929;display:flex;filter:drop-shadow(0 4px 2px #000);flex-direction:row;height:50px;left:0;position:absolute;right:0;top:0;z-index:3}.phonebook-header:after{content:attr(data-active);color:red;position:absolute;height:50px;width:50px;top:100%;right:0;display:flex;align-items:center;justify-content:center;font-size:1.25rem;text-transform:uppercase}.phonebook-header--fake{z-index:5}.phonebook-header__title{flex:1;font-size:1rem;padding-left:20px}.phonebook-header__action{border:0;background:transparent;cursor:pointer;height:44px;overflow:hidden;position:relative;width:44px}.phonebook-header__action svg{height:24px;left:50%;position:absolute;top:50%;transform:translate(-50%,-50%);width:24px;z-index:2}.phonebook-header__action svg path{fill:#fafafa}.phonebook-header__action:hover{background:#353535}.contact{background:#111;inset:0;position:absolute;z-index:4}.contact__title{background:#111;align-items:center;display:flex;height:calc(var(--y) * 1px);position:absolute;width:100%}.contact__avatar{height:100px;left:0;position:absolute;top:0;transform:translateY(calc(var(--y) * 1px));width:100px}.contact__avatar--backdrop{background-size:cover;height:calc(var(--y) * 1px);left:0;opacity:0;position:absolute;right:0;top:0;width:100%}.contact__avatar--backdrop:after{content:"";inset:0;position:absolute}.contact__name{transform:translateY(calc(var(--y) * 1px));position:absolute;left:0;right:0;top:0;width:100%;display:block;background:#0000;overflow:hidden;text-overflow:ellipsis;text-align:center;white-space:nowrap;line-height:100px;padding:0 20px 0 100px}.contact__close,.contact__menu{background:transparent;border:0;height:44px;position:absolute;top:6px;width:44px;z-index:2}.contact__close{left:6px}.contact__menu{right:6px}.contact__details{background:#111;bottom:0;left:0;opacity:0;overflow:auto;padding:20px;position:absolute;right:0;top:calc(var(--t) * 1px);transform:translateY(calc(var(--y) * 1px))}.contact-details{display:grid;grid-template-columns:auto 1fr;align-items:center;margin:0}.contact-details__action path{fill:red}.contact-details__detail{margin:0;overflow:hidden;padding:0 20px;text-overflow:ellipsis}*,*:before,*:after{box-sizing:border-box}body,html{align-items:center;background:linear-gradient(45deg,#639 50%,#1e90ff);color:#fafafa;display:flex;font-family:Lato,sans-serif;justify-content:center;min-height:100vh;overflow-x:hidden;position:relative;width:100vw}img{-o-object-fit:cover;object-fit:cover}img:after{background:linear-gradient(45deg,gray,#a9a9a9,gray);content:"";inset:0;position:absolute}svg{height:24px;width:24px}svg path{fill:#fafafa}button{background:transparent;border:0;cursor:pointer;height:44px;width:44px}button:active .bloom{animation:bloom .25s;animation-fill-mode:forwards;background:red;border-radius:100%;inset:0;opacity:.5;position:absolute}@keyframes bloom{0%{transform:scale(0)}to{opacity:.25;transform:scale(1.5)}}