:root{color-scheme:light}:root[data-theme=dark]{color-scheme:dark}body{width:20rem;height:20rem;position:relative;margin:auto}body,button{font-family:sans-serif;font-size:1.5rem}::view-transition-group(*){animation-duration:1s}div{color:#fff;display:grid;place-items:center;padding:1ex;width:30%;height:30%;position:absolute;border:1pt solid #888;border-radius:10%;box-shadow:2px 2px 2px 2px #8888}#red{background-color:#800;top:15%;left:10%;width:25%;height:25%}#blue{background-color:#008;top:10%;right:10%;transform:rotate(90deg)}#green{background-color:#080;bottom:10%;width:35%;height:35%;left:35%}button{view-transition-name:d;background-color:#ffebcd;color:#000;padding:1ex;border-radius:50%;position:absolute;bottom:35%;left:35%;width:30%;height:30%;box-shadow:2px 2px 2px 2px #8888}button:before{content:"Press Me!"}@supports not (view-transition-name: a){button{width:70%;height:70%;top:15%;left:15%}button:before{content:"Sorry, your browser does not have native support for view transitions."}}