/* Reset some default styles */
body, h1, p, label {
    margin: 0;
    padding: 0;
}

body {
    font-family:'-apple-system', 'BlinkMacSystemFont', 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    background-color: #f2f2f2;
    background: rgb(163,171,214);
    background: linear-gradient(90deg, rgba(163,171,214,1) 0%, rgba(161,201,255,1) 44%, rgba(193,215,255,1) 88%);
}
.container {
    max-width: 400px;
    margin: 0 auto;
    margin-top: 60px;
    padding: 20px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    border-radius: 5px;
    text-align: center;
    transition: box-shadow 0.6s ease-in-out 0s;
}
.container:hover{
    box-shadow: 8px 8px 14px rgb(0, 0, 2);
    
}
h1 {
    color:rgb(5, 5, 27);
    font-size: 24px;
    margin-bottom: 20px;
}
h1:hover{
    transform: scale(1.03);
    transition: transform 1s ease-in 0s;
}

.input-container {
    margin: 10px 0;
    width: 100%;
}
.temp{
    width:95%;
}

label {
    color:rgb(5, 5, 27);
    display:inline;
    font-weight: bold;
}

select, input {
    width: 100%;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 5px;
    outline: none;
}

button {
    width: 100%;
    padding: 10px;
    background-color: #007BFF;
    color: #fff;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-weight: bold;
}

button:hover {
    background-color: #0056b3;
}

#result {
    color:rgb(5, 5, 27);
    font-weight: bold;
    font-size:25px;
    margin-top: 20px;
}