/** {
		outline: var(--red) solid 2px;
		}*/
		
		/* All pages */
		:root {
		  --black: #000000;
		  --blue: #1e90ff;
		  --white: #ffffff;
		  --yellow: #ffff00;
		  --green: #33cc33;
		  --red: #ff0000;
		  --pink: #ff5050;
		  --ltgreen: #66ff66;
		  --drkgreen: #4CAF50;		  
		  --purple: #6600cc;
		  --ltpurple: #9933ff;
		  --maroon: #965a58;
		  --ltmaroon: #b4807e;
		  --grey: #888;
		  --ltgrey: #d3d3d3;
		  --drkgrey: #a9a9a9;
		}
		
		body,html {			
		height: 100%;
		margin: 0;
		background-color: var(--black);		
		}
		
		.dh-divtext {
			font-size: 1.2em;			
			text-align: center;
			color: var(--white);
		}
		
		button {
            background: linear-gradient(45deg, var(--ltmaroon), var(--maroon)); 
            color: var(--white);
            font-size: 1.2em;
            padding: 10px 10px;
            border: none;
            cursor: pointer;
            border-radius: 5px;
            margin: 10px;
            transition: background 0.3s ease; 
        }
				
        button:hover {
            background: linear-gradient(45deg, var(--maroon), var(--ltmaroon)); /* Reverse gradient */
            color: var(--white); 
        }	
		
		button:disabled {
			background-color: var(--ltgrey); 
			color: var(--drkgrey); 
			border: 1px solid var(--drkgrey);			
			cursor: not-allowed; 
			opacity: 0.6; 
		}
		
		/* dh.html */
		.dh-h1 {
		text-align: center;
		color: red;		
		}
		
		.dh-background {
		position: fixed;
		width: 100%;
		height: 100%;
		background-image: url('../images/flames.gif');
		background-repeat: no-repeat;
		background-color: black; 
		background-size: cover; 
		background-position: center;
		overflow: hidden;
		z-index: 0;
		}
		
		.start {	
		position: absolute;
		bottom: 10px;	
		z-index: 1;
		}
		
		.dh-img {				
		position: absolute;
		top: 25%;
		}

		@media (max-width: 768px) {
		.dh-img {				
		position: absolute;
		top: 15%;
		}}
		
		
		/* dh-map.html */
		.dh-map-h2 {
			color: var(--yellow);
			text-align: center;
		}
		
		.dh-map-background {
			position: fixed;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			background-image: url('../images/dhMap.jpg');
			background-repeat: no-repeat;
			background-color: var(--black);
			background-size: auto 100%; /* Auto width and 100% height */
			background-position: center center;
			overflow: hidden;
			z-index: 0;
		}
		
		.dh-map-buttons {
			display: flex;
			flex-direction: row;
			align-items: center;
			justify-content: center;
			margin-top: 80vh;
		}
		
		@media (max-width: 768px) {
		.dh-map-buttons {
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			margin-top: 30vh;
		}}
		
		/* Dragon Fights */
		.dh-h2 
		{ 
			color: var(--red); 
		}
		
		.p-modal {
			color: var(--white);
			font-size: 1.2em;
		}
		
        .center {
            display: flex;
            justify-content: center;
			align-items: center;
            flex-direction: column;	
        }
		
        .fightButtons {	
            position: absolute;
            bottom: 100px;
        }
		
		.extraBtns {
		display: flex;
		align-items: center;
		justify-content: center;
	}
	
        #playerMessage, #enemyMessage, #playerHP, #enemyHP {
		    font-size: 1.2em;
            text-align: center;
            position: absolute;
			padding: 5px;
        }
		
		#playerHP { 
		bottom: 35%; 
		color: var(--white); 
		}
		
        #enemyHP { 
		top: 35%; 
		color: var(--yellow); 
		}
		
        #playerMessage { 
		top: 50%; 
		color: var(--green); 
		font-size: 1.6em;
		}
		
		#enemyMessage { 
		top: 40%; 
		color: var(--red); 
		font-size: 1.6em;
		}
		
        .img { 
		padding: 10px; 
		}
		
		.exitFight {
		margin-top: 765px;
        margin-left: 48%;	
		}

		.exitButton {
		margin-top: 200px;
		} 

		@media (max-width: 768px) {
		.exitButton {
		margin-top: 30px;
		}
		.exitFight {
		margin-top: 155%;
        margin-left: 30%;	
		}
		}		
		
		
		/* Modal styles */
		.modal {
			display: none; /* Hidden by default */
			position: fixed;
			z-index: 1000;
			left: 0;
			top: 0;
			width: 100%;
			height: 100%;
			overflow: auto;
			background-color: var(--black);
		}

		.modal-content {
			background-color: var(--black);
			color: var(--red); 
			margin: 15% auto; /* Center the modal */
			padding: 20px;
			border: 1px solid var(--grey);
			width: 80%;
			text-align: center;
			border-radius: 10px;
		}

		#modalButton {			
			background: linear-gradient(45deg, var(--ltmaroon), var(--maroon)); 
			color: var(--white);
            font-size: 1.2em;
            padding: 10px 10px;
            border: none;
            cursor: pointer;
            border-radius: 5px;
            margin: 10px;
            transition: background 0.3s ease;			
		}

		#modalButton:hover {
			background: linear-gradient(45deg, var(--maroon), var(--ltmaroon));
		}
		
		#attackButton {
            background: var(--red); 
            color: var(--white);
            font-size: 1.2em;
            padding: 10px 10px;
            border: none;
            cursor: pointer;
            border-radius: 5px;
            margin: 10px;
            transition: background 0.3s ease; 
        }
        #attackButton:hover {
            background: var(--pink);
            color: var(--black); 
        }
		
		#defendButton {
            background: var(--green); 
            color: var(--white);
            font-size: 1.2em;
            padding: 10px 10px;
            border: none;
            cursor: pointer;
            border-radius: 5px;
            margin: 10px;
            transition: background 0.3s ease; 
        }
        #defendButton:hover {
            background: var(--ltgreen); 
            color: var(--black); 
        }
		
		#specialButton {
            background: var(--purple); 
            color: var(--white);
            font-size: 1.2em;
            padding: 10px 10px;
            border: none;
            cursor: pointer;
            border-radius: 5px;
            margin: 10px;
            transition: background 0.3s ease; 
        }
       #specialButton:hover {
            background: var(--ltpurple); 
            color: var(--black); 
        }

		#attackButton:disabled, #defendButton:disabled, #specialButton:disabled {
			background-color: var(--ltgrey); 
			color: var(--drkgrey); 
			border: 1px solid var(--drkgrey); 
			font-size: 1.2em;
            padding: 10px 10px;            
            border-radius: 5px;
            margin: 10px;
			cursor: not-allowed; 
			opacity: 0.6; 
		}
		
		/* dh-Whisper */
		#dh-whisper {
		display: flex;
		align-items: center;
		justify-content: center;
		flex-direction: column;
		}
		
		.dh-whisper-img {			 
			 width: 10vw;
		}	
		
		.dh-whisper-text {
			font-size: 1.2em;
			margin-top: 100px;
			text-align: center;
			color: var(--white);
		}
		
		.whisper-p {
		margin-bottom: 5px;
		}	
		
		#input-name {
		color: var(--black);
		width: 15vw;
		height: 2.5vh;
		margin-top: 20px;
		}	
		
		.name-button-container {
			margin-top: 20px;
		}
		
		@media (max-width: 768px) {
		.dh-whisper-img {			
			 width: 50vw;
		}
		.dh-whisper-text {
			font-size: 1.2em;
			margin-top: 100px;
			text-align: center;
			color: var(--white);
			padding: 10px;
		}
		#input-name {
		color: var(--black);
		width: 75vw;
		height: 5vh;
		}
		}
		
		/* dh-castle */
		#dh-menu {
		display: flex;
		align-items: center;
		justify-content: center;
		flex-direction: column;
		}
		
	#dh-menu-dragons, #dh-menu-king, #dh-menu-jester, #dh-menu-whisper {
		display: none;
		align-items: center;
		justify-content: center;
		flex-direction: column;
		}
		
	.dh-menu-img {		
		width: 15vw;
		}
	
	.dh-castle-buttons {			
		margin-top: 20vh;
		}
		
		.dh-menu-text {
			font-size: 1.2em;			
			text-align: center;
			color: var(--white);
		}
		
		.menu-p {
		margin: 15px;
		}
		
	@media (max-width: 768px) {
	.dh-castle-buttons {	
		margin-top: 0;
		display: flex;
		align-items: center;
		justify-content: center;
		flex-direction: column;
		}
		.dh-menu-img {			
			 width: 50vw;
		}
		.dh-menu-text {
			font-size: 1.2em;			
			text-align: center;
			color: var(--white);
		}
		}
		
		/* dh-riddles */
		#dh-riddles {
		display: flex;
		align-items: center;
		justify-content: center;
		flex-direction: column;
		}
	
		
		.dh-riddles-img {		
		width: 15vw;
		}	
		
		.dh-riddles-text {
			font-size: 1.2em;			
			text-align: center;
			color: var(--white);
		}
		
		#riddles-p {
		margin: 15px;
		}
		
		#p-riddles {
		font-size: 1.4em;
		margin-top: 20px;
		background: var(--yellow);
		color: var(--red);
		padding: 5px;
		}
		
		.riddleSubmit {	
		margin-top: 20px;
		}
		
		#inputRiddle {
		color: var(--black);
		width: 15vw;
		height: 2.5vh;
		margin-top: 15px;
		}	
				
		
		@media (max-width: 768px) {	
		.dh-riddles-img {			
			 width: 50vw;
		}
		.dh-riddles-text {
			font-size: 1.2em;			
			text-align: center;
			color: var(--white);
		}
		#inputRiddle {
		color: var(--black);
		width: 75vw;
		height: 5vh;	
		}
		}
		
		/* dh-finale */
			.dh-finale {
		display: flex;
		align-items: center;
		justify-content: center;
		flex-direction: column;
		}
		
	#dh-finale-jester, #dh-finale-eggs {
		display: none;	
		align-items: center;
		justify-content: center;
		flex-direction: column;		
		}
		
	.dh-finale-img, .dh-fWhisper-img {		
		width: 15vw;
		}
		
	.finaleImg {
	padding: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
	}
	
	.dh-finale-buttons {
		display: flex;
		align-items: center;
		justify-content: center;	
		margin-top: 20vh;
		}
		
		.dh-finale-text {
			font-size: 1.2em;			
			text-align: center;
			color: var(--white);
		}
		
		.finale-p {
		margin: 15px;
		}
		
		.finale-jester-p {
		margin: 15px;
		color: var(--red);
		}
		
	@media (max-width: 768px) {
	.dh-finale-buttons {	
		margin-top: 0;
		display: flex;
		align-items: center;
		justify-content: center;
		flex-direction: column;
		}
		.dh-finale-img {			
			 width: 50vw;
		}
		.dh-fWhisper-img {			
			 width: 50vw;
			 margin-left: 15%;
		}
		.dh-finale-text {
			font-size: 1.2em;			
			text-align: center;
			color: var(--white);
		}
		.finaleImg {
		padding: 10px;
		display: flex;
		align-items: center;
		justify-content: center; }
		}
		
		/* dh-ending */
		 .dh-ending {
            display: flex;
            align-items: center;
            justify-content: center;
            flex-direction: column;
        }    
        
        .dh-ending-img {           
            width: 15vw;			
        }
		
		.imgEnding {
			display: flex;
            align-items: center;
            justify-content: center;
			padding: 10px;
		}
    
        .dh-ending-buttons {
            display: flex;
            align-items: center;
            justify-content: center;    
            margin-top: 20vh;
        }
        
        #dh-ending-text {
            font-size: 1.2em;            
            text-align: center;
            color: var(--white);
        }
        
        .ending-p {
            margin: 15px;
        }        
        
        @media (max-width: 768px) {
            .dh-ending-buttons {    
                margin-top: 0;
                display: flex;
                align-items: center;
                justify-content: center;
                flex-direction: column;
            }
            .dh-ending-img {                
                width: 50vw;				
            }        
            #dh-ending-text {
                font-size: 1.2em;                
                text-align: center;
                color: var(--white);
				padding: 10px;
            }
        }
		
		/* dh-go */
		.dh-h3 {
		margin-top: 300px;
		color: var(--red);
		font-weight: bold;
		font-size: 1.5em;
	}