@keyframes shake{0%{transform:rotate(0)}25%{transform:rotate(10deg)}50%{transform:rotate(0)}75%{transform:rotate(-10deg)}to{transform:rotate(10deg)}}@keyframes rotBGimg{0%{transform:rotate(0)}to{transform:rotate(360deg)}}*{padding:0;margin:0;box-sizing:border-box}body{display:grid;grid-template-areas:"header" "main" "footer";grid-template-rows:auto 1fr auto;min-height:100vh;overflow-x:hidden;max-width:1440px;margin:0 auto}body>header{grid-area:header;position:fixed;width:100%;z-index:1000;background-color:#07173ed9;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);color:#fff;display:flex;padding:15px;flex-direction:column;border-bottom:1px solid rgba(255,255,255,.1)}body .contact{display:flex;justify-content:end;gap:10px;align-items:center}body .contact a{color:#fff;font-size:1.1rem;transition:color .3s ease}body .contact a:hover{color:#32cd32}body .logo-slogan{text-align:center;padding:15px}body .logo-slogan h1{font-family:Montserrat,sans-serif;font-size:2.2rem;margin:5px}body .logo-slogan p{font-family:Montserrat,cursive;font-size:.8rem}body>main{grid-area:main;padding-top:150px}body>main .catalog-grid{display:flex;flex-direction:column;align-items:center;gap:20px;padding:20px}body>main .catalog-grid .card{width:100%;max-width:400px;box-shadow:5px 20px 50px -10px;height:200px;background:#07173e;position:relative;display:flex;margin:20px;overflow:hidden;border-radius:9px;z-index:1;cursor:pointer}body>main .catalog-grid .card a{display:flex;place-content:center;place-items:center;width:100%;height:100%;text-decoration:none;color:#fff;z-index:2}body>main .catalog-grid .card h3{font-size:.9rem;font-weight:500;font-family:Montserrat,cursive}body>main .catalog-grid .card i{display:inline-block;font-size:2rem;margin-right:10px;animation:shake 2s infinite ease-in-out}body>main .catalog-grid .card:hover{transform:translateY(-1px)}body>main .catalog-grid .card:hover i{animation-play-state:paused}body>main .catalog-grid .card:before{content:"";position:absolute;width:200%;height:160%;background:linear-gradient(0deg,transparent,#07173E,#32cd32);animation:rotBGimg 15s linear infinite;transform-origin:center center;z-index:0}body>main .catalog-grid .card:after{content:"";position:absolute;background:#07173e;top:3px;right:3px;bottom:3px;left:3px;border-radius:7px;z-index:1}body>footer{grid-area:footer;padding:10px;background:#07173e}body>footer .content-footer{display:flex;justify-content:start;align-items:start;flex-direction:column}body>footer .grid{margin:10px;color:#fff}body>footer .grid h3{font-size:.7rem;font-weight:700;padding:5px;color:#fff}body>footer .grid-1 ul{list-style:none;padding:5px}body>footer .grid-1 li a{color:#fff;text-decoration:none;font-size:.6rem}body>footer .grid-1 li a:hover{color:#32cd32}body>footer .grid-2 p{margin:5px 0 5px 5px}body>footer .grid-2 i{font-size:.8rem;cursor:pointer}body>footer .grid-2 a{color:#fff;text-decoration:none;font-size:.8rem}body>footer .grid-2 a:hover{color:#32cd32}body>footer .grid-3{display:flex;justify-content:center;align-items:center}body>footer .grid-3 i{gap:10px;margin:6px;color:#fff;font-size:1rem;transition:color .3s ease}@media (min-width: 768px){body>header{flex-direction:row-reverse;justify-content:space-between;align-items:center;gap:40px}body>main .catalog-grid{flex-direction:row}body>footer .content-footer{flex-direction:row;justify-content:space-between;align-items:center}}@media (min-width: 1024px){body>header{flex-direction:row-reverse;padding:40px 80px}body>header .logo-slogan{text-align:left;margin-bottom:0;padding:0}body>header p{text-align:center}body>header .contact{padding:0;gap:20px}}