/* =========================================================
   DEAD ROSES THEME
   Original code by Skyllish #135345
   Colour/style modifications for Dead Roses theme
   ========================================================= */


/* =========================
   FONT
   ========================= */

@font-face {
   font-family: 'Merienda';
   font-style: normal;
   font-weight: 300 900;
   font-display: swap;
   src: url(https://fonts.gstatic.com/s/merienda/v19/gNMHW3x8Qoy5_mf8uWMFMIo.woff2) format('woff2');
   unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC,
   U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329,
   U+2000-206F, U+2074, U+20AC, U+2122, U+2191,
   U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}


/* =========================================================
   DEAD ROSES COLOUR PALETTE

   Blackened Green     #0b0d0c
   Main Panel          #151715
   Secondary Panel     #20211e
   Deep Violet         #332a38
   Dusty Mauve         #725568
   Faded Rose          #a47b8c
   Pale Lavender       #c2b4c5
   Old Ivory           #e1d9ce
   Moss                #4f5a46
   Dark Moss           #30382d
   Border              #57534d
   Muted Text          #aaa39b
   ========================================================= */


/* =========================
   BODY / BACKGROUND
   ========================= */

body {
   background-color: #0b0d0c;

   background-image:
      url("https://maryonthecross.neocities.org/images/Dead-roses-bg.jpg");

   background-attachment: fixed;
   background-size: cover;
   background-position: center;

   color: #aaa39b;

   font-family: "Merienda", cursive;
}


/* Dark garden overlay */

body:before {
   content: "";

   position: fixed;
   inset: 0;

   background: rgba(7, 9, 8, 0.55);

   pointer-events: none;
   z-index: -1;
}


body div {
   font-family: "Merienda", cursive;
}


/* =========================
   MAIN COLUMN
   ========================= */

DIV #main {
   margin-top: 10px;
   margin-bottom: 10px;

   background: rgba(21, 23, 21, 0.94) !important;

   border: double;
   border-width: 3px;
   border-color: #57534d;

   color: #aaa39b;

   font-family: "Merienda", cursive;
   font-size: 15px;

   border-radius: 30px;

   box-shadow:
      0 0 25px rgba(0, 0, 0, 0.55),
      inset 0 0 25px rgba(48, 56, 45, 0.15);
}


/* =========================
   MAIN HEADING
   ========================= */

h1 {
   text-align: center;

   font-size: 40px;

   margin-top: 30px;
   margin-bottom: 30px !important;

   color: #a47b8c;

   text-shadow:
      0 0 8px rgba(114, 85, 104, 0.5),
      2px 2px 5px #050605;
}


/* =========================
   SPOILERS
   ========================= */

.btn-spoiler {
   background: #332a38;

   border: 1px solid #725568 !important;

   color: #e1d9ce;

   box-shadow: none !important;

   border-radius: 10px;

   transition: 0.3s ease;
}


.btn-spoiler.active {
   background: #20211e !important;

   color: #c2b4c5 !important;

   border: 1px solid #57534d !important;
}


.btn-spoiler:hover {
   background: #725568 !important;

   color: #e1d9ce !important;

   box-shadow:
      0 0 12px rgba(114, 85, 104, 0.4);
}


/* =========================
   SIDEBAR
   ========================= */

DIV #sidebar {
   background: transparent;

   border-radius: 20px;

   margin-top: 20px;

   border: none;
}


div #sidebar .card-body {
   background: rgba(21, 23, 21, 0.94);

   border: 1px solid #57534d;

   box-shadow:
      0 0 15px rgba(0, 0, 0, 0.55);
}


div #sidebar .card-body A {
   color: #a47b8c;

   transition: 0.3s ease;
}


div #sidebar .card-body A:hover {
   color: #c2b4c5;

   text-shadow:
      0 0 7px rgba(164, 123, 140, 0.45);
}


.card-body {
   border-radius: 20px;

   padding-bottom: 10px !important;

   border: 1px solid #57534d;

   font-family: "Merienda", cursive;

   color: #aaa39b;
}


