footer {
    background-color: #1f1f1f;
    display: flex;
    flex-direction: column;
    padding-left: 15%;
    padding-right: 15%;
    width: 70%;
    box-shadow: 0px -5px 10px rgba(1, 1, 1, 0.233);
    padding-top: 20px;
}

#footerTop {
    display: flex;
    flex-direction: row;
}

#footerTopLeft {
    display: flex;
    flex-direction: row;
    gap: 40px;
    width: 50%;
}

#footerTopRight {
    display: flex;
    flex-direction: row;
    justify-content: end;
    gap: 40px;
    width: 50%;
}

.footerLinksSection {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.footerLinksSection > a {
    color: rgb(201, 201, 201);
    text-decoration: none;
}

.footerLinksSection > a:hover {
    color: whitesmoke;
}

.footerIcon {
    height: 50px;
    width: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 0px solid;
    border-radius: 25px;
}

.footerIcon:hover {
    background-color: #2e2e2e;
    cursor: pointer;
}

.footerIcon > svg {
    fill: rgb(201, 201, 201);
}

.footerIcon > svg:hover {
    fill: whitesmoke;
}

#footerSocialsSection > div {
    display: flex;
    flex-direction: row;
}

#footerTopRight > .footerLinksSection {
    align-items: end;
}

footer > hr {
    border-color: #000000;
    width: 100%;
    margin-top: 40px;
}

#footerBottom {
    display: flex;
    align-items: start;
    justify-content: space-between;
    padding-left: 10%;
    padding-right: 10%;
}
#footerBottom > a {
    color: rgba(255, 255, 255, 0.13);
    margin-top: 16px;
}

#footerBottom > p {
    color: rgba(255, 255, 255, 0.13);
}

@media (max-width: 1500px) {
    #footerBottom > p {
        display: none;
    }
    footer {
        padding-bottom: 10px;
    }
}

@media (max-width: 900px) {
    #footerTop {
        flex-direction: column;
        gap: 20px;
    }
    #footerTopLeft {
        width: 100%;
        justify-content: space-between;
    }
    #footerTopLeft > :nth-child(2){
        align-items: end;
    }
    #footerTopRight {
        width: 100%;
    }
    #footerTopRight > .footerLinksSection {
        align-items: start;
        width: 100%;
    }
    #footerBottom > :nth-child(3){
        display: none;
    }
    #footerBottom {
        justify-content: center;
    }
}

@media (max-width: 500px) {
    #footerTopLeft {
        width: 100%;
    }
    #footerTopLeft > :nth-child(2){
        display: none;
    }
    #footerTopLeft > .footerLinksSection {
        width: 100%;
    }
    #footerSocialsSection > div {
        flex-wrap: wrap;
    }
}