#app{
    display: flex;
    flex-direction:column;
    width:40vw;
    background-color:#595959;
    margin:auto;
    font-family:roboto;
    font-size:15px;
    }

#inicioapp{
    display: flex;
    flex-direction:column;
    width:40vw;
    background-color:#595959;
    margin:auto;
    font-family:roboto;
    font-size:15px;
    text-align:center;
    justify-content: center;
    align-items: center;
    padding-top:2rem;
    padding-bottom:3rem;
    }


header{
    display: inline-flex;
    justify-content: space-between;
    background-color:#7eefcc;
    padding:0.5rem;
    }

header h1{
    font-family:'roboto', sans-serif;
    font-size:0.8rem;
    color:#666;
    letter-spacing:1px;
    padding-left: 1rem;
    margin-top:5px;
        }

header img{
    width:27%;
    opacity:0.5;
    padding-top:0.3rem;
            }

a{
      text-decoration: none;
      }

footer{
    background-color:#b8a6e4;
        }

nav ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    width:100%;   }

nav li {
    width:20%;
    float: left;
    margin: 0;
    height:99%;
}

nav li a {
    display: block;
    color: white;
    text-align: center;
    padding: 0.9rem 0.9rem;
    text-decoration: none;
}

.siz1{
    width:85%;
    opacity:0.7;
    }

.siz2{
    width:80%;
    opacity:0.7;
    }

.clicked{
    background-color:#eee;
        }

#destacado p{
    margin:1rem;
    color:#ddd;
    font-size:0.7rem;
    
                }

#destacado h1{
    font-size:1.7rem;
    color:#7eefcc;
    font-weight:600;
    margin:0;
    margin-left:2rem;
    margin-top:1rem;
    margin-bottom:-1rem;
    padding:0.2rem;
    text-transform: uppercase;
    letter-spacing: 1px;
            }

#titulopag{
    font-family: 'roboto', sans-serif;
    background:#eee;
    font-size:0.6rem;
    font-weight:600;
    text-align:center;
    padding:0.5rem;
    padding-left:1rem;
    letter-spacing:2px;
    color:#666;
        }

#destacado img{
    width:6rem;
    float:right;
    margin:1rem;
    margin-top: -1rem;
    border-radius: 100%;
            }

#miperfil{
       text-align:center;
       }

#miperfil p{
    margin:1rem;
    color:#ddd;
    font-size:0.7rem;

                  }

#miperfil img{
    width:5rem;
    border-radius: 100%;
    opacity:0.7;
    margin:auto; 
    padding:0.6rem;
}

#miperfil h1{
    text-transform: uppercase;
    color:#7eefcc;
    text-align:center;
    font-size:1.3rem;
    margin:0;
    padding:0;
    
}

#miperfil ul{
list-style-type: none;
 color:#eee;
    text-align:left;
    font-size:0.7rem;
    line-height:180%;
    margin:0 auto;
    padding:0.5rem;
}

#miperfil h2{
    color:#333;
    text-align:center;
    font-size:1rem;
    border:0rem solid #333;
    width:25vw;
    font-weight:600;
    padding:0.5rem;
    margin:1rem auto;
    background-color:#7eefcc;
    
}


#miperfil li span{
color:#b8a6e4;
    font-weight:600;
}


#notificaciones p{
    margin:1rem auto;
    width:35vw;
    color:#ddd;
    font-size:9px;
    padding:0.4rem;
                }

#notificaciones h1{
    font-size:1rem;
    color:#7eefcc;
    font-weight:600;
    margin:0;
    margin-left:2rem;
    margin-top:1rem;
    margin-bottom:-1rem;
    padding:0.2rem;
    text-transform: uppercase;
    letter-spacing: 1px;
                }

#notificaciones img{
    width:2.0rem;
    border-radius: 100%;
    float:left;

    margin-right:0.5rem;
                    }
#notificaciones p span{
    text-transform: uppercase;font-weight:600;color:#7eefcc;
font-size:1rem;}

#registro form{
    color:#eee;
    font-family:'roboto', sans-serif;
    text-transform:uppercase;
    padding:1.5rem;
    font-size:0.5rem;
    text-align:center;
    }

input[type=text], select {
    font-family:'roboto', sans-serif;
    width: 70%;
    background-color:rgba(184,166,228,0.7);
       box-sizing: border-box;
    border: 0px solid #ccc;
    color:#111;
    margin-bottom:1rem;
    font-size:0.7rem;
    padding: 0.3rem;;
    margin: 8px 0;
   }

input[type="password"]{
 font-family:'roboto',sans-serif;
    width: 70%;
    background-color:rgba(184,166,228,0.7);
    padding: 0.8rem;;
    box-sizing: border-box;
    border: 0px solid #ccc;
    color:#111;
    margin-bottom:1rem;
    font-size:0.7rem;
    padding: 0.3rem;;
    margin: 8px 0;
    }


#splash img{
    width:8rem;
    border-radius: 100%;
    padding:0.6rem;
}


#splash h1{
    text-transform: uppercase;
    color:#7eefcc;
    font-family:'roboto', sans-serif;
    font-size:1.6rem;
    margin:0;
    padding:0;
    
}

#login{
    color:#eee;
    font-family:'roboto', sans-serif;
    text-transform:uppercase;
    padding:1rem;
    width:90%;
    font-size:0.7rem;
    text-align:center;
    }


#postlogin {
    color:#eee;
    font-size:0.7rem;
    }

#postlogin h2{
    color:#333;
    text-align:center;
    font-size:0.8rem;
    border:0rem solid #333;
    width:25vw;
    font-weight:600;
    padding:0.4rem;
    margin:auto;
    background-color:#7eefcc;
    }

#postlogin h1{  color:#333;
    text-align:center;
    font-size:0.8rem;
    width:15vw;
    font-weight:600;
    padding:0.4rem;
    margin:auto;
    margin-top:-1rem;
    background-color:#eee;
}

.contenido{
    padding:2rem;
}

.eventbox{
    background-color:#666;
    width:49%;
    float:right;
    margin:1px;
    height:10rem;
    color:#b8a6e4;
    text-align:center;
    font-size:5.5rem;
    padding-top: 1rem;
        }

.eventbox2{
    background-color:#666;
    width:49%;
    float:right;
    margin:1px;
    height:10rem;
    color:#7eefcc;
    text-align:center;
    font-size:5.5rem;
    padding-top: 1rem;
        }

.eventbox p{
    width:7rem!important;
    color:#fff!important;
    margin-top:-1rem!important;
    }

.eventbox2 p{
    width:7rem!important;
    color:#fff!important;
    margin-top:-1rem!important;
    }