@layer application {
	main {
		display: flex;
		flex-direction: row;

		#blog-nav {
			width: 300px;
			h2 {
				margin: 1rem 0;
			}
			ul {
				list-style: none;
				li {
					display: inline-block;
				}
			}

			#blog-nav-recent {
				margin: 1rem 0;
				h2 {
					font-size: 16pt;
				}
				ul {
					color: #fff;
					li {
						display: block;
						border-radius: 1rem;
						.title {
							display: block;
							font-size: 16pt;
							font-weight: 200;
						}
						time {
							display: block;
							font-size: 18pt;
						}
						.preview {
							display: block;
							font-size: 14pt;
							border-top: 1px solid black;
						}
					}
				}
			}
		}
		#blog-content {
			flex: 1;

			time {
				margin: 0.5rem;
			}

			ul.tags {
				list-style: none;
				li {
					display: inline-block;
				}

				margin-top: 0.5rem;
				margin-bottom: 1rem;
			}

			img {
				width: 350px;
				height: auto;
				display: block;
			}
		}        /* Browse all link styling */
        #blog-nav-all {
            display: block;
            background: linear-gradient(135deg, var(--main-link-color), color-mix(in srgb, var(--main-link-color) 80%, var(--wash-accent)));
            color: var(--main-link-on-color);
            text-decoration: none;
            padding: 0.875rem 1.25rem;
            border-radius: 12px;
            font-weight: 600;
            text-align: center;
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
            box-shadow:
                0 4px 15px var(--wash-subtle),
                0 0 0 1px var(--wash-muted) inset;

            &:hover {
                box-shadow:
                    0 8px 25px var(--wash-accent),
                    0 0 0 1px var(--wash-muted) inset;
                background: linear-gradient(135deg, var(--main-link-accent), color-mix(in srgb, var(--main-link-accent) 80%, var(--wash-muted)));
            }
        }
	}
}