<!-- (c) Layout created by Cory (https://layouts.spacehey.com/layout?id=2403) -->
<style>@import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap');
:root{
--background_image: url('https://images.unsplash.com/photo-1525947088131-b701cd0f6dc3');
--game_image: url('https://i1.sndcdn.com/artworks-000068646422-riuntq-t500x500.jpg');
}
html, body {
background-color: white;
}
body {
background-image: var(--background_image);
background-size:cover;
background-position:center;
}
button{
display: inline-block;
border: none;
padding: 1rem;
margin: 0;
text-decoration: none;
-webkit-appearance: none;
-moz-appearance: none;
font-family: 'Press Start 2P', cursive;
}
a:hover{
text-decoration:none;
}
.inner .f-col a:hover:before, .mood a:hover:before{
display:inline-block;
content: "ᐅ";
margin-right:5px;
}
main {
border-style: solid;
border-width: 200px 180px 696px 170px;
border-image: url('https://i.imgur.com/ALLjxTA.png') 299 284 1220 fill stretch;
background: none;
margin-top: 50px;
margin-bottom: 50px;
filter: drop-shadow(0 0 1em #000000);
transform: rotate(-2deg);
}
.profile {
padding: 20px;
overflow-y: scroll;
display: flex;
height: 420px;
border-radius: 10px;
flex-direction: column;
position: relative;
background: url('https://i.imgur.com/9DCsiKm.png');
background-size: cover;
background-position: center;
background-repeat: no-repeat;
font-family: 'Press Start 2P', cursive;
box-shadow: inset .5em .5em .5em #0F380F88;
}
.profile .left, .profile .right {
transform: inherit !important;
width: 100%!important;
line-height: 1.3em;
font-family: 'Press Start 2P', cursive;
z-index: 2;
background: none;
will-change: opacity;
}
.profile > *{
mix-blend-mode: multiply!important;
filter: grayscale(100%);
-webkit-filter: grayscale(100%);
}
.left h1 {
font-size: 2em;
background-size: cover;
align-items: center;
display: flex;
justify-content: center;
height: 365px;
margin-bottom: 30px;
text-align:center;
color:#456236;
position:relative;
line-height:1em;
}
.left h1:after{
display: block;
position: absolute;
top: 0;
left: 0;
content: " ";
height: 100%;
width: 100%;
background: var(--game_image);
z-index: -2;
opacity: .5;
background-size: cover;
background-position:center;
filter: drop-shadow(5px 5px 0 #0F380F);
}
.profile .contact, .profile .url-info, .profile .table-section, .home-actions, .profile-info, .friends-grid .person, .comments-table td:last-child, .table-section:nth-last-child(2) .details-table tr td:last-child,.table-section:nth-last-child(2) .details-table tr td:first-child{
border:unset;
margin:unset;
}
.left .general-about, .left .mood p, .left .contact, .left .url-info, .profile-info, .friends-grid .person, .comments-table td:last-child, .table-section:nth-last-child(2) .details-table tr td:last-child,.table-section:nth-last-child(2) .details-table tr td:first-child {
border: 2px solid #9BBC0F;
border-radius:5px;
box-shadow: 0 2px 0 2px #0F380F, inset 0 2px 0 2px #0F380F, 0 0 0 2px #0F380F, inset 0 0 0 2px #0F380F;
padding:10px;
margin:10px 0;
}
.table-section:nth-last-child(2) .heading{
display:none;
}
.table-section:nth-last-child(2) .details-table tr td:first-child{
background: none;
display: inline-block;
width: fit-content!important;
margin: 0;
padding: 10px;
z-index: 2;
background-color:#CBD5A5;
}
.table-section:nth-last-child(2) .details-table tr td:last-child{
margin-top: -15px;
padding-top: 26px;
height: 100px;
overflow-y: scroll;
background: none;
}
.left .general-about{
display:flex;
justify-content: space-between;
}
.general-about .profile-pic{
margin:0;
}
.inner .f-row{
display:flex;
flex-direction: column;
margin:0!important;
}
.details-table tr{
display:flex;
flex-direction:column;
}
.details-table td{
width:100%!important;
}
.profile .friends .person{
width: 100%;
display: flex;
flex-direction: row-reverse;
justify-content: space-between;
align-items: center;
padding:10px;
}
.comments-table tr{
display:flex;
flex-direction:row;
}
.comments-table td:first-child, .comments-table td{
width:100%;
}
.comments-table td:first-child{
text-align:left;
background:none;
border:none;
}
.comments-table td:last-child{
height: 230px;
overflow-y: scroll;
width: 210%;
}
.profile .friends .person p{
margin-bottom:0;
}
@media only screen and (max-width: 600px) {
.container {
padding: 0 40px;
overflow-x:hidden;
}
main {
font-size: 8px;
border-width: 60px 70px 260px 60px;
border-image: url('https://i.imgur.com/ALLjxTA.png') 279 284 1200 fill stretch;
transform:scale(1.3) rotate(-2deg);
margin:100px 0;
}
.profile {
height: 175px;
padding: 5px;
overflow-x: hidden;
}
.left h1{
height:145px;
}
.general-about .profile-pic img{
max-width:100%;
}
.left .general-about{
flex-direction:column;
text-align:center;
}
.profile .friends .person{
flex-direction:column-reverse;
}
.comments-table tr{
flex-direction:column;
}
.comments-table td:last-child{
width:100%;
}
}
.profile .left .table-section:last-child .details-table tbody {display:flex;}
.profile .left .table-section:last-child .details-table tbody tr{display:flex;flex-direction:column;flex:1;line-height:0;}
.profile .left .table-section:last-child .details-table tbody tr td{width:100%!important;text-align:center;background:none;}
.profile .left .table-section:last-child .details-table tbody tr td p a{font-size:0;transition:all .3s}
.profile .left .table-section:last-child .details-table tbody tr td p img{font-size:64px;height:auto;margin:0;}</style>
JAJA XD