body {

    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;

    background-color: #f2f5f7;

    color: #333;

    margin: 0;

}



header {

    background-color: #0f4c81;

    color: white;

    padding: 20px;

    text-align: center;

}



header h1 {

    margin: 0;

    font-size: 2em;

}



header p {

    font-size: 1em;

}



main {

    padding: 20px;

}



.card-container {

    display: grid;

    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));

    gap: 20px;

}



.card {

    background-color: white;

    border-left: 5px solid #0f4c81;

    padding: 15px;

    text-decoration: none;

    color: #333;

    border-radius: 8px;

    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);

    transition: transform 0.2s, box-shadow 0.2s;

}



.card:hover {

    transform: translateY(-5px);

    box-shadow: 0 8px 12px rgba(0, 0, 0, 0.2);

}



.card h2 {

    margin-top: 0;

    color: #0f4c81;

}



footer {

    text-align: center;

    padding: 15px;

    font-size: 0.9em;

    background-color: #0f4c81;

    color: white;

}



.tool {

    background-color: #ffffff;

    padding: 20px;

    border-radius: 8px;

    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.05);

    max-width: 400px;

    margin: 20px auto;

    text-align: center;

}



.input-group {

    margin: 10px 0;

    width: 100%;

    max-width: 300px;

    margin-left: auto;

    margin-right: auto;

}



.input-group input,

.input-group select {

    width: 100%;

    padding: 10px 12px;

    border: 1.5px solid #ccc;

    border-radius: 6px;

    font-size: 1em;

    background-color: #f9f9f9;

    transition: all 0.3s ease;

    box-sizing: border-box;

}



.input-group input:focus,

.input-group select:focus {

    border-color: #0f4c81;

    box-shadow: 0 0 6px rgba(15, 76, 129, 0.4);

    background-color: #fff;

    outline: none;

}



.input-group-icon {

    position: relative;

    margin: 10px auto;

    width: 100%;

    max-width: 300px;

}



.input-group-icon .icon {

    position: absolute;

    left: 12px;

    top: 50%;

    transform: translateY(-50%);

    font-size: 1.2em;

    color: #0f4c81;

    display: block;

    z-index: 1;

}



.input-group-icon input {

    padding-left: 40px;

    width: 100%;

    padding: 10px 12px;

    padding-left: 40px;

    border: 1.5px solid #ccc;

    border-radius: 6px;

    font-size: 1em;

    background-color: #f9f9f9;

    transition: all 0.3s ease;

    box-sizing: border-box;

}



.input-group-icon input:focus {

    border-color: #0f4c81;

    box-shadow: 0 0 6px rgba(15, 76, 129, 0.4);

    background-color: #fff;

    outline: none;

}



button {

    background-color: #0f4c81;

    color: white;

    padding: 10px 20px;

    margin-top: 15px;

    border: none;

    border-radius: 6px;

    cursor: pointer;

    font-size: 1em;

    transition: all 0.3s ease;

}



button:hover {

    background-color: #09335a;

    transform: translateY(-2px);

    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);

}



.box-affiliato, .box-pubblicita {

    border: 1px solid #ccc;

    padding: 10px;

    margin-top: 15px;

    text-align: center;

    background: #f9f9f9;

    border-radius: 5px;

}



.box-affiliato ul {

    list-style: none;

    padding: 0;

}



.box-affiliato li {

    margin: 5px 0;

}



.box-affiliato a {

    color: #0f4c81;

    text-decoration: none;

}



.box-affiliato a:hover {

    text-decoration: underline;

}



.btn-home {

    display: inline-block;

    margin: 10px 0;

    padding: 5px 10px;

    background: #0f4c81;

    color: white;

    text-decoration: none;

    border-radius: 4px;

}



.btn-home:hover {

    background: #09335a;

}



@media (max-width: 600px) {

    .card-container {

        grid-template-columns: 1fr;

    }

    

    .tool {

        margin: 20px 15px;

    }

}