﻿body {    font-family: Arial, sans-serif;    background-color: rgb(252,252,252);}
.container {    display: block;    position: relative;    max-width: 420px;height:245px;    margin: 80px auto;    padding: 20px;border: 1px solid #ddd;    border-radius: 10px;    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);    box-sizing: border-box;}
.container::before {        content: "";        position: absolute;        top: 0;        left: 0;        width: 100%;        height: 100%;        background-image: url("./HotPass.png");        background-size: contain;        background-repeat: no-repeat;        background-position: 50% 50%;        opacity: 0.1;        z-index: -1;    }
#searchInput {    width: calc(100% - 20px);background:transparent;   padding: 10px;    font-size: 16px;    border: 1px solid #ccc;    border-radius: 5px;    margin-bottom: 15px;    margin-top: 25px;    text-align: center;    outline: 0px;}
#searchInput:focus {        border-color: saddlebrown;    }
#searchBtn {    width: 100% ;   padding: 10px;    font-size: 16px;    background-color: saddlebrown;    color: #fff;    border: none;    border-radius: 5px;    cursor: pointer;    margin-bottom: 15px;margin-top:15px;}
#result {    margin-top: 5px;    font-size: 18px;    font-weight: bold;}
.heading {    display: block;    text-align: left;    font-weight: bold;    font-size: 21px;    color: saddlebrown;    padding: 5px;}
.heading2 {    display: block;    text-align: left;    font-weight: bold;    font-size: 14px;    color: black;}
.headingg {    display: block;    text-align: left;    font-weight: bold;    font-size: 14px;    color: rgb(125 157 66);}
.heading3 {    display: block;    text-align: left;    font-weight: normal;    font-size: 13px;    color: black;}
.heading2, .heading3, .headingg {    margin: 5px;}

@media (max-width: 768px) {    .container {        margin: 40px auto;        padding: 10px;    }}
