/*-----------------------------------------------------------------------------------------------------------------*/
/* li a, h1, h2 y footer */
@import url('https://fonts.googleapis.com/css2?family=Doto:wght@100..900&display=swap');

/*
.doto-<uniquifier> {
  font-family: "Doto", sans-serif;
  font-optical-sizing: auto;
  font-weight: <weight>;
  font-style: normal;
  font-variation-settings:
    "ROND" 0;
}
*/


/* body */
@import url('https://fonts.googleapis.com/css2?family=Space+Mono:ital,wght@0,400;0,700;1,400;1,700&display=swap');

/*
.space-mono-regular {
  font-family: "Space Mono", monospace;
  font-weight: 400;
  font-style: normal;
}

.space-mono-bold {
  font-family: "Space Mono", monospace;
  font-weight: 700;
  font-style: normal;
}

.space-mono-regular-italic {
  font-family: "Space Mono", monospace;
  font-weight: 400;
  font-style: italic;
}

.space-mono-bold-italic {
  font-family: "Space Mono", monospace;
  font-weight: 700;
  font-style: italic;
}
*/


/* h1, h2, h3{} para mas headers, lo mismo para el parrafo, y
no mas de 3 tipografias diferentes */
/*-----------------------------------------------------------------------------------------------------------------*/



/*--------------------------------------------------------------*/
/* Esto es el fondo de la página */

body{
  background: url('../images/bg.jpg') no-repeat center center fixed;
  background-size: cover;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
}

/* Estas son las fuentes de letra */

h1, h2, footer{
  font-family: "Doto", sans-serif;
}
  
body{
  font-family: "Space Mono", monospace;
}
/*--------------------------------------------------------------*/



/*---------------------------------------------------------------------------------------------------------------------------------------------------------*/
/* TAMANO DE LA PÁGINA */

#wrapper{
  width: 1260px;
  margin: 0 auto;
}

/* Contenedor de todo el Menu */
#menu1{
  width: 1236px;
  padding: 12px 12px;
  position: relative;
  float: left;
  justify-content: center;
  margin: 0 auto;
  background: #035f56;
  font-weight: bold;
}

/* Versión de la Página */
#version{
  width: 1240px;
  height: 47px;
  padding: 0px 0px 0px 20px;
  float: left;
  margin: 0 auto;
  position: relative;
  background: #ff5691e9;
  color: #ffffff;
}

/* Título de la Página */
#header{
  background-image: url('../images/m_image6.jpg');
  background-size: cover;
  background-position: center;
  width: 1176px;
  display: flex;
  padding: 30px;
  justify-content: center;
  align-items: center;
  color: #360019;
  font-size: 44px;
}

/* Estos son los elementos de Music */

/* Contenedor de Introducción */
#cont_intro{
  width: 1196px; 
  height: 1150px;
  padding: 10px 20px 20px 20px;
  float: left;
  position: relative;
  margin: 0px 0px 12px 0px;
  background: #fffccb;
  color: #000000;
  text-align: left;
}

/* Body de la Introducción */
#body_intro{
  width: 590px;
  height: 475px;
  padding: 0px 19px 0px 19px;
  float: left;
  position: relative;
  margin: 11px 8px 0px 28px;
  background: #06d79f;
  color: #000000;
  font-size: 14px;
  line-height: 1.42;
  text-align: left;
  overflow-y: auto;
}

#body_intro::-webkit-scrollbar {
  width: 8px;
}
#body_intro::-webkit-scrollbar-thumb {
  background-color: #bbb;
  border-radius: 2px;
}
#body_intro::-webkit-scrollbar-track {
  background-color: #eee;
}

/* Imagen Representativa de la Introducción */
#intro_image{
  width: 467px;
  height: 445px;
  padding: 15px 15px;
  margin: 11px 0px 0px 1px;
  float: left;
  position: relative;
  display: flex;
  justify-content: center; 
  align-items: center;     
  background: #06d787;
  color: #000000;
}

/* Estilos que manejo en mis trabajos */
#estilos{
  width: 1164px;
  height: 25px;
  padding: 15px 15px;
  margin: 10px 0px 0px 1px;
  float: left;
  position: relative;
  display: flex;
  justify-content: center; 
  align-items: center;     
  background: #000000;
  color: #ffffff;
  font-size: 14px;
}

/* Álbums */

/* Contenedor de Albums*/
#cont_albums{
  width: 1167px; 
  height: 563px;
  padding: 14px 14px 14px 14px;
  float: left;
  display: flex;
  flex-direction: column;
  align-items: center;  
  text-align: center;   
  margin: 11px 0px 11px 0px;
  background: #06d79f;
  color: #000000;
}

/* Header de Albums*/
#cont_albums h1{
  width: 1147px; 
  height: 20px;
  padding: 11px 4px;
  float: left;
  position: relative;
  margin: 0px 0px 11px 0px;
  display: flex;
  justify-content: center; 
  align-items: center;    
  color: #000000;
  font-size: 43px;
}

/* Descripción del Álbum Nuevo*/
#albumnew_desc{
  width: 524px;
  height: 200px;
  padding: 0px 18px;
  float: left;
  display: flex;
  flex-direction: column;
  position: relative;
  margin: 11px 0px 0px 0px;
  background: #ffd000;
  color: #000000;
  font-size: 14px;
  line-height: 1.5;
  text-align: left;
}

/* Esto es el Footer */

#footer{
  width: 1225px;
  height: 72px;
  float: left;
  position: relative;
  background: #72af00;
  color:#ffffff;
  margin: 0px 0px 0px 0px;
  padding: 5px 5px;
  text-align: center;
}
/*---------------------------------------------------------------------------------------------------------------------------------------------------------*/