div #card-user .card {
   border: none !important;
}


div .card-body img {
   border-radius: 100px;

   border: 2px solid #725568 !important;

   box-shadow:
      0 0 12px rgba(114, 85, 104, 0.35);
}


div .card-body DIV {
   border: none !important;
}


/* =========================
   PROGRESS BARS
   ========================= */

div #progress-energy.progress-bar {
   background: #a47b8c !important;

   border: 1px solid #725568 !important;
}


div #progress-hunger.progress-bar {
   background: #725568 !important;

   border: 1px solid #57534d !important;
}


div #progress-hp.progress-bar {
   background: #4f5a46 !important;

   border: 1px solid #30382d !important;
}


div #progress-xp.progress-bar {
   background: #332a38 !important;

   border: 1px solid #57534d !important;
}


div.progress {
   background: #0f120f !important;

   border-radius: 10px;
}


/* =========================
   TOP NAVIGATION
   ========================= */

nav.navbar {
   background: rgba(11, 13, 12, 0.97) !important;

   border-bottom: 1px solid #57534d;

   box-shadow:
      0 3px 15px rgba(0, 0, 0, 0.65);
}


ol,
ol A {
   background: #151715 !important;

   font-family: "Merienda", cursive;

   color: #aaa39b;
}


#bookmarkPage {
   color: #a47b8c !important;
}


l.fa {
   color: #a47b8c;
}


.breadcrumb-nav {
   background: #151715 !important;

   color: #aaa39b;
}


.navbar i.fa {
   color: #a47b8c !important;
}


.navbar A.nav-link {
   color: #aaa39b !important;

   font-family: "Merienda", cursive;

   transition: 0.3s ease;
}


.navbar A.nav-link:hover {
   color: #c2b4c5 !important;

   text-shadow:
      0 0 7px rgba(164, 123, 140, 0.5);
}


.navbar SPAN,
.navbar BUTTON {
   font-family: "Merienda", cursive;
}


/* =========================
   DEN / PROFILE NAVIGATION
   ========================= */

ul.nav {
   border-color: #57534d;
}


ul.nav A.nav-link {
   background: #151715;

   color: #a47b8c;

   border-color: #57534d;

   transition-duration: 0.4s;
}


ul.nav A.nav-link:hover {
   background: #332a38 !important;

   color: #e1d9ce !important;

   border-color: #725568;
}


ul.nav.nav .active {
   background: #725568 !important;

   color: #e1d9ce !important;

   border-color: #a47b8c;
}


/* =========================
   LINKS
   ========================= */

a {
   color: #a47b8c;

   transition: 0.3s ease;
}


a:hover {
   color: #c2b4c5;

   text-decoration: none;

   text-shadow:
      0 0 6px rgba(164, 123, 140, 0.5);
}


/* =========================
   MAIN TABLE
   ========================= */

TR {
   background: #20211e;

   color: #aaa39b;

   border-color: #57534d;
}


Tr a {
   color: #a47b8c;
}


tr .text-danger {
   color: #a47b8c !important;
}


th.pt-1.pb-1 {
   background: #332a38;

   text-align: center;

   color: #c2b4c5;

   border-color: #57534d;
}


th.pt-1.pb-1 A {
   color: #c2b4c5 !important;
}


table.table-striped {
   border: none !important;
}


div.card.mb-3 .card-img-top {
   border-radius: 100px;

   border: 2px solid #57534d;
}


div.col-xl-3.col-sm-5 IMG {
   border-radius: 100px;

   border: 2px solid #57534d;
}


div.col-xl-3.col-sm-5 {
   color: #aaa39b;
}


div.col-xl-3.col-sm-5 A {
   color: #a47b8c;
}


.table-striped tbody tr:nth-of-type(odd) {
   background: #191b18;

   color: #aaa39b;
}


.table-striped tbody tr:nth-of-type(odd) A {
   color: #a47b8c;
}


/* =========================
   CAVES
   ========================= */

TH.top {
   background: #332a38 !important;

   color: #c2b4c5;

   border-color: #57534d;
}


