html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  overflow: hidden;
}
.fondo{
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url("https://caar1960-page.neocities.org/media/test%20background.png");
  background-size: cover;
  background-position: center;
  z-index: -1;
}

.mainbox{
    width: 708px;
    height: 715px;
    background-color: rgb(1, 76, 175);
    border: 5px solid rgb(0, 162, 255);
    padding: 20px;
    margin: 20px auto;
    color: white;
    position: relative;
    top: 83px;
    right: 51px;
    position: relative;
}

.yellow_box1 {
 width: 532px;
    height: 5px;
    background-color: rgb(16, 0, 160);
    border: 6px solid rgb(45, 0, 245);
    padding: 20px;
    margin: 20px auto;
    color: white;
    top: -654px;
    right: -14px;
    position: relative;
}

.yellow_box2 {
 width: 231px;
    height: 175px;
    background-color: rgb(16, 0, 160);
    border: 6px solid rgb(45, 0, 245);
    padding: 20px;
    margin: 20px auto;
    color: white;
    top: -651px;
    right: 131px;
    position: relative;
}

.yellow_box3 {
 width: 201px;
    height: 175px;
    background-color: rgb(16, 0, 160);
    border: 6px solid rgb(45, 0, 245);
    padding: 20px;
    margin: 20px auto;
    color: white;
    top: -898px;
    right: -161px;
    position: relative;
}

.yellow_box4 {
 width: 225px;
    height: 75px;
    background-color: rgb(16, 0, 160);
    border: 6px solid rgb(45, 0, 245);
    padding: 20px;
    margin: 20px auto;
    color: white;
    top: -858px;
    right: 144px;
    position: relative;
}

.yellow_box5 {
 width: 225px;
    height: 92px;
   background-color: rgb(16, 0, 160);
    border: 6px solid rgb(45, 0, 245);
    padding: 20px;
    margin: 20px auto;
    color: white;
    top: -883px;
    right: 144px;
    position: relative;
}

.yellow_box6 {
 width: 222px;
    height: 210px;
    background-color: rgb(16, 0, 160);
    border: 6px solid rgb(45, 0, 245);
    padding: 20px;
    margin: 20px auto;
    color: white;
    top: -1167px;
    right: -174px;
    position: relative;
}

.greenbox{
 width: 218px;
    height: 0px;
    background-color: rgb(0, 103, 121);
    border: 6px solid rgb(0, 217, 255);
    padding: 20px;
    margin: 20px auto;
    color: white;
    top: -1569px;
    right: 132px;
    position: relative;
}


.secundary_boxe1{
    width: 603px;
    height: 304px;
    background-color: rgba(0, 102, 255, 0.445);
    border: 5px solid rgb(0, 204, 255);
    padding: 20px;
    margin: 20px auto;
    color: white;
    top: 5.7px;
    right: -14px;
    position: relative;
}

.secundary_boxe2{
    width: 598px;
    height: 246px;
    background-color: rgba(0, 102, 255, 0.445);
    border: 5px solid rgb(0, 204, 255);
    padding: 20px;
    margin: 20px auto;
    color: white;
    top: 9px;
    right: -14px;
    position: relative;
}

.bannerprofile_img{
  position: relative;

  height: 300px; /* espacio donde se moverá */
}

.bannerprofile{
  position: relative;
  top: -625px;   /* mueve hacia abajo */
  left: 609px; /* mueve hacia la derecha */
  width: 250px; /* tamaño de la imagen */
  
}

.banner_text{
   height: 246px;
    padding: 20px;
    margin: 20px auto;
    color: white;
    top: -958px;
    right: -648px;
    position: relative;
    font-size : 12px
}

.botton_banner_text{
  height: 246px;
    padding: 20px;
    margin: 20px auto;
    color: white;
    top: -1247px;
    right: -649px;
    position: relative;
    font-size : 12px
}

.profile {
  position: relative;
  width: 35px;
  height: auto;
  left: 625px;
  top: -1544px;
   border: 2px solid rgb(0, 255, 234);
}

.suscribe {
  position: relative;
  width: 65px;
  height: auto;
  left: 684px;
  top: -1560px;
   border: 2px solid rgb(45, 0, 245);
}

.other_stuff{
  height: 246px;
    padding: 20px;
    margin: 20px auto;
    color: white;
    top: -1639px;
    right: -805px;
    position: relative;
    font-size : 20px
}

.profile_main {
  position: relative;
  width: 95px;
  height: auto;
  left: 616px;
  top: -1545px;
   border: 2px solid rgb(0, 255, 234);
}

.info_profile {
height: 246px;
    padding: 20px;
    margin: 20px auto;
    color: white;
    top: -1697px;
    right: -695px;
    position: relative;
    font-size : 13px

}

.suscribe_main {
  position: relative;
  width: 80px;
  height: auto;
  left: 720px;
  top: -1953px;
   border: 2px solid rgb(45, 0, 245);
}

.more_info{
height: 246px;
    padding: 20px;
    margin: 20px auto;
    color: white;
    top: -1955px;
    right: -595px;
    position: relative;
    font-size : 13px
}

.video-container {
  position: relative;
}

.video-container iframe {
  position: absolute;
  top: -2622px;    /* desde arriba */
  left: 622px;  /* desde la izquierda */
  width: 270px;
  height: 161px;
}

.video_page {
 position: relative;
  width: 95px;
  height: auto;
  left: 938px;
  top: -2807px;
   border: 2px solid rgb(255, 0, 0);

}

.dj_anime {
position: relative;
  width: 250px;
  height: auto;
  left: 835px;
  top: -2336px;
}

.critic_page_icon {

  position: relative;
  width: 250px;
  height: auto;
  left: -350px;
  top: -3056px;

}


@keyframes flotar {
  0% {
    transform: translateY(0px);
  }
  50% {
    transform: translateY(-10px);
  }
  100% {
    transform: translateY(0px);
  }
}

.dash_sleep {
  position: relative;
  width: 203px;
  height: auto;
  left: -490px;
  top: -2846px;

  animation: flotar 4s ease-in-out infinite;
}
.return {
  position: fixed;
  width: 503px;
  height: auto;
  left: 640px;
  top: 0px;
}

.metro1 {
position: fixed;
  width: 443px;
  height: auto;
  left: 1460px;
  top: 445px;
}

.metro2 {
position: fixed;
  width: 243px;
  height: auto;
  left: 10px;
  top: 657px;
}