@charset "utf-8";
/* CSS Document */

:root {
    --footer-bg: black;
    --footer-padding: 0;
    --footer-min-height: 400px;
    --footer-content-max-width: 1200px;
    --footer-content-padding: 20px;
    --footer-content-gap: 20px;
    --logo-footer-width: 20%;
    --social-icon-size: 30px;
    --transition-speed: 0.3s;
}

/* Layout */
html, body {
    min-height: 100vh;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    width: 100%;
    overflow-x: hidden;
}

body {
    flex: 1;
    width: 100%;
}

/* Footer */
footer {
    display: grid;
    width: 100%;
    min-height: var(--footer-min-height);
    background-color: var(--footer-bg);
    justify-content: center;
    align-items: center;
    padding: var(--footer-padding) 0;
    margin-top: 0px;
    box-sizing: border-box;
    position: relative;
    overflow: hidden;
}

footer > div {
    display: grid;
    gap: var(--footer-content-gap);
    width: 100%;
    max-width: var(--footer-content-max-width);
    margin: 0 auto;
    padding: 0 var(--footer-content-padding);
    box-sizing: border-box;
}

/* Logo */
#logofooter {
    width: 100%;
    display: flex;
    justify-content: center;
    box-sizing: border-box;
}

#logofooter img {
    width: var(--logo-footer-width);
    height: auto;
    background-color: var(--footer-bg);
    margin: 0 auto;
    transition: width var(--transition-speed) ease;
}

/* Social Icons */
#logoinsta {
    display: flex;
    justify-content: center;
    margin: var(--footer-content-padding) auto;
}

#logoinsta img {
    width: var(--social-icon-size);
    height: var(--social-icon-size);
    transition: transform var(--transition-speed) ease;
}

#logoinsta img:hover {
    transform: scale(1.1);
}

/* Responsive Breakpoints */
@media screen and (max-width: 1200px) {
    :root {
        --logo-footer-width: 25%;
        --footer-min-height: 350px;
    }
}

@media screen and (max-width: 768px) {
    :root {
        --logo-footer-width: 40%;
        --footer-padding: 30px;
        --footer-min-height: 300px;
    }
}

@media screen and (max-width: 480px) {
    :root {
        --logo-footer-width: 60%;
        --footer-padding: 20px;
        --social-icon-size: 25px;
        --footer-min-height: 250px;
    }
}

@media screen and (max-width: 320px) {
    :root {
        --logo-footer-width: 70%;
        --social-icon-size: 20px;
        --footer-min-height: 200px;
    }
}