<!DOCTYPE html>
<html class="dark" lang="en"><head>
<meta charset="utf-8"/>
<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
<title>Quiz Rules & Fair Play - QuizMaster</title>
<link href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;500;600;700&display=swap" rel="stylesheet"/>
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap" rel="stylesheet"/>
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap" rel="stylesheet"/>
<script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
<script id="tailwind-config">
tailwind.config = {
darkMode: "class",
theme: {
extend: {
colors: {
"primary": "#8c25f4",
"background-light": "#f7f5f8",
"background-dark": "#191022",
},
fontFamily: {
"display": ["Space Grotesk", "sans-serif"]
},
borderRadius: { "DEFAULT": "0.25rem", "lg": "0.5rem", "xl": "0.75rem", "full": "9999px" },
},
},
}
</script>
<style>
html { scroll-behavior: smooth; }
/* Custom scrollbar for dark mode */
::-webkit-scrollbar {
width: 8px;
}
::-webkit-scrollbar-track {
background: #191022;
}
::-webkit-scrollbar-thumb {
background: #302839;
border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
background: #8c25f4;
}
</style>
</head>
<body class="bg-background-light dark:bg-background-dark font-display text-slate-900 dark:text-slate-100 antialiased selection:bg-primary selection:text-white">
<div class="relative flex h-auto min-h-screen w-full flex-col overflow-x-hidden">
<!-- Navbar -->
<header class="sticky top-0 z-50 flex items-center justify-between whitespace-nowrap border-b border-solid border-slate-200 dark:border-[#302839] bg-background-light/80 dark:bg-[#141118]/80 backdrop-blur-md px-4 sm:px-10 py-3">
<div class="flex items-center gap-4 text-slate-900 dark:text-white">
<div class="size-8 text-primary">
<span class="material-symbols-outlined text-3xl">local_fire_department</span>
</div>
<h2 class="text-lg font-bold leading-tight tracking-[-0.015em]">QuizMaster</h2>
</div>
<div class="hidden md:flex flex-1 justify-end gap-8">
<div class="flex items-center gap-9">
<a class="text-slate-600 dark:text-white hover:text-primary dark:hover:text-primary transition-colors text-sm font-medium leading-normal" href="#">Home</a>
<a class="text-slate-600 dark:text-white hover:text-primary dark:hover:text-primary transition-colors text-sm font-medium leading-normal" href="#">Features</a>
<a class="text-slate-600 dark:text-white hover:text-primary dark:hover:text-primary transition-colors text-sm font-medium leading-normal" href="#">Tournaments</a>
<a class="text-slate-600 dark:text-white hover:text-primary dark:hover:text-primary transition-colors text-sm font-medium leading-normal" href="#">Pricing</a>
<a class="text-slate-600 dark:text-white hover:text-primary dark:hover:text-primary transition-colors text-sm font-medium leading-normal" href="#">Login</a>
</div>
<button class="flex min-w-[84px] cursor-pointer items-center justify-center overflow-hidden rounded-lg h-10 px-6 bg-primary hover:bg-primary/90 transition-colors text-white text-sm font-bold leading-normal tracking-[0.015em]">
<span class="truncate">Sign Up</span>
</button>
</div>
<button class="md:hidden text-slate-900 dark:text-white">
<span class="material-symbols-outlined">menu</span>
</button>
</header>
<!-- Main Content Layout -->
<div class="flex flex-1 justify-center px-4 sm:px-6 lg:px-8 py-10">
<div class="flex w-full max-w-[1200px] flex-col gap-10 lg:flex-row">
<!-- Sidebar Navigation (Sticky) -->
<aside class="hidden lg:block w-64 shrink-0">
<div class="sticky top-24 flex flex-col gap-2">
<p class="mb-4 text-xs font-bold uppercase tracking-widest text-slate-500 dark:text-slate-400">Contents</p>
<nav class="flex flex-col space-y-1">
<a class="group flex items-center justify-between rounded-lg bg-primary/10 px-4 py-3 text-sm font-medium text-primary ring-1 ring-primary/20 transition-all hover:bg-primary/20" href="#introduction">
<span>Introduction</span>
<span class="material-symbols-outlined text-[16px]">arrow_forward</span>
</a>
<a class="group flex items-center justify-between rounded-lg px-4 py-3 text-sm font-medium text-slate-600 dark:text-slate-400 transition-all hover:bg-slate-100 dark:hover:bg-[#302839] hover:text-slate-900 dark:hover:text-slate-200" href="#scoring">
<span>Scoring System</span>
</a>
<a class="group flex items-center justify-between rounded-lg px-4 py-3 text-sm font-medium text-slate-600 dark:text-slate-400 transition-all hover:bg-slate-100 dark:hover:bg-[#302839] hover:text-slate-900 dark:hover:text-slate-200" href="#time-limits">
<span>Time Limits</span>
</a>
<a class="group flex items-center justify-between rounded-lg px-4 py-3 text-sm font-medium text-slate-600 dark:text-slate-400 transition-all hover:bg-slate-100 dark:hover:bg-[#302839] hover:text-slate-900 dark:hover:text-slate-200" href="#anti-cheat">
<span>Anti-Cheat Policy</span>
</a>
<a class="group flex items-center justify-between rounded-lg px-4 py-3 text-sm font-medium text-slate-600 dark:text-slate-400 transition-all hover:bg-slate-100 dark:hover:bg-[#302839] hover:text-slate-900 dark:hover:text-slate-200" href="#disqualification">
<span>Disqualification</span>
</a>
</nav>
<div class="mt-8 rounded-xl bg-gradient-to-br from-[#1e1e24] to-[#251f2e] border border-[#302839] p-5 shadow-lg">
<div class="flex items-center gap-3 mb-3">
<span class="material-symbols-outlined text-primary text-3xl">verified_user</span>
<h3 class="font-bold text-white">Fair Play Seal</h3>
</div>
<p class="text-xs text-slate-400 leading-relaxed mb-4">
This competition is monitored by our automated fairness engine. All results are verified.
</p>
<div class="flex items-center gap-2 text-[10px] text-green-400 uppercase font-bold tracking-wider">
<span class="relative flex h-2 w-2">
<span class="animate-ping absolute inline-flex h-full w-full rounded-full bg-green-400 opacity-75"></span>
<span class="relative inline-flex rounded-full h-2 w-2 bg-green-500"></span>
</span>
System Active
</div>
</div>
</div>
</aside>
<!-- Mobile Dropdown for Nav (Visible only on small screens) -->
<div class="lg:hidden w-full mb-6">
<details class="group relative">
<summary class="flex items-center justify-between cursor-pointer rounded-lg bg-[#302839] px-4 py-3 text-white font-medium">
<span>Jump to Section...</span>
<span class="material-symbols-outlined transition-transform group-open:rotate-180">expand_more</span>
</summary>
<div class="absolute top-full left-0 right-0 mt-2 z-10 flex flex-col gap-1 rounded-lg bg-[#1e1e24] p-2 shadow-xl border border-[#302839]">
<a class="block rounded px-4 py-2 text-sm hover:bg-primary hover:text-white transition-colors" href="#introduction">Introduction</a>
<a class="block rounded px-4 py-2 text-sm hover:bg-primary hover:text-white transition-colors" href="#scoring">Scoring System</a>
<a class="block rounded px-4 py-2 text-sm hover:bg-primary hover:text-white transition-colors" href="#time-limits">Time Limits</a>
<a class="block rounded px-4 py-2 text-sm hover:bg-primary hover:text-white transition-colors" href="#anti-cheat">Anti-Cheat Policy</a>
<a class="block rounded px-4 py-2 text-sm hover:bg-primary hover:text-white transition-colors" href="#disqualification">Disqualification</a>
</div>
</details>
</div>
<!-- Main Content Area -->
<main class="flex-1 min-w-0">
<!-- Header Section -->
<div class="mb-12 scroll-mt-32" id="introduction">
<div class="inline-flex items-center gap-2 rounded-full border border-primary/30 bg-primary/10 px-3 py-1 text-xs font-bold uppercase tracking-wider text-primary mb-6">
<span class="material-symbols-outlined text-sm">gavel</span>
Effective Date: October 2023
</div>
<h1 class="text-4xl sm:text-5xl font-black leading-tight tracking-[-0.033em] text-slate-900 dark:text-white mb-6">
Official Rulebook & <span class="text-transparent bg-clip-text bg-gradient-to-r from-primary to-purple-400">Fair Play</span> Guidelines
</h1>
<p class="text-lg text-slate-600 dark:text-[#ab9cba] leading-relaxed max-w-3xl">
Fair play is the core of our platform. To ensure a competitive and fun environment for everyone, all participants must adhere to the following regulations. Our automated systems monitor gameplay in real-time.
</p>
</div>
<!-- Divider -->
<div class="h-px w-full bg-slate-200 dark:bg-[#302839] my-12"></div>
<!-- Scoring System -->
<section class="scroll-mt-32 mb-16" id="scoring">
<div class="flex items-center gap-3 mb-6">
<div class="flex h-10 w-10 items-center justify-center rounded-lg bg-blue-500/10 text-blue-500">
<span class="material-symbols-outlined">emoji_events</span>
</div>
<h2 class="text-2xl font-bold text-slate-900 dark:text-white">The Scoring System</h2>
</div>
<div class="grid gap-6 sm:grid-cols-2">
<!-- Rule Card -->
<div class="rounded-xl border border-slate-200 dark:border-[#302839] bg-white dark:bg-[#1e1e24] p-6 hover:border-primary/50 transition-colors">
<h3 class="font-bold text-lg text-slate-900 dark:text-white mb-2">Base Points</h3>
<p class="text-slate-600 dark:text-[#ab9cba] text-sm leading-relaxed mb-4">
Each correct answer awards <span class="text-primary font-bold">1,000 points</span>. Points are awarded immediately upon submission.
</p>
<div class="w-full h-1 bg-slate-100 dark:bg-[#302839] rounded-full overflow-hidden">
<div class="h-full bg-primary w-3/4"></div>
</div>
</div>
<!-- Rule Card -->
<div class="rounded-xl border border-slate-200 dark:border-[#302839] bg-white dark:bg-[#1e1e24] p-6 hover:border-primary/50 transition-colors">
<h3 class="font-bold text-lg text-slate-900 dark:text-white mb-2">Speed Bonus</h3>
<p class="text-slate-600 dark:text-[#ab9cba] text-sm leading-relaxed mb-4">
Answer faster for more points. The multiplier decreases linearly as the timer counts down.
</p>
<div class="flex justify-between text-xs font-mono text-slate-500 mt-2">
<span>0s</span>
<span>Time Elapsed</span>
<span>10s</span>
</div>
</div>
<!-- Rule Card Full Width -->
<div class="sm:col-span-2 rounded-xl border border-slate-200 dark:border-[#302839] bg-white dark:bg-[#1e1e24] p-6 hover:border-primary/50 transition-colors relative overflow-hidden">
<div class="absolute top-0 right-0 -mt-4 -mr-4 h-24 w-24 rounded-full bg-primary/10 blur-2xl"></div>
<h3 class="font-bold text-lg text-slate-900 dark:text-white mb-2 flex items-center gap-2">
<span class="material-symbols-outlined text-primary">bolt</span> Streak Multiplier
</h3>
<p class="text-slate-600 dark:text-[#ab9cba] text-sm leading-relaxed">
Maintain a streak of correct answers to unlock multipliers.
</p>
<ul class="mt-4 grid grid-cols-3 gap-4 text-center">
<li class="bg-slate-50 dark:bg-[#141118] rounded-lg py-2 border border-slate-100 dark:border-[#302839]">
<span class="block text-xs text-slate-500 uppercase">3 Streak</span>
<span class="block font-bold text-primary text-xl">1.2x</span>
</li>
<li class="bg-slate-50 dark:bg-[#141118] rounded-lg py-2 border border-slate-100 dark:border-[#302839]">
<span class="block text-xs text-slate-500 uppercase">5 Streak</span>
<span class="block font-bold text-primary text-xl">1.5x</span>
</li>
<li class="bg-slate-50 dark:bg-[#141118] rounded-lg py-2 border border-slate-100 dark:border-[#302839]">
<span class="block text-xs text-slate-500 uppercase">10 Streak</span>
<span class="block font-bold text-primary text-xl">2.0x</span>
</li>
</ul>
</div>
</div>
</section>
<!-- Time Limits -->
<section class="scroll-mt-32 mb-16" id="time-limits">
<div class="flex items-center gap-3 mb-6">
<div class="flex h-10 w-10 items-center justify-center rounded-lg bg-orange-500/10 text-orange-500">
<span class="material-symbols-outlined">timer</span>
</div>
<h2 class="text-2xl font-bold text-slate-900 dark:text-white">Time Limits & Penalties</h2>
</div>
<div class="bg-white dark:bg-[#1e1e24] rounded-xl border border-slate-200 dark:border-[#302839] overflow-hidden">
<div class="p-6 md:p-8 grid gap-8 md:grid-cols-[1fr_auto]">
<div>
<h3 class="text-xl font-bold text-slate-900 dark:text-white mb-4">Standard Round Duration</h3>
<p class="text-slate-600 dark:text-[#ab9cba] mb-6 leading-relaxed">
Every question has a strict time limit. If the timer reaches zero before an answer is submitted, the question is marked as incorrect and the streak is reset.
</p>
<ul class="space-y-3">
<li class="flex items-start gap-3 text-sm text-slate-600 dark:text-slate-300">
<span class="material-symbols-outlined text-primary text-lg shrink-0">check_circle</span>
<span>Multiple Choice: <strong class="text-white">30 Seconds</strong></span>
</li>
<li class="flex items-start gap-3 text-sm text-slate-600 dark:text-slate-300">
<span class="material-symbols-outlined text-primary text-lg shrink-0">check_circle</span>
<span>True / False: <strong class="text-white">15 Seconds</strong></span>
</li>
<li class="flex items-start gap-3 text-sm text-slate-600 dark:text-slate-300">
<span class="material-symbols-outlined text-primary text-lg shrink-0">check_circle</span>
<span>Puzzle / Order: <strong class="text-white">60 Seconds</strong></span>
</li>
</ul>
</div>
<div class="flex flex-col items-center justify-center bg-slate-50 dark:bg-[#141118] rounded-lg p-6 min-w-[200px] border border-slate-100 dark:border-[#302839]">
<div class="relative size-24 mb-3">
<svg class="size-full -rotate-90" viewbox="0 0 36 36" xmlns="http://www.w3.org/2000/svg">
<circle class="stroke-slate-200 dark:stroke-slate-700" cx="18" cy="18" fill="none" r="16" stroke-width="2"></circle>
<circle class="stroke-primary" cx="18" cy="18" fill="none" r="16" stroke-dasharray="100" stroke-dashoffset="25" stroke-width="2"></circle>
</svg>
<div class="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 text-2xl font-black text-slate-900 dark:text-white">
15s
</div>
</div>
<span class="text-xs font-bold text-slate-500 uppercase tracking-wide">Time Remaining</span>
</div>
</div>
</div>
</section>
<!-- Anti-Cheat Policy -->
<section class="scroll-mt-32 mb-16" id="anti-cheat">
<div class="flex items-center gap-3 mb-6">
<div class="flex h-10 w-10 items-center justify-center rounded-lg bg-green-500/10 text-green-500">
<span class="material-symbols-outlined">security</span>
</div>
<h2 class="text-2xl font-bold text-slate-900 dark:text-white">Anti-Cheat Policy</h2>
</div>
<div class="grid gap-4 md:grid-cols-2 lg:grid-cols-3">
<div class="group relative rounded-xl bg-[#1e1e24] p-1 shadow-sm">
<div class="absolute inset-0 rounded-xl bg-gradient-to-b from-primary/20 to-transparent opacity-0 transition-opacity group-hover:opacity-100"></div>
<div class="relative h-full rounded-lg bg-white dark:bg-[#1e1e24] p-5 border border-slate-200 dark:border-[#302839]">
<span class="material-symbols-outlined mb-3 text-3xl text-purple-400">smart_toy</span>
<h4 class="mb-2 text-lg font-bold text-slate-900 dark:text-white">No Bots/Scripts</h4>
<p class="text-sm text-slate-600 dark:text-[#ab9cba]">Automated answering tools or browser extensions that interact with the quiz interface are strictly prohibited.</p>
</div>
</div>
<div class="group relative rounded-xl bg-[#1e1e24] p-1 shadow-sm">
<div class="absolute inset-0 rounded-xl bg-gradient-to-b from-primary/20 to-transparent opacity-0 transition-opacity group-hover:opacity-100"></div>
<div class="relative h-full rounded-lg bg-white dark:bg-[#1e1e24] p-5 border border-slate-200 dark:border-[#302839]">
<span class="material-symbols-outlined mb-3 text-3xl text-purple-400">devices</span>
<h4 class="mb-2 text-lg font-bold text-slate-900 dark:text-white">Device Integrity</h4>
<p class="text-sm text-slate-600 dark:text-[#ab9cba]">Users must play on a single device. Concurrent logins will result in immediate session termination.</p>
</div>
</div>
<div class="group relative rounded-xl bg-[#1e1e24] p-1 shadow-sm">
<div class="absolute inset-0 rounded-xl bg-gradient-to-b from-primary/20 to-transparent opacity-0 transition-opacity group-hover:opacity-100"></div>
<div class="relative h-full rounded-lg bg-white dark:bg-[#1e1e24] p-5 border border-slate-200 dark:border-[#302839]">
<span class="material-symbols-outlined mb-3 text-3xl text-purple-400">visibility_off</span>
<h4 class="mb-2 text-lg font-bold text-slate-900 dark:text-white">Tab Switching</h4>
<p class="text-sm text-slate-600 dark:text-[#ab9cba]">Excessive tab switching or losing focus on the quiz window may trigger a "Focus Penalty" or forfeit the round.</p>
</div>
</div>
</div>
</section>
<!-- Disqualification -->
<section class="scroll-mt-32 mb-16" id="disqualification">
<div class="flex items-center gap-3 mb-6">
<div class="flex h-10 w-10 items-center justify-center rounded-lg bg-red-500/10 text-red-500">
<span class="material-symbols-outlined">block</span>
</div>
<h2 class="text-2xl font-bold text-slate-900 dark:text-white">Disqualification Criteria</h2>
</div>
<div class="rounded-xl border border-red-500/30 bg-red-500/5 p-6 md:p-8">
<p class="mb-6 font-medium text-red-400">Violating any of the following rules results in an immediate ban from the tournament and potential account suspension:</p>
<ul class="grid gap-4 sm:grid-cols-2">
<li class="flex items-center gap-3 rounded-lg bg-background-light dark:bg-[#141118] p-3 text-sm font-medium text-slate-700 dark:text-slate-200 shadow-sm border border-transparent hover:border-red-500/30 transition-colors">
<span class="flex h-6 w-6 shrink-0 items-center justify-center rounded-full bg-red-500/20 text-red-500">
<span class="material-symbols-outlined text-sm">close</span>
</span>
Account Sharing
</li>
<li class="flex items-center gap-3 rounded-lg bg-background-light dark:bg-[#141118] p-3 text-sm font-medium text-slate-700 dark:text-slate-200 shadow-sm border border-transparent hover:border-red-500/30 transition-colors">
<span class="flex h-6 w-6 shrink-0 items-center justify-center rounded-full bg-red-500/20 text-red-500">
<span class="material-symbols-outlined text-sm">close</span>
</span>
Exploiting Bugs/Glitches
</li>
<li class="flex items-center gap-3 rounded-lg bg-background-light dark:bg-[#141118] p-3 text-sm font-medium text-slate-700 dark:text-slate-200 shadow-sm border border-transparent hover:border-red-500/30 transition-colors">
<span class="flex h-6 w-6 shrink-0 items-center justify-center rounded-full bg-red-500/20 text-red-500">
<span class="material-symbols-outlined text-sm">close</span>
</span>
Harassment / Hate Speech
</li>
<li class="flex items-center gap-3 rounded-lg bg-background-light dark:bg-[#141118] p-3 text-sm font-medium text-slate-700 dark:text-slate-200 shadow-sm border border-transparent hover:border-red-500/30 transition-colors">
<span class="flex h-6 w-6 shrink-0 items-center justify-center rounded-full bg-red-500/20 text-red-500">
<span class="material-symbols-outlined text-sm">close</span>
</span>
VPN / Proxy Usage
</li>
</ul>
</div>
</section>
<!-- Contact / Help -->
<div class="rounded-2xl bg-gradient-to-r from-primary to-purple-600 p-8 text-center text-white shadow-lg">
<h3 class="mb-2 text-2xl font-bold">Have questions about the rules?</h3>
<p class="mb-6 opacity-90 text-sm">Our support team is available 24/7 to clarify any confusion before you start.</p>
<div class="flex flex-wrap justify-center gap-4">
<button class="flex items-center gap-2 rounded-lg bg-white px-6 py-2.5 text-sm font-bold text-primary transition-transform hover:scale-105">
<span class="material-symbols-outlined text-[18px]">support_agent</span>
Contact Support
</button>
<button class="flex items-center gap-2 rounded-lg border border-white/30 bg-white/10 px-6 py-2.5 text-sm font-bold text-white transition-colors hover:bg-white/20">
FAQ Section
</button>
</div>
</div>
</main>
</div>
</div>
<!-- Sticky Accept Footer -->
<div class="fixed bottom-0 left-0 right-0 z-40 border-t border-slate-200 dark:border-[#302839] bg-white/90 dark:bg-[#141118]/90 p-4 backdrop-blur-md">
<div class="mx-auto flex max-w-5xl flex-col items-center justify-between gap-4 sm:flex-row">
<div class="flex items-start gap-3">
<div class="mt-1 flex h-5 w-5 shrink-0 items-center justify-center rounded border border-slate-400 bg-transparent">
<span class="material-symbols-outlined text-primary text-sm opacity-100">check</span>
</div>
<p class="text-sm text-slate-600 dark:text-slate-300">
I have read and agree to the <a class="text-primary hover:underline" href="#">QuizMaster Terms of Service</a> and <a class="text-primary hover:underline" href="#">Fair Play Policy</a>.
</p>
</div>
<div class="flex w-full gap-3 sm:w-auto">
<button class="flex-1 whitespace-nowrap rounded-lg border border-slate-200 dark:border-slate-700 px-6 py-2.5 text-sm font-bold text-slate-700 dark:text-slate-300 transition-colors hover:bg-slate-50 dark:hover:bg-[#302839] sm:flex-none">
Decline
</button>
<button class="flex-1 whitespace-nowrap rounded-lg bg-primary px-8 py-2.5 text-sm font-bold text-white shadow-md shadow-primary/20 transition-all hover:bg-primary/90 hover:shadow-lg hover:shadow-primary/30 sm:flex-none">
Accept & Start Quiz
</button>
</div>
</div>
</div>
<!-- Space for footer to not be hidden by sticky bar -->
<div class="h-24"></div>
<footer class="flex flex-col gap-6 border-t border-slate-200 dark:border-[#302839] bg-background-light dark:bg-[#141118] px-5 py-10 text-center @container">
<div class="flex flex-wrap items-center justify-center gap-6 @[480px]:flex-row @[480px]:justify-around">
<a class="text-[#ab9cba] text-base font-normal leading-normal min-w-40 hover:text-primary transition-colors" href="#">Privacy Policy</a>
<a class="text-[#ab9cba] text-base font-normal leading-normal min-w-40 hover:text-primary transition-colors" href="#">Terms of Service</a>
<a class="text-[#ab9cba] text-base font-normal leading-normal min-w-40 hover:text-primary transition-colors" href="#">Support</a>
</div>
<div class="flex flex-wrap justify-center gap-4">
<a class="text-[#ab9cba] hover:text-white transition-colors" href="#">
<div data-icon="TwitterLogo">
<svg fill="currentColor" height="24px" viewbox="0 0 256 256" width="24px" xmlns="http://www.w3.org/2000/svg"><path d="M247.39,68.94A8,8,0,0,0,240,64H209.57A48.66,48.66,0,0,0,168.1,40a46.91,46.91,0,0,0-33.75,13.7A47.9,47.9,0,0,0,120,88v6.09C79.74,83.47,46.81,50.72,46.46,50.37a8,8,0,0,0-13.65,4.92c-4.31,47.79,9.57,79.77,22,98.18a110.93,110.93,0,0,0,21.88,24.2c-15.23,17.53-39.21,26.74-39.47,26.84a8,8,0,0,0-3.85,11.93c.75,1.12,3.75,5.05,11.08,8.72C53.51,229.7,65.48,232,80,232c70.67,0,129.72-54.42,135.75-124.44l29.91-29.9A8,8,0,0,0,247.39,68.94Zm-45,29.41a8,8,0,0,0-2.32,5.14C196,166.58,143.28,216,80,216c-10.56,0-18-1.4-23.22-3.08,11.51-6.25,27.56-17,37.88-32.48A8,8,0,0,0,92,169.08c-.47-.27-43.91-26.34-44-96,16,13,45.25,33.17,78.67,38.79A8,8,0,0,0,136,104V88a32,32,0,0,1,9.6-22.92A30.94,30.94,0,0,1,167.9,56c12.66.16,24.49,7.88,29.44,19.21A8,8,0,0,0,204.67,80h16Z"></path></svg>
</div>
</a>
<a class="text-[#ab9cba] hover:text-white transition-colors" href="#">
<div data-icon="DiscordLogo">
<svg fill="currentColor" height="24px" viewbox="0 0 256 256" width="24px" xmlns="http://www.w3.org/2000/svg"><path d="M104,140a12,12,0,1,1-12-12A12,12,0,0,1,104,140Zm60-12a12,12,0,1,0,12,12A12,12,0,0,0,164,128Zm74.45,64.9-67,29.71a16.17,16.17,0,0,1-21.71-9.1l-8.11-22q-6.72.45-13.63.46t-13.63-.46l-8.11,22a16.18,16.18,0,0,1-21.71,9.1l-67-29.71a15.93,15.93,0,0,1-9.06-18.51L38,58A16.07,16.07,0,0,1,51,46.14l36.06-5.93a16.22,16.22,0,0,1,18.26,11.88l3.26,12.84Q118.11,64,128,64t19.4.93l3.26-12.84a16.21,16.21,0,0,1,18.26-11.88L205,46.14A16.07,16.07,0,0,1,218,58l29.53,116.38A15.93,15.93,0,0,1,238.45,192.9ZM232,178.28,202.47,62s0,0-.08,0L166.33,56a.17.17,0,0,0-.17,0l-2.83,11.14c5,.94,10,2.06,14.83,3.42A8,8,0,0,1,176,86.31a8.09,8.09,0,0,1-2.16-.3A172.25,172.25,0,0,0,128,80a172.25,172.25,0,0,0-45.84,6,8,8,0,1,1-4.32-15.4c4.82-1.36,9.78-2.48,14.82-3.42L89.83,56s0,0-.12,0h0L53.61,61.93a.17.17,0,0,0-.09,0L24,178.33,91,208a.23.23,0,0,0,.22,0L98,189.72a173.2,173.2,0,0,1-20.14-4.32A8,8,0,0,1,82.16,170,171.85,171.85,0,0,0,128,176a171.85,171.85,0,0,0,45.84-6,8,8,0,0,1,4.32,15.41A173.2,173.2,0,0,1,158,189.72L164.75,208a.22.22,0,0,0,.21,0Z"></path></svg>
</div>
</a>
<a class="text-[#ab9cba] hover:text-white transition-colors" href="#">
<div data-icon="InstagramLogo">
<svg fill="currentColor" height="24px" viewbox="0 0 256 256" width="24px" xmlns="http://www.w3.org/2000/svg"><path d="M128,80a48,48,0,1,0,48,48A48.05,48.05,0,0,0,128,80Zm0,80a32,32,0,1,1,32-32A32,32,0,0,1,128,160ZM176,24H80A56.06,56.06,0,0,0,24,80v96a56.06,56.06,0,0,0,56,56h96a56.06,56.06,0,0,0,56-56V80A56.06,56.06,0,0,0,176,24Zm40,152a40,40,0,0,1-40,40H80a40,40,0,0,1-40-40V80A40,40,0,0,1,80,40h96a40,40,0,0,1,40,40ZM192,76a12,12,0,1,1-12-12A12,12,0,0,1,192,76Z"></path></svg>
</div>
</a>
</div>
<p class="text-[#ab9cba] text-base font-normal leading-normal">© 2023 QuizMaster Portal. All rights reserved.</p>
</footer>
</div>
</body></html>