:root{--green-bg: #c8f0c6;--green-border: #0f6e21;--blue-bg: #9ccdf8;--blue-border: #0b47ff;--pink-bg: #f7b0b0;--pink-border: #a93a31;--peach-bg: #f7d1ab;--red-border: #ff5a4f;--purple-bg: #ded8ff;--purple-border: #2339d1;--purple-inner-bg: #e7e2ff;--purple-inner-border: #3b43d3;--name-pink-bg: #ffc2cf;--salmon-border: #e48b85;--header-height: 100px;--footer-height: 100px;--header-middle-width: clamp(320px, 40vw, 520px);--bp-lg: 1200px;--bp-md: 900px;--bp-sm: 700px}html,body,#root{height:100%}body{margin:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;background:#fff}.app{min-height:100vh;padding:clamp(12px,3vw,24px);background:var(--green-bg);border:6px solid var(--green-border)}.main-grid{display:grid;gap:clamp(12px,2.5vw,24px)}.header{background:var(--blue-bg);border:6px solid var(--blue-border);padding:16px;display:grid;grid-template-columns:1fr var(--header-middle-width) 1fr;align-items:center;gap:16px}.banner{height:var(--header-height);background:var(--peach-bg);border:6px solid var(--salmon-border)}.header-container2{background-color:#ffd5b3;padding:4px;margin:10px;border:5px solid #fa766c;height:100px;width:var(--header-middle-width);flex:1;display:flex;gap:12px;align-items:center;box-sizing:border-box}.header-container2-content{padding:8px 16px;font-weight:700;font-size:28px;color:#fff;text-align:center;background:var(--name-pink-bg);border:6px solid var(--red-border);height:100%;flex:1 1 0;display:grid;place-items:center}.content-grid{display:grid;grid-template-columns:62% 38%;gap:clamp(12px,2vw,16px)}.panel{background:var(--pink-bg);border:6px solid var(--pink-border);min-height:clamp(140px,26vh,200px)}.panel-large{min-height:clamp(220px,40vh,360px)}.right-grid .panel{min-height:clamp(140px,26vh,220px)}.right-grid{display:grid;grid-template-rows:1fr 1fr;gap:16px}.footer{background:var(--blue-bg);border:6px solid var(--blue-border);padding:16px}.footer-grid{display:grid;grid-template-columns:1.2fr 280px 280px 1.2fr;gap:16px;align-items:stretch}.footer-wide{background-color:#dfd9fd;padding:20px;margin:2px;border:5px solid #5b5eb5;height:100px;flex:5}.footer-wide:before{content:none}.course{display:grid;place-items:center;font-weight:700;font-size:28px;color:#fff;background:var(--peach-bg);border:6px solid var(--salmon-border);height:var(--footer-height)}@media (max-width: 900px){.content-grid{grid-template-columns:1fr}.right-grid{grid-template-rows:auto auto}.footer-grid{grid-template-columns:1fr}}@media (max-width: 1200px){.content-grid{grid-template-columns:58% 42%}}@media (max-width: 700px){.header{grid-template-columns:1fr}.header-container2{width:100%;justify-content:center;flex-wrap:wrap;height:auto}.header-container2-content{height:72px}}*{box-sizing:border-box}body{font-family:sans-serif;text-align:center;font-size:45px;color:#fff;max-width:2000px;margin:auto}.container{background-color:#bbedc1;padding:20px;margin:10px;border:5px solid #017317}.header{background-color:#add8e6;padding:20px;margin:10px;border:5px solid #000ef8;display:flex}.header-container{background-color:#ffd5b3;padding:20px;margin:10px;border:5px solid #fa766c;height:100px;flex:1}.header-container2{background-color:#ffd5b3;padding:9px;margin:-12px;border:5px solid #fa766c;height:100px;flex:1;display:flex}.header-container2-content{background-color:#ffb8c4;padding:10px;margin:0;border:5px solid #fd041b;height:100%;flex:1;font-size:32px;font-weight:550;color:#fff;line-height:1;display:flex;align-items:center;justify-content:center;text-align:center}.body{display:flex}.body-container{background-color:#ffb3b5;padding:20px;margin:10px;border:5px solid #a2252a;flex:1;height:300px}.body-container2{flex:1;height:300px}.body-container2-content{background-color:#ffb3b5;padding:20px;margin:10px;border:5px solid #a2252a;height:145px}.footer-container1{background-color:#dfd9fd;padding:20px;margin:2px;border:5px solid #5b5eb5;flex:5;height:100px}.footer-container2{background-color:#ffd5b3;padding:20px;margin:2px;border:5px solid #fa766c;flex:2 1 0;min-width:0;height:100px;display:flex;align-items:center;justify-content:center;font-size:40px;line-height:1.2;white-space:nowrap}.footer{background-color:#add8e6;padding:5px;margin:10px;border:5px solid #000ef8;display:flex}.header .heading,.header h1{font-family:sans-serif;font-weight:700;font-size:45px;color:#fff;margin:0;text-align:center;flex:1;align-self:center}