*, ::after, ::before { box-sizing: border-box; } html { font-family: sans-serif; line-height: 1.15; -webkit-text-size-adjust: 100%; -webkit-tap-highlight-color: transparent; } body { margin: 0; font-family: "Dekko", sans-serif; font-size: 1rem; font-weight: 400; line-height: 1.5; color: #ffffff; text-align: left; background: #3f53b4 url("bg.jpg") no-repeat center top / cover fixed; } img { vertical-align: middle; border-style: none; } h1 { text-align: center; padding: 1.5rem 2rem; margin: 0; font-size: 2rem; font-weight: 500; line-height: 1.2; text-shadow: 0 0 4px #3f53b4, 0 0 8px #3f53b4; } .container { text-align: center; } .card { position: relative; display: inline-block; margin: 1rem 0.25rem; word-wrap: break-word; color: #333; background-color: #fff; background-clip: border-box; box-shadow: 0 0 12px #3f53b4; border-radius: 0.5rem; text-align: center; } .card:hover { box-shadow: 0 0 12px rgba(255, 255, 255, 0.5); } .card img { -ms-flex-negative: 0; flex-shrink: 0; max-width: 100%; border-top-left-radius: 0.5rem; border-top-right-radius: 0.5rem; } .card-body { -ms-flex: 1 1 auto; flex: 1 1 auto; padding: 0.5rem; } h2 { margin-top: 0; font-weight: 500; line-height: 1.25; font-size: 1.75rem; margin-bottom: 0.2rem; } p { margin-top: 0; margin-bottom: 0.75rem; opacity: 0.85; font-weight: 500; } .card a { text-decoration: none; display: inline-block; font-weight: 400; text-align: center; vertical-align: middle; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; background-color: #283fa4; border: 1px solid #283fa4; padding: 0.375rem 0.75rem; font-size: 1rem; line-height: 1.5; border-radius: 0.25rem; color: #fff; opacity: 0.9; } .card a:hover { opacity: 1; } .card a:focus { outline: 0; box-shadow: 0 0 0.2rem 0.2rem rgba(77, 58, 69, 0.5); opacity: 1; } .card a::after { position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 1; pointer-events: auto; content: ""; background-color: rgba(0, 0, 0, 0); } @media (prefers-color-scheme: dark) { .card { color: #fff; background-color: #222; } .card a:focus { box-shadow: 0 0 0.2rem 0.2rem rgba(225, 199, 173, 0.6); } } @media (min-width: 576px) { .card-body { padding: 0.75rem; } .card { margin: 1rem; } } @media (min-width: 768px) { h1 { font-size: 3rem; padding-top: 3rem; padding-bottom: 3rem; } .card { margin: 1.5rem; } .card-body { padding: 1rem; } } @media (min-width: 992px) { h1 { font-size: 3.5rem; padding-top: 5rem; padding-bottom: 5rem; } .card-body { padding: 1.25rem; } } @media (min-width: 1200px) { h1 { font-size: 4rem; padding-top: 8rem; padding-bottom: 8rem; } }