What happened to layouts.

I just finished a layout I worked on for days and now I realize I can't even share it with anyone, what the hell. I'm gonna leave it here as a makeshift workaround for until them but I'm kindof upset about it...

I even put more effort into making it accesible for other people to read :'( ugh

Liquid Future

<style>
@import url('https://fonts.googleapis.com/css2?family=Electrolize&family=Fugaz+One&display=swap');
:root{
--text: darkslategray;
--link: teal;
--accent: coral;
}
</style>
<style>

/* background stuff */

body {
background-color: #3ca; background-image: url(https://64.media.tumblr.com/289276dc86a69dbd78c70ff305b1036c/666098ef1feff9e1-84/s540x810/9ca7c6b68c3f02b9d22dcd740fd79aef969892b2.png), url(https://64.media.tumblr.com/567e58cc6d2b5a3850950af233957e2c/666098ef1feff9e1-b5/s640x960/21c60b2be9349652a544b52eb92f0892a445bb09.png);

background-size: cover; background-attachment: fixed, scroll;
}
main {
background-color: #fff6; backdrop-filter: blur(6px) hue-rotate(-60deg);
background-image: url(https://64.media.tumblr.com/8695636cf93d0650dece291b2383c174/666098ef1feff9e1-ad/s540x810/17a13d1875b980911e3c860f65261c182d69fd34.png);
background-position: bottom; background-size: 100% auto; background-repeat: no-repeat;
border: 10px solid var(--accent); box-shadow: 0px -15px 10px #aea inset;
}

nav .top, .profile .contact .heading, .profile .table-section .heading, .setting-section .heading, .home-actions .heading, .profile .blurbs .heading, .profile .friends .heading
{ background-color: var(--accent); }

input { border: none; background-color: white; box-shadow: 0px 2px #ccf inset; }
button { border:none; background-color: white; transition: 0.25s; }
button:hover { background-color: #ccf; color: #666; }

.profile .contact, .profile .url-info, .profile .table-section,
.profile-info, .setting-section, .home-actions {
border: 4px solid var(--accent); border-bottom: 0px solid; }
.profile-info { border-right: 0px solid; }
.profile-info, .url-info {border-top: 20px solid var(--accent) !important; }

nav .links { background-color: transparent;
background-image: linear-gradient(to right, transparent 10%, #F75c 10%, #F759 20%, var(--accent) 20%); }

footer { background-color: #fff9; backdrop-filter: blur(4px) hue-rotate(-60deg); }

.details-table td:first-child, .comments-table td:first-child  { background-color: #fff4; backdrop-filter: blur(4px) hue-rotate(80deg); box-shadow: -20px 0px inset; }
.comments-table td:first-child { color: var(--link); }

.details-table td, .comments-table td, .profile-info, .contact, .url-info { background-color: #fff8; backdrop-filter: blur(4px) hue-rotate(60deg); }

.comments-table { border: 0px solid transparent; }

/* font stuff */

body { font-family: Electrolize, helvetica, sans-serif; }
main { color: var(--text); }
footer { font-size: 110%; }
a { color: var(--link); } a:hover { color: black; }
.heading a { color: white; }
nav .links a { text-shadow: 0px -2px 4px brown;  }
nav .links li:not(:last-child)::after { color: white; }
.profile .section h4, .online { color: seagreen !important; }

nav .top .center { font-weight: bold; text-shadow: 0px 2px 2px #3009; }

.profile h1 { font-family: Fugaz One, sans-serif; color: var(--accent); font-size: 3.5em;  }
.details-table td:first-child { color: var(--accent); }
.profile .heading h4 { color: white; }

/* positioning stuff */

@media (min-width:810px) {
.profile h1 { rotate: 90deg; position: relative; right: 45%; top: 120px; }
.profile .general-about { left: 40px; position: relative; width: 80%;  }
.profile .edit-link { left: 10%; position: relative; }
.profile .right-side { position:static; }
}

nav .top { border-radius: 0px 0px 0px 32px; }
.profile-info  { border-radius: 4px 0px 0px 19px; }
main { border-radius: 32px 0px 0px 0px; }
main .right, .profile .friends .inner { padding-right:0; }


.profile .contact, .profile .url-info, .profile .table-section,
.setting-section, .home-actions, footer {
border-radius: 4px 4px 19px 4px; overflow-x: hidden; overflow: hidden;
}
nav .links { text-align: right; }

input { border-radius: 0px 16px 16px 0px; }
button { border-radius: 6px 0px 6px 0px; }

.details-table td { border-radius: 0px 0px 32px 0px; }

.comments-table td:first-child { border-radius: 0px 0px 0px 64px; }


/* Weird Stuff */


::-webkit-scrollbar { width:20px; }
::-webkit-scrollbar-thumb { background: var(--accent); transition: 0.2s;
border-radius: 22px 0px 0px 22px; }
::-webkit-scrollbar-thumb:hover { background:lightsalmon;
border-radius: 12px 0px 0px 12px; }


.person img, .comments-table td:first-child img {
height: 95px; width: 95px; background-color: #bee;
mask-image: url("https://64.media.tumblr.com/fa7125c97490e59b4b6be8dcb95d6d4a/666098ef1feff9e1-06/s400x600/48c1cf80a742c993ae8190549c78d88f70e8f13c.png");
mask-size: 100%; mask-repeat: no-repeat;
-webkit-mask-image: url("https://64.media.tumblr.com/fa7125c97490e59b4b6be8dcb95d6d4a/666098ef1feff9e1-06/s400x600/48c1cf80a742c993ae8190549c78d88f70e8f13c.png");
-webkit-mask-size: 100%; -webkit-mask-repeat: no-repeat;
}

/*
------------------------------
CUSTOM ICONS START
------------------------------
*/

a .icon {
display: none;
}
.contact .inner a:before { }
.contact .inner .f-row:nth-child(1) .f-col:nth-child(1) a:before {
/* add to friends */
content: url("https://64.media.tumblr.com/03a0e6b5c4f65b054dbdd5808ef139cc/666098ef1feff9e1-47/s75x75_c1/dc62955dfeffbbcc508c3dd38b1de4d5534f8c87.png")
}

.contact .inner .f-row:nth-child(1) .f-col:nth-child(2) a:before {
/* add to favorite */
content: url("https://64.media.tumblr.com/6e6368dd3c1562d02f4103a5cb4a5d42/666098ef1feff9e1-69/s75x75_c1/95e44309459e673ee12018064ae73ad1341017b6.png")
}

.contact .inner .f-row:nth-child(2) .f-col:nth-child(1) a:before {
/* send a message */
content: url("https://64.media.tumblr.com/800bc10fcbe7081320d08904c066afb3/666098ef1feff9e1-f2/s75x75_c1/ac1f943202f89d18676f3ac753f48653f154496a.png")
}

.contact .inner .f-row:nth-child(2) .f-col:nth-child(2) a:before {
/* forward to friend*/
content: url("https://64.media.tumblr.com/4965d3ad07a7d0527a25ecd311c92d1f/666098ef1feff9e1-79/s75x75_c1/5b2daba12f2207d3b9655b6998bddd3d8a648e18.png")
}
.contact .inner .f-row:nth-child(3) .f-col:nth-child(1) a:before {
/* instant message */
content: url("https://64.media.tumblr.com/ba014d8489dd115183c2efe05d9e7611/666098ef1feff9e1-60/s75x75_c1/10ffc62866c8a5ec531d2e840b1ae51b34726e0d.png")
}
.contact .inner .f-row:nth-child(3) .f-col:nth-child(2) a:before {
/* block user */
content: url("https://64.media.tumblr.com/ad0e274bbe7deeb287b96c8812c2a542/666098ef1feff9e1-cb/s75x75_c1/0e0200f4a1eee86ade52d03df6c258c272fed0f9.png")
}

.contact .inner .f-row:nth-child(4) .f-col:nth-child(1) a:before {
/* add 2 group  */
content: url("https://64.media.tumblr.com/77442bd562c6d712a4b79bbad719e740/666098ef1feff9e1-91/s75x75_c1/77f212ad9ff7a441a4caf5f865b8c7aaf16247ce.png")
}
.contact .inner .f-row:nth-child(4) .f-col:nth-child(2) a:before {
/* report */
content: url("https://64.media.tumblr.com/360542c2ceb74e1b1d3cade0b5ceaef9/666098ef1feff9e1-53/s75x75_c1/f0aecc58819a8a6a353e8a6ad41666fd7250adef.png")
}

/*
------------------------------
CUSTOM ICONS END
------------------------------
*/

</style>