.main{flex-direction:column}.boxes,.main{display:flex;align-items:center;justify-content:center}.boxes{flex-direction:row;margin-top:30px;margin-bottom:30px;gap:5%;width:80%}.textareaWrapper{width:100%;height:500px;resize:none;overflow:scroll;border-radius:10px;border:1px solid #3c415c}.textareaWrapper.light{border:1px solid #c0c0c8}.textareaWrapper::-webkit-scrollbar{display:none}.textareaWrapper{scrollbar-width:none}.controls{display:flex;flex-direction:row;align-items:center;justify-content:space-around;gap:10px;background-color:#3c415c;color:#f0f0f0}.controls.light{background-color:#d3d6e0;color:#333}.controls-preview{justify-content:space-between;padding-left:30px;padding-right:30px}.controls input{margin-left:10px;padding:10px;border-radius:5px;border:none;outline:none;background-color:#1a1a1a;color:#f0f0f0}.controls.light input{background-color:#e0e0e6;color:#555}.controls input:focus{border:1px solid #8d99ae}.textarea{width:100%;height:100%;resize:none;border:none;outline:none;background-color:#1a1a1a;color:#f0f0f0;padding:10px}.textarea.light{background-color:#e0e0e6;color:#555}.preview{width:100%;height:500px;border:1px solid #3c415c;overflow:scroll;border-radius:10px;background-color:#1a1a1a;color:#f0f0f0}.preview.light{border:1px solid #c0c0c8;background-color:#e0e0e6;color:#555;box-shadow:0 2px 8px rgba(0,0,0,.05);transition:box-shadow .3s ease}.preview::-webkit-scrollbar{display:none}.preview{scrollbar-width:none}.preview-content{padding:10px}.preview-content table{border-collapse:collapse;margin-bottom:20px}.preview-content th,td{padding:8px;text-align:left;border-bottom:1px solid #ddd}.preview-content th,.preview-content tr:nth-child(2n){background-color:#72727227}.preview-content tr:hover{background-color:#92717127}.preview-content td.light,.preview-content th.light{padding:8px;text-align:left;border-bottom:1px solid #ddd}.preview-content th .light,.preview-content tr:nth-child(2n) .light{background-color:#d4d4dc}.preview-content tr:hover .light{background-color:#92717127}.preview-content pre{background-color:#1f1f1f;padding:10px;border-radius:5px;display:block;overflow-x:auto}.light .preview-content pre{background-color:#d4d4dc}.preview-content code{background-color:#1f1f1f;padding:2px 4px;border-radius:3px}.light .preview-content code{background-color:#d4d4dc}.controls-input{align-content:center;gap:40px}.controls-input,.controls-input label{display:flex;flex-direction:row;align-items:center}.controls-input label{gap:10px}.controls-input input{align-items:center;justify-content:center}.controls-buttons{display:flex;flex-direction:row;gap:10px}.button{background-color:#8d99ae;border:none;padding:5px 10px;border-radius:5px;cursor:pointer;transition:background-color .3s ease}.button:hover{background-color:coral}.button.light{background-color:#7289da}.button.light:hover{background-color:#aab8f0}@media (max-width:1000px){.boxes{flex-direction:column;width:90%;gap:10px}.preview,.textareaWrapper{width:100%;height:350px}}@media screen and (max-width:400px){.controls{flex-direction:column;padding-bottom:10px;gap:0}.controls-preview{flex-direction:row}.controls input{margin-left:0;margin-top:10px}.controls-buttons{margin-top:10px}}.header{background-color:#3c415c;color:#f8f9fa;padding:10px;margin-bottom:10px;box-shadow:0 0 0 0 rgba(0,0,0,.596);display:flex;justify-content:space-between;align-items:center}.header.sun{background-color:#d8dae5;color:#2a2a2a;box-shadow:0 1px 4px rgba(0,0,0,.05);border-bottom:1px solid #c8cad3;transition:box-shadow .3s ease}.header h1{margin-left:30px}.theme-button{margin-right:30px;width:30px;height:30px;border:none;border-radius:50%;background-color:#f8f9fa;cursor:pointer;transition:color .3s ease}.theme-button.sun{display:flex;justify-content:center;align-items:center}.theme-button:hover{background-color:#f8f9facc}.theme-button:focus{outline:none}.theme-button.sun{background-color:#5f5959}.theme-button.sun:hover{background-color:#aaa}.theme-button.moon{background-color:#ef233c}.theme-button.moon:hover{background-color:#ef233ccc}.theme-button img{filter:invert(1)}@media screen and (max-width:768px){.header{flex-direction:column;align-items:center}.header h1{margin-left:0;margin-bottom:10px}.themeWrapper{margin-top:10px}.theme-button{margin-right:0}}@media screen and (max-width:480px){.header h1{font-size:25px}}