body {
          background-image: url('Imagenes/Background.jpg');
          background-size: cover;
	      background-attachment: fixed;
	      background-position: center;

  display: flex;
  justify-content: center; /* horizontal center */
  margin: 0;

        }

.site{
    display: grid;
    grid-template-rows: 200px 41px 500px 42px 600px 42px 62px 52px;
    grid-template-columns: 259px 236px 1px 236px;
    
}

.title{
    grid-row: 1 / 2;
    grid-column: 1 / 3;
    width: 754px;
    height: 200px;
    padding-top: 5px;
    padding-left: 6px;
    font-size: 20px;
    background:url(Imagenes/HeaderWeb.png);
    border: 3px ridge #BCBCBC;
    text-align: center;
    color: blue;
    font-family: 'Comic Sans MS', cursive;
    font-size: 28px;
}

#Head1{
    grid-row: 2 / 3;
    grid-column: 1 / 1;
    width: 259px;
    height: 41px;
    font-size: 20px;
    background:#080917;
    border: 3px ridge #BCBCBC;
    text-align: center;
    color: blue;
    font-family: 'Comic Sans MS', cursive;
    
}

#boddy1{
    grid-row: 3 / 4;
    grid-column: 1 / 1;
    width: 259px;
    height: 500px;
    font-size: 20px;
    background:#080917;
    border: 3px ridge #BCBCBC;
    text-align: center;
    color: blue;
}

#pfp{    
    border: 10px ridge #BCBCBC;
}

#txt1{
    padding-left: 6px;
    text-align: left;
    color: aliceblue;
    font-family: "Georgia", Georgia, serif;
    font-size: 18px;

}

#Head2{
    grid-row: 2 / 3;
    grid-column: 2 / 2;
    width: 495px;
    height: 41px;
    font-size: 20px;
    background:#080917;
    border: 3px ridge #BCBCBC;
    text-align: center;
    color: blue;
    font-family: 'Comic Sans MS', cursive;
}

#boddy2{
    padding-left: 6px;
    grid-row: 3 / 4;
    grid-column: 2 / 2;
    width: 495px;
    height: 500px;
    font-size: 20px;
    background:#080917;
    border: 3px ridge #BCBCBC;
    text-align: center;
    color: blue;
    overflow: auto;
}

#comment{
     width:450px;
}

#Foot2{
    grid-row: 4 / 5;
    grid-column: 1 / 2;
    width: 754px;
    height: 42px;
    font-size: 20px;
    background:#080917;
    border: 3px ridge #BCBCBC;
    color: blue;
    font-family: 'Comic Sans MS', cursive;
}

#Foot3{
    grid-row: 7 / 8;
    grid-column: 1 / 2;
    color: blue;
    font-family: "Georgia", Georgia, serif;
    width: 754px;
}

#spam{
    grid-row: 8 / 8;
    grid-column: 1 / 3;
    width: 754px;
    height: 25px;
}

#punto{
color: #080917;
}

#Head3{
    width: 235px;
    font-size: 20px;
    background:#080917;
    border: 3px ridge #BCBCBC;
    text-align: center;
    color: blue;
    font-family: 'Comic Sans MS', cursive;    
}

#Powered{
    font-family: 'Times New Roman', Times, serif;
}

#boddy3{
    grid-row: 5 / 6;
    grid-column: 1 / 2;
    width: 495px;
    height: 600px;
    font-size: 20px;
    background:#080917;
    border: 3px ridge #BCBCBC;
    text-align: center;
    color: blue;
    overflow: auto;
}

#boddy4{
        grid-row: 5 / 6;
    grid-column: 3 / 3;
    width: 259px;
    height: 642px;
    font-size: 20px;
    background:#080917;
    border: 3px ridge #BCBCBC;
    text-align: center;
    color: blue;
    background-image: url(Imagenes/back\ boddy\ 4.jpg);
    background-size: 259px 642px;
	      background-position: center;
}

#Foot4{
    grid-row: 6 / 6;
    grid-column: 1 / 2;
    width: 495px;
    height: 42px;
    padding-left: 9px;
    font-size: 20px;
    background:#080917;
    border: 3px ridge #BCBCBC;
    color: blue;
    font-family: 'Comic Sans MS', cursive;
}

#oc{
    grid-row: 5 / 5;
    grid-column: 3 / 3;
}

#www{
    padding-left: 347px;
}


/*//////////////////////////////////////////InfiniteSlideShow///////////////////////////////////////////////////*/
.slider-container {
  height: 635px; /* Set a fixed height for the visible area */
  overflow: hidden; /* Hide content outside the container */
  position: relative;
}

.slider-track {
  display: flex;
  flex-direction: column; /* Stack slides vertically */
  position: absolute;
  top: 0;
  left: 0;
  animation: scroll-vertical 13s linear infinite; /* Apply the animation */
}

.slide {
  height: 60px; /* Set a height for each slide */
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

@keyframes scroll-vertical {
  0% {
    transform: translateY(0);
  }
  100% {
    /* Calculate the total height of the original slides and move by that amount */
    transform: translateY(calc(-60px * 13)); /* (slide-height * number-of-original-slides) */
  }
}
/*///////////////////////////////////////////////////////////////////////////////////////////////////////////*/
