{% extends "base.html" %}

{% block title %}Forbidden (403){% endblock title %}
{% block content %}




<style>
  @import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;700&family=Poppins:wght@300;400;500&display=swap');
  
  body {
      font-family: 'Poppins', sans-serif;
      background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
      overflow-x: hidden;
  }
  
  h1, h2 {
      font-family: 'Playfair Display', serif;
  }
  
  .lock {
      stroke-dasharray: 100;
      stroke-dashoffset: 100;
      animation: dash 2s ease-in-out forwards;
  }
  
  @keyframes dash {
      to {
          stroke-dashoffset: 0;
      }
  }
  
  .shield {
      animation: pulse 3s infinite alternate;
  }
  
  @keyframes pulse {
      0% {
          transform: scale(1);
          filter: drop-shadow(0 0 5px rgba(255, 107, 107, 0.5));
      }
      100% {
          transform: scale(1.05);
          filter: drop-shadow(0 0 15px rgba(255, 107, 107, 0.8));
      }
  }
  
  .particle {
      position: absolute;
      width: 6px;
      height: 6px;
      border-radius: 50%;
      background-color: rgba(255, 255, 255, 0.3);
      animation: float 15s infinite linear;
  }
  
  @keyframes float {
      0% {
          transform: translateY(0) translateX(0) rotate(0deg);
          opacity: 0;
      }
      10% {
          opacity: 1;
      }
      90% {
          opacity: 1;
      }
      100% {
          transform: translateY(-100vh) translateX(100px) rotate(360deg);
          opacity: 0;
      }
  }
  
  .btn-glow {
      transition: all 0.3s ease;
      animation: button-pulse 2s infinite alternate;
  }
  
  @keyframes button-pulse {
      0% {
          box-shadow: 0 0 5px rgba(255, 107, 107, 0.5);
      }
      100% {
          box-shadow: 0 0 20px rgba(255, 107, 107, 0.8);
      }
  }
  
  .btn-glow:hover {
      transform: translateY(-3px);
      box-shadow: 0 0 25px rgba(255, 107, 107, 1);
  }
  
  .line {
      height: 1px;
      background: linear-gradient(90deg, transparent, rgba(255, 107, 107, 0.5), transparent);
      width: 100%;
      max-width: 500px;
      margin: 2rem auto;
      animation: expand 2s ease-out forwards;
      transform-origin: center;
  }
  
  @keyframes expand {
      0% {
          transform: scaleX(0);
          opacity: 0;
      }
      100% {
          transform: scaleX(1);
          opacity: 1;
      }
  }
  
  .fade-in {
      animation: fadeIn 1.5s ease-out forwards;
      opacity: 0;
  }
  
  @keyframes fadeIn {
      to {
          opacity: 1;
      }
  }
  
  .slide-up {
      animation: slideUp 1s ease-out forwards;
      transform: translateY(30px);
      opacity: 0;
  }
  
  @keyframes slideUp {
      to {
          transform: translateY(0);
          opacity: 1;
      }
  }
