header {
    position: relative;

    > img {
        width: 100%;
    }
}

#header-container {
    position: absolute;
    top: 0;

   .top-right > a, .top-right > details {
        background-color: rgba(0, 0, 0, 0.6);
   }
   .top-bar {
       details {
           nav {
               ul {
                   background-image: none;
                   background-color: rgba(0, 0, 0, 0.9);
               }
           }
       }
   }

   .header-title {
       padding-top: 0px;
       padding-bottom: 0px;
       p {
           display: var(--home-display-header-title-p)
       }
   }

}

body {
    main  {
        max-width: 1400px;
        color: white;
        a {
            border-bottom: 2px solid rgba(255, 255, 255, .5);
        }
        section.species-section {
            display: flex;
            flex-direction: column;
            align-items: center;
            #species-masonry {
                columns: max(min(4, var(--max-columns)), 2);
                a {
                    border-bottom: 0;
                }
            }
            > a {
                margin: auto;
                font-size: var( --font-size-h3);
                line-height: var(--line-height-h3);
                font-weight: 700;
            }
        }
    }

    hr {
        background-color: var(--happy);
    }
}