* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: Helvetica, Arial, sans-serif;
  background: #111;
}

header{
  width: 100vw;
  max-height: 200px;
  justify-content: center;
  display: flex;
}

.fondo{
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url("https://frutiger-aero.org/img/frutiger-eco-2.webp");
  background-size: cover;
  background-position: center;
  z-index: -1;
}

.shadowbox {
  color: rgb(0, 0, 0);
  min-width: 45em;
  width: 45em;
  border: 3px solid #0004ff;
  box-shadow: 8px 8px 5px #0b004d;
  padding: 20px 20px;
  margin: 10px;
  background-image: url('https://pbs.twimg.com/media/DaC-gj5UwAARFWO?format=jpg&name=4096x4096');
  background-size: cover;
  height: 170px;
  position: relative;
}
.logo {
  width: 100%;
  object-fit: cover;
  position: relative;
  top: -65%;
}

.boxes {
  width: fit-content;
}

.box {
  font-size: 20.4px;
  color: rgb(0, 0, 0);
  width: 33.5em;
  min-width: 33.5em;
  border: 3px solid #0004ff;
  background-image: url('https://pbs.twimg.com/media/DaC-gj5UwAARFWO?format=jpg&name=4096x4096');
  background-size: cover;
  height: fit-content;
}

.row {
  width: 100vw;
  display: flex;
  flex-direction: row;
  justify-content: center;
  gap: 1em;
  align-items: anchor-center;
}
#middle-row {
  margin-top: -60px;
}
#final-row{
  align-items: flex-start;
}

.column {
  display: flex;
  flex-direction: column;
}

.page_button {
  font-size: 20.4px;
  color: black;
  width: 5em;
  border: 3px solid #0004ff;
  background-image: url('https://pbs.twimg.com/media/DaC-gj5UwAARFWO?format=jpg&name=4096x4096');
  background-size: 773px 121px;
}
.page_button img {
  width: 50px;
  height: 50px;
  object-fit: cover;
}

.social, .column{
  width: 200px;
  align-items: center;
}

.sociales {
  font-size: 20.4px;
  color: rgb(0, 0, 0);
  width: 5.9em;
  border: 3px solid #0004ff;
  background-image: url('https://pbs.twimg.com/media/DaC-gj5UwAARFWO?format=jpg&name=4096x4096');
  background-size: 773px 121px;
}
.sociales img {
  display: block;      /* Cambia el comportamiento a bloque */
  margin-left: auto;   /* Centrado automático izquierdo */
  margin-right: auto;  /* Centrado automático derecho */
  width: 70px;        /* Tamaño pequeño definido (ajustar según necesidad) */
  height: auto;
}

.stamps {
  font-size: 20.4px;  
  color: rgb(0, 0, 0);
  width: 4.9em;
  border: 3px solid #0004ff;
  background-image: url('https://pbs.twimg.com/media/DaC-gj5UwAARFWO?format=jpg&name=4096x4096');
  background-size: 773px 121px;
  }
.stamps img {
  width: 100%;
  height: auto;
  display: block;
}


.start {
  width: fit-content;
  position: fixed;
  right: 1350px;
  top: 210px;
}

.img_center {
  display: block;
  margin-left: auto;
  margin-right: auto;
  max-width: 100%;
  margin-top: -10%;
}

.art {
  width: fit-content;
  position: fixed;
  right: 1200px;
  top: 220px;
}
.art_img_center {
  display: block;
  margin-left: auto;
  margin-right: auto;
  max-width: 100%;
  margin-top: -7%;
}


.blogger {
  width: fit-content;
  position: fixed;
  right: 1050px;
  top: 220px;

}
.blog_img_center {
  display: block;
  margin-left: auto;
  margin-right: auto;
  max-width: 100%;
  margin-top: -3%;
}

.avgn {
  width: fit-content;
  position: fixed;
  right: 900px;
  top: 220px;
}

.avfn_img_center {
  display: block;
  margin-left: auto;
  margin-right: auto;
  max-width: 100%;
  margin-top: -1%;
}

.box_info {
  font-size: 20.4px;  
  color: rgb(0, 0, 0);
  width: 33.5em;
  border: 3px solid #0004ff;
  background-image: url('https://pbs.twimg.com/media/DaC-gj5UwAARFWO?format=jpg&name=4096x4096');
  background-size: 773px 121px;
  height: 299px;
}

.buttons {

font-size: 20.4px;  
  color: rgb(0, 0, 0);
  width: 6.5em;
  border: 3px solid #0004ff;
  background-image: url('https://pbs.twimg.com/media/DaC-gj5UwAARFWO?format=jpg&name=4096x4096');
  background-size: 773px 121px;
}

.buttons img {

width: 100%;
  height: auto;
  display: block;

}

.box_button {
  width: fit-content;
  position: relative;
 right: -110px;
 top: 30px;
}

.carousel {
  max-width: 456px;
  height: 420px;
  padding: 0;
  display: flex;
  gap: 20px;

  overflow-x: auto;
  scroll-snap-type: x mandatory;
}

.carousel li {
  list-style: none;
  flex: 0 0 100%;
  position: relative;

  border: 5px solid #001aff;
  overflow: hidden;

  scroll-snap-align: center;
}

.carousel img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.carousel h2 {
  position: absolute;
  top: 15px;
  left: 15px;

  margin: 0;
  padding: 6px 12px;

  color: white;
  background: rgba(0,0,0,0.6);
  border-radius: 6px;
}

.carousel b {
  position: absolute;
  top: 59px;
  left: 15px;

  margin: 0;
  padding: 6px 12px;

  color: white;
  background: rgba(0,0,0,0.6);
  border-radius: 6px;
}


.marci{
  position: relative;
  max-width: 300px;
  margin-right: -300px;
  height: auto;
  top: 4px;
}
.bmo{
  position: relative;
  width: 100px;
  height: auto;
  margin-left: -100px;
  right: 25px;
  top: -115px;
}
.one-up_chest {
  position: relative;
  width: 170px;
  height: auto;
  right: px;
  top: 14px;
}
.hungy{
  width: 200px;
  height: auto;
}
.RD {
  position: relative;
  width: 150px;
  height: auto;
  right: 123px;
  top: -146px;
  clip-path: inset(0 0 24px 0);
  margin-right: -150px;
}
.nom {
  position: relative;
  width: 100px;
  height: auto;
  right: -29px;
  top: -95px;
  margin-right: -100px;
  z-index: 1;
}
.aj {
  position: relative;
  width: 200px;
  height: auto;
  right: -104px;
  top: -132px;
  margin-right: -200px;
  z-index: 1;

}
.pinkie {
  position: relative;
  width: 170px;
  height: auto;
  left: 229px;
  top: -142px;
  margin-right: -200px;
  z-index: 1;
}

 
.FS {
  position: relative;
  width: 150px;
  height: auto;
  right: 42px;
  top: 267px;
}

.gem {
  position: relative;
  top: -50px;
  height: auto;
  width: 100px;
  margin-right: -100px;
}
#purple_gem{
  right: -190px;
}
#yellow_gem{
  right: -150px;
}
#blue_gem{
  right: -20px;
}
#green_gem{
  right: -84px;
}
#red_gem{
  right: -12px;
  top: -54px;
}

.prest_start {
  width: 300px;
  position: relative;
  top: -155%;
  right: -25%;
}