/* --------------------
   Global + Desktop
-------------------- */
*{box-sizing:border-box}
html,body{height:100%;margin:0;background:#000;overflow:hidden;display:flex;align-items:center;justify-content:center}
.fit{width:100vw;height:100vh;position:relative;background:#000}
.desktop{position:absolute;inset:0;}

/* Customizable desktop variables */
:root{
  --logo-width: 300px;
  --logo-right: 80px;
  --logo-bottom: 60px;

  --icon-size: 40px;
  --icon-gap: 24px;
  --icons-left: 80px;
  --icons-bottom: 60px;
}

/* Logo bottom-right */
.logo{
  position:absolute;
  width:var(--logo-width);
  height:auto;
  right:var(--logo-right);
  bottom:var(--logo-bottom);
}

/* Icons bottom-left */
.icon{
  position:absolute;
  width:var(--icon-size);
  height:var(--icon-size);
  bottom:var(--icons-bottom);
}
.icon.ig{ left:var(--icons-left); }
.icon.itch{ left:calc(var(--icons-left) + var(--icon-size) + var(--icon-gap)); }
.icon img{ width:100%; height:100%; }

/* --------------------
   Mobile (<=768px)
-------------------- */
.mobile{display:none}
@media (max-width:768px){
  body{overflow:auto}
  .desktop{display:none}
  .mobile{
    display:flex;flex-direction:column;align-items:center;justify-content:center;
    width:100vw;min-height:100vh;gap:24px;padding:40px 24px;background:#000;
  }
  .m-logo{width:min(80vw,400px);height:auto;margin-bottom:24px;}
  .m-icons{display:flex;gap:24px;}
  .m-icon{width:40px;height:40px;display:inline-flex;}
  .m-icon img{width:100%;height:100%;}
}