@import"https://fonts.googleapis.com/css2?family=JetBrains+Mono:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;1,300&display=swap";*{margin:0;padding:0;box-sizing:border-box;font-family:JetBrains Mono}:root{--darkMain: #023436;--lighterMain: #023B38;--lighterMain2: #1c6663;--darkText: #03B5AA;--highlight: #4CFAEF;--wrong: rgb(120, 0, 0);--darkMainLighter: #28918d}[data-theme=dark]{--darkMain: #010c10;--lighterMain: #021820;--lighterMain2: #0f3f45;--darkText: #7af6ea;--highlight: #39ffe3;--wrong: rgb(200, 0, 0);--darkMainLighter: #1aa6a0}[data-theme=light]{--darkMain: #f4f7fb;--lighterMain: #ffffff;--lighterMain2: #cfe7e3;--darkText: #0b766e;--highlight: #0891b2;--wrong: #b91c1c;--darkMainLighter: #0f9486}[data-theme=sunset]{--darkMain: #2b1433;--lighterMain: #391b45;--lighterMain2: #6b2f86;--darkText: #ffd6a5;--highlight: #ff7a18;--wrong: #ff4d4d;--darkMainLighter: #ffb703}.themeRandomizer{position:fixed;left:clamp(12px,4vw,60px);bottom:18px;width:48px;height:48px;border-radius:999px;border:4px solid var(--darkMainLighter);background:var(--darkText);color:var(--darkMain);cursor:pointer;display:flex;align-items:center;justify-content:center;z-index:2000;box-shadow:0 0 10px var(--lighterMain2)}.themeRandomizer:hover{background:var(--highlight)}.themeRandomizer svg{width:22px;height:22px;fill:currentColor}.themeRandomizer:focus{outline:none;box-shadow:0 0 0 3px color-mix(in srgb,var(--highlight) 60%,transparent)}#root{display:flex!important;justify-content:center}.logo{font-weight:800;font-size:20px;cursor:pointer;color:var(--darkText);background-size:200% 100%;padding:10px;border-radius:9px;background-image:linear-gradient(to right,var(--darkMain) 50%,var(--highlight) 50%),linear-gradient(to right,var(--darkText) 50%,var(--lighterMain2) 50%);transition:background-position .2s ease-in 0s;-webkit-background-clip:text,border-box;background-clip:text,border-box;color:transparent;text-decoration:none}.Link{color:var(--darkText);text-decoration:none;outline:none}.logo:hover .Link{color:var(--darkMain);transition:color 1s ease}.Link2{color:var(--darkText)}.buttonLink:hover .Link2{color:var(--darkMain);transition:1s}.logo:hover{background-position:-100% 0}.buttonLink button{background-color:#000;padding:10px 16px;border-radius:20px;border-color:var(--darkText);background-color:var(--darkMain);color:var(--darkText);font-size:13px;display:inline-flex;align-items:center;justify-content:center}.buttonLink button:hover{transition:all .4s ease-in 0s;border-color:var(--darkMain);background-color:var(--darkText);color:var(--darkMain)}.buttonLink button:not(:hover){transition:all .4s ease-in 0s;border-color:var(--darkText);background-color:var(--darkMain);color:var(--darkText)}li,a,button{font-weight:500;text-decoration:none;list-style:none}header{display:grid;grid-template-columns:auto 1fr auto;align-items:center;padding:18px clamp(12px,4vw,60px);position:absolute;top:0;left:0;right:0;width:100%}.navLinks li{display:flex;padding:0}header .logo{justify-self:start}.desktopNav{justify-self:center;display:none;align-items:center;justify-content:center}.desktopNav .navLinks{display:flex;align-items:center;justify-content:center;gap:20px}.contactButton{justify-self:end}.hamburgerWrap{display:flex;align-items:center;justify-self:end;position:relative;z-index:1000}.hamburgerButton{width:44px;height:44px;border-radius:10px;border:none;background:transparent;cursor:pointer;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px}.hamburgerBar{width:24px;height:2px;border-radius:2px;background:var(--darkText);transition:transform .2s ease,opacity .2s ease}.hamburgerMenu{display:none;position:absolute;top:calc(100% + 10px);right:0;width:min(320px,calc(100vw - 24px));max-width:calc(100vw - 24px);background:var(--lighterMain);border-radius:14px;box-shadow:0 0 10px var(--lighterMain2);padding:10px;box-sizing:border-box;max-height:70vh;overflow-y:auto}.hamburgerMenu.open{display:block}.hamburgerList{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}.hamburgerItem a{display:block;padding:12px 14px;border-radius:10px;color:var(--darkText);text-decoration:none;font-weight:800;background:transparent;width:100%;box-sizing:border-box}.hamburgerItem a:hover{background:var(--darkMain);color:var(--highlight)}.hamburgerContact{display:none}.navLinks li a{transition:all .3 ease 0s;color:var(--darkText)}.navLinks li a:not(:hover){transition:all 1s ease 0s;color:var(--darkText)}.navLinks li a:hover{transition:all 1s ease 0s;color:var(--highlight);text-shadow:var(--highlight) 0 0 10px}body{display:flex;padding:110px 10px 0;align-items:flex-start;justify-content:center;min-height:100vh;background:var(--darkMain)}.paragraph,.results{color:var(--darkText)}::selection{color:var(--darkText);background:var(--highlight)}.wrapper{width:100%;max-width:700px;padding:35px;background:var(--lighterMain);border-radius:50px;box-shadow:0 0 10px var(--lighterMain2)}.wrapper form,.text-field,.text-field-signup{width:100%;box-sizing:border-box}.wrapper .input-field{opacity:0;z-index:999;position:absolute;border:2px solid blue;height:100%;width:100%}.wrapper .content-wrapper{padding:10px 20px 0}.content-wrapper .typing-text{overflow:visible;position:relative}.typing-text p{font-size:21px;text-align:justify;letter-spacing:1px;word-break:break-all;white-space:pre-wrap;max-height:35vh;overflow-y:auto;overflow-x:hidden;line-height:1.4;scrollbar-width:none}.typing-text p::-webkit-scrollbar{width:0;height:0}.typing-text p span{position:relative;display:inline-block}.typing-text p span.correct{color:var(--highlight)}.typing-text p span.incorrect{color:var(--wrong);border-radius:4px}.typing-text p span.active:before{position:absolute;content:"";height:2px;width:100%;bottom:0;left:0;opacity:0;border-radius:5px;background:white;animation:blink 1s ease-in-out infinite}@keyframes blink{50%{opacity:1}}.content-wrapper .content{margin-top:16px;display:flex;padding:12px 0;flex-wrap:wrap;align-items:center;justify-content:space-between;border-top:3px solid var(--lighterMain2)}.content button{outline:none;border:none;width:105px;color:var(--darkText);background-color:var(--darkMain);padding:10px 0;font-weight:800;font-size:13px;cursor:pointer;border-radius:10px}.content button:hover{transition:1s;text-shadow:var(--highlight) 0 0 20px;scale:110%}.content button:not(:hover){transition:1s;scale:100%}.content .results{display:flex;flex-wrap:wrap;align-items:center;width:calc(100% - 140px);justify-content:space-between}.results li{display:flex;height:20px;list-style:none;position:relative;align-items:center}.results li:not(:first-child){padding-left:20px;border-left:2px solid var(--lighterMain2)}.results-details li p{font-size:13px}.results-details li span{display:block;font-size:13px;margin-left:10px}li span b{font-weight:500}li:not(:first-child) span{font-weight:500}@media (max-width: 756px){body{padding-top:92px}header{padding:14px 12px;grid-template-columns:auto 1fr auto}.contactButton{display:none}.hamburgerContact{display:block}.wrapper{padding:20px 15px}.themeRandomizer{position:static;width:44px;height:44px;border-width:3px;justify-self:end;margin-right:8px;margin-bottom:0;box-shadow:0 0 10px var(--lighterMain2)}form .text-field,form .text-field-signup{margin:20px 0}.content-wrapper .content{padding:20px 0}.typing-text p{font-size:19px;text-align:left;max-height:28vh}.content button{width:100%;font-size:15px;padding:10px 0;margin-top:20px}.content .results{width:100%}.results li:not(:first-child){border-left:0;padding:0}.results li p,.results li span{font-size:15px}}@media (max-width: 518px){.wrapper .content-box{padding:10px 15px 0}.typing-text p{font-size:13px;max-height:24vh}.result-details li{margin-bottom:10px}.content button{margin-top:10px}.buttonLink button{padding:8px 12px;font-size:12px}}.wrapperUser{width:100%;max-width:700px;padding:35px;background:var(--lighterMain);border-radius:50px;box-shadow:0 0 10px var(--lighterMain2);display:flex;align-items:center;justify-content:center;text-align:center;margin:30px auto}.wrapperUser .contentWrapperUser{padding:10px 20px 0}.wrapperUser img{height:160px;width:160px;border-radius:80px;border:10px var(--lighterMain2) solid;box-shadow:0 0 10px var(--lighterMain2);position:relative}.wrapperUser .userInfo{text-align:center}.userInfo .userName{text-transform:uppercase;margin-bottom:10px;margin-top:10px;color:var(--darkText);font-weight:800;font-size:19px}.userInfo .userDesc{margin-bottom:10px;margin-top:10px;color:var(--darkMainLighter);font-weight:800;font-size:19px}.userInfo .testResults{text-transform:uppercase;margin-bottom:10px;color:var(--darkText);font-weight:800;font-size:19px;margin-top:20px}.userInfo .last10,.allTime{text-transform:uppercase;margin-bottom:10px;margin-top:10px;color:var(--darkText);font-weight:800;font-size:19px}.userInfo .allTime{text-transform:uppercase;margin-bottom:10px;margin-top:10px;color:var(--darkText);font-weight:800;font-size:19px;padding-bottom:15px;border-bottom:3px var(--darkText) solid}.testResult{margin-top:10px;color:var(--darkMainLighter);font-weight:800;font-size:19px}.wrapper h1{text-align:center;padding:0 0 5px;color:var(--darkText);font-size:1.45em;font-weight:700;letter-spacing:.1em}.wrapper h4{text-align:center;padding:0 0 20px;border-bottom:3px solid var(--darkText);color:var(--darkText);font-size:13px;font-weight:700;letter-spacing:.1em}.center form{padding:0 40px;box-sizing:border-box}form .text-field{position:relative;border-bottom:none;margin:30px 0}.text-field input{width:100%;padding:0 16px;height:44px;font-size:16px;border:none;outline:none;border-radius:20px;background-color:var(--darkMain);color:var(--darkText);box-sizing:border-box}.text-field label{position:absolute;top:50%;left:5px;color:var(--darkText);font-size:16px;transform:translate(10%,-50%);pointer-events:none}.text-field input:focus{box-shadow:0 0 0 2px var(--highlight)}.forgot{margin:-5px 0 20px 5px;color:var(--darkText);cursor:pointer}.forgot:hover{text-decoration:underline;color:var(--highlight);transition:.5s}input[type=submit]{width:100%;height:50px;border:4px solid var(--darkMainLighter);border-radius:30px;background-color:var(--darkText);font-size:18px;font-weight:400;color:var(--darkMain);cursor:pointer;outline:none}input[type=submit]:hover{border-color:var(--darkText);background-color:var(--darkMainLighter);color:var(--highlight);transition:.5s}input[type=submit]:not(:hover){transition:.5s}.text-field input:focus~label,.text-field input:valid~label{visibility:hidden}.signup{margin:30px 0;text-align:center;font-size:16px;color:var(--darkText)}.signup a{color:var(--offwhite);text-decoration:none;font-weight:600}.signup a:hover{text-decoration:underline;color:var(--highlight);transition:.5s}.signUpTitle{padding:0 0 20px;border-bottom:3px solid var(--darkText);color:var(--darkText)}form .text-field-signup{position:relative;margin:40px 0}.text-field-signup input{width:100%;padding:0 16px;height:44px;font-size:16px;border:none;outline:none;border-radius:20px;background-color:var(--darkMain);color:var(--darkText);box-sizing:border-box}.text-field-signup label{position:absolute;top:50%;left:5px;color:var(--darkText);font-size:16px;font-weight:500;transform:translate(10%,-220%);pointer-events:none}.text-field-signup input:focus{box-shadow:0 0 0 2px var(--highlight)}.terms-privacy-div{margin:-5px 0 20px 5px;color:var(--darkText);cursor:pointer}.terms-privacy-div a{color:var(--highlight)}.terms-privacy-div a:hover{text-decoration:underline}.signup-form{margin-top:30px}.contactWrapper{margin-top:40px}.contactForm{width:100%}.contactField{margin:30px 0}.contactForm input,.contactForm textarea{width:100%;padding:0 14px;height:44px;border:none;outline:none;border-radius:20px;background:var(--darkMain);color:var(--darkText);font-size:16px}.contactForm textarea{height:auto;min-height:140px;padding-top:10px;padding-bottom:10px;resize:vertical}.contactSuccess{margin-top:16px;color:var(--highlight);font-weight:800}.contactActions{margin-top:20px;display:flex;gap:14px;align-items:center;justify-content:center;flex-wrap:wrap}.githubLink button{width:auto;min-width:140px}.contactBack{color:var(--darkText);font-weight:800}.contactBack a{color:var(--darkText);text-decoration:none}.contactBack a:hover{color:var(--highlight);text-decoration:underline}
