Layout Preview | FriendRewind

Name: FriendRewind
Author: FriendRewind
FriendRewind
← Back to Layouts
old layout

Author: catsatehisface
Category: Personal layout
Created: June 20, 2026
testing if it works
Comments (0)

No comments yet. Be the first!
You must log in to comment.
CSS Code

<style>
<style>
#vinyl-gallery * {
    all: unset;
  }
 
  #vinyl-gallery {
    all: initial!important;
    width: 100%!important;
    height: 230px!important;
    margin: 30px 0!important;
    display: flex!important;
    flex-direction: row!important;
    position: relative!important;
    margin-left: -6px!important;
  }
 
  #vinyl-gallery .vinyl {
      all:unset!important;
    perspective: 500px !important;
    width: 18px!important;
    transition: width 0.5s!important;
  }
 
  #vinyl-gallery .vinyl:hover {
    width: 148px!important;
  }
 
  #vinyl-gallery img {
      all:unset!important;
    transition: transform 0.5s, width 0.5s, height 0.5s, margin-top 0.5s!important;
    width: 180px!important;
    height: 180px!important;
    transform: rotateX(0deg) rotateY(25deg)!important;
    transform-style: preserve-3d!important;
    border-radius: 4px!important;
    border: 2px solid rgba(0, 0, 0, 0.1)!important;
object-fit: cover!important;
  }
 
  #vinyl-gallery .vinyl:hover img {
    transform: rotateX(0deg) rotateY(10deg)!important;
    width: 188px!important;
    height: 188px!important;
    margin-top: -2px!important;
  }
 
  #vinyl-gallery .title {
    color: white;
    display: block;
    visibility: hidden;
    position: absolute;
    bottom: 0px;
    text-align: center;
    width: 100%;
    padding-left: 6px;
  }
 
  #vinyl-gallery .vinyl:nth-child(n):hover + .title {
    visibility: visible;
  }

