Nickocado Avocado layout

Layout page isn't working for me, so I'm posting this layout on a blog post for now. Probably gonna make an Annoying Orange layout next lol.

<style> :root { --body-image: url("https://i.ibb.co/3rCDWxB/image.png"); --banner-image: url("https://i.ibb.co/y6g7Rdc/ezgif-7-6660122b6f.gif"); --nav-bg-top: #c90000; --nav-bg-bottom: #ff1c1c; --nav-text-color: black; --footer-bg-color: black; --footer-text-color: white; } .profile { direction: rtl; } .blurbs, .profile .table-section .heading, .blog-preview a, .friends, .general-info, .contact, .url-info, .details-table, .details p, .mood { direction: ltr; } .left { direction: ltr; } .container { margin: 20px auto 20px 20px; image-rendering: pixelated; } footer p, footer .links { margin: 2px; } footer { padding: 2px 5px; margin-top: 5px; } nav { margin-bottom: 5px; } main { margin: 5px; background: url("https://i.ibb.co/d77158w/notebook-Background.png"); background-size: cover; } body { background: var(--body-image); background-size: 300px; font-family: "MS PGothic"; image-rendering: pixelated; } nav { border: 1px solid black; border-radius: 5px; } nav .top { border-radius: 5px 5px 0 0; background: linear-gradient(to bottom, var(--nav-bg-top) 35%, var(--nav-bg-bottom)); } nav .links { border-radius: 0 0 5px 5px; background: var(--nav-bg-bottom); } /* Banner */ .container::before { display: block; content: ""; background-image: var(--banner-image); background-size: cover; width: 400px; height: 200px; margin: 5px auto; border-radius: 5px; border: 1px solid black; } nav .links a { text-shadow: none; } nav .links li:not(:last-child)::after, footer .links li:not(:last-child)::after { content: " >< "; color: white; } nav, nav .links a, nav .links li:not(:last-child)::after, footer .links li:not(:last-child)::after, .logout-btn { color: var(--nav-text-color); } .profile .blurbs .heading, .profile .friends .heading { background: rgba(255, 255, 66, 0.5); color: #030857; } .right { padding-left: 30px!important; } .comments-table td { border: 0 solid; background: white; border-radius: 0 5px 5px 0; } .comments-table { border: 1px solid black; border-radius: 5px; } .comments-table td:first-child, .music-table td:first-child { vertical-align: middle; background: white; border-radius: 5px 0 0 5px; } .profile .friends p, .blog-entry .comments p, .bulletin .comments p { margin: 0 auto; } .comment-replies { margin: 0 2px 5px 2px; border: 1px solid black; border-radius: 5px; background: #8cdeff; } footer { color: var(--footer-text-color)!important; background: var(--footer-bg-color); border: 1px solid black; border-radius: 5px; } footer a { color: var(--footer-text-color)!important; } .table-section .inner { overflow-y: auto; max-height: 150px; } .blurbs .inner { overflow-y: auto; max-height: 160px; } .friends .inner { overflow-y: auto; max-height: 160px; } /* Mobile */ @media screen and (max-device-width: 500px) { body { font-family: "Verdana"; } .container { margin: 10px auto; } .container::before { width: 97%; margin: 5px auto; } .right { padding-left: 10px!important; direction: ltr; } } </style>