.charsheet { background-color: #ddd; min-width: 192px; font-size: 13px; } textarea { resize: vertical; } .sheet-roundcube { padding: 8px 18px; color: #623F1D; border-radius: 24px; -moz-border-radius: 24px; -webkit-border-radius: 24px; border: 2px solid #A694E2; } .sheet-colorcube1 { background-color: #9a9a9a; } .sheet-colorcube2 { background-color: #efefef; } .sheet-colorcube3 { background-color: #bcbcbc; } .sheet-lineseparator { border-bottom: 1px solid #cdcdcd; height: 2px; margin-bottom: 6px; } .sheet-namelineinhalfblock { font-weight: bold; width: 60%; } .sheet-notelineinhalfblock { width: 92%; } .sheet-scorelineinhalfblock { width: 32%; } .sheet-namelineinthirdblock { font-weight: bold; width: 52%; } .sheet-notelineinthirdblock { width: 40%; } .sheet-scorelineinthirdblock { width: 40%; } .sheet-attributes { grid-area: attributes; } .sheet-statistics { grid-area: statistics; } .sheet-description { grid-area: description; } .sheet-weapons { grid-area: weapons; } .sheet-armor { grid-area: armor; } .sheet-skills { grid-area: skills; } .sheet-items { grid-area: items; } .sheet-powers { grid-area: powers; } .sheet-notes { grid-area: notes; } @media (min-width: 601px) { .sheet-grid-container { display: grid; grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr; grid-template-areas: 'attributes attributes statistics statistics description description' 'weapons weapons weapons armor armor armor' 'skills skills skills items items items' 'powers powers powers notes notes notes'; } .sheet-roundcube { padding: 8px 18px; color: #623F1D; border-radius: 24px; -moz-border-radius: 24px; -webkit-border-radius: 24px; border: 2px solid #A694E2; } } @media (max-width: 600px) { .sheet-grid-container { display: grid; grid-template-areas: 'description' 'statistics' 'attributes' 'weapons' 'armor' 'skills' 'items' 'powers' 'notes'; } .sheet-roundcube { padding: 0px 0px; color: #623F1D; border-radius: 0px; -moz-border-radius: 0px; -webkit-border-radius: 0px; border: 2px solid #A694E2; } }