th.top A {
   color: #e1d9ce !important;
}


tr.subheader {
   background: #30382d !important;

   color: #d1cbc3;
}


TD.bottom {
   background: #101310 !important;

   color: #aaa39b;
}


/* =========================
   CARDS
   ========================= */

.card {
   border: 1px solid #57534d !important;

   border-radius: 25px;

   background: rgba(21, 23, 21, 0.92) !important;

   box-shadow:
      0 0 14px rgba(0, 0, 0, 0.5);
}


/* =========================
   WOLF STATUS BARS
   ========================= */

div.progress-bar.bg-warning {
   background-color: #a47b8c !important;
}


div.progress-bar.bg-primary {
   background-color: #725568 !important;
}


div.progress-bar.bg-danger {
   background-color: #725568 !important;
}


div.progress-bar.bg-info {
   background-color: #4f5a46 !important;
}


div.progress-bar.bg-success {
   background-color: #68765b !important;
}


/* =========================
   COPYRIGHT
   ========================= */

span.copyright {
   font-family: "Merienda", cursive;

   color: #6f6b65;
}


div.row.justify-content-center {
   background: transparent;
}


/* =========================
   DYNASTY / OVERVIEW /
   BREEDING
   ========================= */

div.card.text-center img {
   border-radius: 0px;
}


div.card.text-center .card-header {
   background: #332a38 !important;

   margin-bottom: 60px;

   border-radius: 0px !important;

   color: #c2b4c5;

   border-bottom: 1px solid #57534d;
}


/* Dead Roses button image */

div.col-md-4.col-6.center img.card-img-top {
   content: url("https://maryonthecross.neocities.org/images/Dead-roses-buttons.jpg");

   height: 150px;

   object-fit: cover;

   opacity: .88;

   border: 1px solid #57534d;

   box-shadow:
      0 0 12px rgba(0, 0, 0, 0.5);
}


/* =========================
   ALERTS
   ========================= */

div.alert.alert-danger.text-center {
   background-color: #332a38;

   border: 1px double #725568;

   border-radius: 20px;

   color: #e1d9ce;

   text-align: center;

   box-shadow:
      0 0 12px rgba(114, 85, 104, 0.3);
}


div.alert.alert-success {
   background-color: rgba(48, 56, 45, 0.8);

   border: 1px solid #4f5a46;

   border-radius: 20px;

   color: #e1d9ce;

   text-align: center;
}


div.alert.alert-info {
   background: rgba(51, 42, 56, 0.8);

   border: 1px solid #725568;

   border-radius: 20px;

   color: #d1c6d3;

   text-align: center;
}


/* =========================
   DEN OPTIONS
   ========================= */

div.col select {
   background: #20211e;

   color: #aaa39b;

   border: 1px solid #57534d !important;

   border-radius: 8px;
}


div.col select:focus {
   background: #332a38 !important;

   color: #e1d9ce !important;

   border-color: #725568 !important;
}


td.bottom .btn {
   background: #332a38 !important;

   border: 1px solid #725568 !important;

   color: #e1d9ce;
}


div.card-body I {
   color: #a47b8c;
}


form.mb-3.text-center .btn {
   background: #4f5a46;

   color: #e1d9ce;

   border: 1px solid #57534d;

   transition: 0.3s ease;
}


form.mb-3.text-center .btn:hover {
   background: #725568;

   color: #fff7f0;
}


div #main .card-body h4 {
   color: #c2b4c5;
}


div #main .card-body small {
   color: #7f7973;
}


div #main .card-body b {
   color: #a47b8c;
}


div #main .card-body .text-danger {
   color: #a47b8c !important;
}


/* =========================
   HTML / CSS AREA
   ========================= */

textarea {
   background: #0b0d0c !important;

   border: 1px solid #57534d !important;

   color: #e1d9ce !important;

   border-radius: 8px;
}


div#fraHTMLInputBar {
   background: #332a38;

   border: 1px solid #57534d;
}


div#fraHTMLInputBar button {
   background: #725568;

   color: #e1d9ce;

   border: none !important;
}


