senedit

<style type="text/css">
@import url('https://fonts.googleapis.com/css?family=Alegreya+Sans+SC');
@import url('https://fonts.googleapis.com/css?family=Bonheur+Royale');
@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&display=swap');
body {
background-image: url("https://www.transparenttextures.com/patterns/blizzard.png"),linear-gradient(90deg, #d5eaf1, #a2b0bb, #687777);
 overflow: hidden;
}
::-webkit-scrollbar {
 width: .1px;
}

::-webkit-scrollbar-track {
 box-shadow: inset 0 0 5px grey;
 border-radius: 10px;
}

::-webkit-scrollbar-thumb {
 background: #b95595;
 border-radius: 10px;
}
::-webkit-scrollbar-thumb:hover {
 background: #b95591;
}

a{
 text-decoration: none;
}

b{
 font-size: inherit;
 background: black;
 font-variant: smallcaps;
 color: #f9edec;
 font-weight: normal;
 padding: 1px 5px 1px 5px;
 letter-spacing: 1px;
 border-radius: 900px;
}

h1{
 font-size: 17;
 letter-spacing: 2px;
 color: #f9edec;
 text-shadow: -1px -1px 0px #000, 1px -1px 0px #000, -1px 1px 0px #000, 1px 1px 0px #000, 2px 2px 0px #000;;
}

hr{
border-top: 1px solid #222;
border-bottom: none;
}

#box {
 position: fixed;
 left:0px;
 bottom: 0px;
 margin: auto;
 height: 650px;
 width: 1265px;
}


#bg {
 position: absolute;
 right: 0px;
 bottom: 2px;
 background-position: 0 0;
 margin: auto;
 height: 430px;
 width: 1085;
 background-image: url("https://img.wallpapersafari.com/desktop/1440/900/69/40/0cp76g.jpg");
 background-size: cover;
background-position: right center;
 z-index: 1;
 bottom: 50px;
 filter: drop-shadow(-2px 2px 0px #687777) drop-shadow(2px 0px 0px #687777) drop-shadow(0px -2px 0px #687777) brightness(0.7);
}

#title {
 position: absolute;
 bottom: -30px;
 right: 10px;
 height: 215px;
 width: 700px;
 font-size: 120pt;
 letter-spacing: 4pt;
 line-height: 1;
 color: #e8bcb9;
font-family: 'Bebas Neue', cursive;
 background: -webkit-linear-gradient(#687777, #d5eaf1);
 -webkit-background-clip: text;
 -webkit-text-fill-color: transparent;
 z-index: 99;
}

#titleshade {
 position: absolute;
 bottom: -30px;
 right: 2px;
 height: 215px;
 width: 700px;
 font-size: 120pt;
 letter-spacing: 4pt;
 line-height: 1;
font-family: 'Bebas Neue', cursive;
 text-shadow: -2px -2px 0px #000, -1px -1px 0px #000, 1px 1px 0px #000, 2px 2px 0px #000, 3px 3px 0px #000, 4px 4px 0px #000;
 z-index: 9;
}


#cred{
 height: 35px;
 width: 35px;
 position:absolute;
 background: black;
 right: 0px;
 bottom: 0px;
 filter: grayscale(1);
}

