:root {    
    --border-color: #272727;

    --hero-text-color: #fff;
    --hero-background-image: url("../images/hero_img_code_black.jpg");

    --blog-text-color: #fff;
    --blog-background-color: #141414;

    --admin-pannel-background-color: red;
}


.hero {
    display: flex;
    background-size: cover;
    justify-content: flex-start;
    color: var(--hero-text-color);
    border-bottom: 2px solid var(--border-color);
    background-image: var(--hero-background-image);
}

.hero-content {
    width: 100%;
    display: flex;
    max-width: 1500px;
    justify-content: center;
}

.hero-text {
    margin: 20px;
    width: 370px;
    display: flex;
    font-size: 20px;
    text-align: center;
    flex-direction: column;
    justify-content: start;  
}


.blog {  
    display: flex;
    justify-content: center;
    color: var(--blog-text-color);
}

.blog-content {
    gap: 20px;
    display: flex;
    padding: 20px 20px;
    
    justify-content: center;

    background-size: cover;
    background: var(--blog-background-color);
}

.post-prewiew {
    width: 250px;
    height: 270px;

    display: flex;
    flex-direction: column;

    align-items: center;
    justify-content: center;

    border-radius: 15px;

    background: black;
}

.post-prewiew img {
    border-radius: 15px;
    max-width: 250px;
    max-height: 250px;
}