/* GENERATED by tools/dc-to-site.mjs from Survival Zomb Website.dc.html: the design's base
   styles and keyframes, its hover styles, and the phone adaptations. */
html{scroll-behavior:smooth}
body{margin:0;background:#FFF4DC;font-family:Fredoka,system-ui,sans-serif;color:#17130F;-webkit-font-smoothing:antialiased}
a{color:#17130F;text-decoration:none}a:hover{color:#FF7A3D}
@keyframes szFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-16px)}}
@keyframes szPulse{0%,100%{transform:scale(1)}50%{transform:scale(1.06)}}
@keyframes szWiggle{0%,100%{transform:rotate(-3deg)}50%{transform:rotate(3deg)}}
@keyframes szBlink{0%,100%{opacity:1}50%{opacity:.3}}
@keyframes szMarquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@keyframes szOrbit{from{transform:rotate(0) translateX(20px) rotate(0)}to{transform:rotate(360deg) translateX(20px) rotate(-360deg)}}
@keyframes szOrbitR{from{transform:rotate(180deg) translateX(15px) rotate(-180deg)}to{transform:rotate(-180deg) translateX(15px) rotate(180deg)}}
@keyframes szFall{0%,50%{background:#95D168;transform:translateZ(0);opacity:1}58%,74%{background:#FF4F5A;transform:translateZ(0);opacity:1}100%{background:#FF4F5A;transform:translateZ(-90px);opacity:0}}
@keyframes szFill{0%,15%{background:#fff}25%,100%{background:#7ED957}}
@keyframes szReveal{from{opacity:0;transform:translateY(44px)}to{opacity:1;transform:none}}
@keyframes szDrift{0%,100%{transform:translate(0,0) rotate(-6deg)}50%{transform:translate(10px,-18px) rotate(6deg)}}
@keyframes szPop{0%,60%{opacity:0;transform:translateY(0) scale(.7)}70%{opacity:1;transform:translateY(-14px) scale(1.1)}100%{opacity:0;transform:translateY(-40px) scale(1)}}
@keyframes szGrow{from{width:0}to{width:100%}}
.hv1{transition:transform .15s,box-shadow .15s,color .15s}.hv1:hover{transform:translate(-1px,-1px);box-shadow:4px 4px 0 #17130F;color:#17130F}
.hv2{transition:transform .15s,box-shadow .15s,color .15s}.hv2:hover{transform:translate(-2px,-2px);box-shadow:6px 6px 0 #FF4F9A;color:#fff}
.hv3{transition:transform .15s,box-shadow .15s,color .15s}.hv3:hover{transform:translate(-2px,-2px);box-shadow:6px 6px 0 #7ED957;color:#fff}
.hv4{transition:transform .15s,box-shadow .15s,color .15s}.hv4:hover{transform:translate(-3px,-3px);box-shadow:9px 9px 0 #17130F}
.hv5{transition:transform .15s,box-shadow .15s,color .15s}.hv5:hover{transform:translate(-3px,-3px);box-shadow:9px 9px 0 #17130F}
.hv6{transition:transform .15s,box-shadow .15s,color .15s}.hv6:hover{transform:translate(-3px,-3px);box-shadow:9px 9px 0 #17130F}
.hv7{transition:transform .15s,box-shadow .15s,color .15s}.hv7:hover{transform:translate(-2px,-2px);box-shadow:6px 6px 0 #FF4F9A;color:#17130F}
.hv8{transition:transform .15s,box-shadow .15s,color .15s}.hv8:hover{transform:translate(-2px,-2px);box-shadow:6px 6px 0 #7ED957;color:#17130F}
/* phones: the design is a desktop canvas; stack the grids, shrink the paddings */
@media (max-width:1000px){
  .g4{grid-template-columns:repeat(2,1fr)!important}
  .g3{grid-template-columns:repeat(2,1fr)!important}
}
.g2>div,.g3>div,.g4>div{min-width:0}
.hv1{white-space:nowrap}
@media (max-width:820px){
  .navlinks{display:none!important}
  .g2,.g3{grid-template-columns:1fr!important}
  .heroPhone{flex:0 0 100%!important;margin-top:-10px}
  [style*="padding:110px 40px 60px"]{padding:64px 20px 36px!important}
  [style*="padding:60px 40px 110px"]{padding:36px 20px 80px!important}
  [style*="padding:110px 0 120px"]{padding:64px 0 72px!important}
  [style*="padding:120px 0"]{padding:64px 0!important}
  [style*="padding:0 40px"]{padding:0 20px!important}
  [style*="padding:12px 40px"]{padding:10px 16px!important}
  [style*="padding:26px 40px"]{padding:22px 16px!important}
  [style*="gap:60px"]{gap:28px!important}
  [style*="padding:24px;box-shadow:6px 6px 0 #17130F"]{padding:18px!important}
}
@media (max-width:600px){
  .heroPhone{zoom:.86}
  [style*="grid-column:span 2"]{flex-wrap:wrap!important}
  [style*="flex:0 0 220px"]{flex:0 0 160px!important;width:160px!important;height:150px!important}
  [style*="font:400 22px 'Lilita One'"]{font-size:18px!important}
  .g4{grid-template-columns:1fr!important}
  [style*="grid-column:span 2"]{grid-column:span 1!important}
  [style*="text-shadow:8px 8px 0 #17130F"]{text-shadow:5px 5px 0 #17130F!important}
}