body {
            margin: 0;
            padding: 0;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            
        }
       h1{
	font-size: 1.3rem;
        margin: 5px;
}

/*----------background-color: #f0f0f0; --------- */ 
p {
    font-size: 14px;
    font-weight: bold;
       margin: 0px 0;
}
      #content {
        width: 300px;
	border: thin solid #FFF;   
	border-radius: 5px;
        padding: 7px;
 
        }
#content p {
    font-size: 12px;
    margin: 0px 0;
    text-align: left;
}
/*---------- --------- */ 
       .container {
            padding-right: 2px;
            padding-left: 2px;
            background: #33331a;
            color: aliceblue;
            border-radius: 10px;
            text-align: center;
        }


.input {
    width: 90%;
    height: 20px;
    font-size: 15px;
    margin-bottom: 10px;
}

ul {
    list-style-type: none;
    padding: 0;
}

ul li {
    display: inline-block; /* Ensures inline items wrap properly */
    margin: 5px;
    font-size: 16px;
    font-weight: bold;
    cursor: pointer;
    color: #FFF;
    text-shadow: 2px 2px 2px #000;
}

ul li:hover {
    transform: scale(1.05);
    color: #00ff00;
    transition: transform 0.2s ease, color 0.2s ease;
}

#content {
    max-width: 100%; /* Make sure it fits inside the container */
    color: aliceblue;
    margin: 10px auto;
    overflow-wrap: break-word; /* Handle long text properly */
    word-wrap: break-word; /* Older support for word wrapping */
    word-break: break-word; /* Additional support for breaking long words */
}
	/* Desktop screens */
        @media (min-width: 1024px) {
            body {
                height: auto;
            }
        }
	/* Mobile screens */
        @media (max-width: 1023px) {
            body {
                height: auto;
                padding-top: 10px;
                padding-bottom: 10px;
            }
        }

        .bounce {
            animation: bounceEffect 1s ease-in-out 3;
        }

        @keyframes bounceEffect {
            0% {
                transform: scale(1);
            }
            50% {
                transform: scale(1.2);
            }
            100% {
                transform: scale(1);
            }
        }
/*----------New--------- */ 
.page-intro{
    max-width:300px;
    margin:0 auto 20px auto;
    padding:6px 8px;
    background:#33331a;
    border:1px solid #dbe4ee;
    border-radius:12px;
    line-height:1.8;
    font-size:1rem;
    color:#fff;
}

.page-intro p{
    margin-bottom:12px;
}

.section-title{
    font-size:1.25rem;
    font-weight:700;
    margin:24px 0 12px 0;
    color:#fff;
}

.formula-box,
.example-box,
.related-box,
.faq-box{
    max-width:300px;
    margin:20px auto;
    padding:8px;
    border-radius:12px;
    background:#33331a;
    border:1px solid #dbe4ee;
    box-shadow:0 4px 14px rgba(15, 23, 42, 0.05);
}

.formula-box{
    border-left:4px solid #0f62fe;
}

.formula-box p,
.example-box p,
.related-box p,
.faq-box p{
    margin-bottom:10px;
    line-height:1.8;
    color:#fff;
}

.related-list{
    display:flex;
    flex-wrap:wrap;
    gap:12px;
    list-style:none;
    margin-left:0;
}

.related-list li{
    list-style:none;
}

.related-list a{
    display:inline-block;
    padding:10px 14px;
    border-radius:999px;
    text-decoration:none;
    background:#0f172a;
    color:#fff;
    font-weight:600;
    transition:all 0.2s ease;
}

.related-list a:hover{
    background:#f59e0b;
    color:#fff;
    text-decoration:none;
}
.result{
    margin:10px 0;
    font-weight:1000;
}
.note{
    font-size:0.95rem;
    color:#ffff00;
}