* { margin:0; padding:0; list-style:none; } body,html { width:100%; height:100%; } canvas { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); background:#fdd69f; } input { border:none; outline:none; padding:3px 5px; color:#fff; background:plum; position:fixed; position:absolute; top:20px; left:50px; z-index:5; } .box { width:600px; height:600px; position:absolute; top:0; left:0; right:0; bottom:0; margin:auto; background:#fdd69f; box-shadow:0 0 0 900px rgba(0,0,0,0.8); transform:scale(0,0); transition:all 0.7s; } .active { transform:scale(1,1); }