:root{--primary-color: rgba(63, 81, 181);--font-size-medium: 14px;--font-size-small: 10px;--padding-standard: 14px;--padding-card: 16px;--padding-popup: 50px;--border-radius: 4px;--margin-card: 6px;--width-card: 199px;--shadow-color: rgba(0, 0, 0, .35);--shadow-hover-color: rgba(0, 0, 0, 1);--popup-bg-color: rgba(0, 0, 0, .9);--transition-duration: .28s;--transition-timing: cubic-bezier(.4, 0, .2, 1)}body{font-family:Helvetica,sans-serif;margin:0;height:100vh;overflow:hidden;background:repeating-linear-gradient(135deg,#f8f8f8,#f8f8f8 10px,#fff 10px 20px)}#app{display:flex;flex-direction:column;height:100%}.shadow{position:relative}.shadow:before{content:"";position:absolute;top:0;left:0;width:100%;height:100%;border-radius:inherit;z-index:-1;box-shadow:var(--shadow-color) 0 5px 35px;transition:box-shadow var(--transition-duration) var(--transition-timing)}.shadow:hover:before{box-shadow:var(--shadow-hover-color) 0 5px 35px}.popup{border-radius:var(--border-radius);position:fixed;left:50%;top:50%;transform:translate(-50%,-50%);background-color:#fff;padding:var(--padding-popup);z-index:20}.popup-background{background-color:var(--popup-bg-color);position:fixed;left:0;top:0;width:100%;height:100%;z-index:10}.card{border-radius:var(--border-radius);padding:var(--padding-card);width:var(--width-card);margin:var(--margin-card);background:#fff}.card-title{font-size:var(--font-size-medium);font-weight:500}.card-link{font-size:var(--font-size-small);color:#a0a0a0}.card-description{font-size:var(--font-size-small)}.header{background-color:var(--primary-color);font-size:var(--font-size-medium);color:#fff;padding:var(--padding-standard)}.footer{background-color:var(--primary-color);font-size:var(--font-size-medium);color:#fff;padding:var(--padding-standard);text-align:center}a{color:inherit;text-decoration:inherit}img.card-image{width:calc(100% + 32px);margin:var(--padding-card) calc(-1 * var(--padding-card)) var(--padding-card) calc(-1 * var(--padding-card))}.main-content{flex:1;overflow-y:auto}