:root{--clr-primary: #343434;--clr-primary-light: #454545;--clr-primary-light-rgb: rgb(69, 69, 69, .8);--clr-secondary: #ffffff;--clr-secondary-rgb: rgba(255, 255, 255, .8);--clr-success: #24513c;--clr-neutral: #518cca;--clr-warning: #8B0000;--header-height: 0}*{margin:0;padding:0;box-sizing:border-box}body{font-family:Fredericka the Great,serif;background:#fff url(https://cdn.pixabay.com/photo/2021/10/13/15/59/compass-6707008_1280.png) no-repeat right center / 200px fixed}button{font-family:Fredericka the Great,serif}header nav{position:fixed;top:0;left:0;right:0;z-index:10;transition:all .6s ease-in-out}.header-wrap{border-radius:16px;margin:1rem 2rem}.nav-wrap{display:flex;align-items:center;flex-direction:column;justify-content:space-between;padding:1rem 2rem;gap:1rem;background:transparent;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);color:var(--clr-primary);width:100%;font-weight:400;font-size:1.5rem;border-radius:16px}nav a{color:var(--clr-primary);text-decoration:none;outline:none;background:none;border:none;font-size:1.5rem}.active-nav{font-weight:800;text-decoration:underline}.nav-items{display:flex;align-items:center;justify-content:space-between;gap:.5rem}.nav-item{font-size:1.4rem}.normal-link{font-size:1rem}footer{position:fixed;bottom:0;background:var(--clr-secondary-rgb);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);width:100%;padding:1rem 3rem;color:#1a1a1a;font-weight:400}footer .nav-wrap{font-size:1rem;flex-direction:row;padding:0}@media screen and (min-width:1080px){body{background:#fff url(https://cdn.pixabay.com/photo/2021/10/13/15/59/compass-6707008_1280.png) no-repeat right center / 500px fixed}.nav-wrap{flex-direction:row;padding:1rem 2rem}}.main-wrap{margin:var(--header-height) 1rem 5rem;display:flex;flex-direction:column;padding:.4rem .5rem 3rem}.main-title{font-size:3rem;font-weight:900;letter-spacing:1rem;line-height:3rem;color:var(--clr-primary);margin:3rem 1rem}.start-btn{font-size:2rem;border:1px solid var(--clr-primary);border-radius:1rem;padding:1rem 3rem;background:var(--clr-secondary);color:var(--clr-primary);text-decoration:none;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);align-self:center}.btn{padding:1rem 2rem;margin:1rem 0 0;font-size:1.1rem;outline:none;border:none;border-radius:10px;background-color:var(--clr-primary-light);border:1px solid var(--clr-primary);color:var(--clr-secondary)}.about-sec{margin:0}.about-wrap{background:var(--clr-secondary-rgb);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);line-height:1.7rem;padding:2rem;border:2px solid var(--clr-primary);border-radius:16px;font-size:1.2rem;margin:2rem 0}.about-wrap p{margin:1rem 0}.form-sec{font-family:Fredericka the Great,serif;font-size:1.2rem;text-transform:capitalize;background:var(--clr-secondary);color:var(--clr-primary);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);padding:2rem 3rem;border-radius:1rem;align-self:center;box-shadow:#0000001a 0 4px 12px}.name-form{display:flex;flex-direction:column;gap:1rem;margin:1rem 0}.name-form input{padding:1.2rem 1rem;border-radius:10px;border:1px solid var(--clr-primary-light);color:var(--clr-primary-light);outline:none}.name-form button,.user-screen button{padding:1rem 2rem;margin:1rem 0 0;font-size:1.1rem;outline:none;border:none;border-radius:10px;background-color:var(--clr-primary-light);border:1px solid var(--clr-primary);color:var(--clr-secondary);align-self:center}.user-screen{width:100%;background:var(--clr-secondary-rgb);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);line-height:1.7rem;padding:2rem 1rem;border:2px solid var(--clr-primary);border-radius:16px;font-size:1.2rem}.user-screen .user-welcom-para{margin:1rem;line-height:1.7rem}.form-wrap-select{display:flex;flex-direction:column;gap:.5rem;align-self:center;background:var(--clr-secondary-rgb);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:1px solid var(--clr-primary-light);border-radius:16px;padding:2rem}.select-wrap{margin:1rem}select{padding:1rem 2rem;border-radius:16px;outline:none;width:100%;font-family:inherit;font-size:1rem;background:var(--clr-secondary);color:var(--clr-primary-light);border:2px solid var(--clr-primary-light)}.btn-select{align-self:center}.user-status-sec{background:var(--clr-primary);color:var(--clr-secondary);box-shadow:#88a5bf7a 6px 2px 16px,var(--clr-secondary-rgb) -6px -2px 16px 0;border-radius:16px;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);padding:1rem 3rem;font-family:Fredericka the Great,serif;margin:.2rem 0 .9rem;position:sticky;top:var(--header-height);z-index:10;width:100%;transition:all .6s ease-in-out}.trivia-sec{background:var(--clr-secondary-rgb);box-shadow:#88a5bf7a 6px 2px 16px,var(--clr-secondary-rgb) -6px -2px 16px 0;border-radius:16px;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);padding:2rem 3rem;font-family:Fredericka the Great,serif;position:relative}.trivia-sec ol{padding:1rem}.trivia-que{font-size:1.1rem;margin:1.2rem 0}.answer-wrap{display:flex;gap:1rem;flex-wrap:wrap;margin:1.1rem 0}.answer-wrap label.correct-ans{background:var(--clr-success);color:var(--clr-secondary)}.answer-wrap label.wrong-ans{background:var(--clr-warning);color:var(--clr-secondary)}.answer-wrap label.show-ans{background:var(--clr-neutral);color:var(--clr-secondary)}.answer-wrap label{display:flex;align-items:center;justify-content:space-between;gap:.5rem;border-radius:1rem;padding:.5rem .7rem .5rem .9rem;transition:all .5s ease-in-out}.answer-wrap input[type=radio]{display:none}.answer-wrap label{cursor:pointer;padding:.6rem 2rem .6rem 3rem;position:relative;display:inline-block;transition:all .9s ease-in-out}.answer-wrap label:before{content:"";display:inline-block;position:absolute;left:0;top:50%;margin:0 1rem;transform:translateY(-50%);width:1rem;height:1rem;border-radius:50%;border:2px solid #bbb;background-color:var(--clr-secondary);transition:all .2s linear}.answer-wrap label.correct-ans:has(input[type=radio]:checked):before{box-shadow:inset 0 0 0 2px #f4f4f4;background-color:var(--clr-success);border-color:var(--clr-success)}.answer-wrap label.wrong-ans:has(input[type=radio]:checked):before{box-shadow:inset 0 0 0 2px #f4f4f4;background-color:var(--clr-warning);border-color:var(--clr-warning)}.answer-wrap label:has(input[type=radio]:disabled):before{box-shadow:inset 0 0 0 2px #f4f4f4;background-color:var(--clr-primary-light);border-color:var(--clr-primary-light);opacity:.5}.result-wrap{margin:2rem 1rem}.result-wrap .result-text{font-weight:400}.trivia-sec .btn-wrap{display:flex;flex-direction:column;margin:1rem}.modal-overlay{background:var(--clr-secondary-rgb);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);width:100vw;height:100%;padding:1rem;position:absolute;z-index:100;inset:0}.modal-content{z-index:15;position:absolute;inset:0;margin:auto;width:80%;height:45%;display:flex;flex-direction:column;align-items:center;justify-content:center;background:var(--clr-secondary-rgb);border:1px solid var(--clr-primary);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);padding:1.5rem;border-radius:16px;font-size:1.2rem}.modal-content .btn-wrap{display:flex;flex-direction:column;gap:1rem;padding:1rem;flex-basis:auto}.btn-warning{background:var(--clr-warning)}@media screen and (min-width:1080px){.main-title{font-size:10rem;line-height:9rem}.about-sec{margin:1rem}.about-wrap{margin:2rem 0}.form-sec{width:20vw}.user-screen{width:45vw;margin:0 30vw;padding:3rem 2.5rem}.trivia-sec .btn-wrap{flex-direction:row;gap:1rem}.modal-content{width:30%;height:35%}.modal-content .btn-wrap{flex-direction:row}}