</style>
<div id="vinyl-gallery">
  <div class="vinyl">
    <img src="https://e.snmc.io/i/600/w/296bece1f65a76b31a60d5d74069aaa1/5138734/millionaires-bling-bling-bling-cover-art.jpg"/>
  </div>
  <div class="title">Millionaires - Bling Bling Bling</div>

  <div class="vinyl">
    <img src="https://e.snmc.io/i/600/w/8527f4168e513b400a6de0ae0fd0635f/2365810/senses-fail-life-is-not-a-waiting-room-Cover-Art.jpg"/>
  </div>
  <div class="title">Senses Fail - Life is Not a Waiting Room</div>

  <div class="vinyl">
    <img src="https://e.snmc.io/i/600/w/e71858f93e55783fee74d424603eeba6/1834338/her-words-kill-load-my-revolver-baby-Cover-Art.jpg"/>
  </div>
  <div class="title">Her Words Kill - Load my Revolver Baby</div>

  <div class="vinyl">
    <img src="https://e.snmc.io/i/600/w/b2b1eeff9f505fe23a97f1a381cd3008/3454251/picture-me-broken-wide-awake-cover-art.jpg"/>
  </div>
  <div class="title">Picture Me Broken - Wide Awake</div>

  <div class="vinyl">
    <img src="https://e.snmc.io/i/600/w/e51954d95f55279861eab135797c9da3/2387116/i-set-my-friends-on-fire-you-cant-spell-slaughter-without-laughter-cover-art.jpg"/>
  </div>
  <div class="title">ISMFOF - You Can't Spell Slaughter Without Laughter</div>

  <div class="vinyl">
    <img src="https://e.snmc.io/i/600/w/015f950e9fd1cb1b571e2065b87d87d5/1775160/unwanted-superheroes-you-dont-need-this-as-bad-as-i-do-cover-art.jpg"/>
  </div>
  <div class="title"> Unwanted Superheros - You Don't Need This as Bad as I do </div>
  <div class="vinyl">
    <img src="https://e.snmc.io/i/600/w/7ef730d241a68c0f5207af1a54dd5f7b/8530462/blink-182-blink-182-Cover-Art.jpg"/>
  </div>
  <div class="title"> Blink-182 - Blink-182 </div>

  <div class="vinyl">
    <img src="https://e.snmc.io/i/600/w/b88f1811f5483b4c32a47941074877b4/1329189/forgotten-tomb-loves-burial-ground-Cover-Art.jpg"/>
  </div>
  <div class="title">Forgotten Tomb - Loves Burial Ground </div>

  <div class="vinyl">
    <img src="https://e.snmc.io/i/600/w/f67cf4c872e06653fbd857eed2f12917/12730665/lifelover-pulver-Cover-Art.png"/>
  </div>
  <div class="title"> Lifelover - Pulver </div>

  <div class="vinyl">
    <img src="https://e.snmc.io/i/600/w/50ae5745a24078d16da70fde399ebfa3/5500772/Party%20Cannon%20-%20Partied%20in%20Half%2C%20Cover%20art.webp"/>
  </div>
  <div class="title"> Party Cannon - Partied in Half</div>

  <div class="vinyl">
    <img src="https://e.snmc.io/i/600/w/4bde96622f338a90891be748338cdb03/11244463/oakwood-summer-Cover-Art.jpg"/>
  </div>
  <div class="title"> Oakwood - Summer </div>

  <div class="vinyl">
    <img src="https://e.snmc.io/i/600/w/12701f55eac75f95ba207a74bfe59345/1974484/xasthur-subliminal-genocide-Cover-Art.jpg"/>
  </div>
  <div class="title"> Xasthur - Subliminal Genocide </div>

  <div class="vinyl">
    <img src="https://e.snmc.io/i/600/w/036f6e0546e6fd7fb74e6eacf0608d52/2484490/bethlehem-dictius-te-necare-Cover-Art.jpg"/>
  </div>
  <div class="title"> Bethlehem - Dictius Te Necare </div>

  <div class="vinyl">
    <img src="https://e.snmc.io/i/600/w/3715f560a21aea3211aeafd68969585f/1410891/gorerotted-a-new-dawn-for-the-dead-Cover-Art.jpg"/>
  </div>
  <div class="title"> Gorerotted - A New Dawn For The Dead </div>

  <div class="vinyl">
    <img src="https://e.snmc.io/i/600/w/32b9ab81a2915915f8343c1cc6b30725/2616244/my-dying-bride-as-the-flower-withers-Cover-Art.jpg"/>
  </div>
  <div class="title"> My Dying Bride - As The Flower Withers </div>

  <div class="vinyl">
    <img src="https://e.snmc.io/i/600/w/547c51a04589daafa331d8ffd57a2d92/10832114/strawberry-switchblade-strawberry-switchblade-cover-art.jpg"/>
  </div>
  <div class="title"> Strawberry Switchblade - Strawberry Switchblade </div>

  <div class="vinyl">
    <img src="https://e.snmc.io/i/600/w/c9ca2f63c92a4fa9f18100ea0a342fec/8977971/la-dispute-wildlife-Cover-Art.jpg"/>
  </div>
  <div class="title"> La Dispute - Wildlife </div>

  <div class="vinyl">
    <img src="https://e.snmc.io/i/600/w/b14b5cae69b9fc987395bb23c6ec100e/9046723/tally-hall-marvins-marvelous-mechanical-museum-cover-art.jpg"/>
  </div>
  <div class="title"> Tally Hall - Marvin's Marvelous Mechanical Museum </div>



  <div class="vinyl">
    <img src="https://e.snmc.io/i/600/w/66e23bb4d5132241f9c5867fc05c5890/5895204/apati-morgondagen-installd-i-brist-pa-intresse-cover-art.jpg"/>
  </div>
  <div class="title"> Apati - Morgondagen Inställd I Brist På Intresse </div>
</div>

<table border="0"><tr><td>
<a href="http://quiz.ravenblack.net/flavour.pl"><img align="LEFT" width="100" height="100" src="http://quiz.ravenblack.net/flavour/10.png" alt="What Flavour Are You? I taste like Beef."/>I taste like <b>Beef</b>.
 I'm probably made of beef. You are what you eat, they say, and if the title didn't mean something else, I would be a beefeater. I think red meat is good for you. Puts hair on your chest. </a><a href="http://quiz.ravenblack.net/flavour.pl">What Flavour Are You?</a>
</td></tr></table>

<img src="http://www.theotaku.com/guru_results/4097_Kuudere.jpg" alt="What Dere Type Are You?" width="48%"/><img src="http://www.theotaku.com/guru_results/3855_Oliver.jpg" alt="Which Vocaloid Are You?" width="48%"/>

<img src="https://media.tenor.com/qdHI3bnCudkAAAAC/blank-room-soup-soup.gif" width="240px"/>

<img src="https://media.tenor.com/kYsjfofXk3oAAAAd/i-feel-fantastic-aughh.gif" width="240px"/>



<style>
/*THE ACTUAL LAYOUT.*/




