@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@700&display=swap');
html,body{
  height:100%
}

#hideAll
 {
   position: fixed;
   left: 0px; 
   right: 0px; 
   top: 0px; 
   bottom: 0px; 
   background-color: black;
   z-index: 99; /* Higher than anything else in the document */
 }

body {
  background: #112 url(//images.weserv.nl/?url=i.imgur.com/6QJjYMe.jpg)  center no-repeat;
  background-size:cover;
  margin: 0;
  /* align-items: center; */
  font-family:sans-serif;
  font-size:14px;
  color: gray;
}

.main {
  /* background-color: lightblue; */
  min-height: calc(100vh - 50px); /* para que el footer quede dentro de la pantalla*/
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.logo {
  text-align: center;
  /* width: 100%; */
  /* height: 250px; */
  position: relative;
  top: 40px;
  left: 0;
  right: 0;
  bottom: 0;
   user-select: none;
}

.logo b{
  font: 400 19vw "Roboto";
  /*color: coral;*/
  color: #fee;
  text-shadow: 0 -40px 100px, 0 0 2px, 0 0 1em #ff4444, 0 0 0.5em #ff4444, 0 0 0.1em #ff4444, 0 10px 3px #000;
}
.logo b span{
  animation: blink linear infinite 2s;
}
.logo b span:nth-of-type(2){
  animation: blink linear infinite 3s;
}
@keyframes blink {
  78% {
    color: inherit;
    text-shadow: inherit;
  }
  79%{
     color: #333;
  }
  80% {
    
    text-shadow: none;
  }
  81% {
    color: inherit;
    text-shadow: inherit;
  }
  82% {
    color: #333;
    text-shadow: none;
  }
  83% {
    color: inherit;
    text-shadow: inherit;
  }
  92% {
    color: #333;
    text-shadow: none;
  }
  92.5% {
    color: inherit;
    text-shadow: inherit;
  }
}

.logo c{
  font: 100 4vw "Roboto";
  /*color: coral;*/
  color: #fee;
  text-shadow: 0 -40px 100px, 0 0 2px, 0 0 1em #ff4444, 0 0 0.5em #ff4444, 0 0 0.1em #ff4444, 0 10px 3px #000;
  opacity:0,8
}

/* actividades */
#btn-act{
  clear:both;
  color:#fff;
  /*color:rgba(252,91,0,255);*/
  text-align:center;
  text-decoration:none;
  background:rgba(0,0,0,0.2);
  box-shadow:0 0 0px 3px rgba(0,0,0,0.2);
  opacity:0.5
}#btn-act:hover{color:rgba(252,91,0,255);opacity:0.8}


/* registrate */
#btn-twtr{
  clear:both;
  color:#fff;
  border:2px solid;
  border-radius:3px;
  text-align:center;
  text-decoration:none;
  display:block;
  /*font-family:sans-serif;*/
  font-size:14px;
  width:13em;
  padding:5px 10px;
  font-weight:600;
  /* position:absolute; */
  /* bottom:20px;
  left:0;
  right:0; */
  margin:100px auto;
  background:rgba(0,0,0,0.2);
  box-shadow:0 0 0px 3px rgba(0,0,0,0.2);
  opacity:0.4
}#btn-twtr:hover{color:#fff;opacity:1}

.description {
  /*background-color: steelblue;*/
  width: 50%;
  margin-right: auto;
  margin-left: auto;
}

.footer {
  /*background: red;*/
  /*height: 50px;*/
  display: flex;
  flex:auto;
  justify-content: space-around;
}

.footer__item {
  text-decoration: none;
  color: gray;
}

/* Style all font awesome icons */
.fa {
  /*padding: 10px;*/
  font-size: 30px;
  width: 10px;
  text-align: center;
  text-decoration: none;
  color: white;
}

/* Add a hover effect if you want */
.fa:hover {
  opacity: 0.7;
}

/* Set a specific color for each brand */

/* Facebook */
.fa-facebook {
  /*background: #3B5998;*/
  color: white;
}

/* Instagram */
.fa-instagram {
  /*background: #55ACEE;*/
  color: white;
}