body {
            font-family: Arial, sans-serif;
            font-size: 16px;
            text-align: center;
            margin: 20px auto;
            color: #606F90;
        }

        html {
            min-height: 100vh;
            box-shadow: inset 0px -4em 6em 10px rgba(39, 133, 201, 0.3);
        }

        .logo-header {
            margin: 20px auto;
            display: flex;
            flex-direction: row;
            align-items: center;
            justify-content: center;
            width: fit-content;
        }
        .logo-header img {
            width: 30px;
            margin-right: 10px;
            height: auto;
            max-width: 80px;
            box-shadow: 0px 5px 5px rgba(39, 133, 201, 0.9);
        }


        .input-container {
            margin: 20px auto;
            display: flex;
            flex-direction: column;
            align-items: center;
            background: rgba(39, 133, 201, 0.15);
            border: 1.5px solid rgba(39, 133, 201, 0.5);
            border-radius: 5px;
            width: 345px;
            max-width: 90%;
            padding: 20px;

        }
        .input-container label {
            margin: 5px 0;
        }

        .hover-zoom {
            border-radius: 50px;
            box-shadow: rgba(0, 0, 0, 0.9) 0px 4px 8px;
            display: flex;
            transition: transform 0.3s ease; /* Smooth zoom effect */
        }

        /* Hover effect */
        .hover-zoom:hover {
            transform: scale(1.1); /* Zoom in on hover */
        }

            .btn {
                display: inline-block;
                margin: 10px;
                padding: 0.7em 2em;
                background: rgba(39, 133, 201, 0.15);
                color: #006798;
                border: 1.5px solid rgba(39, 133, 201, 0.5);
                border-radius: 3px;
                font-size: 16px;
                text-decoration: none;
                transition: background-color 0.3s ease, color 0.3s ease, box-shadow 0.3s ease;
                cursor: pointer;
                box-shadow: inset 0 -1em 1em rgba(39, 133, 201, 0.3);
                font-weight: bold;
            }

            .btn:hover {
                background: rgba(39, 133, 201, 0.3);
                color: #004e73;
                box-shadow: inset 0 -1em 1em rgba(39, 133, 201, 0.5);
                text-decoration: none;
            }

        #predictButton {
                display: inline-block;
                margin: 10px;
                padding: 0.7em 2em;
                background: rgba(39, 133, 201, 0.15);
                color: #006798;
                border: 1.5px solid rgba(39, 133, 201, 0.5);
                border-radius: 3px;
                font-size: 16px;
                text-decoration: none;
                transition: background-color 0.3s ease, color 0.3s ease, box-shadow 0.3s ease;
                cursor: pointer;
                box-shadow: inset 0 -1em 1em rgba(39, 133, 201, 0.3);
                font-weight: bold;
        }
        #predictButton:hover {
                background: rgba(39, 133, 201, 0.3);
                color: #004e73;
                box-shadow: inset 0 -1em 1em rgba(39, 133, 201, 0.5);
                text-decoration: none;
        }
        #predictionResult {
            margin-top: 20px;
            font-size: 1.2em;
            font-weight: bold;
        }
        #statusMessage {
            margin-bottom: 20px;
            font-size: 1.2em;
            color: red;
            font-weight: bold;
        }
        h3 {
            text-align: center;
            line-height: 150%;
        }

        .image-container {
            position: relative;
            display: inline-block;
            max-width: 100%;
            width: 100%;
        }
        .image-container img {
            width: 100%;
            height: auto;
            border-radius: 999px;
        }
        .overlay {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            cursor: pointer;
        }
        .dot {
            position: absolute;
            width: 8px;
            height: 8px;
            background-color: red;
            border-radius: 50%;
            pointer-events: none;
            display: none;
        }

        .linked-text-container {
            width: 90%;
            text-align: left;
            margin: 30px auto;
            font-size: 16px;
            max-width: 600px; 
        }

        .linked {
            margin: 30px auto;
            font-size: 90%;
            max-width: 600px; 
            color: #a1aabf;
        }

        .about {
            width: 90%;
            text-align: left;
            margin: 30px auto;
            font-size: 16px;
            max-width: 600px; 
        }

        .about1 {
            width: 90%;
            text-align: left;
            margin: 30px auto;
            font-size: 14px;
            max-width: 600px;
        }
 a {
    color: rgb(0, 103, 152); /* Use rgb for opaque color */
    text-decoration: underline; /* Optional: Remove underline */
    transition: color 0.3s ease; /* Smooth color transition */
}

 a:hover {
    color: rgba(0, 103, 152, 0.5); /* Semi-transparent on hover */
}

 a:active {
    color: rgb(0, 103, 152); /* Maintain opaque color when active */
}

 a:focus {
    outline: 2px solid rgba(0, 103, 152, 0.5);
    outline-offset: 2px;
}

    #walldon {
      padding: 5px;
      border-radius: 8px;
      border: 1px solid rgba(39, 133, 201, 0.3);
      background-color: rgba(39, 133, 201, 0.15);
      max-width: 92%;
      margin: 50px auto;
      margin-top: 0px;
      width: 360px;
      color: #606F90;
    }
#wall1 {
    width: 95%;

}

#wall1 button {
                display: inline-block;
                padding: 8px;
                background: rgba(39, 133, 201, 0.15);
                color: #006798;
                border: 1.5px solid rgba(39, 133, 201, 0.5);
                border-radius: 3px;
                font-size: 16px;
                text-decoration: none;
                transition: background-color 0.3s ease, color 0.3s ease, box-shadow 0.3s ease;
                cursor: pointer;
                box-shadow: inset 0 -1em 1em rgba(39, 133, 201, 0.3);
                font-weight: bold;
                width: 50%;
}
#wall1 button:hover {
                background: rgba(39, 133, 201, 0.3);
                color: #004e73;
                box-shadow: inset 0 -1em 1em rgba(39, 133, 201, 0.5);
                text-decoration: none;
}

button#wallet-button {
                width: 90%;

}

    #donation-container h3{
      margin-bottom: 0px;
    }
    #token-container h3{
      margin-bottom: 10px;
    }

#label-donate {
    align-items: center;
}
#swaptop {
    align-items: center;
}  



        .footer {
            margin-top: 40px;
            font-size: 12px;
            color: #a1aabf;
            width: 98%;
        }

        @media (max-width: 799px) {
            .image-container {
                width: 96%;
            }
            .logo-header img {
                max-width: 80px;
            }

            .dot {
                width: 5px;
                height: 5px;
            }

        }

        @media (min-width: 1200px) {
            .image-container {
                max-width: 800px;
            }
        }


    .donate {
      margin: 20px auto;
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 105%;
    }

  .mlhs-ad { width: 92%; max-width: 800px; margin: 18px auto; }