body{

    margin:0;

    padding:30px;

    background:#f2f2f2;

    font-family:Arial, Helvetica, sans-serif;

}

.container{

    max-width:900px;

    margin:auto;

}

h1{

    text-align:center;

    margin-bottom:5px;

    color:#222;

}

.subtitle{

    text-align:center;

    color:#666;

    margin-bottom:40px;

    font-size:18px;

}

.card{

    background:white;

    padding:25px;

    margin-bottom:30px;

    border-radius:10px;

    box-shadow:0px 3px 10px rgba(0,0,0,0.15);

}

h2{

    margin-top:0;

    color:#222;

    border-bottom:2px solid #e5e5e5;

    padding-bottom:10px;

}

h3{

    color:#333;

}

label{

    font-weight:bold;

    display:block;

    margin-bottom:6px;

}

select{

    width:180px;

    padding:8px;

    font-size:16px;

}

input{

    width:180px;

    padding:8px;

    font-size:16px;

}

button{

    padding:10px 18px;

    font-size:16px;

    cursor:pointer;

    border:none;

    border-radius:6px;

    background:#e8e8e8;

    transition:0.2s;

}

button:hover{

    background:#d7d7d7;

}

.resultBox{

    display:flex;

    align-items:center;

    justify-content:center;

    margin-top:25px;

    gap:20px;

}

#led{

    width:35px;

    height:35px;

    border-radius:50%;

    background:red;

    border:2px solid black;

}

#output{

    font-size:30px;

    font-weight:bold;

}

.answer{

    margin-top:25px;

    background:#fafafa;

    border:1px solid #dddddd;

    border-radius:8px;

    padding:15px;

}

.answer p{

    margin:10px 0;

    font-size:18px;

}

.info{

    margin-top:20px;

    background:#f9f9f9;

    border-left:5px solid #888;

    padding:15px;

}

.info p{

    margin:8px 0;

}

table{

    width:100%;

    border-collapse:collapse;

}

th{

    background:#ececec;

}

th,
td{

    border:1px solid #999;

    padding:10px;

    text-align:center;

}

footer{

    text-align:center;

    color:#666;

    margin-top:40px;

    margin-bottom:20px;

}

hr{

    margin-bottom:20px;

}

@media (max-width:700px){

    body{

        padding:15px;

    }

    .container{

        width:100%;

    }

    select{

        width:100%;

    }

    input{

        width:100%;

    }

    button{

        width:100%;

    }

    .resultBox{

        flex-direction:column;

    }

}