:root {
    --color-primary         : #00ADB5;
    --color-primary-light   : hsla(243, 56%, 79%, 0.18);
    --color-primary-variant : #EEEEEE;
    --color-red             : #da0f3f;
    --color-red-light       : hsl(346, 87%, 46%, 15%);
    --color-green           : #00c476;
    --color-green-light     : hsl(156, 100%, 38%, 15%);
    --color-gray-900        : #393E46;
    --color-gray-700        : #30343b;
    --color-gray-300        : rgba(242, 242, 254, 0.3);
    --color-gray-200        : rgba(242, 242, 254, 0.7);
    --color-white           : #f2f2fe;
    --color-bg              : #222831;

    /* TODO dark blue
    --color-primary         : #6f6af8 !important;
    --color-primary-light   : hsla(242, 91%, 69%, 18%) !important;
    --color-primary-variant : #5854c7 !important;
    --color-gray-900        : #1e1e66 !important;
    --color-gray-700        : #2d2b7c !important;
    --color-bg              : #0f0f3e !important;
    */

    --transition            : all 300ms ease;

    --container-width-lg    : 87%;
    --container-width-md    : 88%;
    --form-width            : 55%;

    --card-border-radius-1  : 0.3rem;
    --card-border-radius-2  : 0.5rem;
    --card-border-radius-3  : 0.8rem;
    --card-border-radius-4  : 2rem;
    --card-border-radius-5  : 5rem;
}

/* ============================================================================== GENERAL ================================================================================== */

* {
    margin          : 0;
    padding         : 0;
    outline         : 0;
    border          : 0;
    appearance      : 0;
    list-style      : none;
    text-decoration : none;
    box-sizing      : border-box;
}

body {
    font-family : 'Montserrat', sans-serif;
    line-height : 1.6;
    color       : var(--color-gray-200);
    overflow    : scroll;
    overflow-x  : hidden;
    background  : var(--color-bg);
    font-size   : 0.9rem;
}

body::-webkit-scrollbar {
    width            : 0;
    background-color : transparent;
}

.container {
    width         : var(--container-width-lg);
    max-width     : 1800px;
    margin-inline : auto;
}

section {
    margin-top    : 7rem;
    margin-bottom : 3rem;
    width         : 100%;
}

/* add to posts on index if there's no featured post. eg. search results page*/
/* ADDED AFTER TUTORIAL */
.section__extra-margin {
    margin-top : 7rem;
}

h1, h2, h3, h4, h5 {
    color       : var(--color-white);
    line-height : 1.3;
}

h1 {
    font-size : 3rem;
    margin    : 1rem 0;
}

h2 {
    font-size : 1.7rem;
    margin    : 1rem 0;
}

h3 {
    font-size : 1.1rem;
    margin    : 0.8rem 0 0.5rem;
}

h4 {
    font-size : 1rem;
}

a {
    color      : var(--color-white);
    transition : var(--transition);
}

img {
    display    : block;
    width      : 100% !important;
    height     : 100%;
    object-fit : cover;
    transition : 0.5s ease;
}


/* ============================================================================== NAV ================================================================================== */
nav {
    background : var(--color-primary);
    width      : 100vw;
    height     : 4.5rem;
    position   : fixed;
    top        : 0;
    z-index    : 10;
    box-shadow : 0 1rem 1rem rgba(0, 0, 0, 0.2);
}

nav button {
    display : none;
}

.nav__container {
    height          : 100%;
    display         : flex;
    align-items     : center;
    justify-content : space-between;
}

.avatar {
    width         : 2.5rem;
    height        : 2.5rem;
    border-radius : 50%;
    overflow      : hidden;
    border        : 0.2rem solid var(--color-bg);
}

.nav__logo {
    font-weight : 600;
    font-size   : 1.2rem;
}

.nav__items {
    display     : flex;
    align-items : center;
    gap         : 4rem;
}

.nav__profile {
    position : relative;
    cursor   : pointer;
}

.nav__profile ul {
    position       : absolute;
    top            : 140%;
    right          : 0;
    display        : flex;
    flex-direction : column;
    box-shadow     : 0 3rem 3rem rgba(0, 0, 0, 0.4);
    visibility     : hidden;
    opacity        : 0;
    transition     : var(--transition);
}

