@media (min-width: 1px ) {
   :root {
       --curr-breakpoint: 540px;
   }
}
@media (min-width: 576px ) {
    :root {
        --curr-breakpoint: 720px;
    }
}
@media (min-width: 768px ) {
    :root {
        --curr-breakpoint: 960px;
    }
}
@media (min-width: 992px) {
    :root {
        --curr-breakpoint: 1140px;
    }
}
@media (min-width: 1200px) {
    :root {
        --curr-breakpoint: 1320px;
    }
}
@media (min-width: 1400px ) {
    :root {
        --curr-breakpoint: calc((100vw - 200px));
    }
}

body {
    background-color: skyblue;
}
main > .container {
    padding: 70px 15px 20px;
    min-height: calc(100vh - 60px) !important;
}

.footer {
    --bs-bg-opacity: 1;
    background-color: rgba(var(--bs-secondary-rgb), var(--bs-bg-opacity)) !important;
    font-size: .9em;
    height: 60px;
}
.footer > .container {
    padding-right: 15px;
    padding-left: 15px;
}
button > a.loginorout{
    text-decoration: none;
    color: var(--bs-link-color) !important;
}
button > a.loginorout:focus {
    outline: none;
}
button > a.loginorout:focus,
button > a.loginorout:hover {
    color: rgba(255, 255, 255, 0.75) !important;
}

aside {
    padding-top: 70px;
    position: fixed;
    min-height: calc(100vh - 60px) !important;
    float: left;
    --bs-bg-opacity: 1;
    background-color: rgba(var(--bs-secondary-bg-rgb), var(--bs-bg-opacity)) !important;
    border-radius: var(--bs-border-radius-sm) !important;
    min-width: calc(100vw - var(--curr-breakpoint)) !important;

}