html,body {cursor: url('https://64.media.tumblr.com/85244815d9a5ba5306a5316c884a0a35/1a44433204416b19-44/s75x75_c1/8fc2cb69821232b468508bee72754bbf60db5492.gifv'), 
auto;}

a:hover{cursor:
url('https://64.media.tumblr.com/f7b3dae63ae50bf6b1e77d93fcb034ed/1a44433204416b19-a7/s75x75_c1/f392f235ca54952b3e699807b37d49cf8f57fc39.gifv'),
auto;}
/* contact icons */
.contact .inner a img {
font-size: 0;
}
.contact .inner a img:before {
font-size: 1em;
display: block
}
.contact .inner .f-row:nth-child(1) .f-col:nth-child(1) a:before {
/* add to friends */
content: url(https://64.media.tumblr.com/f4a6f871e411984d69e371dcf4f1bb32/6fe24381b3ab0462-4a/s75x75_c1/cd509df8a644ce3bf0d856dcd4ad2b4544e23bab.gifv);
}
.contact .inner .f-row:nth-child(1) .f-col:nth-child(2) a:before {
/* add to favorite */
content: url(https://src.uwu.ai/assets/images/gallery13/85471051.gif?v=c16e796a);
}
.contact .inner .f-row:nth-child(2) .f-col:nth-child(1) a:before {
/* send a message */
content:url(https://64.media.tumblr.com/697b01b8d47a42477c97274a4fdfa568/ba553a9c91eba651-ce/s75x75_c1/003cb00e396fb709a52e861b6704cbd09ea543b6.gifv);
}
.contact .inner .f-row:nth-child(2) .f-col:nth-child(2) a:before {
/* forward to friend*/
content: url(https://64.media.tumblr.com/71563dc0fb97177cc819629132a94946/04dfb8c512e3f807-e7/s75x75_c1/76bf47b73887a63c3920e75b8794e4affd7310b2.gifv);
}
.contact .inner .f-row:nth-child(3) .f-col:nth-child(1) a:before {
/* instant message */
content: url(https://64.media.tumblr.com/e766542b34586c4cfae4e5d4538fb903/5d758e6be7ba86e3-f6/s75x75_c1/d5d00743b6237f01a186a91ff979f98466c25c21.gifv);
}
.contact .inner .f-row:nth-child(3) .f-col:nth-child(2) a:before {
/* block user */
content: url(https://64.media.tumblr.com/30fd4954e77c5846054adba6e71dec8d/4976d92061e98e5d-f6/s75x75_c1/f10ff3d261adb1d3a7d644309053ab1be7fed275.gifv);
}
.contact .inner .f-row:nth-child(4) .f-col:nth-child(1) a:before {
/* add 2 group  */
content: url(https://64.media.tumblr.com/caa45b8017e2ea7f04eb10c74f91a11e/ea08c8c0ae432918-a7/s75x75_c1/45e06b97e58b279adae9de19fe2cce5ea9b3315c.gifv) ;
}
.contact .inner .f-row:nth-child(4) .f-col:nth-child(2) a:before {
/* report */
content: url(https://64.media.tumblr.com/5207d46da1383ea39b41f2fe80bb104b/eef96d7787247162-44/s75x75_c1/d50bdd33a16fdb0e749757ec87ee73f38dd89ad0.gifv);

}   

.friends {
    overflow: scroll;
    overflow-x: scroll;
    overflow-x: hidden;
    height: 450px; 
}

nav .top{
background-image: url('https://file.garden/ZSricSDRyR84aPSM/guts%202%20banner');
margin: 1em 0;
text-align: center;
border-radius: 25px;
}

nav .links{
background-image: url('https://www.shutterstock.com/image-photo/detailed-view-blood-filled-cattle-260nw-333083129.jpg');
border-radius: 25px;
display: flex;
flex-wrap: wrap;
justify-content: space-around;
font-family: 'mywitcher';
}
.profile .contact, .profile .table-section, .profile .url-info {
  border: 30px #000;
}

/* colors for the table headings on the left */
 .home-actions .heading {
  background-color: #fff;
  color: #fff;

}

/* colors for table cell background (by default spacehey has a separate color for :first-child) */
.profile .table-section .details-table td {
  background-color: #8b0000;
  color: #000;
}


:root {
    --topic1: "General";  /* EDIT INTEREST LABELS HERE */
    --topic2: "Bands";
    --topic3: "Movies | TV";
    --topic4: "BFFs";
    --topic5: "Food";
    --topic6: "Hobbies";

 }

.table-section:not(:last-child) .details-table tr td:first-child p{color:transparent !important;text-shadow: none !important;letter-spacing: -100px;}

.details-table tr td:first-child p::after{
   color:var(--links) !important;
   letter-spacing:normal !important;
   text-shadow: 2px 2px white !important; /* CHANGE COLOR OF INTEREST LABELS HERE */
   filter: brightness(95%) !important;
}

.table-section:not(:last-child) .details-table tr:nth-child(1) td:first-child p::after{
    content: var(--topic1);
}
.table-section:not(:last-child) .details-table tr:nth-child(2) td:first-child p::after{
    content: var(--topic2);
}
.table-section:not(:last-child) .details-table tr:nth-child(3) td:first-child p::after{
    content: var(--topic3);
}
.table-section:not(:last-child) .details-table tr:nth-child(4) td:first-child p::after{
    content: var(--topic4);
}
.table-section:not(:last-child) .details-table tr:nth-child(5) td:first-child p::after{
    content: var(--topic5);
}
.table-section:not(:last-child) .details-table tr:nth-child(6) td:first-child p::after{
    content: var(--topic6);
}
:root {
    --topic1: "General";  /* EDIT INTEREST LABELS HERE */
    --topic2: "Bands";
    --topic3: "Movies | TV";
    --topic4: "BFFs";
    --topic5: "Food";
    --topic6: "Hobbies";

 }

.table-section:not(:last-child) .details-table tr td:first-child p{color:transparent !important;text-shadow: none !important;letter-spacing: -100px;}

.details-table tr td:first-child p::after{
   color:var(--links) !important;
   letter-spacing:normal !important;
   text-shadow: 2px 2px white !important; /* CHANGE COLOR OF INTEREST LABELS HERE */
   filter: brightness(95%) !important;
}

.table-section:not(:last-child) .details-table tr:nth-child(1) td:first-child p::after{
    content: var(--topic1);
}
.table-section:not(:last-child) .details-table tr:nth-child(2) td:first-child p::after{
    content: var(--topic2);
}
.table-section:not(:last-child) .details-table tr:nth-child(3) td:first-child p::after{
    content: var(--topic3);
}
.table-section:not(:last-child) .details-table tr:nth-child(4) td:first-child p::after{
    content: var(--topic4);
}
.table-section:not(:last-child) .details-table tr:nth-child(5) td:first-child p::after{
    content: var(--topic5);
}
.table-section:not(:last-child) .details-table tr:nth-child(6) td:first-child p::after{
    content: var(--topic6);
}

/* interest title*/
.details-table td:first-child {
    background: #850c00;
    border-radius: 8px;
    color: white;
    font-weight: bold;
    width: 27%;
    box-shadow: 0 0 10px #000, inset 3px 5px #ae1000, inset -7px -9px #2b0400;
    padding: 11px;
}

/* interest text */
.details-table td {
    background: #850c00;
    vertical-align: top;
    border-radius: 8px;
    box-shadow: 0 0 10px #000, inset 5px 6px #ae1000, inset -5px -7px #2b0400;
    padding: 14px;
}





::-webkit-scrollbar {
    width: 01px;
    background-color: #000;
}

::-webkit-scrollbar-thumb {
    border-radius: 10px;
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
    background-color: black;
}

::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
    border-radius: 10px;
    background-color: #000;
}

.general-about img {
        border-radius: 500px;
}


html {
filter: grayscale(50%);
}




body:before {
content: " ";
height: 100vh;
width: 100vw;
display: block;
position: fixed; 
top: 0; 
left: 0; 
z-index: 100;

background-image: url('https://file.garden/ZSricSDRyR84aPSM/disclaimer');
background-size: cover;
background-repeat: no-repeat;
background-position:center;
animation: yourAnimation 1s ease 2.25s 1 normal forwards;
pointer-events: none;}
@keyframes yourAnimation { 0.0%{ opacity: 1;} 75%{ opacity: 1; } 100%{ opacity: 0;} }

 body {  
  background: url(https://media.tenor.com/AXYSMOzS4RUAAAAC/graveyard-grim.gif);
  background-size: cover ;
background-attachment: fixed;
}


main:before{
width: 100%

margin-bottom: 1px;
margin-top: -6px;
height: 140px;
display: block;
content: "";
filter: grayscale(50%);

background-image: url(https://i.pinimg.com/originals/00/43/15/0043153fc830635e80545d9ed70dbd81.gif);
background-position: center center;
background-size: cover;
background-position: center center;
background-color: transparent;
background-repeat: repeat;
}

@media only screen and (max-width: 600px) {
	main:before{
		height: 200px;
	}
}

main {
  background-color: white;
margin-top: -59px;
box-shadow: 5px 5px 19px 6px #000000;
}

@font-face {
     font-family: 'mywitcher';
     src: url('https://file.garden/ZSricSDRyR84aPSM/Nightcore%20Demo.ttf');
}


@font-face {
     font-family: 'blackeb';
     src: url('https://file.garden/ZSricSDRyR84aPSM/blaceb__-webfont.woff2');
}

h1{
color: red !important;
font-family: 'blackeb' !important;
font-size:50px !important;
text-shadow: 3px 3px white;
 }

h2,h3,h4,h5{
color: white !important;
font-family: 'blackeb' !important;
font-size:30px !important;
 }

p{
   color: 

#db2323 !important;
   font-family: 'mywitcher' !important;
   font-size:20px !important;
 }

.online {
    content: url('http://www.myspacegens.com/images/online_now/325.gif');
    box-shadow: 0 0 5px red, 0 0 10px black;
    display: block;
		margin-left: 34px;
		margin-right: auto;
}


:root {
   --darker-blue: white; /* CHANGE COLOR OF PROFILE LINKS */
    --light-orange: url(https://i.pinimg.com/564x/0b/8b/f4/0b8bf402ad9925ad9f03671d1905fe94.jpg); /* CHANGE BACKGROUND OF COMMENT SECTION */
    --even-lighter-orange: url(https://i.pinimg.com/736x/66/40/71/664071870ec74fcc1c49e4b56fac43e9.jpg); /* CHANGE BACKGROUND OF COMMENT SECTION */
} 

.blog-preview{
              font-size: 40px;
margin-top: -40px;
              
}

.profile .blurbs .section h4 {
    color: white;
    text-transform: uppercase;
}

.blurbs {
background:rgba(0, 0, 0, 0.66); border-radius: 25px 25px 25px 25px;  
}

/*TEXT*/
/*THE ACTUAL LAYOUT.*/

nav .top{
background-image: url('https://file.garden/ZSricSDRyR84aPSM/gutsbanner');
margin-bottom: -33px;
text-align: center;
border-radius: 25px 25px 0 0px;
height: 90px;
    box-shadow: 0 0 50px black, 0 0 50px black;
}

nav .links{
    background-color: #db2323;

}
nav .links a {
font-size: 18px;
  color: white;
  text-shadow: none;
}

nav .links a:hover{
    color:red;
  
}


nav .links * {
    padding:0px;
    

}
nav .links li::after {
    content: "" !important;
}

nav .links li .icon{
content: url('https://src.uwu.ai/assets/images/gallery11/6ed19da9.gif?v=c16e796a');
}

/*FLIP CODE*/
.profile{
    direction: rtl;
} 
.blurbs{
    direction: ltr;
} 
.blog-preview{
    direction: ltr; 
} 
.friends{
    direction: ltr; 
}
.general-info{
    direction: ltr; 
} 
.contact{
    direction: ltr; 
}
.url-info{
    direction: ltr; 
}
.details-table{
    direction: ltr; 
}
.profile .table-section .heading{
    direction: ltr; 
}
.details p{
    direction: ltr; 
}
.mood{ 
    direction: ltr;
}
h1,h2,h3,h4,h5,h6{
    direction: ltr; 
}
/*FLIP CODE*/

/*ROUND HEADINGS*/
.profile-info {
background-image: url(https://i.pinimg.com/564x/4c/72/3d/4c723d6b5bd541b890bcc8c1989943b9.jpg);
text-color: white;
}

/*TABLES*/


.profile .friends .person p {
    color: inherit;
    font-weight: bold;
    width: 100%;
    overflow-wrap: break-word;
    word-break: break-word;
    font-size: 100%;
    text-align: center;
}

/*Search Users Box (Background Color/Background Image)*/
    .top input{border-radius: 15px 15px 15px 15px;
}

.profile .friends .person img:not(.icon) { -webkit-mask-image: url(https://images.emojiterra.com/google/noto-emoji/unicode-15/animated/1fac0.gif);-webkit-mask-size: 100%;-webkit-mask-repeat: no-repeat;-webkit-mask-position: center;filter: sepia(100%) hue-rotate(312deg) saturate(4);}


.profile .contact .heading, .profile .table-section .heading, .setting-section .heading, .home-actions .heading {
    background-image: url('https://file.garden/ZSricSDRyR84aPSM/gutsbanner');
    color: white;
    padding: 2px 7px;
    box-shadow: 0 0 5px black, 0 0 10px black;
    border-radius: 8px;
}

.profile .contact, .profile .url-info, .profile .table-section, .setting-section {
border: transparent;
box-shadow: 2px 2px 4px 2px black;
}

.profile .contact, .profile .url-info, .profile .table-section, .setting-section, .home-actions {
    width: 100%;
    border: none;
    margin: 10px 0;
}

.profile .blurbs .inner, .profile .friends .inner, .blog-entry .comments .inner, .bulletin .comments .inner, .setting-section .inner {
    box-shadow: 2px 2px 6px 2px black;

}

.profile .table-section{
    border-radius: 25px 25px 25px 0px !important;
    border-color: #282828;
}

  .profile .contact {
    border:2px solid rgba(0, 0, 0, 0);
    background-image: url(https://i.pinimg.com/564x/8e/7e/41/8e7e41c6ca5075f8d382d77163c5318a.jpg);
    background-position: right top;
    background-repeat: center;
    background-attachment: scroll;
    color: black;   
  border-radius: 15px 15px 15px 15px !important; 

}


table.comments-table p{
   color: white !important;
   font-family: 'mywitcher' !important;
   font-size:25px !important;
 }

table.comments-table a{
   color: red !important;
   font-family: 'mywitcher' !important;
   font-size: 15px !important;
 }


.comments-table td:first-child img {
        border-radius: 25px;
}

comments-table td{
    width:100%;
}

table.comments-table{
    display: block;
    height: 600px !important;
    overflow-y: auto;
    border-width: 0px;
    width:100%;
}

table.comments-table td {
background-color: black !important;
border-radius: 10px;
padding: 1em;
}





/*TABLE*/

/*ROUND HEADINGS*/

/*PROFILE*/
.profile {
background: url(https://media.tenor.com/AXYSMOzS4RUAAAAC/graveyard-grim.gif);
  background-size: cover ;
background-attachment: fixed;
}
.profile .blurbs .heading, .profile .friends .heading {
    background-image:url('https://file.garden/ZSricSDRyR84aPSM/gutsbanner');
    color: white;
    border-radius: 8px;
    padding: 2px 7px;
    box-shadow: 0 0 10px black, 0 0 5px black;
}
/*PROFILE*/




.details-table td, .details-table td:first-child, .details-table td:first-child a:link, .details-table td a:link {
    background:transparent;
    color:white;
}


/*MISC. FEEL FREE TO REMOVE ANYTHING HERE*/

/*HIDDEN*/
.profile .url-info {
height: 332px;
width: auto;
background: url(https://file.garden/ZSricSDRyR84aPSM/jeff%20youtube);
}
.profile .url-info p{
   color: black !important;
   font-family: 'mywitcher' !important;
   font-size:0px !important;
 }


footer, footer *{
    display:none !important;
    background-color:transparent;
}

/*HIDDEN*/
/*MISC. FEEL FREE TO REMOVE ANYTHING HERE*/

/*PC LAYOUT*/
@media(min-width:810px) {
    /*SIZE*/
    .container{
	width:90%;
}
    main {
		float: right;
		width: calc(100% - 190px);
		position: relative;
		z-index: 10;
      	top:-446px;
      border-radius: 0px 0 0px 0px;
	} /*VERY MUCH RATHER NOT MESSING WITH THIS UNLESS YOU KNOW WHAT YOU'RE DOING.*/
    /*SIZE*/
    
    /*NAV BAR*/

   nav .links {
background-image: url('https://file.garden/ZSricSDRyR84aPSM/More%20guts');
background-position: center center;
background-size: cover;
  display: flex;
  flex-direction: column;
  right:0px;
font-family: 'mywitcher';
  margin: 34px 0;
  position: relative;
  border-radius: 0px 0 0 25px;
  width: 189px;
  height:470px;
    box-shadow: 0 0 25px black, 0 0 0px black;
}


.logo{

content:url("https://upload.wikimedia.org/wikipedia/commons/thumb/d/de/Lifelover-logo.svg/2560px-Lifelover-logo.svg.png")
}
    nav .links * {
        padding:5px;
      	margin:auto;
  }
    nav .links li::after {
		content: "" !important;
	}
    nav form {

	
    nav form * {
		width: 140px;
        height:23px
	} 
    nav .left {
		display: flex !important;
		transform: translateX(15px);
		transform: translateY(15px);
	}
}


</style></style>