mi nueva layout

mas k nada para guardar lo k levo pq me da miedo q se me borre

<p>Mi perfil se ve mal en la aplicación móvil... </p>

<style>

body > div > main > div.row.profile > div.col.w-40.left > div:nth-child(7) > div.inner > table > tbody > tr:nth-child(1) > td:nth-child(2) {

    background-position: 50% 73%;

}

body > div > main > div.row.profile > div.col.w-40.left > div:nth-child(7) > div.inner > table > tbody > tr:nth-child(6) > td:nth-child(2) {

    background-position: 84% 0%;

}

body > div > main > div.row.profile > div.col.w-40.left > div:nth-child(7) > div.inner > table > tbody > tr:nth-child(4) > td:nth-child(2) {

    background-position: 95% 82%;

}

body > div > main > div.row.profile > div.col.w-40.left > div:nth-child(7) > div.inner > table > tbody > tr:nth-child(2) > td:nth-child(2) {

    background-position: 29% 0%;

}

body > div > main > div.row.profile > div.col.w-40.left > div:nth-child(7) > div.inner > table > tbody > tr:nth-child(2) > td:nth-child(2) > ol{

margin-left: 48px;

}

body > div > main > div.row.profile > div.col.w-40.left > div:nth-child(7) > div.inner > table > tbody > tr:nth-child(n) > td:nth-child(2) > p{

    padding: 12px 48px 36px;

    text-shadow: 0px 0px 20px black;

    text-shadow: 1.5px 1.5px 0px black;

}

.details-table td a, ::marker{

    color: wheat;

    font-size: x-large;

    font-weight: bold;

}

.details-table td a:hover {

    text-decoration: line-through !important;

    color: darkred;

    text-shadow: 0 0 1px white;

    text-transform: uppercase;

}

.details-table td a:hover:after{

    content: " (completed)";

}

.details-table td p{

    color: white;

    font-size: medium;

    text-align: center;

}

body > div > main > div.row.profile > div.col.w-40.left > div.contact > div.inner > div:nth-child(4), body > div > main > div.row.profile > div.col.w-40.left > div.contact > div.inner > div:nth-child(2) {

    width: 0px;

}

.top{

    background: linear-gradient(90deg, black, darkred) !important;

}

nav .links {

    display: flex !important;

    justify-content: space-evenly !important;

  align-items: center !important;

    display: flex !important;

padding: 10px 6px 8px !important;

}

nav .links a{

    padding: 5px;

    color: white !important;

}

.links:nth-child(2) a{

  border: #00000000 2px solid ;

      text-shadow: none !important;

}

