main {
    /* background-image: linear-gradient(to bottom, #3f349a, #bdcad7); */
    background-image: linear-gradient(to bottom, var(--bg), #51aafa);
    height: 80vh;
}

main h1 {
    margin-block-start: 0em;
    padding: 10vh 5vw 5vh 5vw;
    font-size: 5vw;
    color: rgb(15, 15, 15);
}

#post_main {
    height: 30vh;
    /* background-color: #bdcad7; */
    background-image: linear-gradient(to bottom, #51aafa, var(--brand));
}

#projects_board {
    position: absolute;
    /* padding: 0 5vw 0 5vw; */
    /* background-color: brown; */
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    justify-content: center;
}

#projects_board a {
    display: flex;
    text-decoration: none;
    color: inherit;        
}

#projects_board section {
    
    display: block;
    background-color: var(--brand);
    width: 22.5vw;
    height: 15vw;
    border-radius: 5px;
    padding-left: 2.5vw;
    transition: 1s;
}

#projects_board section h3 {
    color: #235f94;
    font-size: 25px;
}

#projects_board section:hover {
    box-shadow: 0 4px 4px rgba(0,0,0,0.5);
    width: 23vw;
    height: 15.5vw;
}

#projects_board section hr {
    float: left;
    width: 20%;
    transition: 0.8s;
    height: 2px;
    border: none;     
    background-color: rgb(161, 168, 206);
}

#projects_board section:hover hr {
    width: 45%;
}

#projects_board section p {
    /* float: left; */
    font-size: 20px;
    color: #235f94;
}

.modal {
    z-index: 20;
    display: none;
    position: fixed;
    width: 100%; height: 100%;
    background: rgba(0,0,0,0.6);
    justify-content: center;
    align-items: center;
}

.modal-content {
    background: white;
    padding: 20px;
    border-radius: 10px;
    width: 90%;
    max-width: 600px;
}