body {
    display: flex;
    flex-direction: column;
    align-items: center;
}

a {
    color: inherit;
    text-decoration: none;
}

section {
    display: flex;
    flex-direction: column;
    gap: 15px;

    background: var(--gray);
    border-radius: 15px;

    max-width: 500px;
    width: 100%;

    margin-top: 25px;
    padding: 25px;
}

.links {
    display: flex;
    gap: 15px;
}

.link {
    display: flex;
    align-items: center;
    justify-content: space-between;

    border: solid 2px var(--blue);
    border-radius: 8px;
    background: var(--light-blue);
    color: var(--blue);

    padding: 8px;
    width: 50%;

    .http-type {
        background: var(--blue);
        color: var(--light-blue);

        border-radius: 5px;
        padding: 8px 16px;
        width: 92px;

        text-align: center;
    }

    &.post {
        border: solid 2px var(--green);
        border-radius: 8px;
        background: var(--light-green);
        color: var(--green);

        .http-type {
            background: var(--green);
            color: var(--light-green);
        }
    }

    &.put {
        border: solid 2px var(--orange);
        border-radius: 8px;
        background: var(--light-orange);
        color: var(--orange);

        .http-type {
            background: var(--orange);
            color: var(--light-orange);
        }
    }

    &.delete {
        border: solid 2px var(--red);
        border-radius: 8px;
        background: var(--light-red);
        color: var(--red);

        .http-type {
            background: var(--red);
            color: var(--light-red);
        }
    }
}