Chat Box for Dueling Nexus by yubelious

/* ==UserStyle==
@name           Chat Box for Dueling Nexus
@namespace      USO Archive
@author         Yubelious!
@description    `Chat Box (and other scrolling things) for Dueling Nexus by Skeletonxf and Yubelious!The current chat space takes up a whopping 30% of the entire screen! It is a commonly known bug that, immediately after rps and before the duel starts, if that 30% of the screen is filled entirely by a block of text, the duel will resize and in many cases become unplayable. By containing this chat inside a box, we are able to avert this issue.In all honesty, any old box will do. But I decided to work on a version that feels a little more... Stylish!Or for a low-impact fix with more features, please download my partner's style here:<a href="https://userstyles.org/styles/144946/duelingnexus-chat-monster-info-split-view">https://userstyles.org/styles/144946/duelingnexus-chat-monster-info-split-view</a>`
@version        20220728.1.0
@license        NO-REDISTRIBUTION
@preprocessor   uso
==/UserStyle== */
@-moz-document url-prefix("https://duelingnexus.com/game"), url-prefix("https://duelingnexus.com/editor/") {
/*Game and editor*/
/*Related things*/
html {
    background-position: right bottom;
    background-color: black;
}
.engine-window p, #game-chat-area, #game-chat-area .engine-text-box, #game-end-text, #game-end-title {
    margin: 0;
    padding: 0;
}
#editor-container, #game-container, .engine-dark-box {
    margin: 0
}
.engine-dark-box, .engine-text-box, #card-column, #card-name, #card-picture-container, #card-description-box, #editor-main-deck, #siding-main-deck, #editor-extra-deck, #editor-side-deck, #siding-extra-deck, #siding-side-deck, #editor-search-results {
    box-sizing: border-box
}
#card-column, #game-column, #game-siding-column, #editor-decks-column, #editor-search-column {
    margin: 8vh .5vw 0 0 !important
}
#card-name, #editor-deck-main-title, #editor-search-title, #siding-deck-main-title, #editor-deck-extra-title, #editor-deck-side-title, #siding-deck-extra-title, #siding-deck-side-title {
    line-height: 1.5;
	margin: .5vw 0;
}
#card-name, #editor-deck-main-title, #editor-deck-extra-title, #editor-deck-side-title, #siding-deck-main-title, #siding-deck-extra-title, #siding-deck-side-title {/*Big headers.*/
    font-size: 1.25vw;
    text-align: center;
}
h6 {/*Small headers.*/
    font-size: 1.5vh
}
/*Card Column*/
.game-card-tab {
    height: 8vh;
    width: 24vw;
    position: fixed;
    top: 0;
}
#card-column, #game-card-info {
    height: 92vh;
    width: 24vw;
}
#game-card-info {
    top: 8vh
}
#editor-container #card-column, #game-card-info {
    display: grid;
    grid-template-areas: 'header' 'picture' 'description' '.';
    grid-template-rows: max-content auto 25% 18%;
    gap: 1.5vh;
}
#card-name {
	grid-area: header;
    overflow: auto;
    padding: .5%;
    width: 99%;
    max-height: 5vw;
    z-index: 2;
}
#card-picture-container {
	grid-area: picture;
    display: inline-block;
    min-height: 0;
    margin: 0;
    position: relative;
    bottom: 0;
}
#card-picture {
    height: auto;
    width: 50%;
    max-width: 100%;
    position: absolute;
    right: 25%;
    bottom: 0;
}
#card-description-box {
    grid-area: description;
    font-size: 1vw;
    text-align: justify;
    overflow-x: hidden;
    overflow-y: auto;
    padding: .5vh 1vh;
    position: relative;
    bottom: 0;
}
#card-description {
    line-height: 1.1
}
#card-description-box p {
    margin-bottom: 0
}
#card-if-monster, #card-if-spell, #card-if-trap {
    font: bold 1.1vw sans-serif
}
}

@-moz-document url-prefix("https://duelingnexus.com/game") {
/*Chat and Options*/
/*Chatbox*/
#game-chat-area {/*This is the box that contains the chat to a confined space. It's the heart of this theme.*/
    font-size: 2vh;
    border: 1px dashed antiquewhite;
    overflow-x: hidden;
    overflow-y: scroll;
    height: 11vh;
    width: 23vw;
    min-width: 0;
    bottom: 40px;
}
#game-chat-area .engine-text-box {/*This is the smaller box where you type into.*/
    font-size: 1vw;
    border: 3px double #f0f0f0;
    height: 4vh;
    width: 21vw;
    position: fixed;
    bottom: 41px;
    left: .6%;
}
/*Options tab*/
.game-card-tab-button {
    height: 8vh;
    padding: 0;
}
.game-option {
    padding: .2vw
}
table.game-option input {
    width: 95%
}
#game-options {
    max-height: 72vh;
    overflow-y: auto;
}
#game-options td, #game-options p {
    font-size: 1vw;
    line-height: 1;
    margin: .5vh;
}
/*Move the game room out of the way*/
#game-room-container {
    margin: 0;
    padding: 0;
    height: 100vh;
    max-height: 100vh;
    width: 100vw;
    max-width: 100vw;
    overflow: auto;
    position: relative;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}
#game-room-container-top {
    margin-top: 8vh;
    margin-left: 25vw;
    height: 25vh;
    min-width: 0;
    width: 70vw;
}
#game-room-players {
    user-select: none;
    height: 50vh;
    width: 70vw;
    max-width: 100%;
    padding: 0;
    position: absolute;
    bottom: 41px;
    left: 25vw;
}
}

@-moz-document url-prefix("https://duelingnexus.com/editor/") {
#editor-menu-container, #editor-menu-content {
    height: 8vh;
    width: 100%;
    padding: 0;
    position: fixed;
}
}