html, body {
    min-height: 100vh;
}

body{
    display: grid;
    grid-template-rows: max-content auto min-content;
}

footer{
    min-height: 50px;
}

.logo-footer{
    margin: 10px;
    padding: 5px;
    min-height: 20px;
    border-radius: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
}

footer > .input-group-div{
    display: flex;
    justify-content: center;
    align-items: center;
    align-content: center;
    flex-wrap: nowrap;
    padding: 5px;
    padding-bottom: 10px;
    margin-top: 0;
}

footer > .input-group-div > .input-group{
    width: max-content;
}

.content{
    background-image: linear-gradient(-200deg, var(--bs-primary), black);
    background-size: 300% 300%;
    animation: gradient 30s ease infinite;
}
@keyframes gradient {
    0% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0% 50%;
    }
}