@font-face {
    font-family: font;
    /* set name */
    src: url(font.ttf);
    /* url of the font */
}

@font-face {
    font-family: font2;
    /* set name */
    src: url(font2.otf);
    /* url of the font */
}

@keyframes desplazamiento {
    0% {
        transform: translateX(100%);
        /* Comienza fuera de la pantalla a la derecha */
    }

    100% {
        transform: translateX(-100%);
        /* Termina fuera de la pantalla a la izquierda */
    }
}


body {
    background-image: url("https://images.squarespace-cdn.com/content/v1/5b60f1dcf2e6b1ee04e07deb/48e58f71-96ab-49b4-8b7f-b1c0fb797782/Screenshot+2024-12-05+at+10.07.07%E2%80%AFam.png");
    background-position: center;
    background-size: auto;
    background-repeat: initial;

}

.blogdos {
    display: grid;
    justify-content: center;
    border-radius: 8px;
}

.entrada {
    background-color: rgb(177, 214, 141, 0.80);
    width: 91%;
    margin-left: 4.5%;
    margin-right: 4.5%;
    margin-bottom: 1%;
    justify-content: center;
    text-align: center;
    border-radius: 8px;
}

.pa {
    font-family: font;
    text-align: justify;
    margin: 10px;
    font-size: 20px;
    color: #57374B;
    padding: 10px;


}


.palad {
    font-family: font;
    text-align: center;
    margin-left: 50px;
    margin-right: 50px;
    margin-top: 10px;
    margin-bottom: 10px;
    font-size: 20px;
    color: #57374B;

}

#titulo {
    text-align: center;
    font-family: font2;
    font-size: 65px;
    margin: 20px;
    color: bisque;
    text-shadow: -4px 4px #ef3550,
        -8px 8px #f48fb1,
        -12px 12px #7e57c2,
        -16px 16px #2196f3,
        -20px 20px #26c6da,
        -24px 24px #43a047,
        -28px 28px #eeff41,
        -32px 32px #f9a825,
        -36px 36px #ff5722;

}

.bar {
    font-family: font2;
    color: bisque;
    font-size: 15px;
    text-shadow: -2px 2px #57374B;
    margin-bottom: 0%;
}

.bartitulos {
    font-family: font2;
    color: bisque;
    font-size: 15px;
    text-shadow: -2px 2px #57374B;
    margin-bottom: 2px;
}

.bar1 {
    font-family: font2;
    color: bisque;
    font-size: 25px;
    text-shadow: -2px 2px#57374B;
    margin-top: 1px;
}

.lados, .cubo {
    background-color: rgb(177, 214, 141, 0.80);
    text-align: center;
    border-radius: 8px;
}


.lados {
    width: 220px;
}

.centro {
    width: 1000px;
    border-radius: 8px;
}


.blog1, .barra1 {
    display: flex;
    justify-content: center;
    border-radius: 8px;
}

.blog {
    display: flex;
    justify-content: center;
    column-gap: 10px;
    border-radius: 8px;
}

.barra {
    background-color: rgb(177, 214, 141, 0.80);
    width: 307.5px;
    text-align: center;
    margin-bottom: 10px;
    border-radius: 8px;
}



.red {
    display: block;
    justify-content: left;
}

.redimg {
    justify-content: left;
    text-align: left;
    margin-left: 10px;
    margin-right: 1px;
    margin-top: 17px;
    height: 25px;
    width: 25px;
    padding: 1px;
}

.pared {
    font-family: font;
    text-align: left;
    margin-left: 10px;
    margin-right: 10px;
    margin-top: 10px;
    margin-bottom: 10px;
    font-size: 20px;
    color: #57374B;
    text-decoration: none;

}


.cubo {
    margin-bottom: 0%;
}

.bartitulos {
    overflow-wrap: break-word;
    word-break: break-word;
    word-wrap: break-word;
}

.video {
    width: 180px;
    height: 140px;
    border-radius: 8px;
}

.music {
    height: 200px;
    width: 160px;
    margin-left: 30px;
    margin-right: 30px;
    background-color: rgba(225, 225, 225);
    border-radius: 8px;
    position: relative;
     box-shadow: inset 0 4px 10px rgba(0, 0, 0, 0.5);

}

.screen {
    background: darkgrey;
    width: 130px;
    height: 100px;
    margin-left: 15px;
    margin-right: 15px;
    display: flex;
    flex-direction: column;
    align-items: center;
    box-shadow: inset 0 4px 10px rgba(0, 0, 0, 0.5);
    border-radius: 8px;

}

.screen img {
    height: 55px;
    padding: 10px;
    border-radius: 8px;

}

#blanco {
    opacity: 0%;
    margin: 0%;
    height: 15px;
}

.namemusic {
    font-family: font;
    margin: 0%;
    margin-bottom: 10px;
    padding: 0%;
    animation: desplazamiento 5s linear infinite;
    font-size: 17px;
}

.name {
    overflow: hidden;
    /* Oculta el texto cuando sale de la pantalla */
    white-space: nowrap;
    /* Evita que el texto salte a la siguiente línea */
    width: 80%;
}

.wheel {
    position: absolute;
    width: 70px;
    height: 70px;
    background-image: url("https://w7.pngwing.com/pngs/72/69/png-transparent-ipod-shuffle-ipod-touch-portable-media-player-ipod-click-wheel-ipod-mini-ipod-electronics-media-player-fruit-nut-thumbnail.png");
    background-size: cover;
    border-radius: 50%;
    top: 157px;
    left: 50%;
    transform: translate(-50%, -50%);
    /* Ajusta el centro exacto del cuadro */

}

#play {
    display: flex;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    opacity: 0%;
    cursor: pointer;
}

.chat {
  width: 180px;
  height: 220px;
  border-radius: 8px;
  }

.casa {
    width: 300px;
    background-color: #475737;
    border-radius: 8px;
}

.imgblog {
    width: 250px;
    border-radius: 8px;
}

.dos {
    display: none;
}

.btn {
  font-family: "Open Sans", sans-serif;
  font-size: 9px;
  letter-spacing: 2px;
  text-decoration: none;
  text-transform: uppercase;
  color: #475737;
  cursor: pointer;
  border: 3px solid;
  padding: 0.25em 0.5em;
  box-shadow: 1px 1px 0px 0px, 2px 2px 0px 0px, 3px 3px 0px 0px, 4px 4px 0px 0px, 5px 5px 0px 0px;
  position: relative;
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
  margin-bottom: 1%;
  border-radius: 8px;
}


.novedades {
    margin-left: 15%;
    margin-right: 15%;
    background-color: #41573D;
    height: 250px;
    border-radius: 8px;
    box-shadow: rgba(9, 30, 66, 0.25) 0px 1px 1px, rgba(9, 30, 66, 0.13) 0px 0px 1px 1px;
    overflow-y: scroll;
}

.nov {
    color: bisque;
    font-family: font;
    text-align: justify;
    margin: 10px;
    font-size: 20px;
    padding: 10px;

}

.citas {
    font-family: font;
    text-align: center;
    margin-top: 5px;
    margin-bottom: 5px;
    margin-right: 150px;
    margin-left: 150px;
    font-size: 20px;
    color: #57374B;
    padding: 10px;
    font-style: italic;
}

.titdos {
    font-family: font;
    text-align: center;
    margin: 5px;
    font-size: 30px;
    color: #57374B;
    padding: 5px;
    font-style: italic;
}

.dos {
    width: 100%;

}

#tw {
    text-align: center;
    font-family: font;
    font-size: 15px;
    color: rgb(0, 0, 0, 0.67);
}