body {margin:0; padding:1rem; font-family:sans-serif; background-color:#eee;}

div#container {padding:1rem; box-shadow:rgba(0,0,0,.25) 0px 0px 8px; background-color:#FFF; max-width:600px; margin:0 auto; overflow-x:hidden;}

div#container div.item {margin-bottom:2rem;}
div#container div.item:last-of-type {margin-bottom:0;}

div#container div.item label {display:block; font-size:1rem; width:100%; margin-bottom:.25rem; font-weight:bold;}
div#container div.item div.wrapper {position:relative;}
div#container div.item div.wrapper .userInput {font-size:1.25rem; width:100%; box-sizing:border-box;}

div#container div.item div#regexWrapper:before,
div#container div.item div#regexWrapper::after {content:'/'; position:absolute; top:50%; transform:translateY(-50%); font-size:1.5rem; font-weight:100;}
div#container div.item div#regexWrapper::before {left:1rem;}
div#container div.item div#regexWrapper::after {content:'/g'; right:1rem;}
div#container div.item input#regexp {padding:.25rem 1.5rem; overflow-x:auto;}

div#container div.item div#tsBackdrop {padding:.75rem; font-family:sans-serif; font-size:1.25rem; background-color:#f001; background-color:#f0f2; border:2px solid #888; box-sizing:border-box; white-space:pre-wrap; z-index:1; color:#00f; /*color:transparent;*/ transition:.5s;}
div#container div.item div#tsBackdrop mark {background-color:#1e90ff88;}
/*div#container div.item div#tsBackdrop div.highlights {}*/

div#container div.item textarea#testStrings {position:absolute; top:0; left:0; width:100%; z-index:2;}
div#container div.item textarea#testStrings {padding:.75rem; font-family:sans-serif; font-size:1.25rem; background-color:#0000; border:2px solid #888; resize:none; transition:.5s;}

div#container button {width:100%; padding:.5rem; margin-top:1rem; border-radius:.25rem; border:1px solid #888; font-size:1.5rem;}


div#container.perspective {perspective:1600px;}
div#container.perspective div.item div#tsBackdrop {transform:rotateY(45deg) translateX(-125px) scale(.95);}
div#container.perspective div.item textarea#testStrings {transform:rotateY(45deg) translateX(155px) scale(1.05);}