/* Night mode styles */
body.active {
    background: #2c3e50;
    color: #ecf0f1;
}

.wrapper.active {
    background: #34495e;
    color: #ecf0f1;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.5);
}

.keys_night {
    background: #34495e;
    color: #ecf0f1;
    border: 1px solid #2c3e50;
}

.text.active {
    background: #34495e;
    color: #ecf0f1;
}

.keyboard_wrapp.active {
    background: #34495e;
    color: #ecf0f1;
}

.toggle_circle.active {
    background: #ecf0f1;
    color: #34495e;
}

.night_mode.active {
    background: #34495e;
    color: #ecf0f1;
}

/* Styles for typing-text in night mode */
.typing-text p.night_mode_active {
}
.wrapper.night_mode_active {
	 background: linear-gradient(45deg, lightskyblue,  palevioletred);
}
/* Night mode styles */
.night_mode_active .typing-text p span.correct {
    color: yellow;
}
.night_mode_active .typing-text p span.active {
	color: black;
}
.night_mode_active .typing-text p span.active::before {
	  background: black;
}




	body
	{
		display: flex;
		align-items: center;
		justify-content: center;
		min-height: 50vh;
		background: coral;
	}
	.wrapper
	{
		width: 64%;
		padding: 35px;  
		margin-top: 30px;
		background: #fff;
		border-radius: 10px;
	}

	.wrapper .input-field
	{
		z-index: -999;
		opacity: 0;
		position: absolute;
	}
	.wrapper .content-box
	{
		padding: 13px 20px 0px;
		border-radius: 10px;
		border: 1px solid #ccc;
	}
	.content-box .typing-text
	{
		max-height: 100%;
		overflow-y: auto;
	}
	.typing-text::-webkit-scrollbar
	{
		width: 0;
	
	}
	.typing-text p 
	{
		overflow: hidden;
		white-space: nowrap;
		font-size: 36px;
		text-align: justify;
		letter-spacing: 16px;
		word-break: break-all;
		padding-left: 30%;
	}
	
	.typing-text p span{
		position: relative;
	}
	.typing-text p span.correct{
		color: #56964f;
	}
	.typing-text p span.incorrect{
		color: #cb3439;
		background: #ffc0cb;
		outline: 1px solid #fff;
		border-radius: 4px;
	}
	.typing-text p span.active
	{
		color: #17a2b8;
	}
	.typing-text p span.active::before{
		content: "";
		position: absolute;
		left: 0;
		bottom: 0;
		height: 2px;
		width: 100%;
		opacity: 0;
		background: #17a2b8;
		animation: blink 1s ease-in-out infinite;
	}
	@keyframes blink {
		0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0;
    }
	}
	.content-box .content
	{
		display: flex;
		margin-top: 17px;
		padding: 12px 0;
		border-top: 1px solid #ccc;
		justify-content: space-between;
	}
	.content .result-details
	{
		display: flex;
		width: calc(100% - 200px);
		justify-content: space-between;
	}
	.result-details li 
	{
		height: 22px;
		display: flex;
		list-style: none;
		align-items: center;
	}
	.result-details li:not(:first-child)
	{
		padding-left: 22px;
		border-left: 3px solid #ccc;
	}
	.result-details li p 
	{
		font-size: 19px;
	}
	.result-details li span
	{
		display: block;
		font-size: 20px;
		margin-left: 10px;
	}
	.result-details li:not(:first-child) span
	{
		font-weight: 500;
	}
	.result-details li b
	{
		font-weight: 500;
	}

	

