@media (max-width: 768px) { 
    .vertical {
        justify-items: center;
        width: 100%;
    }
}

@media (min-width: 768px) { 
    .vertical {
        width: min-content;
        width: 600px;
    }
}


.categories-section, .search-section {
    justify-self: center;
    overflow: scroll;
    background-color: white;
    .category-heading {
        color: white;
        text-align: center;
        text-transform: capitalize;
        font-size: 1.5rem;
    }
}

.categories-section .category {
    color: black;
}

.category-tab .category {
    border-right: 2px solid blue;
}

.category-tab .category:last-child {
    border-right: none;
}

[class*="category-heading"] {
    color: black;
    width: 200px;
    margin-bottom: 5px;
}

.category-heading-lifestyle:hover {
    color: green;
}

.categories-section .category-heading-lifestyle {
    border-bottom: 2px solid green;
    color: green;
}

.category-heading-tech:hover {
    color: darkblue
}

.categories-section .category-heading-tech {
    border-bottom: 2px solid darkblue;
    color: darkblue;
}

.category-heading-video:hover {
    color: darkgoldenrod
}

.categories-section .category-heading-video {
    border-bottom: 2px solid darkgoldenrod;
}

.category-heading-books:hover {
    color: brown;
}

.categories-section .category-heading-books {
    border-bottom: 2px solid brown;
    color: brown;
}

.category-heading-comics:hover {
    color: darkred;
}

.categories-section .category-heading-comics {
    border-bottom: 2px solid darkred;
    color: darkred;
}

.category-heading-entertainment:hover {
    color: darkmagenta
}

.categories-section .category-heading-entertainment {
    border-bottom: 2px solid darkmagenta;
    color: darkmagenta;
}

.category-heading-movies:hover {
    color: darkcyan
}

.categories-section .category-heading-movies {
    border-bottom: 2px solid darkcyan;
    color: darkcyan
}

.category-heading-video-games:hover {
    color: rgb(36, 81, 172)
}

.categories-section .category-heading-video-games {
    border-bottom: 2px solid rgb(36, 81, 172);
    color: rgb(36, 81, 172);
}

.category-heading-science:hover {
    color: steelblue;
}

.categories-section .category-heading-science {
    border-bottom: 2px solid steelblue;
    color: steelblue;
}

.main-section {
    background-color: white;
    overflow: scroll;
}

.page-articles {
    height: 1000px;
}

.category-list-view {
    justify-self: center;
}

.author-container {
    display: inline-flex;
}

.author-info {
    width: 33%;
}


form.search-form {
    align-self: center;
    display: flex;
    background: lightgray;
    border-radius: 2px;
    border: 1px solid grey;
    height: fit-content;
    padding: 2px;
    i {
        font-size: 20px;
    }
    button {
        border: none;
        border-left: 1px solid grey;
    }
    input {
        background: lightgray;
        border: none;
        margin: 0px;
    }

    height: 50%;
    .categories-section.category-list-view {
        height: 100%;
    }

    @media (width <= 900px) {
        display: none;
    }
}

.page-articles {
    width: 100%;

    @media (width <= 900px) {
        max-width: 400px;
    }
}

footer {
    border-top: 5px solid transparent;
    border-image: linear-gradient(90deg, rgba(36, 27, 0, 1) 0%, rgba(222, 152, 63, 1) 22%, rgb(145, 145, 145) 91%);
    border-image-slice: 1;
    width: 100%;
    flex-direction: column;
    display: flex;
    text-align: -webkit-center;
}