@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap');

:root,

:root.main {
	--bg-color: #1a0f08;              /* Dark ember-stone background */
	--bg-color-dark: #0e0704;         /* Deeper shade for darker elements */
	--text-color: #e0d6c5;            /* Aged parchment-style text */
	--border-color: #e67300;          /* Burnt orange border */
	--border-color-a: #cc5500;        /* Stronger orange for accents */
	--border-color-b: #663300;        /* Deep bronze/brown */
	--modual-text: #fff3e0;           /* Warm cream for readability */
	--modual-text-high: #ffcc80;      /* Highlighted gold/cream */
	--progress-light: #ffaa33;        /* Glowing gold-orange */
	--progress-dark: #663300;         /* Dark ember track */
	--progress-light-bar: #ffaa33;    /* Foreground bar */
	--progress-dark-bar: #4a2a0a;     /* Background bar */
	--log-message-time: #cfa973;      /* Soft brass for time stamps */
	--log-message-import: #ff7518;    /* Important log messages (ember orange) */
}


html, body {
    height: 100%;
    margin: 0;
    padding: 0;
    overflow-x: initial !important;
}

body {
    background-color: #1a0f08; /* dark emberstone */
}
.content {
    position: relative;
    z-index: 1;
}

.background-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url('https://www.torrhan.com/home/img/firebackground.png');
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    z-index: 0;
}
.background-image::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.2); /* adjust opacity */
    z-index: 1; /* must be above the background but below content */
}
.thePage {	min-height:100%;
	overflow-x: hidden;
	overflow-y: hidden;}
#area{ margin: auto; width: 75%;padding: 10px;}
 .homebt {
    color:#9a0000;
    text-decoration: none;
    width:50px;
    text-align:center;
	height:20px;
	cursor:pointer;

    }
.homebt2 {
	border-radius:10px;
	background:var(--border-color-a);
	color:white;
	border:0px;
	padding:7px;

    }
	
.homebt2:hover, .homebt2:focus, .homebt2:active, .homebt2.active, .open>.dropdown-toggle.homebt2 {
	border-radius:10px;
	background:var(--border-color-b);
	color:white;
	padding:7px;
}

.mainwrapper{
	min-height:100%;
}
a:hover, a:visited, a:link, a:active {
    text-decoration: none;
}
a:hover img{
    border: 1px solid #6A5ACD;
}

.btn-primarya {
	border-radius:10px;
	background:var(--border-color-a);
	color: var(--modual-text);
	border:0px;
	padding:7px;	
	margin-left:10px;
	text-shadow: 2px 2px #000000;
}
.btn-primarya:hover, .btn-primarya:focus, .btn-primarya:active, .btn-primarya.active, .open>.dropdown-toggle.btn-primarya {
	border-radius:10px;
	background:var(--border-color-b);
	color: var(--modual-text-high);
	padding:7px;
	text-shadow: 2px 2px #000000;
}

.links-read {
	color:#9a0000; 
	cursor:pointer;	
	text-decoration:none:
}
.links-read:hover, .links-read:focus, .links-read:active, .links-read.active, .open>.dropdown-toggle.links-read {
	color:#ff0000;
	text-decoration:none:
}


.wide {
    background-size: cover;
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: 75%; /* Set a larger default width for mobile */
}

/* Media query for desktops */
@media (min-width: 768px) { /* Adjust this value based on your design needs */
    .wide {
        width: 30%; /* Smaller width for desktops */
    }
}

.modual{
	border:2px solid var(--border-color);
	background: var(--bg-color-dark);
	border-radius: 15px;
	-moz-box-shadow: 10px 10px 50px #000000;
	-webkit-box-shadow: 10px 10px 50px #000000;
	 box-shadow: 10px 10px 50px #000000;	
	 color: var(--modual-text);
	 margin-bottom:10px;
}

.cellTitle{
	background-image: linear-gradient( var(--progress-light), var(--progress-dark) );
	border-radius: 5px;
	text-align:center;
}
div.modual::-webkit-scrollbar-track  { 
	background: none;
}
div.modual::-webkit-scrollbar {
    width: 8px;
	border-radius: 5px; 
}
div.modual::-webkit-scrollbar-thumb  {
	border-radius: 5px;
  background-clip: padding-box;  
}

::-webkit-scrollbar {
    width: 12px;
}
::-webkit-scrollbar-track {
background: #020202;
}
::-webkit-scrollbar-thumb {
    background: var(--border-color);
}

.error {
  color:red;
}
.spinner {
  display: inline-block;
  opacity: 0;
  max-width: 0;

  -webkit-transition: opacity 0.25s, max-width 0.45s; 
  -moz-transition: opacity 0.25s, max-width 0.45s;
  -o-transition: opacity 0.25s, max-width 0.45s;
  transition: opacity 0.25s, max-width 0.45s; /* Duration fixed since we animate additional hidden width */
}

.has-spinner.active {
  cursor:progress;
}

.has-spinner.active .spinner {
  opacity: 1;
  max-width: 50px; /* More than it will ever come, notice that this affects on animation duration */
}
/* Change Autocomplete styles in Chrome*/
input:-webkit-autofill,
input:-webkit-autofill:hover, 
input:-webkit-autofill:focus,
textarea:-webkit-autofill,
textarea:-webkit-autofill:hover,
textarea:-webkit-autofill:focus,
select:-webkit-autofill,
select:-webkit-autofill:hover,
select:-webkit-autofill:focus {
	border:2px solid var(--border-color);
  -webkit-text-fill-color: 	#A0A0A0;
  -webkit-box-shadow: 0 0 0px 1000px #000 inset;
  transition: background-color 5000s ease-in-out 0s;
}

.form-control{
	border:2px solid var(--border-color);
	border-radius: 15px;
	
  -webkit-text-fill-color: 	#A0A0A0;
  -webkit-box-shadow: 0 0 0px 1000px #000 inset;
  transition: background-color 5000s ease-in-out 0s;0s;
  
  
	-moz-box-shadow: 10px 10px 50px #000000;
	 box-shadow: 10px 10px 50px #000000;
	 background-color:black;
	margin-left: auto;
	margin-right: auto;
	max-width:75%;
	width: 100%;
}

.goal-progress {
  border: 5px solid #000;
  height: 80px;
  margin: 50px 20px 20px 0;
  background-color: black;
}

#time {
  float: right;
  line-height: 80px;
  margin-right: 20px;
  background-color: black;
  color: white;
  mix-blend-mode: difference;
}

.goal-time-container {
  height: 80px;
  background-color: white;
  margin-left: 115px;
}

#goal-time {
  background-color: black;
  height: 80px;
  width: 100%;
}