body {
    /* background: url('b1.jpg'); */
    background-size: cover;
    background-repeat: no-repeat;
    font-family: "Archivo Black", sans-serif;
    font-style: normal;
    /* background-color: black; */
}

/* Typing test main page starts here */
/* h1 {
    font-family: "Archivo Black", sans-serif;
    font-style: normal;
    font-weight: 400;
  font-size: 20rem;
} */

.Typing_duration_main_box {
    /* font-style: italic; */
    /* margin-top: 5vw; */
    display: grid;
    grid-template-columns: 17vw 17vw 17vw;
    grid-template-columns: 30.3% 30.3% 30.3%;
    grid-gap: 4.5vw;
    grid-gap: 4.5%;
    /* border: 2px solid aqua; */
    height: 12vw;

    
}

.typing_duration {
    /* border: 1px solid red; */
    border-radius: .4vw;
    align-content: center;
    text-align: center;
    background-color: rgba(222, 221, 219, 0.498);
    background-color: rgb(59 63 66);;
    height:12vw;


}

.typing_duration h2 {
    color: rgb(255, 204, 0);
    font-size: 1.6vw;
    /* font-size: 90%; */

    /* color: rgb(255,0,111); */
}

button {
    background-color: rgb(255, 204, 0);
    background-color: rgb(255, 0, 111);
    background-color: rgb(255, 0, 89);
    border: none;
    border-radius: .4vw;
    padding: .6vw 4vw;
    padding: .6vw 4vw;
    font-size: 1.5vw;
    font-weight: 600;
}

.typing_duration a button {
    text-decoration: none;
    color: white;
    /* font-style: italic; */
}

button:hover {
    background-color: rgb(239, 105, 163);
}

.image {
    /* border: 1px solid aqua; */
    /* margin-top: 11vw; */
    display: flex;
    justify-content: center;
    align-items: center;
}

.image h2 {
    color: rgb(120, 213, 120);
    font-size: 2.4vw;
    /* font-style: italic; */
    font-family: "Archivo Black", sans-serif;
    font-style: normal;
    font-weight: 400;
}

img {
    width: 15vw;
    width: 23%;
}

.stats{
    /* border: 1px solid aqua; */
    background-color: rgb(59 63 66);
    /* align-items: center; */
    text-align: center;
    margin-top: 2vw;
}
.stats span:first-child {
    /* border: 2px solid blue; */
    /* border: 2px solid blue; */
    color: orange;
}
.stats span:last-child{
    color: #ff0077;
    color: rgb(0 255 116);
}









/* Typing test main page ends here */
.Content_section_main {
    /* border:1px solid rgb(255,0,111); */
    margin-top: 5vw;
    border-radius: 0px;
    background-color: transparent;
}

.Content_section_main h1 {
    /* color:rgb(255,0,111); */
    font-size: 4vw;
    text-shadow: 2vw 2vw  2vw solid blue;
    color: white;
    /* font-size: 2.6rem; */
}
.Content_section_main h1 span{    
    /* font-size: 4.2vw; */
    font-family: "Archivo Black", sans-serif;
  /* font-weight: 400; */
  /* font-style: normal; */
}

button:hover {
    background-image: linear-gradient(to right, #ff0077, rgb(0, 68, 255));
    background: linear-gradient(45deg, rgb(255, 0, 89), #06b6d4);
}



.Typing_text_box {
    background-color: rgba(86, 86, 86, 0.655);
    backdrop-filter: blur(5px);
    text-align: left;
    /* Add the blur effect */
    /* filter: blur(80px); */
    /* -webkit-filter: blur(8px); */



    /* border-radius:0px; */
    height: 40vw;
    height: auto;
    min-height: 20vw;

    padding: 30px;
    padding-left: 3vw;

    font-size: 20px;

    line-height: 1.8;

    cursor: text;

    position: relative;

    overflow: hidden;

}


/* timer */

#timer {

    position: absolute;

    top: 10px;

    right: 20px;

    font-size: 16px;

    color: rgb(255, 0, 111);

}


/* paragraph */

#paragraph {

    font-size: 20px;

    line-height: 1.8;

    word-spacing: 5px;

}


/* correct letter */

.correct {

    color: green;

}


/* wrong letter */

.wrong {

    color: red;

}


/* current letter */

.current {

    text-decoration: underline;

}


/* ----------Responsive for Mobile---------- */

/* For Large Mobile */
@media (max-width:426px) {
    .Content_section_main h1{
    font-size: 7vw;
  }
}