@import"https://fonts.googleapis.com/css2?family=Hanken+Grotesk:ital,wght@0,100..900;1,100..900&display=swap";*,*::before,*::after{box-sizing:border-box}*{margin:0}body{line-height:1.5;-webkit-font-smoothing:antialiased}img,picture,video,canvas,svg{display:block;max-width:100%}input,button,textarea,select{font:inherit}p,h1,h2,h3,h4,h5,h6{overflow-wrap:break-word}p{text-wrap:pretty}h1,h2,h3,h4,h5,h6{text-wrap:balance}body{font-family:"Hanken Grotesk",sans-serif;font-optical-sizing:auto;font-style:normal;font-size:18px;min-height:100vh;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:3vh;background-color:#ebf1ff}body main{display:flex;width:55vw;height:80vh;box-shadow:0 4px 6px rgba(0,0,0,.1),0 10px 20px rgba(0,0,0,.05);border-radius:10px}body main .section1{flex-basis:50%;border-radius:10px;width:100%;height:100%;display:flex;flex-direction:column;justify-content:space-evenly;align-items:center;padding:5vh 3vw;gap:2vh;background:linear-gradient(#7857ff, #2e2be9)}body main .section1 .result{color:#c8c7ff;font-weight:700}body main .section1 .final-score{display:inline-flex;flex-direction:column;align-items:center;color:#fff;font-size:3.5em;border-radius:50%;padding:4rem;background:linear-gradient(hsl(256, 72%, 46%), hsla(241, 72%, 46%, 0));aspect-ratio:1/1}body main .section1 .final-score .out-of{color:#c8c7ff;font-size:medium}body main .section1 .greatdesc{text-align:center}body main .section1 .greatdesc .great{color:#fff;padding-bottom:1vh}body main .section1 .greatdesc .description{color:#c8c7ff}body main .section2{flex-basis:50%;width:100%;border-radius:0 10px 10px 0;display:flex;flex-direction:column;justify-content:space-evenly;padding:3vh 2.7vw;gap:1vh;background-color:#fff}body main .section2 .summary{color:#303b5a;font-weight:800}body main .section2 .reaction,body main .section2 .memory,body main .section2 .verbal,body main .section2 .visual{display:flex;width:100%;align-items:center;padding:1.5vh 2vw;border-radius:10px}body main .section2 .reaction .score,body main .section2 .memory .score,body main .section2 .verbal .score,body main .section2 .visual .score{margin-left:auto;color:#303b5a;font-weight:800}body main .section2 .reaction .score span,body main .section2 .memory .score span,body main .section2 .verbal .score span,body main .section2 .visual .score span{color:#c8c7ff;font-weight:800}body main .section2 .reaction .iconTitle,body main .section2 .memory .iconTitle,body main .section2 .verbal .iconTitle,body main .section2 .visual .iconTitle{display:inline-flex;gap:1vw}body main .section2 .reaction{background-color:#ffebeb}body main .section2 .reaction .iconTitle .title{color:#ff5757}body main .section2 .memory{background-color:#fff3db}body main .section2 .memory .iconTitle .title{color:#ffb01f}body main .section2 .verbal{background-color:#e6fff9}body main .section2 .verbal .iconTitle .title{color:#00bd91}body main .section2 .visual{background-color:#f1f2fe}body main .section2 .visual .iconTitle .title{color:#1125d4}body main .section2 .btn{border:none;background-color:#303b5a;color:#ebf1ff;padding:2vh 3vw;border-radius:35px}body main .section2 .btn:hover{background:linear-gradient(#7857ff, #2e2be9);cursor:pointer}body footer{margin:0 6vw 3vh}body footer .attribution{color:#303b5a}body footer .attribution a{color:#7857ff;text-decoration:none}@media(max-width: 576px){body main{flex-direction:column;height:130vh;width:90vw}}@media(min-width: 577px)and (max-width: 768px){body main{width:95vw;height:150vh}}@media(min-width: 769px)and (max-width: 1024px){body main{width:90vw;height:100vh}}