:root {
    --color1: #2c3e50; /* Midnight Blue */
    --color2: #09622e; /* Dark Green */
}

footer {
    background-color: var(--color1);
    color: white;
    padding: 20px;
    min-height: 180px;
    box-sizing: border-box;
    width: 100%;
    border-top: 5px solid var(--color2);
    margin-top: 10px;
}

footer p {
    font-family: var(--roboto);
    color: #fff;
    margin-bottom: 10px;
    text-align: center;
    line-height: 1.5;
}

footer .date p {
    min-height: 1.5em; /* Reserves space for one line of text */
}


.social {
    text-align: center;
    margin: 20px 0;
    display: flex;
    justify-content: center;
    gap: 15px;
}

.social img {
    width: 40px;
    height: 40px;
    transition: transform 0.4s ease, opacity 0.3s ease;
}

.social a:hover img {
    transform: scale(1.1);
    opacity: 0.7;
}

@media only screen and (min-width: 768px) {
    footer {
        display: grid;
        grid-template-columns: 1fr auto 1fr;
        justify-items: center;
        align-items: center;
        gap: 20px;
        padding: 20px 10px;
    }
    .info {
        text-align: left;
    }
    .date {
        text-align: right;
    }
    .info p, .date p {
        text-align: inherit;
    }
    .social img {
        width: 48px;
        height: 48px;
    }
}