@import url(https://fonts.googleapis.com/css2?family=Fredoka+One&family=La+Belle+Aurore&family=Noto+Sans+TC:wght@100;300;400;500;700;900&display=swap);*{box-sizing:border-box}a,button,h2,h3,h4,h5,h6,input,label,mark,p,small,span,textarea{color:#251818;font-family:Noto Sans TC,Arial,sans-serif}.logo,h1 a{color:#251818;display:block;font-family:Fredoka One,cursive,sans-serif;letter-spacing:1.5px;text-decoration:none}h1,h2{text-align:center}h2{font-size:xx-large}p{font-weight:300;line-height:1.5}ul{padding:0}ul li{list-style:none}.signature{font-family:La Belle Aurore,cursive;font-size:xx-large}body{margin:0}main{margin:1.5rem auto;max-width:110ch;padding:2rem;width:100%}header{justify-content:space-between;padding:0 2rem}header,nav{align-items:center;display:flex;flex-direction:row;gap:1rem}nav a{color:#251818;display:block;text-decoration:none}main#About{border:1px solid #251818;border-radius:12px}.App>footer{align-items:center;background-color:#f1e292;display:flex;flex-direction:row;gap:2rem;gap:1rem;justify-content:space-evenly;padding:1rem}.App>footer #attributes{display:flex;flex-direction:column}form label{display:block;font-size:small}form input,form textarea{margin-bottom:.5rem;padding:.5rem 1rem;width:100%}.grid{display:grid}.flex{display:flex}.row,.row .group{align-items:center;display:flex;flex-direction:row;gap:1rem}.avatar{border-radius:50%;height:clamp(5rem,10vw,10rem);width:clamp(5rem,10vw,10rem)}.btn{background-color:#251818;color:#f2e8cf;cursor:pointer;display:block;margin:.5rem auto;padding:.5rem 2rem;width:100%}.points{border-radius:50%;height:15px;outline:1px solid #251818;width:15px}.fill{-webkit-animation:pointFill 2s;animation:pointFill 2s;background-color:#251818;transition:background-color .5s ease-in-out}.bar{height:15px;min-width:150px;outline:1px solid #251818;transition:width .5s ease-in-out}.bar,.bar *{border-radius:15px}.bar *{-webkit-animation:barLoad 3s;animation:barLoad 3s;background-color:#251818;display:block;height:100%}.bar .w-5{width:100%}.bar .w-4{width:80%}.bar .w-3{width:60%}.bar .w-2{width:40%}.bar .w-1{width:20%}mark{background-color:#251818;border-radius:3px;color:#f2e8cf;font-size:small;padding:.25rem .5rem}main#gallery .grid{gap:1rem;grid-template-columns:repeat(auto-fill,minmax(130px,1fr))}.breed{position:relative}.breed:nth-child(6n+0){background:#f1e292}.breed:nth-child(6n+1){background:#a7c957}.breed:nth-child(6n+2){background:#e48889}.breed:nth-child(6n+3){background:#a7c957}.breed:nth-child(6n+4){background:#cbe5f1}.breed:nth-child(6n+5){background:#e48889}.breed:nth-child(6n+6),.breed:nth-child(6n+7){background:#a7c957}main#gallery .breed img{height:auto;width:100%}main#gallery .breed li{-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);background-color:rgba(0,0,0,.5);display:flex;height:100%;list-style:none;opacity:0;position:absolute;top:0;transition:opacity .2s ease-in-out;width:100%}main#gallery .breed li:hover{opacity:1}main#gallery .breed li span{align-items:center;align-self:center;color:#f2e8cf;font-size:large;justify-content:center;justify-self:center;margin:0 auto;text-align:center;text-transform:capitalize}main#About footer{align-items:center;display:flex;flex-direction:row;gap:1rem}main#resources .grid{gap:1rem;grid-template-columns:1fr 1fr;margin:2rem 0}main#resources .block{border-radius:12px;outline:2px solid #251818;padding:1rem 2rem}main#resources .block ul{margin:.5rem 0;padding:0}main#resources .block ul li{font-size:small;list-style:none;margin:0}main#resources .block ul li a{color:#251818;color:#bc4749;display:block;text-decoration:none}main#resources .block ul li a:hover{text-decoration:underline}main#resources .block h3{margin:.5rem 0}.App:has(>main#breed){background:#a7c957}main#breed{align-items:center;display:flex;flex-direction:row;gap:1rem;gap:3rem;padding-top:0}main#breed h2{text-align:left}main#breed .wrap>.row{margin-top:1rem}main#breed .wrap h3{font-size:medium;margin:.5rem 0}main#breed .wrap .flex,main#breed .wrap .row{gap:1rem;justify-content:space-between}main#breed .wrap .data-block{border-radius:3px;flex-grow:1;margin-top:1rem;outline:2px solid #251818;padding:0 1rem}main#breed .wrap .display__num{font-size:x-large;font-weight:600}main#breed #gallery{background-color:hsla(43,57%,88%,.5);max-height:80vh;overflow-y:scroll;position:absolute;right:0;top:0;width:30ch}main#breed button{background-color:#251818;border:none;border-radius:50%;bottom:0;color:#f2e8cf;cursor:pointer;height:50px;margin:3rem;padding:.5rem;position:absolute;right:0;width:50px}.noCompare .container{align-items:center;display:flex;flex-direction:row;gap:1rem}.compare{max-width:150ch}.compare .container{border-radius:12px;flex-direction:column;outline:2px solid #251818;padding:3rem}main#contact{align-items:center;display:flex;flex-direction:row;gap:1rem}main#contact h2{font-size:4.5rem;margin:1.5rem 0}main#contact .group{min-width:40%;padding:2rem}@media screen and (max-width:870px){main#breed,main#contact,main#resources{display:flex;flex-direction:column}main#contact .group{width:100%}}@media screen and (max-width:600px){.App>footer,header{display:flex;flex-direction:column;text-align:center}main#resources .grid{grid-template-columns:1fr}}@-webkit-keyframes barLoad{0%{width:0}}@keyframes barLoad{0%{width:0}}@-webkit-keyframes pointFill{0%{background-color:initial}}@keyframes pointFill{0%{background-color:initial}}
/*# sourceMappingURL=main.dc4e2951.css.map*/