const {DOM, Tag, H} = Gale({
    Button: {
        padding: "20px",
        background: "orange",
        ".Inner": {
            fontSize: "10rem"
        }
    },
    Outline: {
        border: "2px solid orange"
    },
    Window:{
      height: "100vh",
      border: "2px solid black",
      display: "flex",
      flexDirection: "row",
      alignItems: "end",
      justifyContent: "center",
      gap: "10px"
    },
    Ability:{
      width: "50px",
      height: "50px",
      background: "red",
      transition: "all 0.4s",
      ":hover":{
        transform:"scale(1.1)"
      }
    },
    Orange:{
        background:"orange"
    }
}, "abilities");

const UI =()=>
{
  return H.Window(
    H.Ability({class:Tag("Ability", "Orange")}),
    H.Ability(),
    H.Ability(),
    H.Ability.Orange(),
  )
}

van.add(document.body, UI());