/*
@import url('https://fonts.googleapis.com/css2?family=Poppins&display=swap')
	*{
		margin: 0;
		padding: 0;
		box-sizing: border-box;
		font-family: 'Poppins', sans-serif;
	}
*/
body.active {
    background: #2c3e50;
    color: #ecf0f1;
}
.wrapper.active {
    background: #34495e;
    color: #ecf0f1;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.5);
}
.text.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, darkviolet, darkorchid);
    color: white;
}
/* Styles for typing-text in night mode */
.typing-text p.night_mode_active {
	background: linear-gradient(45deg, orangered, yellowgreen);
}
/*lightgoldenrodyellow*/
.wrapper .input-field.night_mode_active {
	 background: linear-gradient(45deg, orangered, yellowgreen);
}
.wrapper.night_mode_active {
    background: linear-gradient(60deg, orangered, yellowgreen);
}
/* 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;
}
.night_mode_active .input-field {
	color: yellow;
}





body {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 50vh;
	background: coral;
}
.wrapper {
	width: 770px;
	padding: 35px;
	margin-top: 30px;
	background: #fff;
	border-radius: 10px;
}
.wrapper .content-box{
	padding: 13px 20px 0px;
	border-radius: 10px;
	border: 1px solid #ccc;
}
.container {
		display: flex;
		justify-content: center;
		align-items: center;
		height: 50vh;
		flex-direction: column;
		margin: 0 10px;
	}
.text {
    max-width: 1008px;
    width: 100%;
    height: 90px;
    margin-bottom: 30px;
    border: none;
    outline: none;
    font-size: 26px;
    background-color: #f7f7f7;
    padding-left: 10px;    
    transition: .2s;
}

	body.active {
    background-color: rgb(54,54,54);
}
	.night_mode {
    width: 80px;
    height: 30px;
    background-color: #e6e6e6;
    position: relative; 
    right: 0;
    top: 0;
    border-radius: 50px;
    display: inline-flex; 
    align-items: center;
    cursor: pointer;
    transition: .2s;
    margin-right: 10px; 
}

.night_mode.active {
    background-color: #222222;
}
.toggle_circle {
    width: 20px;
    height: 20px;
    background-color: rgb(54,54,54);
    border-radius: 50px;
    margin: 0 1px;
    position: absolute;
    left: 0;
    transition: .2s;
}

.toggle_circle.active {
    left: 60%;
    background-color: #fff;
}
.text.active {
    background-color: #2b2b2b;
    color: #fff;
}
.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;
/*	font-size: 26px;*/
	text-align: justify;
	letter-spacing: 2px;
	word-break: break-all;
}
.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;
    }
	}
	.container .content
	{
		display: flex;
		margin-top: 17px;
		margin-bottom: 6px;
		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;
	}


	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;
	}

	.input-field {
/*  width: 300px; */
  width: 99%;
  height: 140px; 
  padding: 10px 10px; 
  border-radius: 5px; 
  resize: none;
  margin-top: 15px;
  font-family: "Times New Roman", Times, serifs;
  text-align: justify;
  letter-spacing: 2px;
  word-break: break-all;
}
.input-field::-webkit-scrollbar
	{
		width: 0;
	}

	.toggle_Backspace {
    position: relative;
    width: 60px;
    height: 30px;
    background-color: #ccc;
    border-radius: 15px;
    cursor: pointer;
}

.toggle_circle {
    position: absolute;
    width: 25px;
    height: 25px;
    background-color: #fff;
    border-radius: 50%;
    top: 2.5px;
    left: 2.5px;
    transition: left 0.3s;
}

.toggle_Backspace.active .toggle_circle {
    left: 32.5px;
    background-color: #4caf50;
}





	@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;
	}
    .container .content {
    	margin-top: 0.04vh;
		padding: 2px 4px;
    }
    ul.result-details {
    	font-size: 2.3vw;
    	padding: 1px 1px;
    }
    button {
    	width: 10vw;
    	margin-top: 8px;
    	margin-left: 4px;
    	font-size: 12px;
    	padding: 3px 0px;

    }
    .input-field {
    	font-size: 17px;
    }
  } 

@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;
	}
    .container .content {
    	margin-top: 0.04vh;
		padding: 2px 4px;
    }
    ul.result-details {
    	font-size: 2.3vw;
    	padding: 1px 1px;
    }
    button {
    	width: 10vw;
    	margin-top: 8px;
    	margin-left: 4px;
    	font-size: 14px;
    	padding: 3px 0px;

    }
    .input-field {
    	font-size: 17px;
    }
    
}

@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;
	}
    .container .content {
    	margin-top: 0.04vh;
		padding: 2px 4px;
    }
    ul.result-details {
    	font-size: 2.3vw;
    	padding: 1px 1px;
    }
    button {
    	width: 10vw;
    	margin-top: 16px;
    	margin-left: 4px;
    	font-size: 16px;
    	padding: 3px 0px;

    }
    .input-field {
    	font-size: 19px;
    }
    
}


@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;
	}
    .container .content {
    	margin-top: 0.04vh;
		padding: 2px 4px;
    }
    ul.result-details {
    	font-size: 2.3vw;
    	padding: 1px 1px;
    }
    button {
    	width: 12vw;
    	margin-top: 16px;
    	margin-left: 4px;
    	font-size: 18px;
    	padding: 3px 0px;

    }
    .input-field {
    	font-size: 21px;
    }
}

@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;
	}
    .container .content {
    	margin-top: 0.04vh;
		padding: 2px 4px;
    }
    ul.result-details {
    	font-size: 2.3vw;
    	padding: 1px 1px;
    }
    button {
    	width: 12vw;
    	margin-top: 16px;
    	margin-left: 4px;
    	font-size: 18px;
    	padding: 3px 0px;

    }
    .input-field {
    	font-size: 21px;
    }

}