body{background:radial-gradient(circle at -8.9% 51.2%,rgb(255,124,0) 0%,rgb(255,124,0) 15.9%,rgb(255,163,77) 15.9%,rgb(255,163,77) 24.4%,rgb(246,251,255) 24.5%,rgb(233,247,255) 66%)}.switch{font-size:17px;position:relative;display:inline-block;width:5em;height:2.5em}.text-5xl{color:#a020f0}.modal-box{padding:20px}.modal-box *{margin-bottom:20px}.modal-box *:last-child{margin-bottom:0}#submit-button{margin-left:20px}.py-6{color:orange}.switch .cb{opacity:0;width:0;height:0}.toggle{position:absolute;cursor:pointer;width:100%;height:100%;background-color:#373737;border-radius:.1em;transition:.4s;text-transform:uppercase;font-weight:700;overflow:hidden;box-shadow:-.3em 0 #373737,-.3em .3em #373737,.3em 0 #373737,.3em .3em #373737,0 .3em #373737}.toggle>.left{position:absolute;display:flex;width:50%;height:88%;background-color:#f3f3f3;color:#373737;left:0;bottom:0;align-items:center;justify-content:center;transform-origin:right;transform:rotateX(10deg);transform-style:preserve-3d;transition:all .15s}.left:before{position:absolute;content:"";width:100%;height:100%;background-color:#cecece;transform-origin:center left;transform:rotateY(90deg)}.left:after{position:absolute;content:"";width:100%;height:100%;background-color:#707070;transform-origin:center bottom;transform:rotateX(90deg)}.toggle>.right{position:absolute;display:flex;width:50%;height:88%;background-color:#f3f3f3;color:#cecece;right:1px;bottom:0;align-items:center;justify-content:center;transform-origin:left;transform:rotateX(10deg) rotateY(-45deg);transform-style:preserve-3d;transition:all .15s}.right:before{position:absolute;content:"";width:100%;height:100%;background-color:#cecece;transform-origin:center right;transform:rotateY(-90deg)}.right:after{position:absolute;content:"";width:100%;height:100%;background-color:#707070;transform-origin:center bottom;transform:rotateX(90deg)}.switch input:checked+.toggle>.left{transform:rotateX(10deg) rotateY(45deg);color:#cecece}.switch input:checked+.toggle>.right{transform:rotateX(10deg) rotateY(0);color:#487bdb}