/*	extra add the code because keyboard lighting is show when mouse cursor touch the keyboard.*/
	button {
		padding: 8px 0px;
		border: none;
		outline: none;
		width: 80px;
		color: #fff;
		cursor: pointer;
		position: relative;
		z-index: 0;
		border-radius: 12px;
	}
	button::after {
		content: "";
		z-index: -1;
		position: absolute;
		width: 100%;
		height: 100%;
		background-color: #333;
		left: 0;
		top: 0;
		border-radius: 10px;
	}
	button::before {
		content: "";
		background: linear-gradient(45deg, #ff0000, #ff7300, #fffb00, #48ff00, #00ffd5, #002bff, #ff00c8, #ff0000);
		position: absolute;
		top: -2px;
		left: -2px;
		background-size: 200px;
		z-index: -1;
		width: calc(100% - 4px);
		height: calc(100% - 4px);
		filter: blur(8px);
		animation: glowing 20s linear infinite;
		transition: opacity .3s ease-in-out;
		border-radius: 10px;
		opacity: 1;

	}
	@keyframes glowing {
		0% {
		background-position: 0 0;
		}
		50% {
		background-position: 400% 0;
		}
		100% {
		background-position: 0 0;
		}
	}
	button:hover::before {
		opacity: 1;
	}
	button:hover::after {
		background: transparent;
	}
	button:hover {
		color: #000;
		font-weight: bold;
	}
	.highlight {
         background-color: red; !important
         color: white;
    }
    /* Add this to your existing CSS file */
.keyboard_keys .keys.highlight {
    background-color: red; !important
    color: white;
}

.keyboard_keys .space_key.highlight {
    background-color: red; !important
    color: white;
}


	
/* Make the responsive webpages*/
	@media (max-width: 320px) {
	    .wrapper {
	    	width: 64%;
        padding: 0.4vw;
    }

    .content-box {
        padding: 0.4vw;
    }
    .typing-text p 
    {
    	font-size: 3.6vw;
		height: 50px;
    }
    .typing-text p span{
		position: relative;
		font-size: 18px;
	}
    .result-details {
    	height: 0.04vh;
    }
    .result-details li p 
    {
    	font-size: 1.8vw;
    }
    .result-details li span {
    	font-size: 1.8vw;
    }
/*    result details such as li cpm, li wpm, li mistakes etc. size controll*/
    .result-details li:not(:first-child)
	{
		padding-left: 0.1vw;
		border-left: 1px solid #ccc;
	}
    .content-box .content {
    	margin-top: 0.04vh;
		padding: 4px 0;
    }
    ul.result-details {
    	font-size: 2.3vw;
    	padding: 1px 1px;
    }
    button {
    	width: 7vw;
    	height: 30%;
    	top: 25px;
    	bottom: 5px;
    	margin-left: 4px;
    	font-size: 2.8vw;
    	padding: 3px 0px;

    }

}




	@media (max-width: 375px) {
	    .wrapper {
        padding: 0.4vw;
    }

    .content-box {
        padding: 0.4vw;
    }
    .typing-text p 
    {
		font-size: 2.8vw;
    }
    .typing-text p span{
		position: relative;
		font-size: 18px;
	}
    .result-details {
    	height: 0.04vh;
    }
    .result-details li p 
    {
    	font-size: 1.8vw;
    }
    .result-details li span {
    	font-size: 1.8vw;
    }
/*    result details such as li cpm, li wpm, li mistakes etc. size controll*/
    .result-details li:not(:first-child)
	{
		padding-left: 0.1vw;
		border-left: 1px solid #ccc;
	}
    .content-box .content {
    	margin-top: 0.04vh;
		padding: 4px 0;
    }
    ul.result-details {
    	font-size: 2.3vw;
    	padding: 1px 1px;
    }
    button {
    	
    	width: 7vw;
    	height: 30%;
    	top: 25px;
    	bottom: 5px;
    	margin-left: 4px;
    	font-size: 2.8vw;
    	padding: 3px 0px;

    }

}




	@media (max-width: 425px) {
	    .wrapper {
        padding: 0.4vw;
    }

    .content-box {
        padding: 0.4vw;
    }
    .typing-text p 
    {
		font-size: 2.8vw;
    }
    .typing-text p span{
		position: relative;
		font-size: 18px;
	}
    .result-details {
    	height: 0.05vh;
    }
    .result-details li p 
    {
    	font-size: 1.8vw;
    }
    .result-details li span {
    	font-size: 1.8vw;
    }
/*    result details such as li cpm, li wpm, li mistakes etc. size controll*/
    .result-details li:not(:first-child)
	{
		padding-left: 0.1vw;
		border-left: 1px solid #ccc;
	}
    .content-box .content {
    	margin-top: 0.04vh;
		padding: 4px 0;
    }
    ul.result-details {
    	font-size: 2.3vw;
    	padding: 1px 1px;
    }
    button {
    	width: 7vw;
    	height: 30%;
    	margin-left: 1px;
    	font-size: 2.8vw;
    	padding: 1px 0px;
    }

}


	
	@media (max-width: 480px) {
	    .wrapper {
        padding: 0.5vw;
    }

    .content-box {
        padding: 0.5vw;
    }
    .typing-text p 
    {
		font-size: 2.8vw;
    }
    .result-details {
    	height: 0.06vh;
    }
    .result-details li p 
    {
    	font-size: 1.8vw;
    }
    .result-details li span {
    	font-size: 1.8vw;
    }
/*    result details such as li cpm, li wpm, li mistakes etc. size controll*/
    .result-details li:not(:first-child)
	{
		padding-left: 0.2vw;
		border-left: 2px solid #ccc;
	}
    .content-box .content {
    	margin-top: 0.05vh;
		padding: 6px 0;
    }
    ul.result-details {
    	font-size: 2.3vw;
    	padding: 1px 1px;
    }
    button {
    	width: 7vw;
    	height: 30%;
    	margin-top: 10px;
    	margin-left: 2px;
    	font-size: 2.8vw;
    	padding: 3px 0px;
    }

}



	@media (max-width: 600px) {
	    .wrapper {
        padding: 0.8vw;
    }

    .content-box {
        padding: 0.8vw;
    }
    .typing-text p 
    {
		font-size: 2.8vw;
    }
    .result-details {
    	height: 0.08vh;
    }
    .result-details li p 
    {
    	font-size: 1.8vw;
    }
    .result-details li span {
    	font-size: 1.8vw;
    }
/*    result details such as li cpm, li wpm, li mistakes etc. size controll*/
    .result-details li:not(:first-child)
	{
		padding-left: 0.3vw;
		border-left: 2px solid #ccc;
	}
    .content-box .content {
    	margin-top: 0.07vh;
		padding: 6px 0;
    }
    ul.result-details {
    	font-size: 2.3vw;
    	padding: 1px 1px;
    }
    button {
    	width: 7vw;
    	height: 30%;
    	margin-left: 2px;
    	font-size: 2.8vw;
    	padding: 3px 0px;
    }

}


	@media (max-width: 680px) {
    .wrapper {
        padding: 0.7vw;
    }

    .content-box {
        padding: 0.7vw;
    }
    .typing-text p 
    {
		font-size: 2.8vw;
    }
    .result-details {
    	height: 0.09vh;
    }
    .result-details li p 
    {
    	font-size: 1.8vw;
    }
    .result-details li span {
    	font-size: 1.8vw;
    }
/*    result details such as li cpm, li wpm, li mistakes etc. size controll*/
    .result-details li:not(:first-child)
	{
		padding-left: 0.3vw;
		border-left: 2px solid #ccc;
	}
    .content-box .content {
    	margin-top: 0.06vh;
		padding: 6px 0;
    }
    ul.result-details {
    	font-size: 2.3vw;
    	padding: 1px 1px;
    }
    button {
    	width: 7vw;
    	height: 30%;
       	font-size: 2.8vw;
    	margin-left: 2px;
    	padding: 3px 0px;
    }

}


@media (max-width: 768px) {
    .wrapper {
        padding: 0.9vw;
    }

    .content-box {
        padding: 0.9vw;
    }
    .typing-text p 
    {
    	font-size: 2.8vw;
    }
    .result-details {
    	height: 0.09vh;
    }
    .result-details li p 
    {
    	font-size: 1.8vw;
    }
    .result-details li span {
    	font-size: 1.8vw;
    }
/*    result details such as li cpm, li wpm, li mistakes etc. size controll*/
    .result-details li:not(:first-child)
	{
		padding-left: 0.4vw;
		border-left: 3px solid #ccc;
	}
    .content-box .content {
    	margin-top: 0.07vh;
		padding: 7px 0;
    }
    ul.result-details {
    	font-size: 2.3vw;
    	padding: 1px 1px;
    }
    button {
    	width: 7vw;
    	height: 30%;
    	font-size: 2.8vw;
    	margin-left: 3px;
    	padding: 3px 0px;
    }

}


@media (max-width: 1024px) {
    .wrapper {
        padding: 0.9vw;
    }

    .content-box {
        padding: 0.9vw;
    }
    .typing-text p 
    {
		padding-top: 2vh;
		padding-bottom: 2vh;
		font-size: 2.8vw;
    }
    .result-details {
    	height: 0.09vh;
    }
    .result-details li p 
    {
		padding-top: 2vh;
    	font-size: 1.8vw;
    }
    .result-details li span {
		padding-top: 2vh;
    	font-size: 1.8vw;
    }
/*    result details such as li cpm, li wpm, li mistakes etc. size controll*/
    .result-details li:not(:first-child)
	{
		padding-left: 0.4vw;
		border-left: 3px solid #ccc;
	}
    .content-box .content {
    	margin-top: 0.07vh;
		padding: 7px 0;
    }
    ul.result-details {
    	font-size: 2.3vw;
    	padding: 1px 1px;
    }
    button {
    	width: 7vw;
    	height: 30%;
       	font-size: 2.8vw;
    	margin-left: 3px;
    	padding: 1px 0px;
    }

}


@media (max-width: 1440px) {
    .wrapper {
        padding: 0.9vw;
    }

    .content-box {
        padding: 0.9vw;
    }
    .typing-text p 
    {
		padding-top: 2vh;
		padding-bottom: 2vh;
		font-size: 2.8vw;
    }
    .result-details {
    	height: 0.09vh;
    }
    .result-details li p 
    {
		padding-top: 2vh;
    	font-size: 1.8vw;
    }
    .result-details li span {
		padding-top: 2vh;
    	font-size: 1.8vw;
    }
/*    result details such as li cpm, li wpm, li mistakes etc. size controll*/
    .result-details li:not(:first-child)
	{
		padding-left: 0.4vw;
		border-left: 3px solid #ccc;
	}
    .content-box .content {
    	margin-top: 0.07vh;
		padding: 7px 0;
    }
    ul.result-details {
    	font-size: 2.3vw;
    	padding: 1px 1px;
    }
    button {
    	width: 7vw;
    	height: 30%;
    	font-size: 2.8vw;
    	margin-left: 3px;
    	padding: 1px 0px;
    }

}

/*completed*/