.column-link--logo, .column-link--logo:hover,
.column-link--logo:focus,
.column-link--logo:active, .ui__header__logo{
    background-size: contain;
    background-image: url(logo-png-file-url-here);
    background-repeat: no-repeat;
    padding: 5px;
    margin: 10px;
}

.logo {
    visibility: hidden;
}




/* Method 2: Target by content - hide elements containing specific text */
*:contains("Mastodon"),
*:contains("About"),
*:contains("Get the app"),
*:contains("Keyboard shortcuts"),
*:contains("View source code"),
*:contains("v4.4.2") {
  display: none !important;
}

/* Method 3: Target by link attributes */
a[href*="about"],
a[href*="mobile"],
a[href*="keyboard-shortcuts"],
a[href*="source"] {
  display: none !important;
}

/* Method 4: Hide bottom navigation/footer area */
.ui__footer,
.columns-area__panels__main footer,
.drawer__footer,
nav[role="navigation"]:last-child {
  display: none !important;
}

/* Method 5: Target by position - hide last elements that might be footer */
body > div:last-child,
.ui > div:last-child,
main + div,
.columns-area + div {
  display: none !important;
}

/* Method 6: Hide any div containing version info */
div:contains("v4."),
span:contains("v4."),
small:contains("v4.") {
  display: none !important;
}

/* Method 7: More aggressive approach - hide bottom sections */
.public-layout > div:last-child,
.public-layout > footer,
.public-layout > nav:last-child {
  display: none !important;

}