* {  
    box-sizing: border-box;
}  

body {  
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;  
    background-color: #f7f9fc;  
    color: #34495e;  
    margin: 0;  
    padding: 20px;  
    text-align: center;  
}  

#heading {  
    font-size: 2.5em;  
    margin-bottom: 30px;  
    color: #2980b9;  
    text-transform: uppercase;  
    letter-spacing: 1px;  
}  

form {  
    margin-bottom: 30px;  
}  

input[type="text"] {  
    padding: 12px 15px;  
    font-size: 1.1em;  
    width: 280px;  
    border: 2px solid #2980b9;  
    border-radius: 20px;  
    outline: none;  
    transition: border-color 0.3s;  
}  

input[type="text"]:focus {  
    border-color: #3498db; 
}  

button {  
    padding: 12px 20px;  
    font-size: 1.1em;  
    background-color: #2980b9;  
    color: white;  
    border: none;  
    border-radius: 20px;  
    cursor: pointer;  
    transition: background-color 0.3s, transform 0.2s;  
    margin-left: 10px;  
}  

button:hover {  
    background-color: #3498db;  
    transform: scale(1.05); 
}  

section {  
    padding: 20px;  
    border-radius: 20px;  
    background-color: white;  
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);  
    margin-top: 20px;  
    display: inline-block; 
}  

#errorMessage {  
    color: #e74c3c;  
    margin-bottom: 15px;  
}  

h2, h4, h5, h1 {  
    margin: 10px 0;  
}  

#img img {  
    max-width: 100px; 
    margin-top: 15px;  
}  

#text {  
    font-size: 1.2em;  
    margin-top: 10px;  
}  

#code {  
    font-size: 0.9em;  
    color: #7f8c8d;  
    margin-top: 5px;  
}
#cityName, #degreeCelcius{
    color:#2980b9;
}