/* header social */
.header__socials {
    display    : inline-flex;
    list-style : none;
}

.header__socials a {
    margin : 2px;
    width  : 25px;
    height : 25px;
}

.header__socials a:hover {
    color : var(--color-bg);
}

/* show nav ul when nav profile is hovered */
.nav__profile:hover > ul {
    visibility : visible;
    opacity    : 1;
}

.nav__profile ul li a {
    padding    : 1rem;
    background : var(--color-gray-900);
    display    : block;
    width      : 100%;
}

.nav__profile ul li:last-child a {
    background : var(--color-red);
    color      : var(--color-bg);
}

/* ============================================================================== CATEGORY BUTTON ================================================================================== */
.category__button {
    background    : var(--color-primary-light);
    color         : var(--color-primary);
    display       : inline-block;
    padding       : 0.5rem 1rem;
    border-radius : var(--card-border-radius-2);
    font-weight   : 600;
    font-size     : 0.8rem;
    text-align    : center;
}

.category__buttons .category__buttons-container .category__button {
    display         : flex;
    align-items     : center;
    justify-content : center;
}

.category__button:hover {
    color : var(--color-white);
}

/* ============================================================================== GENERAL POST ================================================================================== */
.post__thumbnail {
    border-radius : var(--card-border-radius-5) 0;
    border        : 1rem solid var(--color-gray-900);
    overflow      : hidden;
    margin-bottom : 1.6rem;
    transition    : 0.5s ease;
}

.post:hover .post__thumbnail img {
    /*
    filter: saturate(0);
    transition: filter 500ms ease;
    */

    filter     : grayscale(75%);
    transition : 0.5s ease;
    transform  : scale(1.5);
}

.post__author {
    display    : flex;
    gap        : 1rem;
    margin-top : 1.2rem;
}

.post__author-avatar {
    width         : 2.5rem;
    height        : 2.5rem;
    border-radius : var(--card-border-radius-3);
    overflow      : hidden;
}

/* ============================================================================== FEATURED ================================================================================== */
.featured {
    margin-top : 8rem;
}

.featured__container {
    display               : grid;
    grid-template-columns : 1fr 1fr;
    gap                   : 4rem;
}

.featured .post__thumbnail {
    height : fit-content;
}

/* ============================================================================== POSTS ================================================================================== */
.posts__container {
    display               : grid;
    grid-template-columns : repeat(3, 1fr);
    gap                   : 5rem;
    margin-bottom         : 5rem;;
}

/* ============================================================================== CATEGORY BUTTONS ================================================================================== */
.category__buttons {
    padding       : 4rem 0;
    border-top    : 2px solid var(--color-gray-900);
    border-bottom : 2px solid var(--color-gray-900);
}

.category__buttons-container {
    width                 : fit-content;
    display               : grid;
    grid-template-columns : repeat(3, 1fr);
    gap                   : 1rem;
}

/* ============================================================================== FOOTER ================================================================================== */
footer {
    background : var(--color-gray-900);
    padding    : 3rem 0 0;
    box-shadow : inset 0 1.5rem 1.5rem rgba(0, 0, 0, 0.2);
}

.footer__socials {
    margin-inline   : auto;
    width           : fit-content;
    margin-bottom   : 1rem;
    display         : flex;
    justify-content : space-between;
    align-items     : center;
    gap             : 1.2rem;
}

.footer__socials a {
    background      : var(--color-bg);
    border-radius   : 50%;
    width           : 2.3rem;
    height          : 2.3rem;
    display         : flex;
    align-items     : center;
    justify-content : center;
}

.footer__socials a:hover {
    background : var(--color-white);
    color      : var(--color-bg);
}

.footer__container {
    display               : grid;
    grid-template-columns : repeat(4, 1fr);
}

footer h4 {
    color         : var(--color-white);
    margin-bottom : 0.6rem;
}

footer ul li {
    padding : 0.4rem 0;
}

footer ul a {
    opacity : 0.75;
}

footer ul a:hover {
    letter-spacing : 0.2rem;
    opacity        : 1;
}

.footer__copyright {
    text-align : center;
    padding    : 1.5rem 0;
}

.footer__copyright a {
    color : var(--color-gray-200);
}

.footer__copyright:hover a {
    color : #fff
}


