@import url('https://fonts.bunny.net/css?family=poppins:300,800|vt323:400');

   /** Inter-section style **/

   .sep {
      position: relative;
      height: 30vw;
      overflow: hidden;
      margin-bottom: -1px; /* fix litle space between inter-section & secition */
      margin-top: -1px;
   }

   .triangle {
      position: absolute;
      inset: 0;
   }
   
   /** intersection 1 **/

   .tri-top-primary-one {
      background: var(--bs-primary);
      clip-path: polygon(100% 0%, 0% 0%, 100% 100%);
      z-index: 1;
   }

   .tri-top-secondary-one {
      background: var(--bs-secondary);
      clip-path: polygon(100% 0%, 0% 0%, 100% 100%);
      z-index: 1;
   }

   .tri-bot-primary-one {
      background: var(--bs-primary);
      clip-path: polygon(0% 0%, 0% 100%, 100% 100%);
      z-index: 2;
   }

   .tri-bot-secondary-one {
      background: var(--bs-secondary);
      clip-path: polygon(0% 0%, 0% 100%, 100% 100%);
      z-index: 2;
   }
   
   /** intersection 2 **/

   .tri-top-primary-two {
      background: var(--bs-primary);
      clip-path: polygon(100% 0%, 0% 100%, 0% 0%);
      z-index: 1;
   }

   .tri-top-secondary-two {
      background: var(--bs-secondary);
      clip-path: polygon(100% 0%, 0% 100%, 0% 0%);
      z-index: 1;
   }

   .tri-bot-primary-two {
      background: var(--bs-primary);
      clip-path: polygon(100% 0%, 0% 100%, 100% 100%);
      z-index: 2;
   }

   .tri-bot-secondary-two {
      background: var(--bs-secondary);
      clip-path: polygon(100% 0%, 0% 100%, 100% 100%);
      z-index: 2;
   }

   #card-info-server {
      font-family: 'VT323', monospace;
      font-size: 20px;

   }

   #card-info-server span{
       font-family: var(--bs-font-sans-serif);
   }

   .form-control {
      width: auto;
      background-color: var(--bs-white);
      color: var(--bs-dark);
   }

   #server-name, #server-address {
      overflow: hidden;
      white-space: nowrap;
      border-right: 2px solid;
      width: 0;
   }

   #join-us-values {
      max-width: 160px; 
      border: 2px solid #FFD052;
   }

   #join-us-values {
    font-size: 0.88rem;
   }

   #join-us-values:hover {
      animation: shield-impact 0.3s ease;
      color: #0D8804;
      text-shadow: 0 0 8px rgba(13,136,4,0.7);
      transition: all 0.4s ease;
   }

   @keyframes shield-impact {
      0%   { transform: translateX(0); }
      25%  { transform: translateX(-4px); }
      50%  { transform: translateX(4px); }
      75%  { transform: translateX(-2px); }
      100% { transform: translateX(0); }
   }