@import '/fonts/nippo/css/nippo.css';
@import '/fonts/general-sans/css/general-sans.css';

#svelte{
  font-family: 'Nippo', Helvetica, Arial ,sans-serif; 
  /* height: 100%; */
}
main{
  min-height: 100vh
}
.button.transparent{
  background-color: transparent;
  border: 1px solid white;
  color: white;
}
.title-white{
  color: white!important;
  font-weight: 500!important;
}
.title{
  font-weight: 500!important;
}
.subtitle{
  font-weight: 300!important;
}
body, html{
  height: 100%;
}
a, .general-sans{
  font-family: 'GeneralSans', Arial, Helvetica, sans-serif;
}
/**COLORS**/

:root{
  --economia: #F4374E;
  --ambiente: #BAF734;
  --salud: #4BD6F7;
  --educacion: #32F991;
  --genero: #9F47FC;
  --seguridad: #F7A334;
  --empleo: rgb(244, 55, 78);
  --justicia: #367FFF;
  --institucionalidad: #C4C4C2;
  --vivienda: #F4DB47;

}
/*For icons*/
.economia-path path{
  fill: var(--economia)!important;
}
.ambiente-path path{
  fill: var(--ambiente)!important;
}
.salud-path path{
  fill: var(--salud)!important;
}
.educacion-path path{
  fill: var(--educacion)!important;
}
.genero-path path{
  fill: var(--genero)!important;
}
.seguridad-path path{
  fill: var(--seguridad)!important;
}
.empleo-path path{
  fill: var(--empleo)!important;
}
.justicia-path path{
  fill: var(--justicia)!important;
}
.institucionalidad-path path{
  fill: var(--corrupcion)!important;
}

.black-background{
  background-image: url(black-background-desktop.png);
  background-repeat: repeat;
  background-size: auto;
  position: relative;
}

/* .black-background::before{
  content:'';
  position: absolute;
  width: 100%;
  height: 100%;
  top:0;
  left: 0;
  background: linear-gradient(0deg, rgba(0,0,0,1) 0%, rgba(0,0,0,0.4546860980720413) 100%); 

} */

.white-background-desktop{
background-image: url(white-background-desktop.png);
  background-repeat: no-repeat;
  background-size: ver;
  background-attachment: fixed;
}

.tweets-container .twitter-tweet-rendered{
  margin-left: auto;
  margin-right: auto;
}

.tetris-background {
  background-image: url("/black-background-desktop.png");
  background-attachment: fixed;
  background-repeat: repeat;
}
.hero.tetris-background .hero-body{
  background: linear-gradient(0deg, rgba(0,0,0,1) 0%, rgba(0,0,0,0.4) 90%); 
  background-attachment: fixed;
}
@media screen and (max-width: 1024px){
  .hero.tetris-background .hero-body{
    background: linear-gradient(0deg, rgba(0,0,0,0.4) 0%, rgba(0,0,0,1) 100%); 
  }
}