/* ============================================================================== SEARCH ================================================================================== */


.search__bar {
    margin-top : 7rem;
}

.search__bar-container {
    position        : relative;
    width           : 30rem;
    background      : var(--color-gray-900);
    display         : flex;
    flex-direction  : row;
    align-items     : center;
    justify-content : space-between;
    overflow        : hidden;
    padding         : 0.6rem 1rem;
    border-radius   : var(--card-border-radius-2);
    color           : var(--color-gray-300);
}

.search__bar-container > div {
    width       : 100%;
    display     : flex;
    align-items : center;
}

.search__bar input {
    background  : transparent;
    margin-left : 0.7rem;
    padding     : 0.5rem 0;
    width       : 100%;
    color       : #fff;
}

.search__bar input::placeholder {
    color : var(--color-gray-300);
}


/* ============================================================================== BUTTON ================================================================================== */
.btn {
    display          : inline-block;
    width            : fit-content;
    padding          : 0.6rem 1.2rem;
    background-color : var(--color-primary);
    border-radius    : var(--card-border-radius-2);
    cursor           : pointer;
    transition       : var(--transition);
    color            : var(--color-white);
}

.btn.sm {
    padding   : 0.3rem 0.7rem;
    font-size : 0.8rem;
}

.btn.danger {
    background : var(--color-red);
}

.btn:hover {
    background : var(--color-white);
    color      : var(--color-bg);
}


/* ============================================================================== SINGLE POST ================================================================================== */
.singlepost {
    margin : 6rem 0 5rem;
}

.singlepost__container {
    width      : var(--form-width);
    background : var(--color-gray-900);
    padding    : 1rem 2rem 5rem;
}

.singlepost__thumbnail {
    margin : 1.5rem 0 1rem;
}

.singlepost__container p {
    margin-top  : 0.6rem;
    line-height : 1.7;
}

/* ============================================================================== CATEGORY POSTS ================================================================================== */
.category__title {
    height      : 15rem;
    margin-top  : 4.5rem;
    background  : var(--color-gray-900);
    display     : grid;
    place-items : center;
}

/* ============================================================================== EMPTY PAGES ================================================================================== */
.empty__page {
    height        : 100%;
    display       : grid;
    place-content : center;
    margin-top    : 5rem;
}

/* ============================================================================== GENERAL FORM ================================================================================== */
.form__section {
    display     : grid;
    place-items : center;
    height      : 100%;
    margin-top  : 5rem;
}


::ng-deep .ck-editor__editable_inline {
    padding : 0 30px !important;
}

.form__section-container {
    width : var(--form-width);
}

.alert__message {
    padding       : 0.8rem 1.4rem;
    margin-bottom : 1rem;
    border-radius : var(--card-border-radius-2);
}

.alert__message.error {
    background : var(--color-red-light);
    color      : var(--color-red);
}

.alert__message.success {
    background : var(--color-green-light);
    color      : var(--color-green);
}

/* centers text of alert. eg. empty category-posts page*/
/* ADDED AFTER TUTORIAL */
.alert__message.lg {
    text-align : center;
}

form {
    display        : flex;
    flex-direction : column;
    gap            : 1rem;
}

.form__control {
    display        : flex;
    flex-direction : column;
    gap            : 0.6rem;
}

.form__control.inline {
    flex-direction : row;
    align-items    : center;
}

input, textarea, select {
    padding          : 0.8rem 1.4rem;
    background-color : #fff;
    border-radius    : var(--card-border-radius-2);
    resize           : none;
    color            : var(--color-bg);
}

.ck p, .ck-list-bogus-paragraph, .ck-table-bogus-paragraph {
    color: black;
} p a {
    color: #15a6bf !important;
} .ck.ck-reset.ck-editor.ck-rounded-corners {
    z-index: 5 !important;
} .ck-powered-by {
    display: none;
}

.form__section small {
    margin-top : 1rem;
    display    : block;
}

.form__section small a {
    color : var(--color-primary);
}

/* ============================================================================== DASHBOARD ================================================================================== */
.dashboard {
    margin-top : 6rem;
}

.sidebar__toggle {
    display : none;
}

.dashboard__container {
    display               : grid;
    grid-template-columns : 14rem auto;
    gap                   : 1rem;
    background            : var(--color-gray-900);
    padding               : 2rem;
    margin-bottom         : 5rem;
}

