header {
    width: inherit;
    display: flex;
    flex-direction: row;
    justify-content:space-between; 
    align-items: center; 
    background-color: #3f3f3f; 
    padding: 10px 5%; 
    box-shadow: 0 10px 10px #3f3f3f;
    position: fixed;
    left: 0;
    top: 0;
    right: 0;
    z-index: 4;
    flex-grow: 1; 

}

.articleImg {
    width: 200px;
    margin-top: -5%;
    margin-bottom: -10%; 
}

.head-center {
    display: flex;
    flex-direction: column;
    align-items: center; 
    gap: 10px; 
    flex: 1;
}

.headerButtonBlock {
    display: flex;
    flex-direction: row;
    gap: 10px; 
}

.headerButon {
    height: 48px;
    width: 140px;
    padding: 10px 20px; 
    font-size: 1em;
    text-align: center;
    color: #f4f4f4; 
    background-color: transparent; 
    border-radius: 25px;
    cursor: pointer; 
    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease; 
    white-space: nowrap;
}

.headerButon:hover {
    background-color: #5a8325; 
    color: #fff;
    border-color: #7da71b;
    border-radius: 24px;
    box-shadow: 0 0px 12px #7da71b; 
}

.headerButon:active {
    background-color: #7da71b; 
    color: #fff;
    border-color: #7da71b;
}

/* Media query for smaller screens (e.g., phones) */
@media (max-width: 600px) {
    .head-center {
        align-items: end;
    }

    .articleImg {
    width: 160px;
    
}

    .headerButtonBlock {
        gap: 2px;
        padding: 2px 40px;
    }

    .headerButon {
        width: 100px;
        height: 25px;
        padding: 4px 8px;
        padding-bottom: 1px;
        font-size: 0.8em; 
        text-align: center;
    }
    
    .headerButtonBlock {
        flex-direction: column;
        align-items: flex-end; 
    }
}