:root{--primary-spacing:20px;--header-height:80px;--container-width:1200px}body{background-color:#f5f5f5;height:100vh;margin:0;overflow:hidden;padding:0}div.container{align-items:center;display:flex;flex-direction:column;margin:0 auto;max-width:1200px;max-width:var(--container-width);padding:0 20px;padding:0 var(--primary-spacing);position:relative}h1{color:#2c3e50;font-size:clamp(24px,4vw,42px);margin:20px 0;margin:var(--primary-spacing) 0;text-align:center;z-index:2}.background{height:100vh;object-fit:cover;position:fixed;top:80px;top:var(--header-height);width:100%;z-index:1}#fact{background-color:#ffffffe6;border-radius:12px;box-shadow:0 4px 6px #0000001a;font-size:clamp(18px,3vw,32px);max-height:30vh;padding:20px;padding:var(--primary-spacing);text-align:center;top:30vh;transition:all .3s ease;width:min(80%,800px)}#fact,.animals{left:50%;position:fixed;transform:translateX(-50%);z-index:2}.animals{bottom:10vh;display:flex;gap:20px;gap:var(--primary-spacing);justify-content:center;width:min(90%,1200px);width:min(90%,var(--container-width))}.animal{border-radius:12px;box-shadow:0 4px 6px #0000001a;cursor:pointer;transition:transform .3s ease;width:clamp(100px,25vw,300px)}.animal:hover{transform:scale(1.05)}@media only screen and (max-width:768px){:root{--header-height:60px;--primary-spacing:25px}.animals{bottom:40vh}}@media only screen and (max-width:480px){.animals{align-items:center;bottom:auto;flex-direction:column;top:25vh}.animal{width:clamp(80px,40vw,150px)}#fact{top:10vh}}@media screen and (max-height:800px) and (orientation:landscape){#fact{font-size:clamp(16px,2.5vw,24px);max-height:25vh;overflow-y:auto;padding:20px;padding:var(--primary-spacing);top:15vh}.animals{bottom:25vh;gap:5rem}.animal{width:clamp(90px,15vw,200px)}}@media screen and (max-height:500px) and (orientation:landscape){#fact{max-height:30vh;top:25vh}.animals{bottom:13vh}.animal{width:clamp(60px,15vw,150px)}}
/*# sourceMappingURL=main.53d8c31f.css.map*/