/* DNA Helix Animation */

.dna-helix {

    position: relative;

    width: 200px;

    height: 400px;

    margin: 0 auto;

    perspective: 1200px;

    transform-style: preserve-3d;

}

.base-pair {

    position: absolute;

    width: 100%;

    height: 20px;

    animation: rotate 8s linear infinite;

    transform-style: preserve-3d;

}

.base {

    position: absolute;

    width: 25px;

    height: 25px;

    border-radius: 50%;

    display: flex;

    align-items: center;

    justify-content: center;

    font-weight: bold;

    color: white;

    text-shadow: 0 0 3px rgba(0,0,0,0.5);

    box-shadow: 0 0 15px rgba(0,0,0,0.2);

}

.left-base {

    left: 35px;

    background: #FF0066;

    animation: pulse 3s ease-in-out infinite;

    filter: brightness(1.1);

}

.right-base {

    right: 35px;

    background: #00B7FF;

    animation: pulse 3s ease-in-out infinite;

    filter: brightness(1.1);

}

.base-connector {

    position: absolute;

    left: 50%;

    width: 90px;

    height: 3px;

    background: linear-gradient(90deg, 

        rgba(255, 0, 102, 0.8), 

        rgba(255, 255, 255, 0.3) 50%,

        rgba(0, 183, 255, 0.8)

    );

    transform: translateX(-50%);

    box-shadow: 0 0 8px rgba(0,0,0,0.15);

}

@keyframes rotate {

    0% { transform: rotateY(0deg) translateZ(20px); }

    100% { transform: rotateY(360deg) translateZ(20px); }

}

@keyframes pulse {

    0% { transform: scale(1); opacity: 0.9; filter: brightness(1.1); }

    50% { transform: scale(1.15); opacity: 1; filter: brightness(1.3); }

    100% { transform: scale(1); opacity: 0.9; filter: brightness(1.1); }

}

/* DNAnalyzer - Main Stylesheet

 * Global styles for all pages

 */

/* Notification Banner Styling */

.notification-banner {

    background: linear-gradient(135deg, #FF6F00, #FF9100);

    color: var(--white);

    padding: 0.75rem 1rem 0.75rem 0.75rem;

    text-align: center;

    font-size: 1rem;

    font-weight: 600;

    position: fixed;

    top: 0;

    left: 0;

    width: 100%;

    z-index: var(--z-navbar);

    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);

    animation: notifPulse 3s infinite;

    transition: transform 0.3s ease-in-out;

    display: flex;

    flex-wrap: wrap;

    justify-content: center;

    align-items: center;

}

.notification-banner.hide-notification {

    transform: translateY(-100%);

}

.notification-banner.closed {

    display: none !important;

}

.notification-banner .notification-link {

    color: inherit;

    text-decoration: none;

    font-weight: 700;

    background-color: rgba(255, 255, 255, 0.2);

    padding: 0.25rem 0.5rem;

    border-radius: 4px;

    margin: 0 0.5rem;

    transition: all 0.3s ease;

    white-space: nowrap;

}

.notification-banner .notification-link:hover {

    color: #FFD700;

    text-shadow: 0 0 5px rgba(255, 215, 0, 0.5);

}

.notification-banner .notification-close {

    background: rgba(255, 255, 255, 0.1);

    border: none;

    color: var(--white);

    font-size: 1.25rem;

    line-height: 1;

    position: absolute;

    right: 0.5rem;

    top: 50%;

    transform: translateY(-50%);

    cursor: pointer;

    transition: all 0.3s ease;

    width: 24px;

    height: 24px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 50%;

    padding: 0;

}

.notification-banner .notification-close::before {

    content: "×";

    display: block;

    position: relative;

    top: -1px;

}