</style>
<style>*, ::before, ::after{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgb(59 130 246 / 0.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }::backdrop{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgb(59 130 246 / 0.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }/* ! tailwindcss v3.4.16 | MIT License | https://tailwindcss.com */*,::after,::before{box-sizing:border-box;border-width:0;border-style:solid;border-color:#e5e7eb}::after,::before{--tw-content:''}:host,html{line-height:1.5;-webkit-text-size-adjust:100%;-moz-tab-size:4;tab-size:4;font-family:ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";font-feature-settings:normal;font-variation-settings:normal;-webkit-tap-highlight-color:transparent}body{margin:0;line-height:inherit}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,pre,samp{font-family:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;font-feature-settings:normal;font-variation-settings:normal;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}button,input,optgroup,select,textarea{font-family:inherit;font-feature-settings:inherit;font-variation-settings:inherit;font-size:100%;font-weight:inherit;line-height:inherit;letter-spacing:inherit;color:inherit;margin:0;padding:0}button,select{text-transform:none}button,input:where([type=button]),input:where([type=reset]),input:where([type=submit]){-webkit-appearance:button;background-color:transparent;background-image:none}:-moz-focusring{outline:auto}:-moz-ui-invalid{box-shadow:none}progress{vertical-align:baseline}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}blockquote,dd,dl,figure,h1,h2,h3,h4,h5,h6,hr,p,pre{margin:0}fieldset{margin:0;padding:0}legend{padding:0}menu,ol,ul{list-style:none;margin:0;padding:0}dialog{padding:0}textarea{resize:vertical}input::placeholder,textarea::placeholder{opacity:1;color:#9ca3af}[role=button],button{cursor:pointer}:disabled{cursor:default}audio,canvas,embed,iframe,img,object,svg,video{display:block;vertical-align:middle}img,video{max-width:100%;height:auto}[hidden]:where(:not([hidden=until-found])){display:none}.container{width:100%}@media (min-width: 640px){.container{max-width:640px}}@media (min-width: 768px){.container{max-width:768px}}@media (min-width: 1024px){.container{max-width:1024px}}@media (min-width: 1280px){.container{max-width:1280px}}@media (min-width: 1536px){.container{max-width:1536px}}.fixed{position:fixed}.relative{position:relative}.inset-0{inset:0px}.z-0{z-index:0}.z-10{z-index:10}.mx-auto{margin-left:auto;margin-right:auto}.mb-2{margin-bottom:0.5rem}.mb-4{margin-bottom:1rem}.mb-6{margin-bottom:1.5rem}.mb-8{margin-bottom:2rem}.mt-16{margin-top:4rem}.flex{display:flex}.h-32{height:8rem}.min-h-screen{min-height:100vh}.w-32{width:8rem}.max-w-2xl{max-width:42rem}.max-w-4xl{max-width:56rem}.flex-col{flex-direction:column}.items-center{align-items:center}.justify-center{justify-content:center}.gap-4{gap:1rem}.rounded-full{border-radius:9999px}.border{border-width:1px}.border-red-400{--tw-border-opacity:1;border-color:rgb(248 113 113 / var(--tw-border-opacity, 1))}.bg-gradient-to-r{background-image:linear-gradient(to right, var(--tw-gradient-stops))}.from-pink-300{--tw-gradient-from:#f9a8d4 var(--tw-gradient-from-position);--tw-gradient-to:rgb(249 168 212 / 0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from), var(--tw-gradient-to)}.from-red-400{--tw-gradient-from:#f87171 var(--tw-gradient-from-position);--tw-gradient-to:rgb(248 113 113 / 0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from), var(--tw-gradient-to)}.to-pink-500{--tw-gradient-to:#ec4899 var(--tw-gradient-to-position)}.to-red-400{--tw-gradient-to:#f87171 var(--tw-gradient-to-position)}.bg-clip-text{-webkit-background-clip:text;background-clip:text}.p-4{padding:1rem}.px-4{padding-left:1rem;padding-right:1rem}.px-8{padding-left:2rem;padding-right:2rem}.py-3{padding-top:0.75rem;padding-bottom:0.75rem}.text-center{text-align:center}.text-2xl{font-size:1.5rem;line-height:2rem}.text-5xl{font-size:3rem;line-height:1}.text-lg{font-size:1.125rem;line-height:1.75rem}.text-sm{font-size:0.875rem;line-height:1.25rem}.font-bold{font-weight:700}.font-light{font-weight:300}.font-medium{font-weight:500}.text-gray-300{--tw-text-opacity:1;color:rgb(209 213 219 / var(--tw-text-opacity, 1))}.text-gray-400{--tw-text-opacity:1;color:rgb(156 163 175 / var(--tw-text-opacity, 1))}.text-gray-500{--tw-text-opacity:1;color:rgb(107 114 128 / var(--tw-text-opacity, 1))}.text-red-400{--tw-text-opacity:1;color:rgb(248 113 113 / var(--tw-text-opacity, 1))}.text-transparent{color:transparent}.text-white{--tw-text-opacity:1;color:rgb(255 255 255 / var(--tw-text-opacity, 1))}.transition-all{transition-property:all;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:150ms}.hover\:bg-red-400\/10:hover{background-color:rgb(248 113 113 / 0.1)}.hover\:from-red-500:hover{--tw-gradient-from:#ef4444 var(--tw-gradient-from-position);--tw-gradient-to:rgb(239 68 68 / 0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from), var(--tw-gradient-to)}.hover\:to-pink-600:hover{--tw-gradient-to:#db2777 var(--tw-gradient-to-position)}@media (min-width: 768px){.md\:flex-row{flex-direction:row}.md\:text-3xl{font-size:1.875rem;line-height:2.25rem}.md\:text-6xl{font-size:3.75rem;line-height:1}}</style></head>
<body class="min-h-screen flex flex-col items-center justify-center p-4 text-white">
<!-- Background particles -->
<div id="particles" class="fixed inset-0 z-0"><div class="particle" style="left: 26.2401%; top: 61.8721%; width: 3.98156px; height: 3.98156px; opacity: 0.258217; animation-duration: 19.0081s; animation-delay: 2.18856s;"></div><div class="particle" style="left: 64.3612%; top: 27.6075%; width: 2.29029px; height: 2.29029px; opacity: 0.192206; animation-duration: 25.0501s; animation-delay: 8.38498s;"></div><div class="particle" style="left: 44.5472%; top: 78.3184%; width: 4.14915px; height: 4.14915px; opacity: 0.434499; animation-duration: 25.3071s; animation-delay: 1.38933s;"></div><div class="particle" style="left: 36.9696%; top: 24.081%; width: 5.13435px; height: 5.13435px; opacity: 0.381386; animation-duration: 15.269s; animation-delay: 3.88066s;"></div><div class="particle" style="left: 23.137%; top: 51.4457%; width: 5.59483px; height: 5.59483px; opacity: 0.195871; animation-duration: 17.003s; animation-delay: 2.56235s;"></div><div class="particle" style="left: 47.3007%; top: 21.1504%; width: 3.2782px; height: 3.2782px; opacity: 0.100145; animation-duration: 25.2631s; animation-delay: 7.66888s;"></div><div class="particle" style="left: 2.75408%; top: 87.157%; width: 4.1417px; height: 4.1417px; opacity: 0.316645; animation-duration: 24.7315s; animation-delay: 4.68162s;"></div><div class="particle" style="left: 42.798%; top: 36.7168%; width: 2.64793px; height: 2.64793px; opacity: 0.189904; animation-duration: 28.5928s; animation-delay: 2.7478s;"></div><div class="particle" style="left: 99.862%; top: 47.6033%; width: 3.99805px; height: 3.99805px; opacity: 0.490943; animation-duration: 10.0192s; animation-delay: 3.06312s;"></div><div class="particle" style="left: 1.76386%; top: 98.5821%; width: 4.97185px; height: 4.97185px; opacity: 0.470292; animation-duration: 20.0108s; animation-delay: 3.05751s;"></div><div class="particle" style="left: 18.7838%; top: 90.8266%; width: 2.07742px; height: 2.07742px; opacity: 0.130056; animation-duration: 25.2346s; animation-delay: 9.89714s;"></div><div class="particle" style="left: 70.0841%; top: 74.7154%; width: 3.23529px; height: 3.23529px; opacity: 0.460807; animation-duration: 13.6812s; animation-delay: 1.82766s;"></div><div class="particle" style="left: 59.0603%; top: 7.94367%; width: 3.13346px; height: 3.13346px; opacity: 0.404041; animation-duration: 20.962s; animation-delay: 0.563922s;"></div><div class="particle" style="left: 9.74806%; top: 45.0178%; width: 2.47725px; height: 2.47725px; opacity: 0.397117; animation-duration: 27.9655s; animation-delay: 2.99304s;"></div><div class="particle" style="left: 10.8011%; top: 21.4629%; width: 2.44924px; height: 2.44924px; opacity: 0.170937; animation-duration: 17.715s; animation-delay: 9.06906s;"></div><div class="particle" style="left: 63.3804%; top: 98.0445%; width: 5.34425px; height: 5.34425px; opacity: 0.486952; animation-duration: 26.051s; animation-delay: 5.60802s;"></div><div class="particle" style="left: 9.96613%; top: 42.7801%; width: 3.7263px; height: 3.7263px; opacity: 0.19578; animation-duration: 23.5284s; animation-delay: 1.32389s;"></div><div class="particle" style="left: 56.5271%; top: 38.9251%; width: 2.01961px; height: 2.01961px; opacity: 0.116615; animation-duration: 13.4752s; animation-delay: 8.46135s;"></div><div class="particle" style="left: 62.4245%; top: 37.6574%; width: 4.23685px; height: 4.23685px; opacity: 0.223171; animation-duration: 21.5874s; animation-delay: 9.12902s;"></div><div class="particle" style="left: 31.0459%; top: 56.9758%; width: 2.66197px; height: 2.66197px; opacity: 0.217189; animation-duration: 22.5239s; animation-delay: 9.15495s;"></div><div class="particle" style="left: 45.0126%; top: 34.041%; width: 4.82948px; height: 4.82948px; opacity: 0.177076; animation-duration: 22.5952s; animation-delay: 9.04639s;"></div><div class="particle" style="left: 98.5247%; top: 66.7931%; width: 3.01322px; height: 3.01322px; opacity: 0.496623; animation-duration: 21.2875s; animation-delay: 2.68776s;"></div><div class="particle" style="left: 61.1123%; top: 75.9029%; width: 3.74055px; height: 3.74055px; opacity: 0.222673; animation-duration: 22.5248s; animation-delay: 1.67659s;"></div><div class="particle" style="left: 83.8518%; top: 88.9552%; width: 3.24909px; height: 3.24909px; opacity: 0.145089; animation-duration: 28.4318s; animation-delay: 9.25013s;"></div><div class="particle" style="left: 37.9572%; top: 16.8008%; width: 2.3496px; height: 2.3496px; opacity: 0.438874; animation-duration: 24.5774s; animation-delay: 4.3552s;"></div><div class="particle" style="left: 51.0215%; top: 25.8939%; width: 2.64297px; height: 2.64297px; opacity: 0.568264; animation-duration: 12.5696s; animation-delay: 8.71418s;"></div><div class="particle" style="left: 26.7429%; top: 37.4878%; width: 2.58853px; height: 2.58853px; opacity: 0.457492; animation-duration: 23.8362s; animation-delay: 7.38407s;"></div><div class="particle" style="left: 95.926%; top: 83.1116%; width: 4.05218px; height: 4.05218px; opacity: 0.276654; animation-duration: 29.9583s; animation-delay: 7.22567s;"></div><div class="particle" style="left: 95.0102%; top: 37.4339%; width: 2.30323px; height: 2.30323px; opacity: 0.328613; animation-duration: 20.6634s; animation-delay: 3.83661s;"></div><div class="particle" style="left: 17.9378%; top: 39.4713%; width: 4.22984px; height: 4.22984px; opacity: 0.306524; animation-duration: 16.2494s; animation-delay: 0.850885s;"></div></div>

<div class="container max-w-4xl mx-auto z-10 text-center px-4">
  <!-- Main content -->
  <div class="relative mb-8">
      <svg class="shield w-32 h-32 mx-auto mb-4" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
          <path d="M12 2L4 5V11.09C4 16.14 7.41 20.85 12 22C16.59 20.85 20 16.14 20 11.09V5L12 2Z" fill="#ff6b6b" fill-opacity="0.2" stroke="#ff6b6b" stroke-width="1.5"></path>
          <path class="lock" d="M8 11H16V17H8V11Z" stroke="#ff6b6b" stroke-width="1.5" fill="none"></path>
          <path class="lock" d="M10 11V9C10 7.9 10.9 7 12 7C13.1 7 14 7.9 14 9V11" stroke="#ff6b6b" stroke-width="1.5" fill="none"></path>
          <circle cx="12" cy="14" r="1" fill="#ff6b6b"></circle>
          <path class="lock" d="M12 14V15.5" stroke="#ff6b6b" stroke-width="1.5" stroke-linecap="round"></path>
      </svg>
  </div>
  
  <h1 class="text-5xl md:text-6xl font-bold mb-2 text-transparent bg-clip-text bg-gradient-to-r from-pink-300 to-red-400 fade-in" style="animation-delay: 0.3s">Access Forbidden</h1>
  
  <div class="line"></div>
  
  <h2 class="text-2xl md:text-3xl font-light mb-6 text-gray-300 slide-up" style="animation-delay: 0.6s">You don't have permission to access this area</h2>
  
  <p class="text-lg text-gray-400 max-w-2xl mx-auto mb-8 slide-up" style="animation-delay: 0.9s">
      This section requires proper authorization. Please contact your administrator if you believe this is an error.
  </p>
  
  <div class="flex flex-col md:flex-row gap-4 justify-center items-center slide-up" style="animation-delay: 1.2s">
      <button onclick="window.history.back()" class="px-8 py-3 bg-gradient-to-r from-red-400 to-pink-500 rounded-full text-white font-medium transition-all hover:from-red-500 hover:to-pink-600 btn-glow">
          Go Back
      </button>
      
      <a href="#" class="px-8 py-3 border border-red-400 text-red-400 rounded-full font-medium transition-all hover:bg-red-400/10">
          Contact Support
      </a>
  </div>
  
  <div class="mt-16 text-sm text-gray-500 slide-up" style="animation-delay: 1.5s">
      Error Code: 403 • Forbidden Access
  </div>
</div>

<script>
  // Create floating particles
  function createParticles() {
      const particlesContainer = document.getElementById('particles');
      const particleCount = 30;
      
      for (let i = 0; i < particleCount; i++) {
          const particle = document.createElement('div');
          particle.classList.add('particle');
          
          // Random positioning
          particle.style.left = `${Math.random() * 100}%`;
          particle.style.top = `${Math.random() * 100}%`;
          
          // Random size
          const size = Math.random() * 4 + 2;
          particle.style.width = `${size}px`;
          particle.style.height = `${size}px`;
          
          // Random opacity
          particle.style.opacity = Math.random() * 0.5 + 0.1;
          
          // Random animation duration and delay
          const duration = Math.random() * 20 + 10;
          const delay = Math.random() * 10;
          particle.style.animationDuration = `${duration}s`;
          particle.style.animationDelay = `${delay}s`;
          
          particlesContainer.appendChild(particle);
      }
  }
  
  // Initialize particles on page load
  window.addEventListener('load', createParticles);
</script>
<script>(function(){function c(){var b=a.contentDocument||a.contentWindow.document;if(b){var d=b.createElement('script');d.innerHTML="window.__CF$cv$params={r:'93b36336a7deedfe',t:'MTc0NjQ4MTEzNS4wMDAwMDA='};var a=document.createElement('script');a.nonce='';a.src='/cdn-cgi/challenge-platform/scripts/jsd/main.js';document.getElementsByTagName('head')[0].appendChild(a);";b.getElementsByTagName('head')[0].appendChild(d)}}if(document.body){var a=document.createElement('iframe');a.height=1;a.width=1;a.style.position='absolute';a.style.top=0;a.style.left=0;a.style.border='none';a.style.visibility='hidden';document.body.appendChild(a);if('loading'!==document.readyState)c();else if(window.addEventListener)document.addEventListener('DOMContentLoaded',c);else{var e=document.onreadystatechange||function(){};document.onreadystatechange=function(b){e(b);'loading'!==document.readyState&&(document.onreadystatechange=e,c())}}}})();</script><iframe height="1" width="1" style="position: absolute; top: 0px; left: 0px; border: none; visibility: hidden;"></iframe>

{% endblock content %}