006. idiot

<style type="text/css">

@import url('https://fonts.googleapis.com/css?family=Heebo:100,300,400,500,700,800,900');
@import url('https://fonts.googleapis.com/css2?family=Shippori+Mincho:wght@400;500;600;700&display=swap');

body{
background: linear-gradient(to bottom,#640b13,#831927); /*-- background gradient --*/
}
::-webkit-scrollbar-thumb:vertical{
width: 0px;
background-color: transparent;
}
::-webkit-scrollbar {
width: 0px;
background-color: transparent;
}
::selection {
background: transparent;
color: rgba(366,366,366,.5);
}
::-moz-selection {
background: transparent;
color: rgba(366,366,366,.5);
}
.bg{
position: fixed; margin: auto;
top: 0; left: -750px; right: 0; bottom: 0;
height: 350px; width: 600px;
background: #fff; /*-- box bg color --*/
box-shadow: 10px -10px 0px #a6171b; /*-- box shadow color --*/
}
.bg2{
position: fixed; margin: auto;
top: 0; left: 0; right: 0; bottom: 0;
height: 100%; width: 100%;
background-image: url('https://i.imgur.com/ZQ0S0JW.png'); /*-- background render --*/
background-repeat: no-repeat;
background-position: right;
background-size: 100vh;
}
.bg3{
position: fixed; margin: auto;
top: 0; left: 0;
height: 100%; width: 100%;
background-image: url('https://i.imgur.com/FbnrwJP.png'); /*-- background texture --*/
opacity: .9;
}

.title{
position: fixed; margin: auto;
bottom: 0px; top: -150px; left: -700px; right: 0;
height: 100px; width: 600px;
line-height: 100px;
text-align: left;
font-family: shippori mincho;
font-size: 100px;
font-style: italic;
text-shadow: 10px -20px 0px rgb(242 223 154 / 50%), 10px -40px 0px rgb(110 48 85 / 50%); /*-- name text shadow --*/
letter-spacing: -5px;
font-weight: 600;
color: #a6171b; /*-- name text color --*/
}
.icon{
position: fixed; margin: auto;
top: 0; right: 0; left: -250px; bottom: 0;
border-radius: 2px;
height: 250px; width: 200px;
background-image: url('https://i.imgur.com/qtjIvDf.jpg'); /*-- icon bg --*?
background-repeat: no-repeat;
background-position: center;
background-size: cover;
box-shadow: 10px -10px 0px #a6171b; /*-- icon box shadow --*/
}
.desc{
position: fixed; margin: auto;
top: 0; left: -900px; bottom: -100; right: 0;
height: 145px; width: 350px;
overflow: auto;
font-family: tahoma;
text-transform: uppercase;
font-size: 8px;
line-height: 13px;
text-align: justify;
color: #a6171b; /*-- text color --*/
}
.play{
float: left;
display: inline-block;
margin: 0px 20px;
line-height: 25px;
height: 25px; width: 125px;
border-radius: 2px;
font-family: tahoma;
font-weight: 400;
text-transform: uppercase;
text-align: center;
color: #a6171b; /*-- music player color --*/
padding-right: 10px;
font-size: 8px;
text-align: right;
overflow: hidden;
}
.play span{
float: left;
display: block;
height: 25px; width: 25px;
text-align: center;
}
.play:active span{
color: #000; /*-- music player color on click --*/
}
.music1{
display: block;
float: left;
height: 45px; width: 43px;
opacity: 0;
overflow: hidden;
margin-top: -13px; margin-left: -35px;
}
</style>
<div class="bg2"></div>
<div class="bg"></div>
<div class="icon"></div>
<div class="title">name here</div>
<div class="bg3"></div>
<div class="desc">

<div class="play">song name here
<span>ᐅ</span>
<div class="music1">
<audio controls loop><source src="urlhere"></audio>
</div></div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam at maximus enim. Curabitur vel ligula quam. Phasellus vitae posuere nibh, congue commodo urna. Vivamus a tellus eu orci vestibulum semper a eget metus. Sed in malesuada enim. Fusce quis est posuere, vulputate ipsum id, venenatis nulla. Pellentesque nec diam pharetra quam hendrerit placerat. Fusce ultricies blandit metus, ut sagittis enim consectetur ac.

Pellentesque tempus nisi leo, ac tincidunt leo laoreet ut. Nulla placerat malesuada fringilla. Morbi tempor magna at vulputate tristique. Phasellus et euismod quam, nec ornare quam. Donec ut placerat ante. Duis finibus mattis elit, a suscipit augue porta nec. Ut bibendum, nibh ac dictum tempor, libero orci cursus quam, sed imperdiet ligula mauris vitae nibh.

Etiam aliquam, elit non iaculis hendrerit, elit mi maximus magna, varius vestibulum tellus sapien non dolor. Vivamus justo metus, tempus et odio sit amet, sagittis congue felis. Vivamus dolor arcu, efficitur a diam quis, ullamcorper porta ante. Sed id massa dolor. Cras mattis turpis erat, at dignissim ipsum condimentum semper. Nulla sodales eu dui vel vestibulum. Sed et egestas quam. Maecenas posuere erat at rutrum pretium. Aliquam dapibus, tortor at aliquam feugiat, metus enim porta metus, non facilisis mi erat a mi.

Nunc aliquet nunc ut fringilla mollis. Proin id diam ut tortor ultricies porttitor vitae rhoncus justo. Duis id augue eu sem rhoncus elementum. Cras vestibulum elit vitae dignissim iaculis. Quisque blandit luctus quam eu imperdiet. Suspendisse id tempor metus. In venenatis blandit magna eu porta. Vivamus turpis lacus, pellentesque ut ultricies ac, dapibus a erat. Phasellus bibendum ullamcorper tellus, eu rutrum erat rutrum sit amet.

</div>