/* estilos para el índice de la página de fausto sexto*/
     @font-face {
       font-family: 'Px437_LE_Model_D_Mono';
       src: url(fonts/Px437_LE_Model_D_Mono.ttf);
     }
     @font-face {
       font-family: 'Px437_IBM_XGA-AI_12x23';
       src: url(../fonts/Px437_IBM_XGA-AI_12x23.ttf);
     }

  @font-face {
       font-family: 'unscii-16-full';
       src: url(../fonts/unscii-16-full.woff);
     }

     @font-face {
       font-family: 'Px437_Sigma_RM_8x16';
       src: url(fonts/Px437_Sigma_RM_8x16.ttf);
     }
     @font-face {
       font-family: 'Px437_Apricot_200L-2y';
       src: url(fonts/Px437_Apricot_200L-2y.ttf);
     }
     @font-face {
       font-family: 'Px437_EverexME_5x8';
       src: url(fonts/Px437_EverexME_5x8.ttf);
     }
     @font-face {
       font-family: 'Px437_DOS-V_TWN19';
       src: url(fonts/Px437_DOS-V_TWN19.ttf);
     }
     @font-face {
       font-family: 'Constantine';
       src: url(../fonts/Constantine.ttf);
     }
     html { /* body won't work ¯\_(ツ)_/¯ */
       scroll-snap-type: y mandatory;
     }
     
       @font-face {
       font-family: 'unscii-16-full';
       src: url(../fonts/unscii-16-full.woff);
     }

   body {

       height: 100%;
       width: 100%;
       background-color: black;

scroll-behavior: smooth;
color:grey;
overflow-y: auto;
perspective: 2px; /* <-- This line */

     }
     
     span {
         font-family:'unscii-16-full';
     }
     section {
       transform-style: preserve-3d;
       position: relative;
       height: 100vh;
       display: flex;
       align-items: center;
       justify-content: center;

     }
     * {
       box-sizing: border-box;
     }

/* fondo de particulas */
canvas{ display: flex ; vertical-align: bottom; background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover; }
/* ---- particles.js container ---- */
#particles-js{ position:relative; width: 100%;background-color: #000000;

    transform-style: preserve-3d;
  height: 600%;
  display: flex;
  align-items: center;
  justify-content: center;

} /* ---- stats.js ---- */

