html {
    height: 100%;
}

body {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    margin: 0;
}

main {
    flex: 1 0 auto; /* Allows main content to grow but not shrink below its content */
}

footer {
    flex-shrink: 0; /* Prevents footer from shrinking */
    width: 100%;
}

body {
    font-family: Arial, sans-serif;
}
.hero {
    background: linear-gradient(45deg, #007bff, #6610f2);
}
.card {
    transition: transform 0.3s;
}
.card:hover {
    transform: translateY(-5px);
}
.comment {
    border-bottom: 1px solid #dee2e6;
    padding: 10px 0;
}
.offcanvas {
    background-color: #f8f9fa;
}
.navbar-dark .navbar-brand {
    font-weight: bold;
}