@font-face {
  font-family: 'guitarhero';
  src: url('https://files.catbox.moe/ays2gs.ttf');
}

* {
    margin: 0;
    padding: 0;
}

body {
    margin: auto;
    width: 700px;
    background-color: #000000;
opacity: 1;
background-image:  repeating-linear-gradient(45deg, #0e0e0e 25%, transparent 25%, transparent 75%, #0e0e0e 75%, #0e0e0e), repeating-linear-gradient(45deg, #0e0e0e 25%, #000000 25%, #000000 75%, #0e0e0e 75%, #0e0e0e);
background-position: 0 0, 34px 34px;
background-size: 68px 68px;
}

header {
    font-family: ms gothic;
    font-size: 15px;
    text-shadow: 40px 0px green;
    font-weight: bold;
}

.container {
    color: white;
    padding: 5px;
   margin-top: 120px;
    width: 589px;
    height: 405px;
}


.aboutleft, .aboutright {
    float: left;
    border: 1px solid rgba(56, 56, 56, 1);
    background: black;
    display: inline;
    box-shadow: 0px 0px 8px black;
}

.aboutleft {
    width: 190px;
    margin-right: 5px;

}

.aboutright {
    width: 370px;
    background:rgba(42, 42, 42, 1);
    padding: 5px 10px;
}

.aboutright i {
    color: gray;
}

#foto {
    height: 100px;
    background: rgb(23, 23, 23);
    margin: 5px;
    border-radius: 5px;
    margin-right: 10px;
}

#datos {
    font-family: ms gothic;
    font-size: 9px;
    background: dimgray;
    text-shadow: 1px 1px 2px black;
}

.banderas {
    margin:5px;
    border: 1px dotted dimgray;   
    padding-top: 3px;
    border-radius: 5px;
}
#bandera {
    height: 28px;
    border: 1px dotted gray;
    filter: grayscale(0.5)
}

.factores {
    border-bottom: 1px solid rgb(20, 20, 20);
    font-size: 9px;
    text-align: justify;
    padding: 5px 10px;
    color: gray;
    background: black;
    padding-left: 10px;
}
.factores b{
    color: white;
}

#datitos {margin-bottom: 4px;border-bottom: 1px solid rgba(42, 42, 42, 1);padding-bottom: 2px;}

#fotocancion {
    height: 89px;
    width: 76px;
    float: left;
    margin-right: 5px;
}

.reproductor {
    font-family: ms gothic;
    text-align: left;
    background: black;
    font-size: 10px;
    height: 80px;
    border: 5px white solid;

     border-image-slice: 1;
     border-image-source: linear-gradient(maroon, black);
     background: linear-gradient(black,rgba(42, 42, 42, 1));
}

audio {
    width: 160px;
    height: 40px;
    background: linear-gradient(white,gray);
    margin-left: 5px;
    margin-top: 3px;
    border-radius: 5px;
    box-shadow: 0px 0px 5px black;
}


.cajaright {
    margin: 7px;
    border: 1px solid black;
    padding: 5px;
    font-size: 9px;
    font-family: arial;
    background: linear-gradient(white,#E2E2E2);
    color: black;
    text-shadow: 1px 1px darkgray;
}

.rightleft, #stamps {
    float: left;
    margin: 0;
}

.rightleft {
    width: 270px;
} #stamps {width: 100px;height: 245px;background: url(https://i.pinimg.com/564x/5d/a9/19/5da919bb47da142c0798c67ad09225cd.jpg);background-size: cover;background-position: -50px}



#bold {
    font-weight: bold;
}
#underline {
    text-decoration-line: underline;
}
#destacado {
    background: rgba(42, 42, 42, 1);
}

#destacado2 {
    background: rgba(255, 255, 255, 0.14);
}


body::before {
    content: "";
    display: block;
    position: fixed;
    left: 0;
    top: 0;
    width:100%;
    height:100%;
    background-image: url(https://media.discordapp.net/attachments/820026729070329913/1120817668702871752/computeroverlay.png?width=846&height=635);
    background-position-x: 0px;
    background-position-y: 0px;
    background-repeat: repeat;
    z-index: 10000000;
    pointer-events: none;
}

.xboxthing #title {
    font-weight: bold;
    padding-left: 10px;
    color: white;
    font-size: 12px;
    font-family: ms ui gothic;
    border-bottom: 1px solid rgb(35, 35, 35);
}
.xboxthing {
    background: rgb(0, 0, 0);
    color: white;
    font-size: 10px;
    border: 5px rgb(20, 20, 20) solid;
}

#subtitulo {
    padding-left: 10px;
    font-weight: bold;
    text-align: right;background: linear-gradient(rgb(255, 179, 0) 20%, darkorange, rgba(255, 207, 117, 0) 10%);height: 30px;text-align: left;text-shadow: 1px 0 black, -1px 0 black, 0 1px black, 0 -1px black,
             1px 1px black, -1px -1px black, 1px -1px black, -1px 1px black;
}

#icons img {
    height: 50px;
    margin: 5px;
    margin-left: -5px;
}



musicplayer{
display:grid;
grid-template-columns:20px auto;
align-items:center;
width: 200px;
 
font-size:20px;
line-height:140%;
 
background:white;
 
border: 1px solid black;
 
}
 
#musictitle{
overflow: hidden;
white-space: nowrap;
display:inline-block;
width: calc(100% - 10px - 1px);
margin-left: calc(10px + 1px);
    border: 1px solid dimgray;
    margin-top: 5px;
    margin-left: 5px;
    padding: 5px;
    border-radius: 10px;
    background: linear-gradient(rgba(42, 42, 42, 1),black);
    font-family: arial;
    font-weight: bold;
    text-shadow: 1px 1px dimgray;
    box-shadow: 0px 0px 4px gray;
}
 
#musicpixel{
width:100%;
padding:5px;
position:relative;
 
min-height: 20px;
 
background:white;
 
border-right: 1px solid black;
}
 
 
.overlay {
opacity:0;
position:absolute;
top:0;
left:0;
text-align:center;
width:100px;
height:100%;
transition:0.3s ease;
 
background:white;
}
 
#musicplayer:hover .overlay {
opacity: 1;
transition:0.3s ease;
}
 
.playpause{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
 
.playpause:hover{
cursor:help;
}
 
#musicpixel img{
display:block;
}
 
.marquee{
display: inline-block;
padding-left: 100%;
animation: marquee 5s linear infinite;
}
 
@keyframes marquee{
0% {
    transform: translate(0, 0);
}
100% {
    transform: translate(-100%, 0);
}
}
 
h1 {
    font-size: 15px;
    color: orange;
}

tr {
    background: rgb(24, 24, 24);
    font-family: arial;
}
th {
    border: rgb(73, 73, 73) 1px solid;
    font-weight: lighter;
}

.bio {
    margin: 10px;
    font-family: ms ui gothic;
    background: rgb(23, 23, 23);
    padding: 5px;
    border-radius: 5px;

}

.separador {
    height: 1px;
    width: 100%;
    background: rgb(28, 28, 28);
    margin-bottom: -5px;
}

.interest {
    border: 1px solid black;
    padding: 5px;
    background: rgb(30, 30, 30);
    border-top-left-radius: 10px;
    border-bottom-right-radius: 10px;
    margin-bottom: 5px;
    font-size: 11px;
    color: lightgray;
}

.interest b {
    color: orange;
    text-shadow: 1px 1px black;
}

.interest hr {
    border: 0;
    border-top: 1px solid black;
    margin-top: 3px;
    margin-bottom: 3px;
}