body{margin:0;background:DeepSkyBlue}#root{box-sizing:border-box;padding:24px;margin:0;height:100vh;display:grid;grid-template-columns:max-content 1fr;grid-template-rows:max-content 1fr;grid-template-areas:"sidebar main" "footer footer"}#sidebar{display:flex;flex-direction:column;grid-area:sidebar}#footer{grid-area:footer;display:flex;flex-direction:row;flex-wrap:wrap;align-items:center;align-content:flex-start}button{width:200px}#flag{display:grid;grid-template-columns:2fr 3fr 0fr;grid-template-rows:repeat(var(--num-stripes),1fr);grid-area:main;aspect-ratio:1.9;margin:12px}#canton{background:#3c3b6e;grid-column-start:1;grid-column-end:2;grid-row-start:1;grid-row-end:var(--canton-end);display:grid;grid-template-columns:repeat(var(--star-cols),1fr);grid-template-rows:repeat(var(--star-rows),1fr)}.stripe{grid-column-end:span 2}.stripe:nth-child(odd){background:#b22234}.stripe:nth-child(2n){background:#ffff}.stars{display:grid;grid-template-rows:subgrid;grid-template-columns:subgrid}.stars.wide{grid-column:1/-1}.stars.narrow{grid-column:2/-1}.stars.tall{grid-row:1/-1}.stars.short{grid-row:2/-1}.custom-stars-row{display:grid;grid-column:var(--padding) / calc(-1 * var(--padding));grid-row:var(--row_num) / span 2;grid-template-rows:subgrid;grid-template-columns:subgrid}.star{width:var(--star-width);grid-column-end:span 2;grid-row-end:span 2;place-self:center}