Vintage layout for blogs and bulletins :D

So I thought the looks of old things my grandma had were like, super cool, so I thought I could make a layout inspired on that! :D

Well, anyways, this is how it looks. I think it turned out great :)

Though the text might be a little bit difficult to read for some people without the text background, definitely gonna work on a more accessible version!

Code: <style>@import url('https://fonts.googleapis.com/css2?family=Merienda:wght@300..900&display=swap'); body{background: url(https://i.pinimg.com/736x/1f/ab/01/1fab01caf21e73731ab7a9488ffc34a4.jpg); box-shadow: 0px 0px 32px inset #D4A36F; font-family: 'Merienda', 'Times New Roman' !important; font-size: 110%;} nav .top{ margin-top: 5px; background: url(https://i.pinimg.com/736x/99/bd/fc/99bdfc612cb6053b98076e19804d5794.jpg); color: #593027 !important; padding: 20px 10px 18px 10px; filter: sepia(0.2) brightness(92%) contrast(114%); box-shadow: 0px 0px 32px inset #D4A36F; border: double 4px #7A4235;} .logo{content: url(https://albaricokrisdump.carrd.co/assets/images/image30.png?v=ed963a1b); filter: drop-shadow(0px 0px 8px #D4A36F) brightness(108%) contrast(86%);} nav .top .left .logo {width: 160px; height: 50px;} nav .top b{color: #0000;} .container{width: 1000px;} main{border: double 4px #7A4235; margin-top: 5px; background-color: #b97a5755; backdrop-filter: brightness(76%) sepia(0.75) hue-rotate(11deg) contrast(134%); box-shadow: 0px 0px 32px inset #7a4235; padding: 9px; color: #593027 !important;} @media (min-width: 30em) {.col.w-20{width: 18%}} .logout-btn, .kudos-btn{color: #593027 !important; box-shadow: 0px 0px 3px inset #D4A36F, 0px 0px 0px 32px inset #F2DDAB; padding: 2px 4px !important; border: solid 1px #593027;} button{border: solid 1px #593027; box-shadow: 0px 0px 3px inset #D4A36F; background-color: #e5c786; padding: 2px 7px;} footer{background: url(https://i.pinimg.com/236x/5a/8d/a1/5a8da1175f7ba77d32cdcf03d8dfe25b.jpg); border: double 4px #7A4235; filter: sepia(0.5) hue-rotate(5deg) brightness(86%) contrast(121%); box-shadow: 0px 0px 32px inset #7a4235; background-size: 50%; color: #593027 !important;} .edit-info{background: url(https://i.pinimg.com/236x/5a/8d/a1/5a8da1175f7ba77d32cdcf03d8dfe25b.jpg); border: double 4px #7A4235; filter: sepia(0.5) hue-rotate(5deg) brightness(86%) contrast(121%); box-shadow: 0px 0px 16px inset #bf804F; background-size: 75%; color: #593027 !important; text-shadow: 0px 0px 7px #bf804F;} footer p, footer a{font-size: 110%} nav .links a{font-size: 116%; color: #593027; text-shadow: 0px 0px 7px #bf804F;} nav .links{ margin-top: 5px; border: double 4px #7A4235; padding: 18px 0px; text-align: center; background: url(https://i.pinimg.com/736x/ee/ef/61/eeef6196cab16efb6abc2ce5d9731bb2.jpg); background-size: 25%; filter: hue-rotate(15deg) brightness(96%) contrast(121%); box-shadow: 0px 0px 32px inset #bf804F} nav .links li:not(:last-child)::after, footer .links li:not(:last-child)::after {content: " ❀ "; font-size: 123%; color: #dd4433; text-shadow: 0px 0px 7px #EF7054;} #q{border: ridge 2px #bf804F; background: #cd8d113a;} a{color: #dd4433; text-shadow: 0px 0px 7px #EF7054;} .comments-table td:first-child{background: url(https://i.pinimg.com/736x/be/6d/9f/be6d9fbcc39e719d762bc5d3d2db7052.jpg); border: ridge 2px #593027;} .comments-table td:last-child{background: url(https://i.pinimg.com/236x/b7/c7/a6/b7c7a6214526915aed3d2803bc5d91bb.jpg); filter: sepia(0.5) hue-rotate(5deg) brightness(86%) contrast(121%); box-shadow: 0px 0px 10px inset #bf804F; background=size: cover; border: ridge 2px #593027;} .comments-table td:first-child img{filter: sepia(0.5) hue-rotate(5deg) brightness(86%) contrast(121%); box-shadow: 0px 0px 10px inset #bf804F;}</style>