.render {
 background: url('https://cdn.discordapp.com/attachments/649485777893326869/918001798101471302/Untitled_Artwork.png');
 background-size: cover;
 position:absolute;
 left: 0px;
 bottom: 50px;
 opacity: 1;
 width: 610px;
 height: 644px;
 filter: drop-shadow(-2px 2px 0px #687777) drop-shadow(2px 0px 0px #687777) drop-shadow(0px -2px 0px #687777);
 z-index: 9;
}

.image {
 background: url('https://64.media.tumblr.com/f7ceec5dc77f78b1c727e5b065e1dc83/tumblr_pszw6kag2i1wo3s8g_400.jpg');
 background-size: 100%;
 height: 143px;
 width: 143px;
 top: 0px;
 left: 490px;
 position:absolute;
 border-radius: 40px;
 border: 1px solid black;
 z-index: 99;
 box-shadow: 2px 2px 0px #e8bcb9;
}
.image:hover {
 filter: grayscale(1);
 border-radius: 90px;
 -webkit-animation:spin .5s linear;
 -moz-animation:spin .5s linear;
 animation:spin .5s linear;
}

.image2 {
 background: url('https://i.pinimg.com/474x/cc/64/a4/cc64a46a4fceea5749f457754d0998d6.jpg');
 background-size: cover;
 height: 143px;
 width: 143px;
 top: 0px;
 left: 700px;
 position:absolute;
 border-radius: 40px;
 border: 1px solid black;
 z-index: 99;
 box-shadow: 2px 2px 0px #e8bcb9;
}

.image2:hover {
 filter: grayscale(1);
 border-radius: 90px;
 -webkit-animation:spin .5s linear;
 -moz-animation:spin .5s linear;
 animation:spin .5s linear;
}

.image3 {
 background: url('https://64.media.tumblr.com/097abc623837342a24ce6a1f43582894/tumblr_phku7vl8Q91qmc0az_400.jpg');
 background-size: 100%;
 height: 143px;
 width: 143px;
 top: 0px;
 left: 900px;
 position:absolute;
 border-radius: 40px;
 border: 1px solid black;
 box-shadow: 2px 2px 0px #e8bcb9;
 z-index: 99;
}

.image3:hover {
 filter: grayscale(1);
 border-radius: 90px;
 -webkit-animation:spin .5s linear;
 -moz-animation:spin .5s linear;
 animation:spin .5s linear;
}

.left{
 height: 409px;
 width: 244px;
 position:absolute;
 left: 450px;
 background: none;
 bottom: 60px;
 opacity: 1;
 overflow: auto;
 z-index: 99;
 border-radius: 10px;
}

.overlayl {
 height: 409px;
 width: 244px;
 opacity: 0;
 transition: .5s ease;
 background: #687777;
 overflow: auto;
}

.left:hover .overlayl {
 opacity: 1;
}

.textl {
 padding: 6px;
 overflow: auto;
 line-height: 1.3;
 font-size:13px;
 color: white;
 font-family: 'Alegreya Sans SC', cursive;
 text-align: justify;
 text-shadow: 1px 1px 2px #000;
}

.mid{
 height: 180px;
 width: 200px;
 position:absolute;
 left: 705px;
 background: none;
 bottom: 207px;
 opacity: 1;
 overflow: auto;
 z-index: 99;
 border-radius: 10px;
}

.overlaym {
 height: 180px;
 width: 200px;
 opacity: 0;
 transition: .5s ease;
 background: #687777;
 overflow: auto;
}

.mid:hover .overlaym {
 opacity: 1;
}

.textm {
 padding: 6px;
 overflow: auto;
 font-size:13px;
 color: black;
 font-family: 'Alegreya Sans SC', cursive;
 text-align: center;
}

.right{
 height: 233px;
 width: 333px;
 position:absolute;
 left: 916px;
 background: none;
 bottom: 145px;
 opacity: 1;
 overflow: auto;
 z-index: 99;
 border-radius: 10px;
}

.overlayr {
 height: 233px;
 width: 333px;
 opacity: 0;
 transition: .5s ease;
 background: #687777;
 overflow: auto;
}

.right:hover .overlayr {
 opacity: 1;
}

.textr {
 padding: 6px;
 overflow: auto;
 line-height: 1.3;
 font-size:13px;
 color: white;
 font-family: 'Alegreya Sans SC', cursive;
 text-align: justify;
 text-shadow: 1px 1px 2px #000;
}

.ren2 {
 background: url('https://i.imgur.com/IQanlTJ.png');
 background-size: 100%;
 position:absolute;
 width: 505px;
 height: 900px;
 right: -370px;
 top: -245px;
 opacity: .;
 overflow: auto;
 z-index: -98;
 filter: drop-shadow(-2px 2px 0px #d5eaf1) drop-shadow(2px 0px 0px #d5eaf1) drop-shadow(0px -2px 0px #d5eaf1);
}

#pics {
 width: 57px;
 height: 57px;
 border: 1px solid black;
 overflow: auto;
 margin: 1px 1px 0px 1px;
 background-color: #badede;
 display: inline-block;
 border-radius: 5px;
 transition: 0.5s linear;
}

#pics:hover {
 filter: grayscale(1);
}

