body{width:100vw;height:100vh;margin:0;padding:0;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","Roboto","Oxygen","Ubuntu","Cantarell","Fira Sans","Droid Sans","Helvetica Neue",sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.App{width:calc(100vw - 100px);height:calc(100vh - 100px);padding:50px;background-color:#000}.grid-container{display:grid;grid-template-columns:220px 1fr 220px;grid-template-rows:1fr 1fr;grid-gap:20px;gap:20px;grid-template-areas:"tl background tr" "bl background br"}.tl{grid-area:tl}.tr{grid-area:tr}.bl{grid-area:bl}.bl,.br{align-self:flex-end}.br{grid-area:br}.background{grid-area:background;--tl:#00f;--tr:#fff;--bl:orange;--br:#000;position:relative;background:linear-gradient(90deg,var(--tl),var(--tr))}.background,.code{border:1px solid #fff}.code{position:absolute;bottom:20px;right:20px;white-space:pre;font-family:"Courier New",Courier,monospace;padding:20px}.background:hover .code{background-color:hsla(0,0%,100%,.75)}.background:before{content:"";position:absolute;top:0;left:0;bottom:0;right:0;-webkit-mask-image:linear-gradient(180deg,transparent,#000);mask-image:linear-gradient(180deg,transparent,#000);background:linear-gradient(90deg,var(--bl),var(--br))}
/*# sourceMappingURL=main.dabd510d.chunk.css.map */