main {
    justify-content: flex-start;
    align-items: flex-start;
    margin: 10px 0 0 25%;
    gap: 30px;
    max-width: 40%;
    width: fit-content;
}

nav {
    display: flex;
    justify-content: space-between;
    width: 100%;

    > a {
        color: darkgrey;
    }

    > a:hover {
        text-decoration: underline;
    }
}

#articles {
    display: flex;
    flex-direction: column;
    gap: 40px;
}

.article {
    display: flex;
    flex-direction: column;
    gap: 15px;

    p {
        color: darkgray;
        text-align: justify;
    }
}

.article:hover {
    opacity: 0.5;
}

@media only screen and (max-width: 600px) {
    main {
        margin-left: 0;
        max-width: unset;
    }
}