@-moz-keyframes spin {
 100%
 {
 -moz-transform: rotate(360deg);
 }
}

@-webkit-keyframes spin {
 100%
 {
 -webkit-transform: rotate(360deg);
 }
}

@keyframes spin {
 100% {
 -webkit-transform: rotate(360deg);
 transform:rotate(360deg);
}
</style>
<div id="box">

<div id="title">Kaibara Sen</div>
<div id="titleshade">Kaibara Sen </div>
<div class="image"></div>
<div class="image2"></div>
<div class="image3"></div>
<div class="render"></div>
<div class="ren2"></div>
<div id="bg"></div>
<div class="left">
<div class="overlayl">
<div class="textl">
<span style="float: left;"><b>Name</b></span><span style="float: right">Sen Kaibara</span><br>
<span style="float: left;"><b>alias</b></span><span style="float: right">Spiral</span><br>
<span style="float: left;"><b>age</b></span><span style="float: right">16</span><br>
<span style="float: left;"><b>species</b></span><span style="float: right">Human</span><br>
<span style="float: left;"><b>height</b></span><span style="float: right">5'8"</span><br>
<span style="float: left;"><b>orientation</b></span><span style="float: right">Straight</span><br>
<span style="float: left;"><b>personality</b></span><span style="float: right">Reserved/Headstrong</span><br>
<span style="float: left;"><b>persuaded by</b></span><span style="float: right">--</span><br>
<span style="float: left;"><b>Quirk</b></span><span style="float: right">Gyrate</span><br><hr>
<b>I'll put something here.</b> <br>When I feel like it<br><hr></div></div></div>

<div class="mid">
<div class="overlaym">
<div class="textm">
<center><h1>Pals</h1></center>
<a target="_blank" href="LINK"><img src="https://i.pinimg.com/originals/aa/29/c8/aa29c87da305509a8a4aa38ad45fe508.gif" id="pics"</a>
<a target="_blank" href="LINK"><img src="https://i.pinimg.com/originals/aa/29/c8/aa29c87da305509a8a4aa38ad45fe508.gif" id="pics"</a>
<a target="_blank" href="LINK"><img src="https://i.pinimg.com/originals/aa/29/c8/aa29c87da305509a8a4aa38ad45fe508.gif" id="pics"</a>
<a target="_blank" href="LINK"><img src="https://i.pinimg.com/originals/aa/29/c8/aa29c87da305509a8a4aa38ad45fe508.gif" id="pics"</a>
<a target="_blank" href="LINK"><img src="https://i.pinimg.com/originals/aa/29/c8/aa29c87da305509a8a4aa38ad45fe508.gif" id="pics"</a>
<a target="_blank" href="LINK"><img src="https://i.pinimg.com/originals/aa/29/c8/aa29c87da305509a8a4aa38ad45fe508.gif" id="pics"</a>
<a target="_blank" href="LINK"><img src="https://i.pinimg.com/originals/aa/29/c8/aa29c87da305509a8a4aa38ad45fe508.gif" id="pics"</a>

</a></div></div></div>
</div>

<div class="right">
<div class="overlayr">
<div class="textr">
<center><h1>Out of Character</h1></center>
<b>o1.</b> <i>.1</i> dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.<hr>
<b>o2.</b> <i>.2</i> dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.<hr>
<b>o3.</b> <i>.3/i> dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.<hr>
<b>o4.</b> <i>.4</i> dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div></div></div>
<div id="cred">
<a target="_blank" href="https://pastebin.com/u/notjustanotter"><img src="https://i.imgur.com/6nVB66x.png" title="you have yee'd your last haw, pardner" id="cred"></a>
</div>