@media (max-height: 800px), (max-width: 1000px) { .instance { display: grid; grid-template-columns: 1fr; grid-template-rows: min-content, min-content, min-content, 1fr; grid-template-areas: "top" "controls" "mvbox" "mcryps" } /* Default view */ .instance .equip { display: none; } .instance .info { display: none; } .instance .cryp-list { display: none; } .vbox { grid-area: mvbox; display: grid; grid-template-rows: min-content min-content min-content; grid-template-columns: 1fr; grid-template-areas: "vbox" "inventory" "combiner"; } .vbox-inventory { margin-left: 0; } .vbox-combiner { margin-left: 0; } /* Toggled view (cryps)*/ #toggle-vbox-label { text-align: center; border: 2px solid #555; } #toggle-vbox-label:after{ content: "Cryps"; } #toggle-vbox:checked ~ #toggle-vbox-label:after{ content: "Vbox"; } #toggle-vbox:checked ~ .vbox { display: none; } #toggle-vbox:checked ~ .equip { display: initial; grid-area: mvbox; } #toggle-vbox:checked ~ .highlight { display: initial; } #toggle-vbox:checked ~ .cryp-list { grid-area: mcryps; display: grid; justify-content: center; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; } #toggle-vbox { display: none; } #toggle-vbox-label { grid-area: controls; color: whitesmoke; line-height: 1.75em; font-size: 1.5em; display: block; cursor: pointer; margin-right: 0.5em; } .instance .cryp-list { display: grid; grid-auto-columns: 1fr 1fr; } .cryp-list .skills { flex-flow: row; align-items: stretch; } .instance-cryp { grid-row: 2; display: grid; grid-template-rows: min-content 1fr; grid-template-areas: "name " "avatar "; padding: 0.5em; border: 2px solid #222; transition-property: all; transition-duration: 0.5s; transition-delay: 0; transition-timing-function: ease; } .instance-cryp .skills { display: none; } .instance-cryp .specs { display: none; } .instance-cryp .stats { display: none; } .instance-cryp-active { grid-row: 1; grid-column: 1 / 3; display: grid; grid-template-rows: min-content min-content min-content 1fr min-content; grid-template-areas: "name " "skills " "specs " "avatar " "stats "; /*margin: 0 2em;*/ padding: 0.5em; border: 2px solid #222; transition-property: all; transition-duration: 0.5s; transition-delay: 0; transition-timing-function: ease; } .instance-cryp-active img { width: 55px; } /* Cryp Stuff */ }