:root{--primary-color: #77aaff;--secondary-color: #333;--background-color: #f4f4f4;--text-color: #333;--light-text-color: #fff;--border-color: #ddd;--card-background: #fff;--font-family: Arial, sans-serif;--spacing-unit: 8px}body{font-family:var(--font-family);line-height:1.6;margin:0;padding:0;background:var(--background-color);color:var(--text-color)}.container{width:90%;max-width:1200px;margin:auto;overflow:hidden;padding:0 calc(var(--spacing-unit) * 2)}.main-header{background:var(--secondary-color);color:var(--light-text-color);padding:calc(var(--spacing-unit) * 2) 0;border-bottom:var(--primary-color) 3px solid}.main-header .container{display:flex;justify-content:space-between;align-items:center}.main-header h1{margin:0;font-size:24px}.main-nav ul{padding:0;margin:0;list-style:none;display:flex}.main-nav ul li{margin-left:calc(var(--spacing-unit) * 2)}.main-nav a{color:var(--light-text-color);text-decoration:none;text-transform:uppercase;font-size:16px}.main-content{padding:calc(var(--spacing-unit) * 3) 0}.card{background:var(--card-background);border:1px solid var(--border-color);padding:calc(var(--spacing-unit) * 2);margin-bottom:calc(var(--spacing-unit) * 2);border-radius:4px}.btn{display:inline-block;background:var(--secondary-color);color:var(--light-text-color);padding:calc(var(--spacing-unit) * 1.25) calc(var(--spacing-unit) * 2.5);text-decoration:none;border:none;border-radius:4px;cursor:pointer}.btn-primary{background:var(--primary-color);color:var(--light-text-color)}.alert{padding:calc(var(--spacing-unit) * 2);margin-bottom:calc(var(--spacing-unit) * 2);border:1px solid transparent;border-radius:4px}.alert-success{color:#155724;background-color:#d4edda;border-color:#c3e6cb}.alert-danger{color:#721c24;background-color:#f8d7da;border-color:#f5c6cb}.alert-info{color:#0c5460;background-color:#d1ecf1;border-color:#bee5eb}.modal{display:none;position:fixed;z-index:1;left:0;top:0;width:100%;height:100%;overflow:auto;background-color:#0006}.modal-content{background-color:#fefefe;margin:15% auto;padding:20px;border:1px solid #888;width:80%;max-width:500px;border-radius:4px}.close-button{color:#aaa;float:right;font-size:28px;font-weight:700}.close-button:hover,.close-button:focus{color:#000;text-decoration:none;cursor:pointer}.text-primary{color:var(--primary-color)}.bg-primary{background-color:var(--primary-color)}.m-1{margin:calc(var(--spacing-unit) * 1)}.m-2{margin:calc(var(--spacing-unit) * 2)}.m-3{margin:calc(var(--spacing-unit) * 3)}.p-1{padding:calc(var(--spacing-unit) * 1)}.p-2{padding:calc(var(--spacing-unit) * 2)}.p-3{padding:calc(var(--spacing-unit) * 3)}.my-1{margin-top:calc(var(--spacing-unit) * 1);margin-bottom:calc(var(--spacing-unit) * 1)}.py-1{padding-top:calc(var(--spacing-unit) * 1);padding-bottom:calc(var(--spacing-unit) * 1)}.flex{display:flex}.justify-center{justify-content:center}.items-center{align-items:center}