nofl/coder

1/* Global Styles */2* {3    box-sizing: border-box;4}5 6body {7    font-family: 'Arial', sans-serif;8    line-height: 1.6;9    color: #333;10    background-color: #f4f4f4;11}12 13.container {14    max-width: 800px;15    margin: auto;16    padding: 20px;17    background-color: #fff;18    border-radius: 5px;19    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);20}21 22/* Header Styles */23header {24    background-color: #3498db;25    color: white;26    text-align: center;27    padding: 20px 0;28    border-radius: 5px 5px 0 0;29}30 31header h1 {32    font-size: 2em;33    margin-bottom: 10px;34}35 36/* Main Content Styles */37main {38    display: flex;39    flex-direction: column;40    gap: 20px;41}42 43.card {44    background-color: #fff;45    border-radius: 5px;46    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);47    transition: transform 0.3s ease-in-out;48}49 50.card:hover {51    transform: translateY(-5px);52}53 54.card h2 {55    color: #333;56    margin-top: 0;57    padding: 15px 20px;58    background-color: #f8f9fa;59    border-bottom: 1px solid #e9ecef;60}61 62/* Code Editor Styles */63#codeEditor {64    font-size: 14px;65    padding: 10px;66    width: 100%;67    height: 300px;68    resize: vertical;69    background-color: #f8f8f8;70    border-radius: 5px;71    overflow-x: auto;72}73 74/* Console Output Styles */75#consoleOutput {76    font-family: 'Courier New', Courier, monospace;77    font-size: 13px;78    padding: 15px;79    background-color: #f0f0f0;80    border-radius: 5px;81    overflow-x: auto;82}83 84/* Button Styles */85button {86    background-color: #3498db;87    color: white;88    border: none;89    padding: 10px 20px;90    font-size: 16px;91    cursor: pointer;92    border-radius: 5px;93}94 95button:hover {96    background-color: #2980b9;97}98 99/* Footer Styles */100footer {101    background-color: #3498db;102    color: white;103    text-align: center;104    padding: 15px 0;105    margin-top: auto;106    border-radius: 0 0 5px 5px;107}108 109/* Responsive Design */110@media screen and (max-width: 600px) {111    .container {112        padding: 10px;113    }114 115    #codeEditor {116        height: 200px;117    }118}119