body {
    background: #07040d;
    color: white;
    font-family: sans-serif;
    margin: 0
}


body::before {
    content: "";
    position: fixed;
    inset: 0;
    background:
        linear-gradient(rgba(0,0,0,.75), rgba(0,0,0,.88)),
        url('assets/bg.png');

    background-size: cover;
    background-position: center;
    z-index: -3;
}


.matrix {
    position: fixed;
    inset: 0;
    background-image: linear-gradient(rgba(125, 39, 245, .05) 1px, transparent 1px), linear-gradient(90deg, rgba(125, 39, 245, .05) 1px, transparent 1px);
    background-size: 45px 45px;
    z-index: -1
}

.hero {
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column
}

.avatar {
    width: 250px;
    border-radius: 50%;
    border: 2px solid hsl(256, 85%, 63%);

    box-shadow:
        0 0 12px rgba(150, 112, 255, 0.712),
        0 0 35px rgba(150, 112, 255, 0.568);
}

.hero h1 {

    text-shadow:
        0 0 10px rgba(125,39,245,.18),
        0 0 30px rgba(125,39,245,.08);

}

.posts {
    width: min(1200px, 90%);
    margin: auto;

    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2rem;

    padding-bottom: 5rem;
}

.card {
    background: rgba(0, 0, 0, 0.267);

    border:
        1px solid rgba(75, 50, 165, 0.616);

    border-radius: 24px;

    padding: 2rem;

    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);

    box-shadow:
        0 0 10px rgba(84, 39, 245, 0.247),
        0 0 30px rgba(84, 39, 245, 0.247);

    transition:
        transform .25s ease,
        box-shadow .25s ease;
}

.card:hover {

    transform: translateY(-4px);

    box-shadow:
        0 0 16px rgba(150, 112, 255, 0.712),
        0 0 45px rgba(150, 112, 255, 0.712);
}

a {
    color: hsl(256, 85%, 63%);
    text-decoration: none
}

.post-container {
    width: min(900px, 90%);
    margin: auto;
    padding: 6rem 0
}

.buttons {

    display: flex;
    justify-content: center;
    gap: 2rem;
    margin-top: 1rem;

}

.btn {
    padding: .8rem 1.3rem;

    border:
        1px solid hsl(256, 85%, 63%);

    border-radius: 12px;

    box-shadow:
        0 0 8px rgba(150, 112, 255, 0.911);

    transition:
        .25s ease;
}

.btn:hover {

    transform:
        translateY(-3px)
        scale(1.03);

}