body,
html {
    display: flex
}

.banner-index h1,
.container h1 {
    margin-bottom: 2.5rem;
    font-weight: 600
}

.language-selector .select-wrapper::after,
.test-container .select-wrapper::after {
    pointer-events: none;
    content: "";
    width: 8px;
    height: 8px;
    transform: rotate(45deg);
    position: absolute
}

.banner .button,
.text-to-type {
    box-shadow: -12px 10px 10px rgba(0, 0, 0, .25)
}

.banner,
footer {
    text-align: center
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    text-decoration: none
}

html {
    min-height: 100%;
    flex-direction: column
}

body {
    font-family: Poppins, sans-serif;
    flex-grow: 1;
    flex-direction: column
}

.language-selector,
header {
    align-items: center;
    display: flex
}

body.dark-mode {
    background-color: #181818
}

header {
    position: fixed;
    justify-content: space-between;
    width: 100%;
    height: 68px;
    padding: 0 20px;
    background-color: #252a41;
    box-shadow: 0 6px 12px 0 rgba(0, 0, 0, .25);
    -webkit-transition: .4s;
    transition: .4s;
    z-index: 99
}

.dark-mode .language-selector select option,
.dark-mode footer,
.dark-mode header,
.dark-mode header.sticky {
    background-color: #060a1b
}

header.transparent {
    background-color: transparent;
    box-shadow: none
}

header.sticky {
    background-color: #252a41;
    box-shadow: 0 4px 6px 0 rgba(0, 0, 0, .25)
}

header .logo {
    font-size: 1.6rem;
    font-weight: 600;
    color: #fff
}

header .logo span {
    color: #6390f8
}

.dark-mode header .logo span {
    color: #3f68ad
}

header .navigation {
    list-style: none;
    user-select: none;
    position: absolute;
    opacity: 0;
    visibility: hidden;
    -webkit-transition: opacity .1s ease-in-out;
    transition: opacity .1s ease-in-out
}

header .navigation li a {
    white-space: nowrap;
    color: #fff
}

@media (max-width:991px) {
    header .menuToggle {
        width: 40px;
        height: 40px;
        background-image: url(../img/menu.webp);
        background-size: 30px;
        background-repeat: no-repeat;
        background-position: center;
        cursor: pointer
    }

    header .menuToggle.active {
        background-image: url(../img/close.webp);
        background-size: 25px
    }

    header .navigation.active {
        position: fixed;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        top: 68px;
        left: 0;
        bottom: 0;
        width: 100%;
        padding: 20px;
        background-color: #252a41;
        visibility: visible;
        opacity: 1
    }

    header .navigation.active li {
        text-align: center;
        width: 100%;
        padding: 5px;
        margin-bottom: .5rem;
        border-radius: 10px;
        border: 1px solid #6390f8;
        background-color: #252a41
    }

    header .navigation.active li a {
        display: block;
        color: #fff;
        font-size: 1.6rem
    }

    body.active {
        overflow: hidden
    }

    .language-selector {
        padding: 3.5px
    }
}

.banner {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    flex-grow: 1;
    background: url(../img/typing-test-background.svg) left 68px/contain, url(../img/waves5.svg) left 68px/contain
}

.banner-index,
.dark-mode .banner.banner-index {
    padding: 68px 20px 40px;
    background: url(../img/background.svg) 0 0/cover, 0 0/cover #252a41
}

.banner .button {
    color: #555;
    background-color: rgba(255, 255, 255, .8);
    border: 4px solid #fff;
    border-radius: 10px;
    -webkit-transition: .3s;
    transition: .3s;
    user-select: none
}

.dark-mode .banner .button,
.dark-mode .test-container select {
    color: #aeaeae;
    border: 4px solid #313131;
    background-color: rgba(18, 18, 18, .8)
}

.banner-index .button,
.dark-mode .banner.banner-index .button {
    color: #fff;
    border: none;
    box-shadow: none;
    background-color: #3f66d1
}

.banner .button:focus {
    color: #fff;
    background-color: #3f66d1
}

.language-selector select option,
footer {
    background-color: #252a41
}

.dark-mode .banner .button:focus {
    color: #000;
    background-color: #7089b6
}

.banner-index .button:focus,
.dark-mode .banner.banner-index .button:focus {
    color: #3f66d1;
    box-shadow: 0 0 0 1px #3f66d1;
    background-color: #252a41
}

@media (hover:hover) and (pointer:fine) {
    .banner .button:hover {
        color: #fff;
        background-color: #3f66d1
    }

    .dark-mode .banner .button:hover {
        color: #000;
        background-color: #7089b6
    }

    .banner-index .button:hover,
    .dark-mode .banner.banner-index .button:hover {
        color: #3f66d1;
        box-shadow: 0 0 0 1px #3f66d1;
        background-color: #252a41
    }
}