.dashboard aside a {
    background-color : var(--color-primary);
    display          : flex;
    gap              : 1rem;
    align-items      : center;
    padding          : 1.6rem;
}

.dashboard aside ul li:not(:last-child) a {
    border-bottom : 1px solid var(--color-gray-900);
}

.dashboard aside a:hover {
    background : var(--color-gray-700);
}

.dashboard aside a.active {
    background-color : var(--color-gray-900);
}

.dashboard main {
    margin-left : 1.5rem;
}

.dashboard main h2 {
    margin      : 0 0 2rem 0;
    line-height : 1;
}

.dashboard main table {
    width      : 100%;
    text-align : left;
}

.dashboard main table th {
    background : var(--color-gray-700);
    padding    : 0.8rem;
    color      : var(--color-white);
}

.dashboard main table td {
    padding       : 0.8rem;
    border-bottom : 1px solid var(--color-gray-200);
}

.dashboard main table tr:hover td {
    background-color : var(--color-bg);
    color            : var(--color-white);
    cursor           : default;
    transition       : var(--transition);
}


/* ============================================================================== MEDIA QUERIES (MEDIUM DEVICES) ================================================================================== */
@media screen and (max-width : 1024px) {
    /* ================= GENERAL ================ */
    .container {
        width : var(--container-width-md);
    }

    h2 {
        font-size : 1.6rem;
    }

    h3 {
        font-size : 1.2rem;
    }

    h5 {
        font-size : 0.8rem;
    }

    /* ================= NAV ================ */
    nav button {
        display    : inline-block;
        font-size  : 1.5rem;
        background : transparent;
        color      : var(--color-white);
        cursor     : pointer;
    }

    nav button#close__nav-btn {
        display : none;
    }

    .nav__container {
        position : relative;
    }

    .nav__items {
        position        : absolute;
        flex-direction  : column;
        top             : 100%;
        right           : 0;
        width           : 12rem;
        align-items     : flex-start;
        justify-content : center;
        gap             : 0;
        display         : none;
        /* ADDED AFTER TUTORIAL */
        perspective     : 300px;
    }

    .nav__items li {
        width            : 100%;
        height           : 4.5rem;
        display          : flex;
        align-items      : center;
        box-shadow       : -2rem 3rem 7rem rgba(0, 0, 0, 0.7);
        border-top       : 1px solid var(--color-bg);
        animation        : animateDropdown 400ms 0s ease forwards;
        opacity          : 0;
        transform-origin : top;
    }

    .nav__items li:nth-child(2) {
        animation-delay : 200ms;
    }

    .nav__items li:nth-child(3) {
        animation-delay : 400ms;
    }

    .nav__items li:nth-child(4) {
        animation-delay : 600ms;
    }

    .nav__items li:nth-child(5) {
        animation-delay : 800ms;
    }


    /* nav dropdown animation */
    @keyframes animateDropdown {
        0% {
            transform : rotateX(90deg);
        }
        100% {
            transform : rotateX(0deg);
            opacity   : 1;
        }
    }

    .nav__items li a {
        border-radius : 0;
        width         : 100%;
        height        : 100%;
        background    : var(--color-gray-900);
        padding       : 0 2rem;
        display       : flex;
        align-items   : center;
    }

    .nav__profile {
        background : var(--color-gray-900);
    }

    .nav__profile ul {
        top   : 100%;
        width : 100%;
    }

    .nav__profile .avatar {
        margin-left : 2rem;
        border      : 0;
    }

    .featured__container {
        gap : 3rem;
    }

    .posts__container {
        grid-template-columns : 1fr 1fr;
        gap                   : 3rem;
    }

    .footer__container {
        grid-template-columns : 1fr 1fr;
        gap                   : 3rem;
    }


    /* ============= BLOG =========== */
    .search__bar-container {
        width : 60%;
    }

    /* ============= GENERAL FORM =========== */
    .form__section-container {
        padding : 3rem;
    }


    /* ============= DASHBOARD =========== */
    .dashboard__container {
        grid-template-columns : 4.3rem auto;
        padding               : 0;
        background            : transparent;
    }

    .dashboard aside h5 {
        display : none;
    }

    .dashboard main table thead {
        display : none;
    }

    .dashboard main table tr {
        display        : flex;
        flex-direction : column;
    }

    .dashboard main table tr:nth-child(even) {
        background : var(--color-gray-900);
    }

    .dashboard main table tr:hover td {
        background : transparent;
    }
}


