*{font-family:Open Sans,sans-serif;box-sizing:border-box}.top-bar{width:100%;margin-top:0;position:relative;height:80px;text-align:right}#title{position:absolute;left:20px;top:0}#title,.nav{display:inline-block;height:100%}.nav a{margin:0 20px;font-size:120%;height:100%;display:inline-flex;align-items:center}.grid,.nav a{justify-content:center}.grid{display:flex;flex-wrap:wrap}.card{display:inline-block;width:300px;height:400px;overflow:hidden;border:1.25px solid #e9e9e9;border-radius:16px;margin:10px;transition:all .5s;--shadow:transparent;box-shadow:0 0 10px 5px var(--shadow);position:relative;font-size:100%}.card:hover{--shadow:rgba(53,53,53,.103)}.card:hover .main-content{pointer-events:auto;opacity:1}.card *{margin:0}.card img{width:100%;height:100%;object-fit:cover}.main-content{padding:25px;position:absolute;top:0;left:0;background-color:hsla(0,0%,100%,.9);width:100%;height:100%;opacity:0;pointer-events:none;transition:all .5s}.owner{color:grey;font-size:110%}.pet-name{font-weight:700;font-size:130%}h5.pet-name{color:#fff;position:absolute;left:0;bottom:0;padding:10px;text-shadow:0 0 4px #000}.info ul{padding:0 10px 10px;border-radius:7px}li{list-style-type:none;margin:0}.info{color:#535353;position:relative;overflow:hidden}.info.likes{margin-top:25px}.label{font-weight:700}.btn-container{text-align:right;padding:10px;position:absolute;bottom:10px;right:10px}.btn{--accent:grey;cursor:pointer;background:transparent;border:1.5px solid var(--accent);color:var(--accent);border-radius:10px;padding:10px 15px;font-size:90%;letter-spacing:1px;transition:all .5s;outline:none}.btn:hover{background:var(--accent);color:#fff}.edit.btn{--accent:green}.delete.btn{--accent:red;margin-left:10px}.view.btn{--accent:blue;margin-left:10px}.pet-container{width:100%}.confirmation-box.show{display:block}