h1,
h2,
.sidebar-title {
    font-family: "Press Start 2P", cursive;
}

body {
    background: #050523;

    color: #ffffff;

    font-family: Verdana, sans-serif;

    margin: 0;
    overflow-x: hidden;
    padding: 30px;

    background-image:
        radial-gradient(
            circle at top,
            #1b1035,
            #050523
        );
}

.container {
    display:grid;
    grid-template:
        "header header" /* row 1 */
        "sidebar main"  /* row 2 */
        "footer footer" /* row 3 */
            / 1fr 2fr;  /* column widths (1fr = one fraction) */
    grid-gap: 10px;
}

header {
    grid-area:header;
    text-align: center;
    padding: 25px;

    background:
        linear-gradient(
            90deg,
            #ff71ce,
            #b967ff,
            #01cdfe
        );
}

header h1 {
    margin: 0;

    font-size: 48px;

    letter-spacing: 4px;

    color: white;

    text-shadow:
        0 0 10px #fff,
        0 0 20px #ff71ce,
        0 0 30px #01cdfe;
}

#content-wrapper {
    display: flex;
}

aside {
    grid-area: sidebar;

    width: 220px;
    background: #1b1035;
    padding: 20px;
    border-right: 2px solid #ff71ce;
}

main {
    grid-area: main;

    flex: 1;
    padding: 25px;
}

footer {
    grid-area: footer;

    text-align: center;
    padding: 15px;
    background: #0f0f20;
    border-top: 2px solid #01cdfe;
}

aside a {
    display: block;

    background: #ff71ce;

    color: white;

    padding: 10px;

    margin-bottom: 10px;

    text-decoration: none;

    font-weight: bold;

    text-align: center;

    border: 2px solid #01cdfe;

    transition: 0.2s;
}

aside a:hover {
    background: #01cdfe;

    color: #050523;

    /* transform: translateX(5px); */
}

.post-box {
    background: #111128;

    border: 2px solid #01cdfe;

    padding: 15px;

    margin-bottom: 20px;

    box-shadow:
        0 0 10px #01cdfe44;
}