/* ============================================================================== MEDIA QUERIES (SMALL DEVICES) ================================================================================== */

@media screen and (max-width : 600px) {
    section {
        margin-top : 2rem;
    }

    h1 {
        font-size : 2rem;
    }

    .featured {
        margin-top : 6rem;
    }

    .featured__container {
        grid-template-columns : 1fr;
        gap                   : 0;
    }

    .posts__container {
        grid-template-columns : 1fr;
    }

    .category__buttons-container {
        grid-template-columns : 1fr 1fr;
    }

    .footer__container {
        grid-template-columns : 1fr;
        text-align            : center;
        gap                   : 2rem;
    }

    /* ============= BLOG =========== */
    .search__bar-container {
        width : var(--container-width-md);
    }

    /* ============= SINGLE POST =========== */
    .singlepost__container {
        background-color : transparent;
        padding          : 0;
    }

    /* ============= GENERAL FORM =========== */
    .form__section-container {
        padding : 0;
    }

    /* ============= DASHBOARD =========== */
    .dashboard {
        margin-top : 5rem;
    }

    .dashboard__container {
        grid-template-columns : 1fr;
        gap                   : 0;
    }

    .dashboard main {
        margin : 0;
    }

    .dashboard main h2 {
        margin-top : 1rem;
    }

    .dashboard aside {
        position   : fixed;
        box-shadow : 2rem 0 4rem rgba(0, 0, 0, 0.4);
        left       : -100%;
        height     : 100vh;
        transition : var(--transition);
        background : var(--color-primary);
        z-index    : 2;
    }

    .dashboard .sidebar__toggle {
        display       : inline-block;
        background    : var(--color-primary-variant);
        color         : var(--color-white);
        position      : fixed;
        right         : 0;
        bottom        : 4rem;
        z-index       : 1;
        width         : 2.5rem;
        height        : 2.5rem;
        border-radius : 50% 0 0 50%;
        font-size     : 1.3rem;
        cursor        : pointer;
        box-shadow    : -1rem 0 2rem rgba(0, 0, 0, 0.4);
    }

    .dashboard aside a h5 {
        display : inline-block;
    }

    #hide__sidebar-btn {
        display : none;
    }
}


/* ================================================================================== 404 PAGE ============================================================================== */


.table {
    display : table;
    width   : 100%;
}

.table-cell {
    display        : table-cell;
    vertical-align : middle;
}

.holder {
    width      : 100%;
    padding    : 10px;
    margin     : 0 auto;
    text-align : center;
}

.holder h1 {
    font-family : sans-serif;
    font-weight : 100;
    font-size   : 40vmin;
    text-align  : center;
    line-height : 40vh;
    margin      : 3vh 0 5vh 0;
    color       : #fff;
    text-shadow : 1px 2px 5px rgba(0, 0, 0, 0.5);
}

.holder h2 {
    font-weight : 100;
    color       : #fff;
    text-align  : center;
    line-height : 1.5em;
    font-size   : 2.5vmin;
}

.holder button {
    mix-blend-mode     : screen;
    -webkit-appearance : none;
    outline            : none;
    border             : 2px solid #fff;
    background         : transparent;
    color              : #fff;
    padding            : 15px 50px;
    font-size          : 2vmin;
    letter-spacing     : 0.25vmin;
    margin             : 3vh 0;
    transition         : all 0.2s;
    opacity            : 0.85;
    border-radius      : 30px;
}

.holder button:hover {
    background-color : var(--color-gray-900);
    border           : 2px solid #fff;
    color            : #fff;
}

.logo-warp {
    width       : 75px;
    height      : auto;
    overflow    : hidden;
    margin-left : -10px;
}

.logo-warp img {
    width  : 100%;
    height : 100%;
}

.empty__page h3 {
    text-align : center;
}

.dashboard aside {
    -ms-overflow-style : none;
    scrollbar-width    : none;
    overflow-y         : scroll;
}

.dashboard aside::-webkit-scrollbar {
    display : none;
}