@charset "UTF-8";

footer {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    height: 300px;
    margin: 0;
    background-color: var(--default-bg-color);
    box-shadow: 0px -5px 20px 5px #00000080;
    -webkit-box-shadow: 0px -5px 20px 5px #00000080;
}
#footerUpperBox {
    display: grid;
    grid-template-columns: 1fr 2px 1fr 2px 1fr;
    grid-template-rows: 1fr;
    margin: 40px 0;
    gap: 10px;
    width: clamp(950px, 90%, 1100px);
    height: 250px;
}
.footerChild {
    display: flex;
    flex-direction: column;
    align-items: center;
    height: 100%;
}
.footerChild h5 {
    text-align: center;
    margin: 0 0 10px 0;
}
.footerChild img {
    width: 1.8rem;
    height: 1.8rem;
}
.footerChildBox {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    margin: 0 0 20px 0;
}
.footerChild p {
    text-align: center;
    margin: 0 0 10px 0;
    color: var(--default-dark-color);
}
.footerChild a {
    text-align: center;
    text-decoration: underline;
    text-wrap: nowrap;
    color: var(--default-dark-color);
}
#googleLinkBtn {
    padding: 8px;
    text-decoration: none;
    border-radius: 10px;
    background-color: var(--default-light-color);
    color: var(--primary-color);
    border: 2px solid var(--primary-color);
}
#googleLinkBtn:hover {
    color: var(--default-light-color);
    background-color: var(--primary-color);
    transition: 0.3s ease;
}
.footerDivider {
    height: 100%;
    background-color: var(--primary-color);
}
#facebook-box {
    display: flex;
    position: absolute;
    top: -60px;
    right: 10px;
    justify-content: center;
    align-items: center;
    font-size: 1.5rem;
    width: fit-content;
    padding: 8px;
    gap: 8px;
    border-radius: 10px;
    color: var(--default-blue);
    background-color: var(--default-light-color);
    border: 2px solid var(--default-blue);
}
#facebook-box:hover {
    color: var(--default-light-color);
    background-color: var(--default-blue);
    transition: 0.3s ease;
}
#facebook-box img {
    width: 1.8rem;
    height: 1.8rem;
}
#facebook-box:hover img {
    filter: brightness(100);
    transition: 0.3s ease;
}
#footerLowerBox {
    display: flex;
    position: relative;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 50px;
    background-color: var(--primary-color);
}
#footerLowerBox p {
    text-align: center;
    color: var(--default-light-color);
    padding: 10px;
}

@media (max-width: 1000px) {
    footer {
        height: fit-content;
    }
    #footerUpperBox {
        height: 700px;
        width: 100%;
        grid-template-columns: auto;
        grid-template-rows: 1fr 2px 1fr 2px 1fr;
        justify-content: center;
    }
    .footerChild {
        justify-content: center;
        width: 250px;
    }
    .footerDivider {
        width: 100%;
    }
    #footerLowerBox {
        height: fit-content;
    }
}