/*@import url('https://fonts.googleapis.com/css2?family=Poppins&display=swap')
	*{
		margin: 0;
		padding: 0;
		box-sizing: border-box;
		font-family: 'Poppins', sans-serif;
	}
*/
	/* 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;
}
/*
.change_light_color.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;
}
.result-details li.night_mode_active {
    background: linear-gradient(90deg, darkred, purple);
    color: white;
}
/* Styles for typing-text in night mode */
.typing-text p.night_mode_active {
/*    background: linear-gradient(90deg, lightcoral, hotpink, orange);*/
	 background: linear-gradient(90deg, darkmagenta, darkorange);
}
.wrapper.night_mode_active {
    background: linear-gradient(45deg, darkmagenta, darkorange);
}
/* Night mode styles */
.night_mode_active .typing-text p span.correct {
    color: yellow;
}
.night_mode_active .typing-text p span.active {
    color: white;
    background: black;
}
.night_mode_active .typing-text p span.active::before {
    background: white;
}
	

	body
	{
		display: flex;
		align-items: center;
		justify-content: center;
		min-height: 50vh;
		background: skyblue;
		
	}
	.wrapper
	{
		width: 770px;
		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: 140px;
		overflow-y: auto;
	}
	.typing-text::-webkit-scrollbar
	{
		width: 0;
	
	}
	.typing-text p 
	{
		font-family: "Times New Roman", Times, serifs;
		text-align: justify;
		letter-spacing: 2px;
		word-break: break-all;
		display: block;
	}
	
	.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 {
		50%{
			opacity: 1;
		}
	}
	.content-box .content
	{
		display: flex;
		margin-top: 17px;
		padding: 12px 0;
		border-top: 1px solid #ccc;
		justify-content: space-between;
	}
	/*.content button
	{
		border: none;
		outline: none;
		width: 105px;
		padding: 8px 0;
		color: #fff;
		cursor: pointer;
		border-radius: 5px;
		background:  #17a2b8;
		transition: transform 0.3s ease;
	}*/
	/*.content button:active
	{
		transform: scale(0.97);
	}*/
	.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: 100px;
		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: 600%;
		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;
}





	@media (min-width: 320px) and (max-width: 480px) {
	    .wrapper {
        padding: 0.4vw;
    }

    .content-box {
        padding: 0.4vw;
    }
    .typing-text p 
    {
		font-size: 1.8vw;
    }
    .typing-text p span{
		position: relative;
		font-size: 18px;
	}
    .result-details {
    	height: 0.04vh;
    }
    .result-details li p 
    {
		font-size: 12px;
    }
    .result-details li span {
		font-size: 12px;
    }
    .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: 10vw;
    	margin-left: 4px;
    	font-size: 12px;
    	padding: 3px 0px;

    }

}


@media (min-width: 481px) and (max-width: 680px) {
	    .wrapper {
        padding: 0.4vw;
    }

    .content-box {
        padding: 0.4vw;
    }
    .typing-text p 
    {
		font-size: 1.8vw;
    }
    .typing-text p span{
		position: relative;
		font-size: 18px;
	}
    .result-details {
    	height: 0.04vh;
    }
    .result-details li p 
    {
		font-size: 14px;
    }
    .result-details li span {
		font-size: 14px;
    }
    .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: 10vw;
    	margin-left: 4px;
    	font-size: 14px;
    	padding: 3px 0px;
    }
}




@media (min-width: 681px) and (max-width: 768px) {
	    .wrapper {
        padding: 0.4vw;
    }

    .content-box {
        padding: 0.4vw;
    }
    .typing-text p 
    {
		font-size: 1.8vw;
    }
    .typing-text p span{
		position: relative;
		font-size: 20px;
	}
    .result-details {
    	height: 0.04vh;
    }
    .result-details li p 
    {
		font-size: 16px;
    }
    .result-details li span {
		font-size: 16px;
    }
    .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: 10vw;
    	margin-left: 4px;
    	font-size: 16px;
    	padding: 3px 0px;
    }
}


@media (min-width: 769px) and (max-width: 1024px) {
	    .wrapper {
        padding: 0.6vw;
    }

    .content-box {
        padding: 0.6vw;
    }
    .typing-text p 
    {
		font-size: 1.8vw;
    }
    .typing-text p span{
		position: relative;
		font-size: 22px;
	}
    .result-details {
    	height: 0.06vh;
    }
    .result-details li p 
    {
		font-size: 18px;
    }
    .result-details li span {
		font-size: 18px;
    }
    .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: 12vw;
    	margin-left: 4px;
    	font-size: 18px;
    	padding: 3px 0px;
    }
}



@media (min-width: 1025px) and (max-width: 1440px) {
	    .wrapper {
        padding: 0.7vw;
    }

    .content-box {
        padding: 0.7vw;
    }
    .typing-text p 
    {
		font-size: 1.8vw;
    }
    .typing-text p span{
		position: relative;
		font-size: 22px;
	}
    .result-details {
    	height: 0.07vh;
    }
    .result-details li p 
    {
		font-size: 18px;
    }
    .result-details li span {
		font-size: 18px;
    }
    .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: 12vw;
    	margin-left: 4px;
    	font-size: 18px;
    	padding: 3px 0px;
    }
}



/*Completed*/