.links:nth-child(2) a:hover {

 background: linear-gradient(to bottom, #ffffff40, #fff6 50%, #ffffff40 50%, #ffffff1a) !important;

    outline: solid thin rgba(0, 0, 0, .5);

    text-decoration: none !important;

    box-shadow: inset 0 0 0 1px #ffffff80;

    border-radius: 8px;

    color: white !important;

    animation: none;

}

nav .links li:not(:last-child)::after, footer .links li:not(:last-child)::after {

    content: none;

    color: black;

}

.logo{

content:url("");

}

table.details-table {

}

.profile .contact .heading, .profile .table-section .heading, .setting-section .heading, .home-actions .heading {

    background: darkred;

    display: flex;

    align-items: center;

    justify-content: center;

    font-size: large;

    text-transform: uppercase;

}

    @keyframes slide {

        20% {

            background: linear-gradient(72deg, rgb(71, 16, 16), rgb(19, 4, 4));

        }

        40% {

            background: linear-gradient(144deg, rgb(71, 16, 16), rgb(19, 4, 4));

        }

        60% {

            background: linear-gradient(216deg, rgb(71, 16, 16), rgb(19, 4, 4));

        }

        80% {

            background: linear-gradient(288deg, rgb(71, 16, 16), rgb(19, 4, 4));

        }

        100% {

            background: linear-gradient(360deg, rgb(71, 16, 16), rgb(19, 4, 4));

        }

    }

body > div > main > div.row.profile > div.col.w-40.left > div:nth-child(8){

display: none;

}

body > div > main > div.row.profile > div.col.w-40.left > div.contact > div.inner > div:nth-child(n) > div:nth-child(n):hover:after {

    color: darkred;

display:flex;

}

body > div > main > div.row.profile > div.col.w-40.left > div.contact > div.inner > div:nth-child(1) > div:nth-child(1):after {

    content: "";

    color: white;

    display: none;

    align-items: end;

    font-weight: lighter;

}

body > div > main > div.row.profile > div.col.w-40.left > div.contact {

    display: block !important;

}

body > div > main > div.row.profile > div.col.w-40.left > div.contact > div.inner {

    background: linear-gradient(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 10)), url(https://external-media.spacehey.net/media/sf467ER5agtB03PvN_ihAC5dYo4HzfeuSRtGjmvdQJK8=/https://i.ibb.co/Sw5KXZgG/anyone-else-really-love-the-red-dithering-filter-v0-sa47yvvpw51e1.webp);

    display: grid;

    grid-template-columns: 50% 50%;

    padding: 10px 0px;

}

.profile .contact .f-row {

    margin: 0px;

    width: 200%;

}

.f-col {

    display: flex;

    flex-direction: row;

}

body > div > main > div.row.profile > div.col.w-40.left > div.contact > div.inner > div:nth-child(n) > div:nth-child(n) > a {

    background-position: 45% 0%;

    transition: background-position 5s ease-out;

    color: black;

    background: url(https://external-media.spacehey.net/media/stTuLJhXJC02KkGUfzlVUPmFEHT5NLbM7skFTxO6sTWQ=/https://i.ibb.co/6qff8v3/360-F-195365048-5-WMfb-AEiwd-Xt-ESNz-T2-Am-VNMFVP6-Uenaa.jpg) repeat;

    mask-image: linear-gradient(180deg, transparent 0%, black 10%, black 90%, transparent 100%), linear-gradient(90deg, transparent 0%, black 10%, black 90%, transparent 100%);

    mask-composite: intersect;

    height: 40px;

    border-top: black 3px solid;

    border-bottom: black 3px solid;

    padding: 6px 0px 0px 12px;

    text-decoration: none;

    text-transform: uppercase;

    width: 40%;

    font-size: large;

    mask-image: linear-gradient(180deg, transparent 0%, black 10%, black 90%, transparent 100%), linear-gradient(90deg, transparent 0%, black 5%, black 70%, transparent 100%);

}

body > div > main > div.row.profile > div.col.w-40.left > div.contact > div.inner > div:nth-child(n) > div:nth-child(n) > a:hover {

    background-position: 75% 0%;

    border-top: white 3px solid !important;

    border-bottom: white 3px solid !important;

    color: white !important;

    font-weight: bold;

    text-shadow: 0 0 6px white;

}

body > div > main > div.row.profile > div.col.w-40.left > div.contact > div.inner > div:nth-child(n) > div:nth-child(n) > a:before {

    content: "‍♦ ";

    margin-left: 20px;

}

body > div > main > div.row.profile > div.col.w-40.left > div.contact > div.inner > div:nth-child(n) > div:nth-child(n) > a:hover:after{

    content: "‍ ";

}

body > div > main > div.row.profile > div.col.w-40.left > div.contact > div.inner > div:nth-child(n) > div:nth-child(n) > a > img {

    display: none;

}

body{

        background: linear-gradient(0deg, rgb(71, 16, 16), rgb(19, 4, 4));

        animation: slide 30s linear infinite;

  font-family: "Times New Roman", Times, serif;

}

body > div > main > div.row.profile > div.col.w-40.left > div:nth-child(7) > div.inner > table > tbody > tr:nth-child(n) > td:nth-child(1) > p:after{

    content: "‍ ► ";

}

div.inner > table > tbody > tr:nth-child(n) > td:nth-child(1) > p {

    mask-image: linear-gradient(to right, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 1) 50%, rgba(255, 255, 255, 0.1) 100%);

    text-align: center;

    border-bottom: white 2px solid !important;

    color: white !important;

    justify-self: center;

    width: 75%;

    transition: 4s;

padding: 12px 0px 8px;

    font-size: x-large;

}

div.inner > table > tbody > tr:nth-child(n) > td:nth-child(1) > p:hover {

    color: darkred !important;

    border-bottom: darkred 2px solid !important;

}

.container {

    margin: 45px auto 0 auto;

  width: 1080px;

}

/* Barra de titulo de cada sección*/

.profile .heading{

  text-align: center;

}

/* Secciones completas*/

.profile .contact, .profile .url-info, .profile .table-section, .setting-section, .home-actions {

border: none;

}

nav .top {

    width: 100vw;

    position: fixed;

    top: 0;

    left: 0;

    margin: 0;

    padding: 0;

    z-index: 1;

}

    .links:nth-child(2) {

        text-align: center;

        top: calc((44.85px - 40.633px) / 2) !important;

    }

.details-table td{

display: block;

    background:url("https://i.ibb.co/3m2rY9B2/628354.jpg");

}

.details-table td:first-child {

background: black !important;

    color: white;

    font-weight: bolder;

    text-transform: uppercase;

    font-size: large;

    vertical-align: middle;

width: 100%;

}

.links:nth-child(2) {

    position: fixed;

    left: calc(100vw / 4);

    right: calc(100vw / 4);

    top: calc(44.85px / 4);

    background: rgba(0, 0, 0, 0);

    z-index: 2;

}

.center:nth-child(2) {

    height: fit-content !important;

    text-align: right;

    width: fit-content;

    position: absolute;

    top: 5px;

    right: 28px;

}

.right:nth-child(3) {

    height: fit-content;

    position: absolute;

    right: 25px;

    bottom: 2px;

}

/* atento abajo */

    .col.w-40 {

        width: 100%;

  }

.col {

        display: flex;

        flex-direction: column;

    }

}

.general-about .profile-pic img {

    max-width: 160px;

    max-height: 160px;

    border-radius: 50%;

}

.general-about {

    display: flex;

    align-items: center;

}

.general-about .details {

    flex-grow: 1;

}

.general-about .details:after {

  background: #dbdbdb;

  content:"the fear of blood tends to create fear for the flesh.";

  color: Black;

  font-style: italic;

  font-weight: bolder;

  display: flex; 

  justify-content: center;

    animation-name: parpadeo;

    animation-iteration-count: infinite;

    animation-timing-function: cubic-bezier(1.0, 0, 0, 1.0);

    animation-duration: 2s;

}

@keyframes parpadeo {

  0%, 20%  { color: #000000; } 

  40%     { color: #0000003e; }  

  100%     { color: #000000; } 

}

a:hover:not(#previewContainer > div > nav > ul > li:nth-child(n) > a, #dos > div:nth-child(4) > h4 > a, .pfp-fallback, #dos > div:nth-child(4) > h4 > a,body > div > nav > div > div.left > a,.person a,body > div > nav > ul > li:nth-child(n) > a, body > div > nav > ul > li:nth-child(n) > a):after {

    content: "...?";

}

n) > a, div.row.profile > div.col.w-40.left > div.contact > div.inner > div:nth-child(4) > div:nth-child(n) > a {

display:none;

}

</style>