:root {
    --sepia: #ba9595;
    --dark-sepia: #936b6b;
}

h1.title,
h1.title a,
.content h1,
.content h2,
.content h3,
.content h4,
.content h5,
.content h6,
.tags a,
.nav-item > a {
    color: var(--sepia);
}

.nav-item > a:hover {
    color: var(--dark-sepia);
}

.logo {
    width: 100px;
    padding-right: 1em;
    opacity: 0.85;
}

.content img {
    display: block;
    margin: auto;
}

#google-search {
    margin-top: 10px;
    padding: 10px;
    border-radius: 10px;

    border: 1px solid #eee;
}

#google-search:focus {
    outline: none !important;
    border: 1px solid #a9a9a9;
}

/* taken from docs.reana.io */
img.screenshot-browser-mockup {
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.2), 0 0 2px rgba(0, 0, 0, 0.4);
    border-radius: 4px;
    background:
        url('../images/window-buttons-for-mockup.png') no-repeat left top,
        #333; /* Dark background for browser bar */
    padding-top: 20px; /* This assumes the window bar height is 20px. Adjust if needed */
    background-size: auto 20px, 100%;
    margin: 10px;
    max-width: calc(100% - 20px);
}