cr cyberpinked

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Lato&display=swap" rel="stylesheet">
<style>
@font-face {
font-family: good-time;
src: url(https://dl.dropbox.com/s/ijxda4xb1cyjpe4/KGAlwaysAGoodTime.ttf);
}
@font-face {
font-family: lovely script;
src: url(https://dl.dropbox.com/s/ss5bqbogijw4zfj/Lovely%20Script.otf);
}

@font-face {
font-family: cerl;
src: url(https://dl.dropbox.com/s/vaz4fe5yzk1uiku/CHERL___.TTF);
}

* {
padding: 0;
margin: 0;
}

html, body {
margin: 0;
height: 100%;
}

#holder, body, #holder, #figure, #box {
box-sizing: border-box;
}

body, #figure {
display: flex;
}

body {
height: 100vh;
min-height: 100%;
align-items: center;
justify-content: center;
overflow: hidden;
font-size: 16px;
}

#holder, #figure, #item1, #item2, #box, .section > img {
border-radius: 0.875em;
}

#holder {
background: #ed8c94;
position: relative;
height: 18.875em;
width: 18.875em;
margin: auto;
box-shadow: rgba(50, 50, 93, 0.6) 0px 50px 100px -20px, rgba(0, 0, 0, 0.5) 0px 30px 60px -30px, rgba(10, 37, 64, 0.65) 0px -2px 6px 0px inset;
padding: 0.625em;
}

#figure {
position: relative;
height: 100%;
width: 100%;
overflow: hidden;
-webkit-mask-image: -webkit-radial-gradient(white, black);
flex-direction: column;
}

#holder:hover {
animation: shake 1s, image_blur 1s;
transition: all 1s ease-in-out;
transition-timing-function: cubic-bezier(0.1, 0.8, 0.9, 0.1);
}

#holder:hover .section {
transform: translateY(-17.625em);
}

#holder:hover #box {
transform: translateY(-13em);
animation: fadeIn ease 2s;
-webkit-animation: fadeIn ease 2s;
}

.section {
position: relative;
background: transparent;
width: 100%;
height: 100%;
transition: all 1s ease-in-out;
transition-timing-function: cubic-bezier(0.1, 0.8, 0.9, 0.1);
}

h3 {
z-index: 6;
color: #000;
text-shadow: 0 0 1px white, 0 0 2px white, 0 0 3px white, 0 0 4px white, 0 0 5px white;
font-size: 2em;
opacity: 90%;
font-family: cerl;
}
#holder:hover h3 {
transform: translateY(-7.25em);
animation: fadeIn ease 2s;
-webkit-animation: fadeIn ease 2s;
}

#box, .title, h3 {
margin-right: auto;
margin-left: auto;
left: 0;
right: 0;
}

#box {
z-index: 5;
width: 80%;
height: 50%;
overflow: auto;
background: rgba(237,140,148,0.65);
color: white;
padding: 0.5em;
font-family: 'Lato', sans-serif;
}

img {
pointer-events: none;
}

.title, h3, #box, #left-wing, #right-wing {
position: absolute;
}

.title {
z-index: 99;
font-size: 3.75em;
}

#rainbow {
font-family: good-time;
-webkit-text-stroke: 1px white;
top: -0.425em;
}

#wobble {
color: #fff;
text-shadow: -1px 1px 2px black, 1px -1px 2px black, 1px 1px 2px black, -1px -1px 2px black;
font-weight: bold;
bottom: -0.425em;
font-family: lovely script;
}

#left-wing, #right-wing {
z-index: 10;
bottom: -1.25em;
height: 3.5em;
}
#left-wing {
left: 0.5em;
}

#right-wing {
right: 0.5em;
}

@keyframes shake {
0% {
transform: translate(1px, 1px) rotate(0deg);
}

10% {
transform: translate(-1px, -2px) rotate(-1deg);
}

20% {
transform: translate(-3px, 0px) rotate(1deg);
}

30% {
transform: translate(3px, 2px) rotate(0deg);
}

40% {
transform: translate(1px, -1px) rotate(1deg);
}

50% {
transform: translate(-1px, 2px) rotate(-1deg);
}

60% {
transform : translate(-3px, 1px)
rotate(0deg);
}

70% {
transform: translate(3px, 1px) rotate(-1deg);
}

80% {
transform: translate(-1px, -1px) rotate(1deg);
}

90% {
transform: translate(1px, 2px) rotate(0deg);
}

100% {
transform: translate(1px, -2px) rotate(-1deg);
}
}

@-webkit-keyframes image_blur {
0% {
-webkit-filter: blur(0px);
}

50% {
-webkit-filter: blur(5px);
}

100% {
-webkit-filter: blur(0px);
}
}

@keyframes fadeIn {
0%, 80% {
opacity: 0;
}

100% {
opacity: 1;
}
}

@-webkit-keyframes fadeIn {
0%, 80% {
opacity: 0;
}

100% {
opacity: 1;
}
}
</style>
</head>
<body>
<div id="holder">
<img src="https://dl.dropbox.com/s/kt5585xmp8b1smg/097ABBB3-8542-47DE-BDA3-9B3037C50CA4.gif" id="left-wing">
<img src="https://dl.dropbox.com/s/b9i2lb6eyxx3qj2/5DEC2971-2293-443B-BE85-E6178C40E553.gif" id="right-wing">
<span id="wobble" class="title">Name</span>

<span id="rainbow" class="title">About!</span>
<div id="figure">
<div id="item1" class="section">
<img src="https://media.discordapp.net/attachments/851155413831254076/913928942640058368/unknown.png" width="100%" height="100%">
</div>
<div id="item2" class="section">
<img src="https://media.discordapp.net/attachments/851155413831254076/913928992585834536/unknown.png" width="100%" height="100%">
<h3>info info</h3>
<div id="box">
hello~ my names <strong>name</strong>! text text text text text text text text text text text text text
<br></br>
<strong>notes</strong> text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text
<br></br>
<strong>byr</strong>  text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text
<br></br>
<strong>dni</strong>text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text
<br></br>
<strong>music</strong> <u>text text text text text text text</u> text text text text text text text text text text text text text text text text text text text text text text text <strong>++</strong>
<br></br>
<strong>media</strong> <u>text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text <strong>++</strong>
<br></br>
<a href="URL" target="_blank">link</a>, <a href="URL" target="_blank">link</a>, <a href="URL" target="_blank">link</a>, <a href="URL" target="_blank">link</a>
</div>
</div>
</div>
</div>