.banner .button-container {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    padding: 0 10px;
    margin-top: 20px
}

.banner .button-container a {
    cursor: pointer
}

.banner .button-container .button {
    padding: 5px 20px;
    min-width: 100%;
    margin-bottom: .8rem;
    outline: 0
}

.dark-mode .banner {
    background: url(../img/typing-test-background-dark.svg) left 68px/contain, url(../img/waves5.svg) left 68px/contain
}

.language-selector {
    justify-content: center;
    border-radius: 8px
}

.language-selector select {
    cursor: pointer;
    appearance: none;
    -moz-appearance: none;
    -webkit-appearance: none;
    font-size: 1.6rem;
    color: #fff;
    padding: 0 25px 0 5px;
    margin-left: 3px;
    border: none;
    background-color: transparent
}

.language-selector select:focus,
.test-container select:focus {
    outline: 0
}

.language-selector .select-wrapper,
.test-container .select-wrapper {
    position: relative;
    width: min-content
}

.language-selector .select-wrapper::after {
    border: 1px solid #fff;
    border-width: 0 1px 1px 0;
    top: 12px;
    right: 5px
}

.banner-index h1 {
    font-size: 2rem;
    color: #fff
}

.banner-index h1 span {
    font-size: 2.56rem;
    color: #6390f8
}

.banner-index h2 {
    font-size: 1rem;
    font-weight: 600;
    color: #a3abcd;
    padding: 0 20px
}

.banner-index .button {
    margin-top: 2rem;
    padding: 10px 40px
}

.container {
    margin: 68px auto 0;
    padding: 50px 20px;
    max-width: 760px
}

.dark-mode-icon,
.sound-icon {
    cursor: pointer;
    margin-top: .5rem;
    top: 72px
}

.container h1 {
    font-size: 2.25rem;
    color: #2d2d2d
}

.container h2 {
    font-size: 1.5rem;
    font-weight: 600;
    color: #2d2d2d;
    margin: 2.5rem 0 2rem
}

.container h3 {
    font-size: 1.25rem;
    font-weight: 600;
    color: #2d2d2d;
    margin-bottom: 2rem
}

.container p {
    font-size: 1rem;
    font-weight: 400;
    color: #2d2d2d;
    margin-bottom: 2rem;
    line-height: 26px
}

.container p.closer-bottom {
    margin-bottom: 1rem
}

.container p span {
    font-size: 1.3rem;
    font-weight: 600;
    color: #2d2d2d
}

.container a {
    font-weight: 600;
    color: #4169e1;
    overflow-wrap: anywhere
}

.test-container select,
.text-to-type {
    color: #555;
    background-color: rgba(255, 255, 255, .8)
}

.container ul {
    margin-top: 2rem;
    margin-bottom: 2rem
}

.container ul li {
    font-size: 1rem;
    font-weight: 400;
    margin: 0 0 1rem 2rem;
    color: #2d2d2d;
    line-height: 26px
}

.container ol {
    margin: 3rem 0
}

.container ol li {
    font-size: 1.2rem;
    font-weight: 400;
    margin: 0 0 .5rem 1.6rem;
    color: #2d2d2d
}

.container.center-images img {
    display: block;
    height: auto;
    max-width: 100%;
    margin: 0 auto 3rem
}

.container .adjust-svgs img {
    vertical-align: middle;
    margin-right: .5rem
}

.container .adjust-svgs a,
.container .adjust-svgs p {
    line-height: 2
}

.container .tips-list {
    scroll-margin-top: 9rem
}

#muscle-memory,
#touch-typing,
.scroll-margin h2 {
    scroll-margin-top: 6rem
}

.banner-test {
    padding: 88px 20px 20px
}

.banner-test .button-container {
    margin-top: 30px;
    margin-bottom: 4rem
}

.banner-test label,
.select-wrapper label {
    position: absolute;
    width: 1px;
    height: 1px;
    white-space: nowrap;
    overflow: hidden;
    opacity: 0;
    clip: rect(0, 0, 0, 0);
    clip-path: inset(50%)
}

.test-container {
    width: 100%;
    max-width: 900px
}

.test-container select {
    appearance: none;
    -moz-appearance: none;
    -webkit-appearance: none;
    font-size: 1.2rem;
    min-width: 150px;
    padding: 5px 30px 5px 10px;
    margin-bottom: .5rem;
    border-radius: 8px;
    border: 4px solid #fff;
    box-shadow: -12px 2px 10px rgba(0, 0, 0, .25);
    cursor: pointer
}

