* { margin: 0; padding: 0; box-sizing: border-box; } body { display: flex; justify-content: center; align-items: center; height: 100vh; background: #050801; font-family: 'Raleway', sans-serif; font-weight: bold; } a { position: relative; display: inline-block; padding: 5vh 5vw; /* Use viewport units for padding */ margin: 4vh 0; /* Use viewport units for margin */ color: #03e9f4; text-decoration: none; text-transform: uppercase; transition: 0.5s; overflow: hidden; margin-right: 5vw; /* Use viewport units for margin */ } a:hover { background: #03e9f4; color: #050801; box-shadow: 0 0 5px #03e9f4, 0 0 25px #03e9f4, 0 0 50px #03e9f4, 0 0 200px #03e9f4; -webkit-box-reflect: below 1px linear-gradient(transparent, #0005); } a span { position: absolute; display: block; } a span:nth-child(1) { top: 0; left: 0; width: 100%; height: 2px; background: linear-gradient(90deg, transparent, #03e9f4); animation: animate1 1s linear infinite; } @keyframes animate1 { 0% { left: -100%; } 50%, 100% { left: 100%; } } a span:nth-child(2) { top: -100%; right: 0; width: 2px; height: 100%; background: linear-gradient(180deg, transparent, #03e9f4); animation: animate2 1s linear infinite; animation-delay: 0.25s; } @keyframes animate2 { 0% { top: -100%; } 50%, 100% { top: 100%; } } a span:nth-child(3) { bottom: 0; right: 0; width: 100%; height: 2px; background: linear-gradient(270deg, transparent, #03e9f4); animation: animate3 1s linear infinite; animation-delay: 0.5s; } @keyframes animate3 { 0% { right: -100%; } 50%, 100% { right: 100%; } } a span:nth-child(4) { bottom: -100%; left: 0; width: 2px; height: 100%; background: linear-gradient(360deg, transparent, #03e9f4); animation: animate4 1s linear infinite; animation-delay: 0.75s; } @keyframes animate4 { 0% { bottom: -100%; } 50%, 100% { bottom: 100%; } } h1, h2 { margin: 0; padding: 0; text-align: center; direction: rtl; /* Ensure Arabic text is aligned correctly */ } h1 { font-size: 4vw; /* Use viewport units for font size */ } h2 { font-size: 2.5vw; /* Use viewport units for font size */ }

النص الفائق غير متوفر

الرجاء تمكين جافا سكريبت.

// Add a class to the body when noscript is active document.body.classList.add('noscript-active');