/* codecleaner.odsantos.com/assets/css/style.css */

:root {
  --accent-color: #059669;
  --primary-color: var(--accent-color);
  --primary-hover: #10c68c;
  --badge-background: rgba(5, 150, 105, 0.1);
  --badge-background-hover: rgba(5, 150, 105, 0.2);
  --nav-background: #2d3748;
  --logo-accent-color: #34d399;
}

body.dark-theme {
  --accent-color: #34d399;
  --primary-hover: #62f7c1;
  --badge-background: rgba(52, 211, 153, 0.15);
  --badge-background-hover: rgba(52, 211, 153, 0.2);
  --nav-background: #064e3b;
}

a.badge {
    background: var(--badge-background);
    color: var(--accent-color);
    border: 1px solid var(--accent-color);
    font-size: 1rem;
    width: fit-content;
    margin: 0 auto;
}

a.badge:hover {
    background: var(--badge-background-hover);
    transform: translateY(-2px);
}

.badge-img {
    width: 2rem;
    height: 2rem;
    margin: 0 0 0 0.5rem;
}

.section-header {
    text-align: center;
    margin-bottom: 3rem;
}

.section-header p {
    font-size: 1.1em;
}


/* Gallery Section */
.gallery-grid {
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

.gallery-item {
    position: relative;
    border-radius: 15px;
    overflow: hidden;
    background: var(--gallery-item-background);
    border: 1px solid var(--nav-background);
    width: 60%;
}

.gallery-item:nth-of-type(even) {
    align-self: flex-end;
}

.gallery-item img {
    width: 100%;
    display: block;
    transition: var(--transition);
}

.gallery-item:hover img {
    transform: scale(1.05);
}

.caption {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    color: var(--gallery-caption-color);
    background: linear-gradient(transparent,  var(--gallery-item-background));
    padding: 3rem 0 .37rem 1.2rem;
    font-weight: bold;
    font-size: 1.17rem;
}