*{box-sizing:border-box;padding:0;margin:0}body{font-family:sans-serif;background:#f1f1f1}.container{padding:30px}.container h1{font-size:20px}.card{display:grid;grid-template-columns:100px auto;grid-auto-flow:column;grid-gap:10px;background:white;padding:20px 24px;border-radius:32px;box-shadow:0 4px 12px #e0e4e9;transition:ease .2s}.card:hover{transform:translateY(-16px);box-shadow:0 8px 24px #e0e4e9}.card-image{border-radius:50%;width:100%}.grid-character{display:grid;grid-template-columns:repeat(2,minmax(100px,320px));justify-content:center;grid-gap:30px;margin:50px auto}@media screen and (max-width: 1000px){.grid-character{grid-template-columns:320px}}.green{background:green;color:#fff}.red{background:red;color:#fff}.container-loader{margin-left:200px;width:100%}.loader{margin-left:150px;transform:rotate(45deg);perspective:1000px;border-radius:50%;width:48px;height:48px;color:#fff;background:black}.loader:before,.loader:after{content:"";display:block;position:absolute;top:0;left:0;width:inherit;height:inherit;border-radius:50%;transform:rotateX(70deg);animation:1s spin linear infinite}.loader:after{color:#ff3d00;transform:rotateY(70deg);animation-delay:.4s}@keyframes rotate{0%{transform:translate(-50%,-50%) rotate(0)}to{transform:translate(-50%,-50%) rotate(360deg)}}@keyframes rotateccw{0%{transform:translate(-50%,-50%) rotate(0)}to{transform:translate(-50%,-50%) rotate(-360deg)}}@keyframes spin{0%,to{box-shadow:.2em 0 0 0 currentcolor}12%{box-shadow:.2em .2em 0 0 currentcolor}25%{box-shadow:0 .2em 0 0 currentcolor}37%{box-shadow:-.2em .2em 0 0 currentcolor}50%{box-shadow:-.2em 0 0 0 currentcolor}62%{box-shadow:-.2em -.2em 0 0 currentcolor}75%{box-shadow:0 -.2em 0 0 currentcolor}87%{box-shadow:.2em -.2em 0 0 currentcolor}}.header-nav{display:flex;flex-direction:column;justify-content:center;background:#fff;height:100px}.nav-logo{display:flex;flex-direction:column;align-items:center;padding:0;margin:0 0 0 18px;font-size:20px}.logo-img{width:100px;padding:0%;margin:2px 0 0;-webkit-filter:drop-shadow(1px 1px 0 yellow) drop-shadow(-1px -1px 0 yellow);filter:drop-shadow(1px 1px 0 yellow) drop-shadow(-1px -1px 0 yellow)}.nav-ul{list-style-type:none;display:flex}.ul-link{font-size:16px;padding:15px 10px;white-space:nowrap;width:100%;text-align:center;color:#000;display:block;text-decoration:none}.ul-link:hover{color:#584f4f}