footer { border-top: solid black 1px; background-color: var( --color-background-accent ); width: 100vw; margin-top: 40px; } footer .logo { margin-top: 20px; height: 40vh; border-radius: 20px; } .footer-container { display: flex; flex-direction: column; justify-content: center; align-items: center; width: 100%; margin-bottom: 50px; } .footer-text-container { display: flex; flex-direction: column; justify-content: center; align-items: center; min-width: calc( ( 100% - 40vh - 50px ) / 2 ); width: 80%; } .footer-category { display: flex; flex-direction: column; width: 80%; } .footer-category a { color: var( --color-text-primary ); text-decoration: none; transition: all 0.5s; transform: scale(1); transition: transform 0.75s; } .footer-category a:hover { color: var( --color-button-hover ); transform: scale(1.1); } @media only screen and (min-width: 999px) { footer .logo { margin-top: unset; border-radius: 0; } .footer-container { flex-direction: row; margin-bottom: unset; } .footer-text-container { align-items: flex-start; justify-content: flex-start; flex-direction: row; width: unset; max-width: 65%; margin-left: auto; margin-right: auto; } .footer-category { margin-left: auto; margin-right: auto; width: unset; min-width: max-content; margin: 5px; } }