@font-face {
    font-family: Lovelo2;
    src: url(../font/cruyffsans-medium.otf);
  }
  @font-face {
    font-family: Lovelo;
    src: url(../font/Lovelo.html\ Black.otf);
  }
    /* Global reset and basic styling */
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        .usernecolor {
            color: #ffff00;
          }
          .highlight {
            color: #00ccff; /* Change 'red' to any color you want */
          }
          
        body {
            text-transform: uppercase;
            font-family: Lovelo;
            background-image: url(../img/bc.jpg);
            color: #ffffff;
            display: flex;
            justify-content: center;
            align-items: center;
              /* Full height */
            height: 100%;

              /* Center and scale the image nicely */
            background-position: center;
            background-repeat: no-repeat;
            background-size: cover;
            height: 100vh;
            margin: 0;
            padding: 0;
        }
        
        /* Container styles */
        .container {
            max-width: 90%;
            width: 400px;
            padding: 20px;
            background-color: #000095;
            border-radius: 10px;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
            text-align: center;
            position: relative;
            overflow: hidden;
            animation: containerFadeIn 0.6s ease-out forwards;
        }
        
        @keyframes containerFadeIn {
            from {
                opacity: 0;
                transform: translateY(-20px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }
        
        /* Header styles */
        h1 {
            color: #ffff00;
            margin-bottom: 20px;
            font-size: 24px;
        }
        
        /* Form styles */
        form {
            display: flex;
            flex-direction: column;
            align-items: center;
            margin-bottom: 20px;
        }
        
        input, button {
            padding: 12px;
            margin: 8px 0;
            border: none;
            border-radius: 5px;
            font-size: 16px;
            width: 100%;
            background-color: #333;
            text-transform: uppercase;
            font-family: Lovelo;
            color: #fff;
            box-sizing: border-box;
            outline: none;
        }
        
        input::placeholder {
            color: #666;
        }
        
        button {
            background-color: #ffff00;
            color: #000000;
            cursor: pointer;
            transition: background-color 0.3s ease;
            text-transform: uppercase;
            font-family: Lovelo2;
        }
        
        button:hover {
            background-color: #ffffff;
        }
        
        /* Data display styles */
        .data {
            text-align: left;
            animation: fadeIn 0.6s ease-out forwards;
            margin-top: 20px;
            padding-top: 20px;
        }
        
        .data h2 {
            color: #00ccff;
            margin-bottom: 10px;
            font-size: 20px;
        }
        
        .data p {
            margin-bottom: 8px;
            font-size: 16px;
        }
        
        /* Yes/No buttons */
        .yes-no-buttons {
            display: flex;
            justify-content: center;
            text-transform: uppercase;
            font-family: Lovelo2;
            margin-top: 20px;
        }
        
        .yes-no-buttons button {
            padding: 12px 24px;
            margin: 0 10px;
            border: 2px solid transparent;
            border-radius: 5px;
            font-size: 16px;
            cursor: pointer;
            text-transform: uppercase;
            font-family: Lovelo2;
            transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
            outline: none;
        }
        
        .yes-no-buttons button.yes {
            background-color: #00cc00;
            color: #fff;
        }
        
        .yes-no-buttons button.no {
            background-color: #cc0000;
            color: #fff;
        }
        
        .yes-no-buttons button:hover {
            opacity: 0.8;
        }
        
        .yes-no-buttons button:focus {
            border-color: #ffffff;
        }
        
        /* Error message styles */
        .error {
            color: #ffff00;
            animation: fadeIn 0.6s ease-out forwards;
        }
        
        /* Loading spinner styles */
        .loading {
            display: none;
            margin-top: 20px;
            text-align: center;
        }
        
        .spinner {

            animation: spin 1s linear infinite;
            margin: auto;
                width: 56px;
                height: 56px;
                border-radius: 50%;
                border: 9px solid;
                border-color: #949494;
                border-right-color: #ffff00;
                animation: spinner-d3wgkg 1s infinite linear;
             }
             
             @keyframes spinner-d3wgkg {
                to {
                   transform: rotate(1turn);
                }
             }
    
        
        .loading-text {
            margin-top: 10px;
            font-size: 18px;
        }
        
        @keyframes spin {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
        }
        
        /* Responsive adjustments */
        @media (max-width: 480px) {
            .container {
                width: 90%;
                max-width: 100%;
            }
        
            h1 {
                font-size: 20px;
            }
        
            .data h2 {
                font-size: 18px;
                
            }
      
            .data p {
                font-size: 14px;
                padding: 10px 15px;
                background: rgba(0, 0, 0, 0.65);
                border: 1px solid rgba(255, 255, 255, 0.5);
                border-radius: 4px;
                font-size: 14px;
                color: white;
            }
        
            .yes-no-buttons button {
                font-size: 14px;
                padding: 10px 20px;
                text-transform: uppercase;
                font-family: Lovelo2;
            }
        }
        
        /* Diamond option styles */
        .diamonds-selection {
            margin-top: 20px;
            display: grid;
            gap: 10px;
        }
        
        .diamond-option {
            position: relative;
            width: 100%; /* Full width */
        }
        
        .diamond-option input[type="radio"] {
            display: none;
        }
        
        .diamond-option label {
            display: flex;
            justify-content: center;
            align-items: center;
            width: 250px;
            height: 60px; /* Fixed height */
            border: 1px solid #b9c4c9;; /* Red border */
            background-color: #ffffff; /* Red background */
            border-radius: 2px; /* Rounded corners */
            cursor: pointer;
            transition: border-color 0.3s ease, background-color 0.3s ease; /* Added transition for background-color */
        }
        
        .diamond-option img {
            width: 30px; 
            text-align: left;/* 60% of the label width */
            height: auto; /* Maintain aspect ratio */
            border-radius: 2px; /* Rounded corners */
        }
        
        .diamond-option input[type="radio"]:checked + label {
            border-color: 1px solid #ffffff; /* Green border when selected */
            background-color: #00ff6a; /* Green background when selected */
        }
        
        /* Adjust radio button size */
        .diamond-option input[type="radio"] {
            -webkit-appearance: none;
            -moz-appearance: none;
            appearance: none;
          
            border: 2px solid #ffff00; /* Red border */
            border-radius: 50%; /* Make round */
            outline: none;
            transition: border-color 0.3s ease;
        }
        
        .diamond-option input[type="radio"]:checked {
            border-color: #00cc00; /* Green border when selected */
        }
        
        /* Send button styles */
        .send-button {
            margin-top: 20px;
            padding: 12px 24px;
            text-transform: uppercase;
            font-family: Lovelo2;
            background-color: #ffff00;;
            color: #000000;
            border: none;
            border-radius: 5px;
            font-size: 16px;
            cursor: pointer;
            transition: background-color 0.3s ease;
        }
        
        .send-button:hover {
            background-color: #009900;
        }
        
        /* Center text styles */
        .center-text {
            text-align: center;
        }
        
        /* Second loading spinner styles */
        .second-loading {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            margin-top: 20px;
            text-align: center;
        }
        
        .second-spinner {

            animation: secondSpin 1s linear infinite;

                width: 56px;
                height: 56px;
                display: grid;
                border: 4.5px solid #0000;
                border-radius: 50%;
                border-color: #dbdcef #0000;
                animation: second-spinner-e04l1k 1s infinite linear;
             }
             
             .second-spinner::before,
             .second-spinner::after {
                content: "";
                grid-area: 1/1;
                margin: 2.2px;
                border: inherit;
                border-radius: 50%;
             }
             
             .second-spinner::before {
                border-color: #ffff00 #0000;
                animation: inherit;
                animation-duration: 0.5s;
                animation-direction: reverse;
             }
             
             .second-spinner::after {
                margin: 8.9px;
             }
             
             @keyframes second-spinner-e04l1k {
                100% {
                   transform: rotate(1turn);
                }
             }

        @keyframes secondSpin {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
        }
        
        .second-loading .loading-text {
            margin-top: 10px;
            font-size: 18px;
            color: #ffff00; /* Matching text color for second spinner */
        }
        
            
        
        .header-container {
            position: relative;
            margin-bottom: 20px;
            border-radius: 8px;
            overflow: hidden;
        }
        
        .header-background {
            width: 100%;
            height: 120px;
            object-fit: cover;
        }
        
        .header-content {
            position: absolute;
            top: 0;
            left: 0;
            display: flex;
            align-items: center;
            padding: 15px;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.4);
            border-radius: 8px;
        }
        
        .header-icon {
            height: 72px;
            width: 72px;
            border-radius: 8px;
        }
        
        .header-text {
            margin-left: 15px;
        }
        
        .header-title {
            font-size: 24px;
            font-weight: bold;
            color: white;
            margin-bottom: 5px;
        }
        
        .header-subtitle {
            display: flex;
            align-items: center;
            padding: 5px 10px;
            background: rgba(0, 0, 0, 0.65);
            border: 1px solid rgba(255, 255, 255, 0.5);
            border-radius: 4px;
            font-size: 14px;
            color: white;
        }
        
        .header-icon-svg {
            margin-right: 5px;
        }