.test-container .selects-wrapper {
    width: min-content
}

.test-container .select-wrapper::after {
    border: 2px solid #777;
    border-width: 0 2px 2px 0;
    top: 11px;
    right: 15px
}

.test-header {
    display: flex;
    align-items: center
}

.test-header .progress,
.test-header .timer {
    display: none;
    color: #333;
    font-size: 1.6rem;
    margin-left: auto;
    margin-right: 1rem;
    padding: 5px
}

.start-test.active,
.test-header .progress.active,
.test-header .timer.active {
    display: initial
}

@supports (-moz-appearance:none) {
    .language-selector .select-wrapper::after {
        top: 10px
    }

    .test-container .select-wrapper::after {
        top: 15px
    }
}

.text-to-type {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    font-family: "Roboto Mono", monospace;
    font-size: 1.6rem;
    max-width: 900px;
    min-height: 186px;
    max-height: 186px;
    padding: 8px 10px 15px;
    letter-spacing: .5px;
    border-radius: 15px;
    border: 8px solid #fff;
    overflow: hidden
}

.dark-mode .custom-test-input.active,
.dark-mode .text-to-type {
    color: #aeaeae;
    border: 8px solid #313131;
    background-color: rgba(18, 18, 18, .8)
}

.banner-results,
.custom-test-input,
.new-test.inactive,
.restart-test.inactive,
.start-test,
.text-to-type.inactive,
footer span {
    display: none
}

.text-to-type.min-height {
    min-height: initial
}

.text-to-type div {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    margin: .55rem 0;
    user-select: none
}

.text-to-type .space-char {
    display: block;
    min-width: 15.86px;
    min-height: 34px
}

.text-to-type span {
    position: relative
}

.text-to-type .current-char {
    box-shadow: 0 3px 0 0 #4169e1
}

.text-input {
    position: absolute;
    opacity: 0;
    z-index: -1
}

.space-char.correct,
span.correct {
    color: #157e15;
    background-color: #bbfabb
}

.space-char.incorrect,
span.incorrect {
    color: #ff3131;
    background-color: #f7cfcf
}

footer .copyright,
footer>a {
    color: #a3abcd
}

.dark-mode .correct,
.dark-mode .space-char.correct {
    color: #7dff7d;
    background-color: #1f3b1f
}

.dark-mode .incorrect,
.dark-mode .space-char.incorrect {
    color: #ff7d7d;
    background-color: #3b1f1f
}

.custom-test-input.active,
.results {
    color: #555;
    background-color: rgba(255, 255, 255, .753);
    box-shadow: -12px 10px 10px rgba(0, 0, 0, .25);
    width: 100%
}

.custom-test-input.active {
    display: initial;
    font-size: 1.2rem;
    line-height: 1.5;
    max-width: 900px;
    padding: 10px;
    resize: none;
    border-radius: 8px;
    border: 8px solid #fff;
    outline: 0
}

.results p,
footer,
footer .social,
footer .social a {
    display: flex
}

.start-test.disabled {
    opacity: .7
}

.start-test:hover.disabled {
    background-color: #3f66d1
}

.sound-icon {
    margin-left: 1.2rem;
    position: absolute;
    right: 10px
}

.dark-mode-icon {
    margin-left: .8rem;
    position: absolute;
    right: 50px
}

.banner-results.active {
    display: flex;
    flex-direction: row;
    padding: 78px 10px 10px
}

.results {
    display: inline-block;
    padding: 2px 12px 12px;
    border-radius: 10px;
    border: 8px solid #fff
}

.dark-mode .results {
    color: #999;
    background-color: rgba(18, 18, 18, .8);
    border: 8px solid #313131
}

.red,
.results .bad {
    color: #d82e3f
}

.results .average {
    color: #f48924
}

.results .good {
    color: #00996e
}

.dark-mode .green,
.dark-mode .results .good {
    color: #00a35c
}

.results .excellent {
    color: #3581d8
}

.banner-results h2:first-of-type {
    width: 100%;
    font-size: 1.2rem;
    font-weight: 600;
    padding: 5px 10px;
    color: #fff
}

.results p {
    font-size: 1rem;
    font-weight: 400;
    justify-content: space-between
}

.results p:first-child {
    font-size: 1.5rem;
    font-weight: 600;
    padding: 8px;
    justify-content: center
}

.container-results.active,
.remove-margin-top {
    margin-top: 0
}

footer {
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    height: 220px;
    padding: 10px 20px;
    margin-top: auto;
    user-select: none;
    box-shadow: 0 -4px 6px 0 rgba(0, 0, 0, .25)
}

footer.absolute {
    position: absolute;
    top: 100%;
    width: 100%
}

