:root {
    --Bdazzled-Blue: #415A77;
    --peru: #cd9452;
    --black: #222;
    --earie-black: #212529;
    --white: #fff;
    --onyx: #343A40;
    --light-black: #666;
    --light-white: #ccc;
    --light-bg: #f5f5f5;
    --dark-bg: rgba(0,0,0,.7);
    --border: .1rem solid #aaa;
    --box-shadow: 0 0.5rem 1rem rgba(0,0,0,.1);
}

.footer {
    text-align: center;
    background: var(--earie-black);
}

.footer .icons-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(25rem, 1fr));
    gap: 2rem;
}

.footer .icons-container .icons {
    text-align: center;
    padding: 3rem 2rem;
}

.footer .icons-container .icons i {
    height: 6rem;
    width: 6rem;
    border-radius: 50%;
    background: var(--white);
    color: var(--earie-black);
    margin-bottom: 0.5rem;
    line-height: 6rem;
    font-size: 2rem;
    box-shadow: rgba(255, 255, 255, 0.993) 0px 50px 100px -20px,
    rgb(255, 255, 255) 0px 30px 60px -30px,
    rgba(10, 37, 64, 0.505) 0px -2px 6px 0px inset;
}

.footer .icons-container .icons h3 {
    font-size: 2rem;
    color: var(--white);
    padding: 1rem 0;
}

.footer .icons-container .icons p {
    line-height: 1.5;
    font-size: 1.7rem;
    color: var(--white);
    text-transform: none;
}

.footer .credit {
    padding-top: 2rem;
    margin-top: 2rem;
    color: aliceblue;
    border-top: var(--border);
    font-size: 2rem;
}

.footer .credit span {
    color: var(--Bdazzled-Blue);
}