h1 {

text-shadow: 20px 20px 13px rgba(198, 162, 85,.5);
  position: absolute;
  top:6%;
    margin-left: 15vmax;

align-items: center;
text-align: center;

font-size: 7vw;
margin-bottom: 10vmax;
background: linear-gradient(129deg, #BF953F, #FCF6BA, #B38728, #FBF5B7, #AA771C);

     background-size: 400% 400%;   -webkit-background-clip: text;
-moz-background-clip: text;
-webkit-text-fill-color: transparent;
-moz-text-fill-color: transparent;
  font-family: 'Constantine','unscii-16-full';
  -webkit-animation: AnimationName 14s ease infinite;
  -moz-animation: AnimationName 14s ease infinite;
  animation: AnimationName 14s ease infinite;
}
.contenedorgeneral{
  position: absolute;
  width: 100%;
  align-items: center;
  text-align: center;
  top:0%;
  left:0%;
height: 1900%;

}
     .contenedor {

position: absolute;
top:46%;
left:10%;
right:10%;


scroll-behavior: smooth;
overflow-x: scroll;
overflow-y: hidden;

}

.contenedordeobjeto {
  object-fit: cover;
  height: auto;
   width: 100vw;
   scroll-snap-align: middle;
  scroll-behavior: smooth;

padding:.5vmax;
padding-left: -5vw;
position: relative;



}


     img {


margin-left: 14%;
height:80vh;
width: auto;
       margin-bottom: 1vmax;

     }

     .hide {
       display: none;
       color: gold;
     opacity: 0;

           font-family: 'Px437_DOS-V_TWN19';
   }
     .contenedordeimagen:hover + .hide {
       display: block;
   position: absolute;
   top:0%;
   left:19%;
     transition: 1.4s ease;
   opacity: 1;
   font-size: 1.6vmax;
padding-right: 2px;

       color: gold;
       width: fit-content;
       background-color: black;


         font-family: 'Px437_DOS-V_TWN19';
     }
     img:hover  {



    -webkit-animation: imgfil .4s ease-in-out;
    -moz-animation: imgfil .40s ease-in-out;
    animation: imgfil .40s ease-in-out;
}

@-webkit-keyframes imgfil {
    0%{filter:  invert(66%);}
    50%{filter: hue-rotate(235deg)saturate(5);}
    100%{filter: hue-rotate(0deg);}
}
@-moz-keyframes imgfil {
  0%{filter:  invert(66%);}
  50%{filter: hue-rotate(235deg)saturate(5);}
  100%{filter: hue-rotate(0deg);}
}
@keyframes imgfil {
  0%{filter:  invert(66%);}
  50%{filter: hue-rotate(235deg) saturate(5);}
  100%{filter: hue-rotate(0deg);}
}
     #vertical{
       width: auto;
       max-height: 800px;
       max-width: 800px;
       height: 70vmax;

     }

     #horizontal{
       height:auto;
       width: 70vmax;
     max-height: 800px;
     max-width: 800px;

     }
     .titulodeobra {
       background: linear-gradient(129deg, #BF953F, #FCF6BA, #B38728, #FBF5B7, #AA771C);
font-size: 2.4vmax;
            background-size: 400% 400%;   -webkit-background-clip: text;
       -moz-background-clip: text;
       -webkit-text-fill-color: transparent;
       -moz-text-fill-color: transparent;
         font-family: 'Constantine';
         -webkit-animation: AnimationName 14s ease infinite;
         -moz-animation: AnimationName 14s ease infinite;
         animation: AnimationName 14s ease infinite;
     }
     @-webkit-keyframes AnimationName {
         0%{background-position:0% 52%}
         50%{background-position:100% 49%}
         100%{background-position:0% 52%}
     }
     @-moz-keyframes AnimationName {
         0%{background-position:0% 52%}
         50%{background-position:100% 49%}
         100%{background-position:0% 52%}
     }
     @keyframes AnimationName {
         0%{background-position:0% 52%}
         50%{background-position:100% 49%}
         100%{background-position:0% 52%}
     }
.textodeobjeto{
margin: 2vmax;
  position: static;
  bottom:6%;
  top:60%;
box-sizing: content-box;
padding-left:12vw;
max-width: 55%;
  font-size: 2vmax;
height: fit-content;
  padding-bottom: 4vmax;

font-family: 'Px437_IBM_XGA-AI_12x23';
        background: linear-gradient(279deg, #BF953F, #FCF6BA, #B38728, #FBF5B7, #AA771C);
        background-size: 400% 400%;

        -webkit-animation: AnimationName 17s ease infinite;
        -moz-animation: AnimationName 17s ease infinite;
        animation: AnimationName 17s ease infinite;
        -webkit-background-clip: text;
        -moz-background-clip: text;
        -webkit-text-fill-color: transparent;
        -moz-text-fill-color: transparent;
}

#peque {


}

.sobre {

position: -webkit-sticky;
position: sticky;
margin-top:3%;
left:0%;
top:75%;
max-width: 8%;
width:fit-content;
height: fit-content;
background-color: black;
text-orientation: upright;
box-sizing: border-box;

z-index: 1;

}
.descripcion {
  font-size: 1.8vmax;

  margin-left: 5vmax;
    margin-right: 1vmax;

transform: translateY(-120px);
  font-family: 'Px437_DOS-V_TWN19';
max-width: 17%;

}

h3 {
   letter-spacing: 0px;
    line-height: -0.8;
  font-size: 1.5vmax;
  writing-mode: vertical-lr;
          text-orientation: upright;
            letter-spacing: 0px;
        
            font-family: 'Px437_IBM_XGA-AI_12x23';
}

p {
  padding-top: 1vmax;
  font-size: 1.8vmax;
  position: static;
  margin-left: 5vmax;
    margin-right: 4vmax;
    margin-bottom: 2vmax;


  font-family: 'Px437_DOS-V_TWN19';
}
a {
color:gold;
 text-decoration: none;
 background: linear-gradient(129deg, #BF953F, #FCF6BA, #B38728, #FBF5B7, #AA771C);

      background-size: 400% 400%;   -webkit-background-clip: text;
 -moz-background-clip: text;
 -webkit-text-fill-color: transparent;
 -moz-text-fill-color: transparent;

   -webkit-animation: AnimationName 14s ease infinite;
   -moz-animation: AnimationName 14s ease infinite;
   animation: AnimationName 14s ease infinite;

}
.fausto {
  position: -webkit-sticky;
  position: sticky;
  margin-top:1%;
  left:96%;
  top:0%;
  max-width: 8%;
  width:fit-content;
  height: fit-content;
  background-color: black;

  box-sizing: border-box;
  writing-mode:  vertical-rl;
  text-orientation: upright;
        font-family: 'Px437_DOS-V_TWN19';
}
a:hover {
background: linear-gradient(180deg, #BF953F, #2f012c,#AA771C, #6812c0, #FBF5B7 );
background-size: 900% 900%;   -webkit-background-clip: text;
-moz-background-clip: text;
-webkit-text-fill-color: transparent;
-moz-text-fill-color: transparent;

-webkit-animation: AnimationName 2s ease infinite;
-moz-animation: AnimationName 2s ease infinite;
animation: AnimationName 2s ease infinite;
}
@media screen and (max-width: 800px) {
  .contenedordeobjeto{
    height: fit-content;
  }
  b{
    font-size: 2.6vmax;
  }
  .textodeobjeto{
    font-size: 2.2vmax;
    padding-left:6vw;
    max-width: 86%;
  }
  h1{
        margin-left: 4vmax;
        font-size: 10vw;
        max-width: 80%;
  }
.contenedor{

  width: 95%;
  box-sizing: border-box;
  top:35%;
  left:2%;
  right:2%;
}

  img {
    margin-left: .4vmax;
padding-right: 2%;
padding-left: 2%;
    height:auto;
    width:90vw;
     /* The width is 100%, when the viewport is 800px or smaller */
  }


.contenedorgeneral{
  height: 1000%;
}
  .exposiciones, .eventos, .sobre{
    top:23%;
    max-width: 37%;
  }
}