footer>a {
    width: 100%
}

footer .social {
    justify-content: space-evenly;
    min-width: 90px
}

.google-auto-placed+p {
    margin-top: 2rem
}

.ad-container {
    display: block
}

.adslot_1,
.adslot_2 {
    display: none;
    width: 300px;
    height: 600px
}

.blue {
    color: #4169e1
}

.violet {
    color: #8a2be2
}

.green {
    color: #007f5e
}

.dark-mode .banner-results h2:first-of-type,
.dark-mode .container h1,
.dark-mode .container h2,
.dark-mode .container h3,
.dark-mode .container ol li,
.dark-mode .container p,
.dark-mode .container ul li,
.dark-mode .language-selector select,
.dark-mode .test-header .progress,
.dark-mode .test-header .timer,
.dark-mode header .logo,
.dark-mode header .navigation li a {
    color: #b5b5b5
}

@media (min-width:1320px) {
    .ad-container.set-to-left {
        margin-right: auto
    }

    .adslot_1 {
        display: block
    }

    .ad-container.set-to-right {
        margin-left: auto
    }
}

@media (min-width:992px) {
    header {
        padding: 0 100px
    }

    header .navigation {
        display: flex;
        position: initial;
        visibility: visible;
        opacity: 1
    }

    header .navigation li {
        margin-left: 30px
    }

    header .navigation li a:hover {
        color: #6390f8
    }

    .banner-index,
    .dark-mode .banner.banner-index {
        align-items: flex-start;
        padding: 108px 100px
    }

    .banner-index h1 {
        font-size: 3.5rem;
        text-align: left
    }

    .banner-index h1 span {
        font-size: 4.5rem
    }

    .banner-index h2 {
        font-size: 1.5rem;
        padding: 0;
        text-align: left;
        max-width: 540px
    }

    .banner-index .button {
        font-size: 1.4rem;
        margin-top: 4rem
    }

    .container,
    .container-results {
        padding: 70px 20px
    }

    .language-selector select {
        font-size: 1rem
    }

    .language-selector img {
        width: 20px;
        height: 20px
    }

    .language-selector .select-wrapper::after {
        top: 6px
    }

    .banner-results.active {
        padding: 78px 100px 10px
    }
}

@media (min-width:768px) and (max-width:1319px) {
    .results-container {
        margin-right: 3rem
    }
}

@media (min-width:768px) {
    .adslot_2 {
        display: block
    }
}

@media (min-width:481px) {
    .results {
        width: initial;
        min-width: 380px
    }

    .results p:first-child {
        font-size: 2rem;
        margin-bottom: .5rem
    }

    .banner .button-container .button {
        min-width: 160px
    }

    .text-to-type {
        padding: 8px 30px 15px
    }

    .new-test {
        margin-right: 2rem
    }

    .banner-results>h2:first-of-type {
        width: initial;
        font-size: 1.2rem;
        font-weight: 600
    }

    .container p,
    .container ul li {
        font-size: 1.15rem;
        line-height: 30px
    }

    .test-container .selects-wrapper {
        display: flex;
        width: initial
    }

    .test-container .select-wrapper:first-of-type {
        margin-right: 1rem
    }
}

@media (min-width:560px) {
    footer {
        height: 100px
    }

    footer>a {
        width: auto;
        margin-right: 1rem
    }

    footer span {
        text-align: right;
        display: inline-block;
        width: 1.2rem;
        color: #575b6d
    }

    footer .social {
        margin-left: 1rem
    }

    .dark-mode-icon,
    .sound-icon {
        position: initial
    }
}

@media (min-width:481px) and (max-width:991px) {
    .banner-index h1 {
        font-size: 2.5rem
    }

    .banner-index h1 span {
        font-size: 3.2rem
    }
}

@media (min-width:360px) {
    .results p {
        font-size: 1.3rem
    }
}

@media (max-height:450px) {
    header .navigation.active li {
        padding: 0;
        margin-bottom: .4rem
    }

    .language-selector select,
    header .navigation.active li a {
        font-size: 1rem
    }

    .language-selector {
        padding: 0
    }

    .language-selector img {
        width: 20px;
        height: 20px
    }

    .language-selector .select-wrapper::after {
        top: 6px
    }
}

@media (max-height:408.8px) {
    footer.absolute {
        top: 408.8px
    }
}

@media (pointer:coarse) {
    .text-to-type.min-height {
        min-height: 186px
    }

    .custom-test-input.active {
        max-height: 186px
    }
}

@media (min-height:680px) {
    .test-container {
        margin-top: 5rem
    }

    .banner-test .button-container {
        margin-bottom: auto
    }
}