<div class="moxybaul"><div class="nameboxm"><div class="nmox1">MOX</div><div class="nmox2">LEY</div></div><div class="box-dmox"><div class="datosmox"><div class="moxgif"></div><div class="moxquo">I don't want your sympathy, I don't want your honesty, I just want to get some peace of mind. It's only in my head As I roll over and play dead. I don't want to hear it anymore.</div><div class="dmox"><m>nombre completo</m><n>simone silver moxley</n></div><div class="dmox"><m>alias</m><n>mox, moxy</n></div><div class="dmox"><m>edad</m><n>cuarenta y dos años</n></div><div class="dmox"><m>asentamiento</m><n>almyst</n></div><div class="dmox"><m>oficio</m><n>cocinera</n></div><div class="dmox"><m>especialidad</m><n>negociante</n></div></div><div class="musicmox"><div class="mmox"><i class="far fa-waveform"></i><a href="https://youtu.be/R0V0jyg5bA4">lazy bones</a><m>green day</m></div><div class="mmox"><i class="far fa-waveform"></i><a href="https://youtu.be/omGon5N233A">light years beyond</a><m>electric citizen</m></div><div class="mmox"><i class="far fa-waveform"></i><a href="https://youtu.be/dkNfNR1WYMY">the day that never comes</a><m>metallica</m></div><div class="mmox"><i class="far fa-waveform"></i><a href="https://youtu.be/ctiKD8jtvV8">killing in the name</a><m>ratm</m></div><div class="mmox"><i class="far fa-waveform"></i><a href="https://youtu.be/5OzOTjr3eds">hello</a><m>evanescence</m></div><div class="mmox"><i class="far fa-waveform"></i><a href="https://youtu.be/RbmS3tQJ7Os">gimme shelter</a><m>the rolling stones</m></div><div class="botonmox"><a href="#" title="cronología"><i class="fas fa-calendar-times"></i></a><a href="#" title="tablilla de rol"><i class="fas fa-feather"></i></a><a href="#" title="tablilla de combate"><i class="fas fa-swords"></i></a><a href="#" title="relaciones"><i class="fas fa-apple-alt"></i></a></div></div></div><div class="bottomlyrm">Suddenly I know I'm not sleeping. <br>Hello I'm still here, All that's left of yesterday</div></div>

<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=Rajdhani:wght@400;700&display=swap" rel="stylesheet"><link href="https://kit-pro.fontawesome.com/releases/v5.13.0/css/pro.min.css" rel="stylesheet"/>

body{
  background:#000;
}

.moxybaul{
  width: 800px;
  height: 550px;
  background:url(https://i.imgur.com/uNWSHGy.png);
  margin:auto;
  border:20px solid #080808;
  outline:1px solid #111;
  overflow: hidden;
  transition: all ease-in-out 1s;
}

.nameboxm{
  display: flex;
  color: #ccc;
  text-transform:lowercase;
  text-align: center;
  width: 400px;
  height: 550px;
  margin: auto;
  position: relative;
  justify-content: center;
  align-items: center;
}

.nmox1{
  font-family: chill;
  font-size: 250px;
  position: relative;
  left:-60px;
  transition: all ease-in-out 0.9s;
  transition-delay: 0.8s;
}

.nmox2{
  font-family: chill;
  font-size: 250px;
  position: relative;
  right: -30px;
  transition: all ease-in-out 0.8s;
  transition-delay: 0.8s;
}

.moxybaul:hover .nmox1{
  left: -450px;
  transition: all ease-in-out 0.8s;
}

.moxybaul:hover .nmox2{
  right: -450px;
  transition: all ease-in-out 0.8s;
}

.moxybaul:hover{
  background:url(https://i.imgur.com/GrOTXYz.png);
  transition: all ease-in-out 1s;
}

.box-dmox{
  width: 800px;
  height: 550px;
  position: relative;
  top: -550px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: rajdhani;
  text-transform: uppercase;
  font-size: 10px;
  letter-spacing:1px;
}

.datosmox{
  width: 240px;
  height: 380px;
  background:rgba(0,0,0,0.6);
  color: #ccc;
  padding:40px;
  line-height: 12px;
  display: flex;
  flex-wrap: wrap;
  position: relative;
  top: -520px;
  transition: all ease-in-out 0.8s;
}

.dmox{
  width: 240px;
  border-bottom:1px solid #5c4763;
  display: flex;
  align-items: center;
  margin-top:10px;
  padding-bottom:1px;
  justify-content: space-between;
}

.datosmox m{
  font-weight: 700;
}

.datosmox n{
  text-align: right;
}

.moxquo{
  background:#5c4763;
  padding:10px;
  text-align:justify;
  height: 50px;
  line-height: 10px;
}

.moxgif{
  width: 100px;
  height: 100px;
  border-radius: 100%;
  border:10px solid #222;
  margin: auto;
  margin-bottom: 20px;
  background:url(https://i.imgur.com/96AigOD.gif);
}

.musicmox{
  width: 240px;
  height: 380px;
  background:rgba(0,0,0,0.6);
  margin-left: 40px;
  padding: 40px;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  position: relative;
  bottom: -520px;
  transition: all ease-in-out 0.8s;
}

.moxybaul:hover .musicmox{
  bottom: 0px;
  transition: all ease-in-out 0.8s;
  transition-delay: 0.8s;
}


.mmox{
  width: 240px;
  display: flex;
  align-items: center;
  background:rgba(0,0,0,0.4);
  padding:4px;
  line-height: 10px;
}

.moxybaul:hover .datosmox{
  top: 0px;
  transition: all ease-in-out 0.8s;
  transition-delay: 0.8s;
}

.mmox i{
  font-size: 20px;
  color: #ccc;
  padding:10px;
}

.mmox a:hover{
  color: #ccc;
  transition: all ease-in-out 0.3s;
}

.mmox a{
  width: 70px;
  font-size: 11px;
  font-weight: 700;
  color: #5c4763;
  border:0;
  text-decoration: none;
  transition: all ease-in-out 0.3s;
}

.mmox m{
  font-size: 11px;
  color: #999;
  margin-left: 5px;
  display: flex;
}

.mmox m:before{
  content: '/';
  font-weight: 700;
  color: #5c4763;
  margin-right: 10px;
}

.botonmox{
  width: 250px;
  margin: auto;
  display: flex;
  align-items:center;
  margin-top: 20px;
  justify-content: space-between;
}

.botonmox a{
  color: #5c4763;
  font-size: 20px;
  -webkit-text-stroke: 1px transparent;
  transition: all ease-in-out 0.4s;
}

.botonmox a:hover{
  -webkit-text-stroke: 1px #5c4763;
  color: transparent;
  transition: all ease-in-out 0.4s;
}

.bottomlyrm{
  font-family: rajdhani;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 6px;
  color: #ccc;
  position: relative;
  top: -600px;
  text-align: center;
  line-height: 10px;
  transition: all ease-in-out 0.8s;
  transition-delay: 1s;
}

.moxybaul:hover .bottomlyrm{
  filter:blur(10px);
  opacity:0;
  transition: all ease-in-out 0.8s;
}

@font-face {
font-family: 'Chill';
font-style: normal;
font-weight: normal;
src: url('https://dl.dropbox.com/s/agpnu5irqlaaeco/Chillvornia%20Stamp%20Slant.otf') format('woff');
}