*,*:after,*:before{position:relative;box-sizing:border-box;font-family:Roboto,sans-serif!important}img{height:auto;max-width:100%}.viewport{display:flex;width:100%;min-width:360px;min-height:100vh}h3,p{margin:20px}button{background-color:#007bff;padding:10px 20px;color:#fff;border:none;cursor:pointer;font-size:18px}app-component{display:flex;flex-direction:column;min-height:100vh;justify-content:space-between}div.top{flex:1 0 100%;background-color:#fff;display:flex;flex-direction:column;justify-content:space-between}div.bottom{flex:0 1 0}app-header{flex:0 1 0;text-align:center;color:#fff;padding:20px;font-weight:700;background:linear-gradient(315deg,#8FCDFF 0%,#2196F3 100%);display:flex;justify-content:space-between;align-items:center;width:100%}app-nav{text-align:center;background-color:#d3d3d3;display:block;flex:0 1 0}app-nav a{color:#00f;text-transform:uppercase;display:inline-block;padding:10px}app-nav a[data-active]{font-weight:700;color:red}router-slot{flex:1 0 100%}.listado-fotos{display:flex;list-style:none;justify-content:center;align-items:flex-start;flex-wrap:wrap;padding:10px}.listado-fotos li{margin:10px}.listado-fotos li img{display:block;object-fit:cover;width:150px;height:150px}login-page{max-width:360px;background-color:#eee;margin:10px auto;display:block;text-align:center;padding:10px}form:invalid button{opacity:.3;pointer-events:none}form input:invalid{border-bottom:1px solid red}