Mopaiv Theme Retro (GIF) by as1

/* ==UserStyle==
@name           Retro Mopaiv Theme
@namespace      Mopaiv.com
@version        1.0.0
@description    A new userstyle
@author         Me
==/UserStyle== */

@-moz-document domain("example.com") {
    /**
        Your code goes here!
        More info in the official documentation at Stylus' wiki:
        https://github.com/openstyles/stylus/wiki/Writing-UserCSS
    */
}@-moz-document domain("mopaiv.com") {
:root {
    --main-bg-color: #8975ff;
    --main-text-color: #fff;
    --secondary-text-color: #fff;
    --main-element-bg-color: #21019f;
    --secondary-element-bg-color: #4919ff;
    --secondary2-element-bg-color: #21019f;
    --third-element-bg-color: #21019f;
    --mopaiv-blue: #21019f;
}

body,
html 
  {
    background: url(https://wallpaperaccess.com/full/2641054.gif);
    background-size: cover;
  }

  .appMount-3lHmkl
  {
    background: rgba(225, 225, 225, .6);
  }


p.text-center {
    color: var(--main-text-color);
}

.navbar {
    background-color: var(--main-element-bg-color);
    border-bottom: 1px solid rgba(0, 0, 0, .125);
}

.card {
    background-color: var(--main-element-bg-color);
}

.landing-header {
    background-color: var(--secondary-element-bg-color) !important;
}

.card * {
    color: var(--main-text-color);
}

.text-muted,
.text-truncate {
    color: var(--secondary-text-color);
}

#tabName,
h1,
h2,
h3,
h4,
h5,
h6 {
    color: var(--main-text-color);
}

.nav-pills .nav-link,
.nav-pills .nav-link:hover,
.nav-pills .nav-link:focus {
    background-color: var(--main-element-bg-color);
    color: var(--main-text-color);
}

.card .nav-pills .nav-link:hover {
    background-color: var(--secondary-element-bg-color);
    color: var(--main-text-color);
}

.nav-pills .nav-link.active,
.nav-pills .nav-link.active:hover,
.nav-pills .nav-link.active:focus {
    background-color: var(--mopaiv-blue);
    color: var(--main-text-color);
}

.img-holder,
.card-top,
.card .card-top {
    background-color: var(--secondary-element-bg-color) !important;
}

.form-control,
.form-control:hover,
.form-control:focus {
    background-color: var(--main-element-bg-color);
    border-color: #000;
}

.card .form-control,
.card .form-control:hover,
.card .form-control:focus {
    background-color: var(--secondary-element-bg-color);
    border-color: #000;
}

.form-control,
.form-control:focus {
    color: var(--main-text-color);
}

.form-control::placeholder {
    color: var(--secondary-text-color);
}

a {
    color: var(--secondary-text-color) !important;
}

a:hover,
a:focus {
    color: var(--main-text-color);
}

.col-md.text-center-sm.align-self-center.hide-sm span,
.col-md.text-center-sm.align-self-center span {
    color: var(--secondary-text-color);
}

.nav-item a:hover,
.nav-item a:focus {
    background-color: var(--secondary-element-bg-color) !important;
}

.border-right,
.border-left {
    border-color: #111 !important;
}

.nav-item.dropdown .dropdown-menu {
    background-color: var(--main-element-bg-color);
    border: .1px solid #000;
}

.dropdown-menu {
    box-shadow: 0 8px 8px -4px var(--main-element-bg-color);
    /*box-shadow: 0 3px 10px var(--main-element-bg-color); */
}

.dropdown-divider {
    border-color: #000;
}

hr {
    border-color: #111;
}

.details,
.copyright,
.socials i {
    color: var(--secondary-text-color) !important;
}

.copyright:after {
    content: "Thanks for index for code and bloop for the GIF code posted by AS.";
    display: block;
}

.modal-content {
    border-color: var(--main-element-bg-color);
}

.modal-body {
    background-color: var(--secondary-element-bg-color);
}

.modal-header,
.modal-footer {
    background-color: var(--main-element-bg-color);
    border-color: var(--main-element-bg-color);
}

.col-md-2.text-center.text-truncate.hide-sm,
.col-md-6.text-truncate {
    color: var(--main-text-color);
}

.input-group-text {
    background-color: var(--secondary2-element-bg-color);
    border-color: #fff;
}

.card[style="border-left:5px solid #1890ff;box-shadow:none;"] {
    background-color: var(--main-bg-color);
}

.alert a {
    color: var(--mopaiv-blue) !important;
}

div[style="color:inherit;font-size:20px;font-weight:600;"],
h4[style="color:inherit;font-size:20px;font-weight:600;"] {
    color: var(--secondary-text-color) !important;
}

pre[style="word-wrap: break-word; white-space: pre-wrap;"] {
    color: var(--main-text-color);
}
}