div#fraHTMLInputBar button:hover {
   background: #a47b8c;
}


label.custom-control-label {
   color: #aaa39b;
}


div.card-header B {
   color: #c2b4c5;
}


#btnSaveDisplay {
   background: #4f5a46;

   color: #e1d9ce;

   border: none;
}


#btnPreviewDisplay {
   background: #332a38 !important;

   color: #e1d9ce;

   border: none;
}


#txtCSSFile {
   background: #0b0d0c;

   color: #aaa39b;

   border: 1px solid #57534d;
}


#btnAddCSSFile {
   background: #725568;

   color: #e1d9ce;

   border: none;
}


/* =========================
   EXPAND / IMMORTAL SLOT
   ========================= */

div.col-md-6 p {
   color: #aaa39b;
}


div.col-md-6 .btn {
   background: #30382d;

   color: #e1d9ce;

   border: 1px solid #4f5a46;

   transition: 0.3s ease;
}


div.col-md-6 .btn:hover {
   background: #725568;
}


/* =========================
   PROFILE
   ========================= */

img.user-tag {
   border: 3px solid #725568;

   border-radius: 10px;

   box-shadow:
      0 0 9px rgba(114, 85, 104, 0.35);
}


td.bottom A {
   color: #c2b4c5;
}


td.left.b {
   background: rgba(51, 42, 56, 0.65) !important;

   color: #d1c6d3;

   border-color: #57534d;
}


.btn-danger {
   background: #332a38;

   border: 1px solid #725568;

   color: #e1d9ce;
}


.btn-danger:hover {
   background: #725568;

   color: #fff7f0;
}


td.right SMALL#emailHelp.form-text {
   color: #7f7973 !important;
}


DIV#main.col-lg-9.order-lg-2 div.card-body {
   color: #aaa39b !important;
}


P.text-center.mt-4 button {
   background: #4f5a46 !important;

   color: #e1d9ce;

   border: none;
}


DIV#main.col-lg-9.order-lg-2 th {
   background: #332a38;

   color: #c2b4c5;

   border-color: #57534d;
}


DIV#main.col-lg-9.order-lg-2 span.text-success {
   color: #8caa7b !important;
}


DIV#main.col-lg-9.order-lg-2.form-control {
   background: #20211e !important;

   border: 1px solid #57534d;
}


/* =========================
   BUTTONS
   ========================= */

.btn {
   border-radius: 8px;

   transition: 0.3s ease;
}


.btn:hover {
   box-shadow:
      0 0 9px rgba(114, 85, 104, 0.4);
}


/* =========================
   FORM CONTROLS
   ========================= */

.form-control {
   background: #151715;

   color: #aaa39b;

   border: 1px solid #57534d;
}


.form-control:focus {
   background: #20211e;

   color: #e1d9ce;

   border-color: #725568;

   box-shadow:
      0 0 0 0.15rem rgba(114, 85, 104, 0.2);
}


/* =========================
   HEADINGS
   ========================= */

h2,
h3,
h4,
h5,
h6 {
   color: #a47b8c;

   text-shadow:
      1px 1px 3px #050605;
}


/* =========================
   SELECTION
   ========================= */

::selection {
   background: #725568;

   color: #e1d9ce;
}


/* =========================
   SCROLLBAR
   ========================= */

::-webkit-scrollbar {
   width: 10px;
}


::-webkit-scrollbar-track {
   background: #0b0d0c;
}


::-webkit-scrollbar-thumb {
   background: #57534d;

   border-radius: 10px;
}


::-webkit-scrollbar-thumb:hover {
   background: #725568;
}


/* =========================
   CREDIT
   ========================= */

#fraDenHTML::after {
   content: "css by MaryOnTheCross";

   float: right;

   font-size: 10px;

   color: #6f6b65;
}


DIV#main.col-lg-9.order-lg-2 table.mt-3 TH.top::after {
   content: "css by skyllish(#135345)";

   float: right;

   font-size: 10px;

   color: #6f6b65;
}