:root {
    --background-color: #ffffff;
    --default-color: #444444;
    --heading-color: #2a2a2a;
    --accent-color: #2b1ee0;
    --surface-color: #ffffff;
    --contrast-color: #ffffff;
  }

.footer .social-links a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 1px solid color-mix(in srgb, var(--default-color), transparent 50%);
    font-size: 16px;
    color: color-mix(in srgb, var(--default-color), transparent 30%);
    margin-right: 10px;
    transition: 0.3s;
}

.footer .social-links a:hover {
    color: var(--accent-color);
    border-color: var(--accent-color);
}

.footer{

}