CSS fixes project for Dueling Nexus by yubelious

/* ==UserStyle==
@name         CSS fixes project for Dueling Nexus
@version      20220804.23.02
@namespace    userstyles.world/user/yubelious
@description  All fixes. No pictures. Designed to be compatible with some other themes, but not to be a theme itself. Now available on Userstyles.world
@author       yubelious
@license      MIT License
==/UserStyle== */

@-moz-document url("https://duelingnexus.com/login"), url("https://duelingnexus.com/register"), url("https://duelingnexus.com/recover"), url("https://duelingnexus.com/home"), url("https://duelingnexus.com/duel"), url("https://duelingnexus.com/gamelist"), url("https://duelingnexus.com/hostgame"), url("https://duelingnexus.com/hostbotgame"), url("https://duelingnexus.com/decks"), url("https://duelingnexus.com/profile"), url("https://duelingnexus.com/leaderboard"), url("https://duelingnexus.com/donate") {
/*SECTION 01 NAVGLOBAL*/
/*This section is global code that applies to all of the navigation pages. For global code for the game and deckbuilding pages, go to GAMEGLOBAL*/
html {
    background-position: right bottom;
    background-color: black;
}
body {
    font-size: 2vh;
    line-height: 1;
    height: 100vh;
    margin: 0;
    position: relative;
}
article {
    padding: 1%
}
div#app, #duel-area {
    margin-bottom: 41px /*Increase this value if your taskbar blocks the interface. Search "41px" and raise all of them to the same value.*/
}
h2, h3 {/*This is the main header for each of the tabs.*/
    -moz-user-select: none;
    -o-user-select: none;
    user-select: none;
}
button img, .fake-button img {
    height: 2vw;
    width: 2vw;
    float: right;
}
#home-area {
    background-color: rgba(0, 0, 0, 0);
    border-width: 0;
}
#home-area h2, #home-area button {
    display: none
}
#gamelist-area[data-v-33d70790], #custom-game-area[data-v-6ab2f434], #decks-area[data-v-417e0dbe], #my-profile[data-v-dc2d7148], #leaderboard-page, #donate-area[data-v-7f4b9848] {
    box-sizing: border-box;
    display: block;
    overflow-y: auto;
    min-height: 0;
    max-height: 100vh;
    height: 75%;
    width: auto;
    min-width: 0;
    max-width: 100vw;
    margin: 0;
    position: absolute;
    right: 12%;
    bottom: 12%;
    left: 12%;
}
/*Here we have some general clicky thingy rules.*/
a {
    -moz-transition: all 1s ease-in-out;
    -o-transition: all 1s ease-in-out;
    transition: all 1s ease-in-out;
    font-size: 2vh;
    padding: 0;
    text-decoration: underline;
    opacity: .75;
}
a:focus {
    font-style: italic
}
a:hover {
    opacity: 1
}
article button, .fake-button[data-v-6f705b54], .file-picker-container img {
    line-height: 1;
    text-align: center;
}
.fake-button[data-v-6f705b54], .file-picker-container img {  
    font-size: 2vh
}
article button, p button, #gamelist-buttons button, .button, button[data-v-417e0dbe]/*Refers to the button(s) on the Deck Editor page.*/, .fake-button[data-v-417e0dbe]/*Refers to the fake button(s) on the Deck Editor page.*/, button[data-v-dc2d7148]/*Refers to the button(s) on the My Profile page.*/, .fake-button[data-v-dc2d7148]/*Refers to the fake button(s) on the My Profile page.*/ {
    -moz-transition-duration: 2s;
    -o-transition-duration: 2s;
    transition-duration: 2s;
    transition-property: color, background, border;
    font-size: 2vh;
    border: .15vw solid;
    min-height: 0;
    min-width: 0;
}
p button:focus, #gamelist-buttons button:focus, .button:focus, button[data-v-6f705b54]:focus, .fake-button[data-v-6f705b54]:focus, button[data-v-7d3c70a7]:focus, .fake-button[data-v-7d3c70a7]:focus {
    -moz-transition-duration: 2s;
    -o-transition-duration: 2s;
    transition-duration: 2s;
    transition-property: color, background, border;
    font-style: italic;
}
article button:hover, p button:hover, #gamelist-buttons button:hover, .button:hover, button[data-v-6f705b54]:hover, .fake-button[data-v-6f705b54]:hover, button[data-v-7d3c70a7]:hover, .fake-button[data-v-7d3c70a7]:hover {
    -moz-transition-duration: 2s;
    -o-transition-duration: 2s;
    transition-duration: 2s;
    transition-property: color, background, border;
}
article button:focus, p button:focus, .file-picker-container:focus {
    -moz-transition-duration: 2s;
    -o-transition-duration: 2s;
    transition-duration: 2s;
    transition-property: color, background, border;
    font-style: italic;
}
form div {
    margin: 0 0 1vw 0
}
form input[type="checkbox"] {
    margin: 0
}
form input[type="email"], form input[type="password"], form input[type="text"], input[type="text"], #login-submit, #register-area button, #recover-submit {
    -moz-transition-duration: 1s;
    -o-transition-duration: 1s;
    transition-duration: 1s;
    -moz-transition-property: all;
    -o-transition-property: all;
    transition-property: all;
    font-family: sans-serif;
    text-indent: 0.5vw;
    border-width: .15vw;
    height: 2.75vw;
    padding: 0;
}
form input[type="email"]:focus, form input[type="password"]:focus, form input[type="text"]:focus, input[type="text"]:focus, #login-submit:focus, #register-area button:focus, #recover-submit:focus, form input[type="email"]:hover, form input[type="password"]:hover, form input[type="text"]:hover, input[type="text"]:hover, #login-submit:hover, #register-area button:hover, #recover-submit:hover {
    -moz-transition-duration: 1s;
    -o-transition-duration: 1s;
    transition-duration: 1s;
    -moz-transition-property: all;
    -o-transition-property: all;
    transition-property: all;
}
input[type="checkbox"], label {
    vertical-align: middle;
    user-select: none;
}
input, label {
    font-size: 2vh;
    opacity: .7;
    cursor: pointer;
}
input:hover, label:hover {
    opacity: 1
}
label {
    line-height: 1
}
/*Table stuff*/
td, .table-button:active {
    line-height: 2.5;
	margin: 0;
	padding: .5vw;
}
.table-button:active {
    font-style: italic
}
/*Animations*/
#navbar, #socket-connection {
	opacity: 1;
	animation-name: fadein;
	animation-iteration-count: 1;
	animation-timing-function: ease-in;
	animation-duration: .5s
}
#home-area {
    animation: disappear 2s;
    font-size: 5vh;
    height: 100%;
    width: 100%;
    margin: 0;
    padding-top: 30%;
    opacity: 0;
    z-index: -1;
    position: absolute;
    top: 0;
    left: 0;
}
/*This section affects the navbar and login regardless of the device you're using.*/
body {
    margin: 0;
    height: 100vh;
    position: relative;
}
form[data-v-26bcedb3]/*Login form*/, form[data-v-4068c77b]/*Register form*/, form input[type="checkbox"] {
    margin: 0;
    padding: 0;
}
article button, form div {
    min-height: 0
}
#navbar {
    border-width: 0 1px 0 0;
    border-style: solid;
    height: 100%;
    padding-top: 2%;
}
#navbar-left {
    height: 25%;
    width: 25%;
    position: fixed;
    left: 0;
}
#navbar-left:before {
    content: 'JOIN US ON';
    text-align: left;
    display: block;
}
#navbar-left button, #navbar-left button:hover, #navbar-middle button, #navbar-middle button:hover, #navbar-right button, #navbar-right button:hover {
    -moz-transition-duration: 1s;
    -o-transition-duration: 1s;
    transition-duration: 1s;
    -moz-transition-property: all;
    -o-transition-property: all;
    transition-property: all;
}
#navbar-left button {
    font-size: 0;
    border-width: 1px;
    float: left;
    padding: .5vh;
    min-height: 0;
    min-width: 0;
}
#navbar-left br, #navbar-middle br {
    display: none
}
#navbar-middle, #navbar-right button {
    margin: 0
}
#navbar-middle button, #navbar-right button {
    text-align: left;
    vertical-align: middle;
    min-height: 0;
}
#navbar-middle button {
    border-width: 1px;
    padding: 3% 3% 3% 6%;
}
#navbar-middle > button:nth-of-type(1) {
    background: url('https://i.imgur.com/s5Fi8nR.png') center no-repeat;/*Logo by Svasselt*/
    font-size: 0;
    height: 110px;
    border-width: 0;
    cursor: default;
}
#navbar-middle > button:nth-of-type(1) img {
    display: none
}
#navbar-middle button, form button, form input[type="text"], form input[type="password"], form input[type="email"] {
    width: 80%
}
#navbar-middle button img, #navbar-right button img {
    float: right
}
#navbar #logout-button {
    background-color: rgba(0, 0, 0, 0);
    border: 0;
}
#login-area[data-v-26bcedb3], #register-area[data-v-e589858c], #recover-area[data-v-29814b14] {
    background-color: rgba(0, 0, 0, 0);
    border-width: 0;
}
form button, form input[type="text"], form input[type="password"], form input[type="email"] {
    padding: 0
}
form div {
    padding: 1% 0 0 0
}
#socket-connection {
    line-height: 1.5;
    background-color: rgba(0, 0, 0, 0.5);
    border: 0;
    height: 3vh;
    width: auto;
    min-width: 0;
    z-index: 3;
    position: fixed;
}
#togglenavbar {
	font-size: 5vh;
    border-width: 1px;
    border-bottom-right-radius: 20%;
    height: 10vh;
    width: 10vh;
    padding: .5vh;
    position: absolute;
    top: 0;
}
/*This affects the site while the navbar is colapsed. For this feature, ask me for Collapserpent in the official Dueling Nexus discord.*/
.app-navbar-hidden #navbar, .app-navbar-hidden #socket-connection, .app-navbar-hidden #login-area, .app-navbar-hidden #register-area, .app-navbar-hidden #recover-area {
    display: none
}
.app-navbar-hidden, .app-navbar-hidden div[data-v-26bcedb3]/*Login area*/, .app-navbar-hidden div[data-v-26bcedb3]/*Login area*/ .app-navbar-hidden #news-area, .app-navbar-hidden #nexus-gui-popup-background {
    height: 100%;
    width: 100% !important;
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0 !important;
}
/*This section affects the navbar and login on larger horizontal displays.*/
@media (min-height: 500px) and (orientation: landscape) {
#app, #nexus-gui-popup-background {
    height: 100%;
    width: 75%;
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 25%;
}
#navbar, #login-area[data-v-26bcedb3], #register-area[data-v-e589858c], #recover-area[data-v-29814b14] {
    max-height...