/* CSS files add styling rules to your content */

body {
  font-family: helvetica, arial, sans-serif;
  margin: 2em;
  background-color:#a3a3a3;
}

h1 {
  font-style: normal;
  color: #46d46c;
  font-size:50px;
  padding:0;
  margin: 0;
}

h2{
display: flex;
justify-content: flex-start;
align-items: center;
align-content: center;  
flex-wrap: wrap;  
font-size:20px;  
padding:10px;
margin:3px 5px 0 5px;  
background-color: rgba(255, 224, 20, 100%); 
width:200px;
height:60px;
border-radius: 50px;  
}

.links h2{
font-size:20px;  
background-color: rgba(229, 255, 0, 100%);
padding:0;
margin:5px;
width:600px;   
}

h3{
font-size:30px;
padding: 5px;
}
h4{
padding: 10px;
margin: 0 0 0 10px;
}

header{
display: flex;
justify-content: flex-end;
margin: 10px 150px 0 0;
}

main{
display: flex;
flex-direction: row;
flex-wrap: wrap;  
justify-content: center;
align-items: center;
padding:0;
width:800px;   
}

a {
  color: inherit;
  text-decoration: none;
  /*width:200px;
  height:60px;*/
  width: 100%;
  padding: 0;
  border-radius: 50px;
}

main a{
  display:flex;
  align-items: center;
  color: inherit;
  text-decoration: none;
  width:200px;
  height:60px;
  padding: 0;
  border-radius: 50px;
}


a:hover {
  background-color: #00ff1e;
  width:600px; 
}

.pink a:hover{
background-color: #ff00ff;
width:600px;   
}

.info{
  background-color: rgba(0, 255, 30,100%);
  height:400px;
  width:600px;
}
.info_e{
  background-color: rgba(255, 0, 255,100%);
  height:400px;
  width:600px;
  margin: 10px;
}

.info p {
padding: 30px;
margin: 0;  
}

.info_e p {
padding: 30px;
margin: 0;
 
}
.links{
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
padding:0;
margin:0;
}

.box1{
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
background-color: rgba(255, 0, 255,100%);
padding: 0;
margin: 5px 0 5px 0;
border-radius: 50px;    
}

.box{
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
background-color: rgba(0, 255, 30,100%);
padding: 10px;
margin: 5px 0 5px 0;
border-radius: 50px;    
}

.title{
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}

.title h1{
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
flex-wrap: wrap;
font-size: 80px;  
font-style: italic;
color: #ffffff;
background-color: #fc03d7; 
margin: 10px 0 0 0; 
padding:10px;
border-radius: 30px;  
}

#myCanvas {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
  overflow-y: hidden;
  position: fixed;
  background-size: cover;
}

.columna{
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
padding: 10px;
margin: 10px 10px 0 10px;  
}

.segunda_edicion{
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;  
background-color: #000000;  
width:700px;
height:700px;
border-radius: 50%;
margin: 20px;  
}

.segunda_edicion h1{
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
flex-wrap: wrap;
font-size: 50px;  
font-style: italic;
color: #ffffff;  
margin: 10px 0 0 10px; 
padding:0; 
}

.segunda_edicion a{
width: 100%; 
}


/* Tooltip text */
.tooltip .tooltiptext {
  visibility: hidden;
  width: 120px;
  background-color: black;
  color: #fff;
  text-align: center;
  padding: 5px 0;
  border-radius: 6px;
  z-index: 1;
}

/* Show the tooltip text when you mouse over the tooltip container */
.tooltip:hover .tooltiptext {
  visibility: visible;
}

.emojis a{
display:flex;
flex-direction: column;
justify-content: center;
align-items: center;
font-size: 30px;  
font-style: italic;
width: 300px;
height: 50px;  
margin:0;
}

.emojis h1{
display:flex;
flex-direction: column;
justify-content: center;
align-items: space-between;
font-size: 50px;  
font-style: italic;  
margin:0;
}


/* info style*/

.container{
display:flex;
flex-direction: column;
justify-content: center;
align-items: center; 
}

/* media querys*/

@media only screen and (max-width: 600px) {
  /* For mobile phones: */
  .title, main, .columna, .segunda_edicion{
    width: 100%;
  }
}

@media only screen and (max-width: 600px) {
  /* For mobile phones: */
  .segunda_edicion {
width:450px;
height:450px;
  }
}

@media only screen and (max-width: 600px) {
  /* For mobile phones: */
  .emojis h1{
  font-size:30px;
  }
}

@media only screen and (max-width: 600px) {
  /* For mobile phones: */
  .title h1{
  display:flex;
  flex-direction: column; 
  justify-content: center;  
  font-size:50px;
  width:100%; 
  }
}