.type-list{margin-bottom:2rem}.simple-chart{& h3{margin:0;font-size:.85rem}& .simple-chart__header{display:flex}& .simple-chart__header{justify-content:center;background-color:var(--color-background-60);&>div{display:flex;align-items:center}}& .header__one{justify-content:flex-end;text-align:right}& .header__one,& .header__two{padding:1rem;width:calc(50% - 4rem)}& .header__name{width:8rem;justify-content:center;text-align:center;background-color:var(--color-background-50)}& ul.body__list{display:flex;flex-direction:column;& li.list__row{display:flex}& .list__row{border-bottom:2px solid var(--color-background-80)}& .list__row__one,& .list__row__two{display:flex;align-items:center;padding:.5rem;width:calc(50% - 4rem);& ul{display:flex;gap:.5rem;flex-direction:column;width:100%}}& .list__row__one{padding-right:1rem;& ul{align-items:flex-end}}& .list__row__two{padding-left:1rem;& ul{align-items:flex-start;justify-content:flex-start}}& .list__row__name{display:flex;align-items:center;justify-content:center;position:relative;padding:.5rem 0;width:8rem;background-color:var(--color-background-60);& .type-ribbon{width:100%}& .icon{position:absolute;top:50%;transform:translateY(-50%);&.icon--left{left:-.5rem}&.icon--right{right:-.5rem}}}}}@media (max-width:400px){.simple-chart{margin-left:-1rem;width:calc(100% + 2rem)}}@media (min-width:600px){.simple-chart{& h3{font-size:1rem}& ul.body__list{& .list__row__one,& .list__row__two{& ul{flex-direction:row;flex-wrap:wrap;align-items:center}}& .list__row__one{ul{justify-content:flex-end}}& .list__row__two{justify-content:flex-start}}}}.type-table{border:2px solid magenta;position:relative;margin-bottom:3rem;padding-left:2rem;height:100%;& .attack-move{position:absolute;display:flex;justify-content:center;align-items:center;left:0;background:salmon;width:2rem;height:100%;& span{display:inline-flex;align-items:center;justify-content:center;color:blue;transform:rotate(-90deg);transform-origin:center center;border:1px solid red;height:2rem;min-width:8rem;text-align:center}}& .cell-double{background-color:#c8e6c9}& .cell-half{background-color:#ffccbc}}.type-chart-grid{border:1px solid red;overflow-x:auto;& .type-chart-grid__wrapper{position:relative;border:2px solid blue}& .title-column,& .title-row{background-color:lch(var(--color-primary-50)/.5)}& .title-row{position:absolute;height:2rem;top:0;left:0;width:100%;text-align:center}& .title-column{position:sticky;width:2rem;top:0;bottom:0;left:0;background-color:salmon;border:2px solid red;height:100%;text-align:center;&>span{display:block;position:absolute;left:50%;top:50%;transform:translate(-50%,-50%) rotate(-90deg);width:10rem;transform-origin:center center}}& .type-chart-grid__cells{display:grid;grid-auto-rows:40px;padding-top:2rem;padding-left:2rem}}.type-chart-grid h2{margin-bottom:1.5rem;font-size:1.6rem;color:#333;text-align:center}.type-chart-grid__attack-move,.type-chart-grid__pokemon-type{width:100%;display:flex;align-items:center;flex-wrap:wrap;justify-content:center;background-color:saddlebrown}.type-chart-grid__attack-move span{background:#ffe0e0;color:#c00;border-radius:4px;padding:.2rem .5rem;font-size:.95rem}.type-chart-grid__pokemon-type span{background:#e0ffe0;color:#080;border-radius:4px;padding:.2rem .5rem;font-size:.95rem}.header{background-color:#eee;font-weight:700}.cell,.header{display:flex;align-items:center;justify-content:center;border:1px solid #ccc}.cell.double{background-color:#c8e6c9}.cell.half{background-color:#ffe0b2}.cell.none{background-color:#ffcdd2}.cell.normal{background-color:#f5f5f5}.empty{background-color:transparent;border:none}