@media (max-width: 1000px) { body { overflow-y: initial; } #mnml { font-size: 8pt; padding: 0.25em; .menu { .logo { display: none; } .team { height: 20em; } } .instance { svg { stroke-width: 1.25em; } } .game { .team, #targeting, .resolving-skill { width: calc(90% - 3em); } .game-construct { grid-template-columns: 1fr; grid-template-rows: min-content 1fr; .avatar { grid-area: initial; position: absolute; top: 0; height: 100%; width: 100%; z-index: -1; } svg { height: 1em; } } .skills { button[disabled] { display: none; } } .effects { font-size: 1em; } .player { .game-construct { grid-template-areas: "left" "right"; .left { grid-template-columns: 1fr; grid-template-rows: 1fr min-content; grid-template-areas: "skills" "effects"; } } } .opponent { .game-construct { grid-template-rows: 2fr min-content; grid-template-rows: 1fr; grid-template-areas: "right" "left"; .left { grid-template-columns: min-content 1fr; } } .avatar { bottom: 0px; } } } .instance-construct { position: relative; .skills, .specs { font-size: 75%; } .avatar { grid-area: initial; position: absolute; top: 0; height: 100%; width: 100%; z-index: -1; } } aside { button { margin-bottom: 0.5em; } } } }