@font-face{font-family:My Chemical Romance;src:url(/assets/my-chemical-romance-BNDB30mJ.woff2)}@font-face{font-family:Flexo-Medium;src:url(/assets/Flexo-Medium-CRIR3Dyf.otf)}:root{font:16px/1 sans-serif;--break-shape: polygon( 0 60%, 9% 38%, 10% 7%, 19% 11%, 47% 4%, 70% 14%, 84% 7%, 97% 20%, 91% 35%, 100% 58%, 92% 72%, 87% 92%, 68% 90%, 50% 100%, 40% 91%, 25% 94%, 9% 85%, 11% 77% )}*,:after,:before{margin:0;padding:0;box-sizing:border-box}html{height:100%}body{min-height:100%;font-family:Flexo-Medium,arial,sans-serif}ul{margin:0;padding:0;justify-content:space-between;list-style-type:none;list-style:none}ul li{display:flex;justify-content:space-between;cursor:default}.breadcrumb{padding-left:100px;font-size:1rem;white-space:nowrap}.breadcrumb a{align-items:center;color:#3273dc;display:flex;justify-content:center;padding:0 .75em}.breadcrumb a:hover{color:#363636}.breadcrumb a .icon{align-items:center;display:inline-flex;justify-content:center;height:1.5rem;width:1.5rem}.breadcrumb a .icon:first-child{margin-right:.5em}.breadcrumb a .icon:last-child{margin-left:.5em}.breadcrumb li{align-items:center;display:flex}.breadcrumb li:first-child a{padding-left:0}.breadcrumb li.is-active a{color:#363636;cursor:default;pointer-events:none}.breadcrumb li+li:before{color:#b5b5b5;content:"/"}.breadcrumb ol,.breadcrumb ul{align-items:flex-start;display:flex;flex-wrap:wrap;justify-content:flex-start}.breadcrumb.is-centered ol,.breadcrumb.is-centered ul{justify-content:center}.breadcrumb.is-right ol,.breadcrumb.is-right ul{justify-content:flex-end}.app{display:flex;flex-direction:column;justify-content:center;align-items:center}.app section{padding:3rem 1.5rem}.app header .name{font-family:My Chemical Romance,sans-serif;font-size:80px;font-variant:small-caps;letter-spacing:-4px;text-shadow:1px 1px 2px rgba(0,0,0,.75);margin:3rem;position:relative;text-align:center;color:#eb008b;font-weight:400;font-style:normal}.app header .name h1{font-family:Bubblegum Sans,sans-serif;position:absolute;left:44%;top:15px;color:#008beb;font-size:35px;margin-bottom:-1.2rem}.app header .name .initial{display:inline-block;transform:skew(339deg) translate(6px)}.app header .name .m{display:inline-block;transform:skew(342deg) translate(1px,3px)}.app header .name .h{display:inline-block;font-size:104px}.app .pet-list-container{position:relative;display:flex;flex-direction:column}.app .pet-list-container .filter-options-container{margin-top:10px;margin-bottom:20px}.app .pet-list-container .filter-options-container .filter-options{display:flex;justify-content:space-between}.app .pet-list-container .filter-options-container .filter-options .sort-dropdown-container{align-self:flex-start}.app .pet-list-container .filter-options-container .filter-options .sort-dropdown-container .sort-label{margin-right:10px}.app .pet-list-container .filter-options-container .filter-options .search-bar-toggle-container{display:flex;align-items:center}.app .pet-list-container .filter-options-container .filter-options .search-bar-toggle-container .search-bar-container{margin-right:5px}.app .pet-list-container .filter-options-container .filter-options .search-bar-toggle-container .toggle-dead-button-container{margin-left:5px}.app .pet-list-container .list-pets{display:flex;padding-top:1rem;width:1000px;max-width:1000px}.app .pet-list-container .list-pets .pets{flex:1;display:flex;flex-direction:column}.app .pet-list-container .list-pets .pets .top-level{display:flex;flex-wrap:wrap;justify-content:center;gap:2rem}.app .pet-list-container .list-pets .pets .top-level .pet{padding:15px;display:flex}.app .pet-list-container .list-pets .pets .top-level .pet ul li:nth-child(-n+1){cursor:pointer}.app .pet-list-container .list-pets .pets .top-level .pet .image-container{position:relative;display:flex;align-items:center;width:120px;height:120px}.app .pet-list-container .list-pets .pets .top-level .pet .image-container img{max-width:120px;height:auto;width:100%}.app .pet-list-container .list-pets .pets .top-level .pet .image-container .deceased-banner-sprite{position:absolute;background-color:#fff;padding:2px 0;border:2px solid black;color:#e20401;font-weight:700;text-align:center;z-index:1;transform-origin:top center;box-shadow:0 0 5px #0000004d}.app .pet-list-container .list-pets .pets .top-level .pet .pet-list-pet-details li:not(:first-child){margin:3px 0}.app .pet-list-container form#create-pet-form{display:flex;justify-content:center;padding-top:3rem;position:relative}.app .pet-list-container form#create-pet-form ul li.input-label{position:absolute;top:24px;left:50%;transform:translate(-50%);white-space:nowrap}.app .pet-list-container form#create-pet-form ul li ul.input-container{display:flex;justify-content:center;position:relative;width:100%}.app .pet-list-container form#create-pet-form ul li ul.input-container li{position:relative;display:inline-block}.app .pet-list-container form#create-pet-form ul li ul.input-container li input{margin:0 auto;border:none;padding:.3em .2em 0;color:#074863;font-size:1em;line-height:1.5em;background-color:#fff;opacity:.8}.app .pet-list-container form#create-pet-form ul li ul.input-container li .error-message{position:absolute;top:20%;left:calc(100% + 5px);color:red;white-space:nowrap}.app .pet-list-container form#create-pet-form ul li:last-child{justify-content:center}.app .pet-list-container form#create-pet-form ul li:last-child button{background-color:#5e91e4;color:#fff;display:inline-block;font-size:100%;font-family:Flexo-Demi,arial,sans-serif;border-radius:5px;border:none;cursor:pointer;line-height:100%;margin:8px 1.5625% 1.5625%;padding:8px;vertical-align:middle;text-align:center;text-transform:none;text-shadow:1px 1px 2px rgba(0,0,0,.7);border:1px solid rgba(0,0,0,.2)}.app .pet-details-container{margin:0 auto;position:relative}.app .pet-details-container .pet-details-pet-container{display:flex;flex-direction:column;justify-content:center;align-items:center;position:relative;width:100%;height:auto}.app .pet-details-container .pet-details-pet-container .pet-details-name{text-align:center;font-size:2rem;margin-top:-1.5rem;padding:10px;padding-bottom:2rem}.app .pet-details-container .pet-details-pet-container .pet-details-inner{background:#000000a6;width:95vw;height:700px;clip-path:var(--break-shape);transform:translate(4px);position:relative;z-index:5;display:flex;justify-content:center;align-items:center}.app .pet-details-container .pet-details-pet-container .pet-details-inner:before{content:"";display:block;width:100%;height:100%;background:silver;clip-path:var(--break-shape);transform:scale(.95)}.app .pet-details-container .pet-details-pet-container .pet-details-inner .pet-details-block{padding:25px;--border-radius: 10px;position:absolute;width:77%;border-radius:var(--border-radius);transform:translateY(4px);display:flex;justify-content:center;align-items:center}.app .pet-details-container .pet-details-pet-container .pet-details-inner .pet-details-block .pet-details-picture{position:relative;flex:1;display:flex;justify-content:flex-end}.app .pet-details-container .pet-details-pet-container .pet-details-inner .pet-details-block .pet-details-picture .deceased-banner{position:absolute;padding:0;width:100%;background-color:#fff;color:#e20401;border:2px solid black;font-size:2.5rem;font-weight:700;text-align:center;z-index:1;transform-origin:top center;box-shadow:0 0 5px #0000004d}.app .pet-details-container .pet-details-pet-container .pet-details-inner .pet-details-block .pet-details-picture img{inherits:none;background-color:#f2f2f2b6;border-radius:55px;max-width:100%;max-height:100%}.app .pet-details-container .pet-details-pet-container .pet-details-inner .pet-details-block .pet-details-info{position:relative;flex:1;display:flex;flex-direction:column;border-radius:55px;z-index:5}.app .pet-details-container .pet-details-pet-container .pet-details-inner .pet-details-block .pet-details-info ul li{font-size:1.3rem;padding:1rem;padding-left:25%;white-space:nowrap}.app .pet-details-container .pet-details-pet-container .pet-details-inner .pet-details-block .pet-details-info .hunger-level{display:block}.app .pet-details-container .pet-details-pet-container .pet-details-inner .pet-details-block .pet-details-info .hunger-level .hunger-message{position:absolute;display:block;font-size:16px;margin-top:.5rem;color:red}.app .pet-details-container .pet-details-pet-container .pet-details-inner .pet-details-block .pet-details-info .happiness-level{display:block}.app .pet-details-container .pet-details-pet-container .pet-details-inner .pet-details-block .pet-details-info .happiness-level .happiness-message{position:absolute;display:block;font-size:16px;margin-top:.5rem;color:red}.app .pet-details-container .actions{display:flex;flex-direction:column;justify-content:center;align-self:center;font-size:24px}.app .pet-details-container .actions .buttons-container{width:100%;height:50px;margin-top:25px;display:flex;justify-content:space-between;position:relative;gap:70px}.app .pet-details-container .actions .buttons-container .button-text{position:absolute}.app .pet-details-container .actions .buttons-container .button-text.play{top:-64%;left:-4.6%}.app .pet-details-container .actions .buttons-container .button-text.feed{top:-8%;left:37.5%}.app .pet-details-container .actions .buttons-container .button-text.scold{top:-64%;left:80.9%}.app .pet-details-container .actions .buttons-container .button{width:22px;height:22px;border-radius:50%;background-color:#eb008b;box-shadow:0 0 4px 2px #000000bf,-2px -2px 4px #00000080 inset}.app .pet-details-container .actions .buttons-container .button:active{background-image:linear-gradient(#0000001a,#0000001a);box-shadow:0 0 4px 2px #000000bf,2px 2px 2px #00000040 inset}.app .pet-details-container .actions .buttons-container .button.middle{align-self:flex-end}.app .pet-details-container .actions .delete-button-container{height:32px;margin-top:45px;align-self:flex-end;display:flex;flex-direction:column;position:relative}.app .pet-details-container .actions .delete-button-container .button-text{position:absolute;top:-100%;left:-88%}.app .pet-details-container .actions .delete-button-container .button{width:22px;min-height:22px;height:22px;border-radius:50%;background-color:#eb008b;box-shadow:0 0 4px 2px #000000bf,-2px -2px 4px #00000080 inset}.app .pet-details-container .actions .delete-button-container .button:active{background-image:linear-gradient(#0000001a,#0000001a);box-shadow:0 0 4px 2px #000000bf,2px 2px 2px #00000040 inset}@media screen and (max-width: 1000px){.pet-container .pet-details-container .pet-details-inner .pet-details-block{margin:12%;padding:15%}}.static-message{text-align:center}@media screen and (max-width: 815px){.app header .name{font-size:50px;margin-bottom:8px}.app header .name h1{top:0;left:50%;font-size:15px;letter-spacing:0ch;white-space:nowrap}.app header .name .h{font-size:52px}.app section{padding:0}.app .pet-list-container{width:400px}.app .pet-list-container .filter-options-container{align-self:center}.app .pet-list-container .filter-options-container .filter-options{flex-direction:column-reverse}.app .pet-list-container .list-pets{display:flex;width:100%}.app .pet-details-container .breadcrumb{padding-left:10px}.app .pet-details-container .pet-details-pet-container .pet-details-name{margin-top:-3rem;padding-bottom:0;font-size:25px}.app .pet-details-container .pet-details-pet-container .pet-details-inner{justify-content:flex-start;height:500px}.app .pet-details-container .pet-details-pet-container .pet-details-inner .pet-details-block{display:flex;flex-direction:column;height:80%;width:80%;margin:10%}.app .pet-details-container .pet-details-pet-container .pet-details-inner .pet-details-block .pet-details-picture{width:80%;z-index:-10}.app .pet-details-container .pet-details-pet-container .pet-details-inner .pet-details-block .pet-details-info{align-self:start;margin:10px -10%;left:10%}.app .pet-details-container .pet-details-pet-container .pet-details-inner .pet-details-block .pet-details-info ul li{font-size:1rem;padding-bottom:0;padding-top:8px}.app .pet-details-container .pet-details-pet-container .pet-details-inner .pet-details-block .pet-details-info .hunger-level .hunger-message{margin-top:2rem;margin-left:-28%;color:red}.app .pet-details-container .pet-details-pet-container .pet-details-inner .pet-details-block .pet-details-info .happiness-level .happiness-message{position:absolute;display:block;left:35%;transformx:50%;margin-top:-1%;margin-left:-25%;color:red}.app .pet-details-container .pet-details-pet-container .pet-details-inner .pet-details-block .pet-details-info .happiness-level .happiness-message:after{content:" ";white-space:pre}.app .pet-details-container .pet-details-pet-container .pet-details-inner .pet-details-block .pet-details-info .happiness-level .happiness-message span.break-point{text-align:center;display:block}}