.notification-banner .notification-close:hover {

    background: rgba(255, 255, 255, 0.2);

    transform: translateY(-50%) rotate(90deg);

    color: #FFD700;

    text-shadow: 0 0 5px rgba(255, 215, 0, 0.5);

}

 :root {

    /* Brand colors from logo */

    --magenta: #ff0066;

    --blue: #00a4ef;

    --orange: #f48022;

    --white: #ffffff;

    --dark-bg: #001427;

    /* Additional UI colors */

    --dark-blue: #051e3e;

    --light-blue: #2596be;

    --light-gray: #f5f5f7;

    --medium-gray: #86868b;

    --dark-gray: #333333;

    /* Functional colors */

    --success: #34c759;

    --warning: #ff9500;

    --error: #ff3b30;

    /* Typography */

    --font-heading: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;

    --font-body: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;

    --font-mono: 'IBM Plex Mono', monospace;

    /* Spacing */

    --space-xs: 0.25rem;

    --space-sm: 0.5rem;

    --space-md: 1rem;

    --space-lg: 1.5rem;

    --space-xl: 2rem;

    --space-xxl: 3rem;

    /* Border radius */

    --radius-sm: 4px;

    --radius-md: 8px;

    --radius-lg: 12px;

    --radius-xl: 20px;

    /* Shadows */

    --shadow-sm: 0 2px 5px rgba(0, 0, 0, 0.1);

    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.15);

    --shadow-lg: 0 8px 20px rgba(0, 0, 0, 0.2);

    /* Transitions */

    --transition-fast: 0.2s ease;

    --transition-normal: 0.3s ease;

    --transition-slow: 0.5s ease;

    /* Z-index layers */

    --z-tooltip: 100;

    --z-navbar: 200;

    --z-modal: 300;

  }

  /* Reset & Base Styles */

  *, 

  *::before, 

  *::after {

    box-sizing: border-box;

    margin: 0;

    padding: 0;

  }

  html {

    font-size: 16px;

    scroll-behavior: smooth;

  }

  body {

    font-family: var(--font-body);

    background-color: var(--dark-bg);

    color: var(--white);

    line-height: 1.6;

    overflow-x: hidden;

    min-height: 100vh;

    display: flex;

    flex-direction: column;

    -webkit-font-smoothing: antialiased;

    -moz-osx-font-smoothing: grayscale;

  }

  h1, h2, h3, h4, h5, h6 {

    font-family: var(--font-heading);

    line-height: 1.2;

    font-weight: 700;

    margin-bottom: var(--space-md);

  }

  h1 {

    font-size: 3.5rem;

    margin-bottom: var(--space-lg);

  }

  h2 {

    font-size: 2.5rem;

    margin-bottom: var(--space-lg);

  }

  h3 {

    font-size: 1.75rem;

  }

  h4 {

    font-size: 1.375rem;

  }

  p {

    margin-bottom: var(--space-md);

    color: rgba(255, 255, 255, 0.85);

  }

  a {

    color: var(--blue);

    text-decoration: none;

    transition: color var(--transition-fast);

  }

  a:hover {

    color: var(--light-blue);

  }

  img {

    max-width: 100%;

    height: auto;

  }

  button {

    font-family: var(--font-body);

    cursor: pointer;

  }

  code, pre {

    font-family: var(--font-mono);

  }

  ul, ol {

    padding-left: var(--space-lg);

    margin-bottom: var(--space-md);

  }

  /* Container */

  .container {

    width: 100%;

    max-width: 1200px;

    margin: 0 auto;

    padding: 0 var(--space-lg);

  }

  .container-sm {

    max-width: 800px;

  }

  .container-lg {

    max-width: 1400px;

  }

  /* Navbar */

  .navbar {

    position: fixed;

    top: var(--notification-height, 0);

    left: 0;

    right: 0;

    background: var(--dark-bg);

    border-bottom: 1px solid rgba(255, 255, 255, 0.08);

    z-index: var(--z-navbar);

    padding: var(--space-md) 0;

    transition: all var(--transition-normal), top 0.3s ease-in-out;

  }

  .navbar.scrolled {

    background: var(--dark-blue);

    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);

    padding: var(--space-sm) 0;

  }

  .navbar-container {

    display: flex;

    align-items: center;

    justify-content: space-between;

  }

  .logo {

    display: flex;

    align-items: center;

  }

  .logo img {

    height: 36px;

    margin-right: var(--space-sm);

  }

  .logo-text {

    font-size: 1.25rem;

    font-weight: 700;

    color: var(--white);

  }

  .nav-links {

    display: flex;

    align-items: center;

    list-style: none;

    margin: 0;

    padding: 0;

  }

  .nav-links li {

    margin: 0 var(--space-md);

  }

  .nav-links a {

    color: var(--white);

    font-weight: 500;

    position: relative;

    padding: var(--space-xs) 0;

  }

  .nav-links a::after {

    content: '';

    position: absolute;

    width: 0;

    height: 2px;

    bottom: 0;

    left: 0;

    background: linear-gradient(90deg, var(--magenta), var(--blue));

    transition: width var(--transition-normal);

  }

  .nav-links a:hover::after,

  .nav-links a.active::after {

    width: 100%;

  }

  .nav-buttons {

    display: flex;

    align-items: center;

  }

  .mobile-toggle {

    display: none;

    background: none;

    border: none;

    color: var(--white);

    font-size: 1.5rem;

  }

  /* Buttons */

  .btn {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    padding: 0.75rem 1.5rem;

    border-radius: var(--radius-md);

    font-weight: 600;

    transition: all var(--transition-fast);

    border: none;

    text-align: center;

    cursor: pointer;

  }

  .btn-primary {

    background: linear-gradient(135deg, #FF7B00, #FFB347);

    color: var(--white);

  }

  .btn-primary:hover {

    transform: translateY(-2px);

    box-shadow: 0 5px 15px rgba(0, 164, 239, 0.4);

    color: var(--white);

  }

  .btn-secondary {

    background: rgba(255, 255, 255, 0.1);

    color: var(--white);

    border: 1px solid rgba(255, 255, 255, 0.2);

  }

  .btn-secondary:hover {

    background: rgba(255, 255, 255, 0.15);

    transform: translateY(-2px);

    color: var(--white);

  }

  .btn-sm {

    padding: 0.5rem 1rem;

    font-size: 0.875rem;

  }

  .btn-lg {

    padding: 1rem 2rem;

    font-size: 1.125rem;

  }

  .btn-icon {

    margin-right: var(--space-xs);

  }

  .btn-github {

    background: #24292e;

    color: var(--white);

  }

  .btn-github:hover {

    background: #2c3440;

    color: var(--white);

  }

  .btn-discord {

    background: #5865F2;

    color: var(--white);

  }

  .btn-discord:hover {

    background: #4752c4;

    color: var(--white);

  }

  /* Hero section */

  .hero {

    padding: 160px 0 100px;

    position: relative;

    overflow: hidden;

  }

  .hero-content {

    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: var(--space-xxl);

    align-items: center;

  }

  .hero-headings {

    position: relative;

    z-index: 2;

  }

  .hero h1 {

    margin-bottom: var(--space-md);

    letter-spacing: -0.02em;

    line-height: 1.1;

  }

  .hero h1 span {

    background: linear-gradient(135deg, var(--magenta), var(--blue));

    -webkit-background-clip: text;

    background-clip: text;

    -webkit-text-fill-color: transparent;

  }

  .hero-subtitle {

    font-size: 1.25rem;

    margin-bottom: var(--space-xl);

    color: rgba(255, 255, 255, 0.85);

    max-width: 500px;

  }

  .hero-buttons {

    display: flex;

    gap: var(--space-md);

    margin-bottom: var(--space-xl);

  }

  .hero-animation {

    position: relative;

    width: 100%;

    height: 500px;

    display: flex;

    align-items: center;

    justify-content: center;

  }

  /* DNA Helix Animation */

  .dna-helix {

    position: relative;

    width: 100%;

    height: 100%;

    transform-style: preserve-3d;

    perspective: 1200px;

  }

  .base-pair {

    position: absolute;

    width: 100%;

    height: 30px;

    display: flex;

    justify-content: center;

    align-items: center;

    animation: rotate3D 12s linear infinite;

  }

  @keyframes rotate3D {

    0% { transform: rotateY(0deg); }

    100% { transform: rotateY(360deg); }

  }

  .base {

    width: 35px;

    height: 35px;

    border-radius: 50%;

    display: flex;

    align-items: center;

    justify-content: center;

    font-weight: bold;

    color: white;

    position: absolute;

    box-shadow: 0 0 20px rgba(0, 0, 0, 0.3);

  }

  .left-base {

    background: var(--magenta);

    left: calc(50% - 120px);

    animation: moveLeft 6s ease-in-out infinite;

  }

  .right-base {

    background: var(--blue);

    right: calc(50% - 120px);

    animation: moveRight 6s ease-in-out infinite;

  }

  .base-connector {

    width: 200px;

    height: 3px;

    background: linear-gradient(90deg, var(--magenta), var(--blue));

    position: absolute;

    animation: stretch 6s ease-in-out infinite;

    box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);

  }

  @keyframes moveLeft {

    0%, 100% { transform: translateX(-12px); }

    50% { transform: translateX(12px); }

  }

  @keyframes moveRight {

    0%, 100% { transform: translateX(12px); }

    50% { transform: translateX(-12px); }

  }

  @keyframes stretch {

    0%, 100% { width: 200px; }

    50% { width: 220px; }

  }

  /* Section styling */

  .section {

    padding: var(--space-xxl) 0;

    position: relative;

  }

  .section-title {

    text-align: center;

    margin-bottom: var(--space-xxl);

  }

  .section-title h2 {

    margin-bottom: var(--space-md);

  }

  .section-title p {

    max-width: 700px;

    margin: 0 auto;

    font-size: 1.1rem;

  }

  .section-bg-dark {

    background-color: var(--dark-blue);

  }

  .section-bg-gradient {

    background: linear-gradient(135deg, rgba(5, 30, 62, 0.7), rgba(0, 20, 39, 0.7));

  }

  /* Cards */

  .card {

    background: rgba(255, 255, 255, 0.05);

    border-radius: var(--radius-lg);

    padding: var(--space-xl);

    transition: all var(--transition-normal);

    border: 1px solid rgba(255, 255, 255, 0.1);

  }

  .card:hover {

    transform: translateY(-5px);

    background: rgba(255, 255, 255, 0.08);

    box-shadow: var(--shadow-md);

    border-color: rgba(255, 255, 255, 0.15);

  }

  .card-title {

    font-size: 1.3rem;

    margin-bottom: var(--space-md);

  }

  .card-icon {

    width: 60px;

    height: 60px;

    background: linear-gradient(135deg, var(--magenta), var(--blue));

    border-radius: var(--radius-md);

    display: flex;

    align-items: center;

    justify-content: center;

    font-size: 1.5rem;

    color: var(--white);

    margin-bottom: var(--space-md);

  }

  .card-grid {

    display: grid;

    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));

    gap: var(--space-xl);

  }

  /* Feature cards */

  .feature-card {

    display: flex;

    align-items: flex-start;

    gap: var(--space-lg);

    padding: var(--space-xl);

    background: rgba(255, 255, 255, 0.05);

    border-radius: var(--radius-lg);

    transition: all var(--transition-normal);

    border: 1px solid rgba(255, 255, 255, 0.1);

    margin-bottom: var(--space-xl);

  }

  .feature-card:hover {

    transform: translateY(-5px);

    background: rgba(255, 255, 255, 0.08);

    box-shadow: var(--shadow-md);

    border-color: rgba(255, 255, 255, 0.15);

  }

  .feature-icon {

    min-width: 60px;

    height: 60px;

    border-radius: var(--radius-md);

    display: flex;

    align-items: center;

    justify-content: center;

    font-size: 1.5rem;

  }

  .feature-icon-blue {

    background: rgba(0, 164, 239, 0.15);

    color: var(--blue);

    border: 1px solid rgba(0, 164, 239, 0.3);

  }

  .feature-icon-magenta {

    background: rgba(255, 0, 102, 0.15);

    color: var(--magenta);

    border: 1px solid rgba(255, 0, 102, 0.3);

  }

  .feature-icon-orange {

    background: rgba(244, 128, 34, 0.15);

    color: var(--orange);

    border: 1px solid rgba(244, 128, 34, 0.3);

  }

  .feature-content h3 {

    margin-bottom: var(--space-sm);

  }

  /* Stats */

  .stats-section {

    padding: var(--space-xxl) 0;

    text-align: center;

    position: relative;

    background: linear-gradient(135deg, rgba(5, 30, 62, 0.7), rgba(0, 20, 39, 0.7));

    border-top: 1px solid rgba(255, 255, 255, 0.05);

    border-bottom: 1px solid rgba(255, 255, 255, 0.05);

  }

  .stats-grid {

    display: grid;

    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));

    gap: var(--space-xl);

    text-align: center;

    max-width: 1000px;

    margin: 0 auto;

  }

  .stat-item {

    padding: var(--space-md);

  }

  .stat-number {

    font-size: 3rem;

    font-weight: 700;

    margin-bottom: var(--space-xs);

    background: linear-gradient(135deg, var(--magenta), var(--blue));

    -webkit-background-clip: text;

    background-clip: text;

    -webkit-text-fill-color: transparent;

  }

  .stat-label {

    color: rgba(255, 255, 255, 0.8);

    font-size: 1rem;

    font-weight: 500;

  }

  /* Steps */

  .steps-container {

    counter-reset: step;

    position: relative;

  }

  .step-item {

    position: relative;

    padding-left: 70px;

    margin-bottom: var(--space-xl);

  }

  .step-item::before {

    counter-increment: step;

    content: counter(step);

    position: absolute;

    left: 0;

    top: 0;

    width: 50px;

    height: 50px;

    background: linear-gradient(135deg, var(--magenta), var(--blue));

    border-radius: 50%;

    display: flex;

    align-items: center;

    justify-content: center;

    font-weight: 700;

    font-size: 1.25rem;

    color: var(--white);

  }

  .step-item:not(:last-child)::after {

    content: '';

    position: absolute;

    left: 25px;

    top: 50px;

    bottom: -40px;

    width: 2px;

    background: linear-gradient(to bottom, var(--blue), transparent);

  }

  .step-content h3 {

    margin-bottom: var(--space-sm);

  }

  /* Footer */

  .footer {

    background: var(--dark-blue);

    padding: var(--space-xxl) 0 var(--space-md);

    border-top: 1px solid rgba(255, 255, 255, 0.1);

  }

  .footer-grid {

    display: grid;

    grid-template-columns: 2fr 1fr 1fr 1fr;

    gap: var(--space-xl);

  }

  .footer-brand {

    display: flex;

    flex-direction: column;

  }

  .footer-brand img {

    height: 40px;

    margin-bottom: var(--space-md);

  }

  .footer-brand p {

    margin-bottom: var(--space-lg);

    color: rgba(255, 255, 255, 0.7);

  }

  .footer-social {

    display: flex;

    gap: var(--space-md);

  }

  .social-link {

    width: 36px;

    height: 36px;

    border-radius: 50%;

    background: rgba(255, 255, 255, 0.1);

    display: flex;

    align-items: center;

    justify-content: center;

    color: var(--white);

    transition: all var(--transition-fast);

  }

  .social-link:hover {

    background: rgba(255, 255, 255, 0.2);

    transform: translateY(-2px);

    color: var(--white);

  }

  .footer-nav h4 {

    margin-bottom: var(--space-lg);

    color: var(--white);

    font-size: 1.1rem;

  }

  .footer-nav ul {

    list-style: none;

    padding: 0;

    margin: 0;

  }

  .footer-nav li {

    margin-bottom: var(--space-sm);

  }

  .footer-nav a {

    color: rgba(255, 255, 255, 0.7);

    transition: color var(--transition-fast);

  }

  .footer-nav a:hover {

    color: var(--white);

  }

  .footer-bottom {

    margin-top: var(--space-xxl);

    padding-top: var(--space-md);

    border-top: 1px solid rgba(255, 255, 255, 0.1);

    display: flex;

    justify-content: space-between;

    align-items: center;

    flex-wrap: wrap;

    gap: var(--space-md);

  }

  .footer-copyright {

    color: rgba(255, 255, 255, 0.6);

    font-size: 0.875rem;

  }

  .footer-links {

    display: flex;

    gap: var(--space-lg);

  }

  .footer-links a {

    color: rgba(255, 255, 255, 0.6);

    font-size: 0.875rem;

  }

  .footer-links a:hover {

    color: var(--white);

  }

  /* Background effects */

  .bg-gradient {

    position: absolute;

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

    overflow: hidden;

    z-index: -1;

  }

  .bg-blob {

    position: absolute;

    border-radius: 50%;

    filter: blur(60px);

    opacity: 0.5;

  }

  .bg-blob-1 {

    top: -200px;

    right: -100px;

    width: 600px;

    height: 600px;

    background: linear-gradient(135deg, rgba(255, 0, 102, 0.2), rgba(0, 0, 0, 0));

    animation: float 20s ease-in-out infinite alternate;

  }

  .bg-blob-2 {

    bottom: -150px;

    left: -100px;

    width: 500px;

    height: 500px;

    background: linear-gradient(135deg, rgba(0, 164, 239, 0.2), rgba(0, 0, 0, 0));

    animation: float 15s ease-in-out infinite alternate-reverse;

  }

  @keyframes float {

    0% { transform: translate(0, 0) rotate(0deg); }

    100% { transform: translate(40px, 40px) rotate(15deg); }

  }

  /* Utilities */

  .text-center {

    text-align: center;

  }

  .mb-sm {

    margin-bottom: var(--space-sm);

  }

  .mb-md {

    margin-bottom: var(--space-md);

  }

  .mb-lg {

    margin-bottom: var(--space-lg);

  }

  .mb-xl {

    margin-bottom: var(--space-xl);

  }

  .mt-sm {

    margin-top: var(--space-sm);

  }

  .mt-md {

    margin-top: var(--space-md);

  }

  .mt-lg {

    margin-top: var(--space-lg);

  }

  .mt-xl {

    margin-top: var(--space-xl);

  }

  .gradient-text {

    background: linear-gradient(135deg, var(--magenta), var(--blue));

    -webkit-background-clip: text;

    background-clip: text;

    -webkit-text-fill-color: transparent;

  }

  /* Responsive styles */

  @media screen and (max-width: 1024px) {

    h1 {

      font-size: 3rem;

    }

    h2 {

      font-size: 2.25rem;

    }

    .hero-content {

      grid-template-columns: 1fr;

      text-align: center;

    }

    .hero-subtitle {

      margin-left: auto;

      margin-right: auto;

    }

    .hero-buttons {

      justify-content: center;

    }

    .hero-animation {

      margin-top: var(--space-xl);

    }

    .footer-grid {

      grid-template-columns: 1fr 1fr;

      gap: var(--space-xl) var(--space-xxl);

    }

  }

  @media screen and (max-width: 768px) {

    h1 {

      font-size: 2.5rem;

    }

    h2 {

      font-size: 2rem;

    }

    .navbar-container {

      position: relative;

    }

    .nav-links {

      position: absolute;

      top: 100%;

      left: 0;

      right: 0;

      flex-direction: column;

      background: var(--dark-bg);

      padding: var(--space-lg);

      transform: translateY(-100%);

      opacity: 0;

      visibility: hidden;

      transition: all var(--transition-normal);

      border-bottom: 1px solid rgba(255, 255, 255, 0.1);

    }

    .nav-links.active {

      transform: translateY(0);

      opacity: 1;

      visibility: visible;

    }

    .nav-links li {

      margin: var(--space-sm) 0;

    }

    .mobile-toggle {

      display: block;

    }

    .hero-buttons {

      flex-direction: column;

      width: 100%;

      max-width: 300px;

      margin-left: auto;

      margin-right: auto;

    }

    .feature-card {

      flex-direction: column;

    }

    .footer-grid {

      grid-template-columns: 1fr;

      gap: var(--space-xl);

    }

    .footer-bottom {

      flex-direction: column;

      align-items: center;

      text-align: center;

    }

  }

  @media screen and (max-width: 480px) {

    .container {

      padding: 0 var(--space-md);

    }

    h1 {

      font-size: 2rem;

    }

    h2 {

      font-size: 1.75rem;

    }

    .stats-grid {

      grid-template-columns: 1fr;

    }

  }

  @media screen and (max-width: 768px) {

    .notification-banner {

      padding: 0.5rem 2rem 0.5rem 0.5rem;

      font-size: 0.9rem;

    }

    .notification-banner span {

      display: inline;

    }

    .notification-banner .notification-link {

      margin: 0 0.25rem;