crear-estados.css

/*aqui incluso sin los imports esta funcionando bien*/
*{
    padding: 0;
    margin: 0;
    font-family: 'ubuntu';
    font-size: 20px;
}
body::-webkit-scrollbar{
    /* ancho de la scrollbar */
    width: 10px;               
}
body::-webkit-scrollbar-track{
    /* fondo */
    background: none;        
}
body::-webkit-scrollbar-thumb{
    /* propiedades de la barra en si */
    background-color: white;    
    border-radius: 5px;       
}
nav{
    width: 100%;
    align-items: center;
}
nav > a > span{
    padding: 20px;
    color: white;
}
#previsualizacion{
    width: 35%;
    margin-inline: auto;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}
#archivo{
    /* Se oculta el verdadero input porque es mas facil editar
    el label */
    top: 0;
    left: 0;
    position: absolute;
    z-index: -1;
    opacity: 0%;
}
#previsualizacion > label{
    /* al cliquear funciona, este sera el visible */
    width: 100%;
    height: 50px;
    display: flex;
    justify-content: center;
    align-items: center;
    border: 1px solid white;
    border-radius: 15px;
    color: white;
    text-align: center;
}
#previsualizacion label span{
    margin-right: 10px;
}
#previsualizacion > label:hover{
    /* para cuando pones el raton encima*/
    background: white;
    color: #424242;
    font-weight: bold;
}
#receptor{
    margin-top: 20px;
}
#receptor > img{
    /* sin esto la imagen es de tamaño real */
    max-width: 65%;
}
#receptor > video{
    /* sin esto el video es de tamaño real */
    max-width: 65%;
}
#texto{
    width: 100%;
    height: 100px;
    margin-top: 20px;
    padding: 20px;
    background: none;
    color: white;
    border: 1px solid white;
    border-radius: 15px;
}
#texto::placeholder{
    color: white;
}
#previsualizacion button{
    width: 100%;
    background: white;
    padding: 10px;
    margin-bottom: 300px;
    margin-top: 40px;
    border: none;
    border-radius: 15px;
    color: #424242;
    font-size: 24px;
    font-weight: bold;
    cursor: pointer;
}
#previsualizacion button:hover{
    width: 100%;
    background: #e1e1e1;
    padding: 10px;
    margin-bottom: 300px;
    margin-top: 40px;
    border: none;
    border-radius: 15px;
    color: #424242;
    font-size: 24px;
    font-weight: bold;
    cursor: pointer;
}