/* Foundations */
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@400%3B700&display=swap');
*, ::before, ::after { box-sizing: border-box; }
html { margin: 0; font: 16px/1.6 "Open Sans", sans-serif; color: black; background: whitesmoke; }
@media (max-width: 600px) { html { font-size: 14px; } }
body { width: 100%; max-width: 600px; padding: 1.5rem; margin: 0 auto; counter-reset: h1; }
/* Typography */
p, h1, h2, h3, li { margin: 1rem 0; }
h1 { font-size: 2rem; line-height: 1.4; }
@media (max-width: 410px) { h1 { font-size: 1.5rem; } }
h2 { font-size: 3rem; line-height: 1; color: #ddd; }
h3 { font-size: 1.25rem; line-height: 1; margin-top: 0; }
ul { padding-left: 1.5rem; list-style-type: none; }
ol { padding-left: 1.1rem; font-weight: bold; }
ol li span { font-weight: normal; }
li { position: relative; }
a { color: black; text-decoration: none; background-size: 100% 300%; background-position: 100% 70%; background-image: linear-gradient(whitesmoke 70%, #ddd 70%); transition: all 0.15s ease-in-out; }
a[href="/"] { background: none; }
a:hover, a:focus { text-decoration: none; background-position: 100% 100%; }
a.button { color: #222; text-decoration: none; }
button, a.button { background-image: none; display: inline-block; height: 1.5rem; padding: 0.25rem; font-size: 1rem; vertical-align: top; line-height: 1rem; text-align: center; border-radius: 0.25rem; background-color: #FFC800; }
button.transparent, a.button.transparent { background-color: inherit; box-shadow: inset 0 0 0 2px black; }
button.inverted, a.button.inverted { background-color: black; color: #FFC800; }
button, a.button { border: none; font: 16px/1.6 "Open Sans"; padding: 0.25rem 1.5rem; font-weight: bold; height: auto; width: 100%; position: relative; }
button:hover, button:focus, a.button:hover, a.button:focus { cursor: pointer; text-decoration: underline; }
button::after, a.button::after { background-repeat: no-repeat; background-size: 0 200%; transition: .6s background-size; background-image: linear-gradient(105deg, rgba(0,0,0,0) 50%, rgba(0,0,0,0.1) 50%); background-position: 100%; content: ""; display: block; width: 100%; height: 100%; position: absolute; top: 0; right: 0; border-radius: 0.25rem; }
button:hover::after, button:focus::after, a.button:hover::after, a.button:focus::after { background-repeat: repeat; background-position: 0%; background-size: 200% 200%; background-image: linear-gradient(105deg, rgba(0,0,0,0.1) 51%,rgba(0,0,0,0) 51%); transition: .6s background-position; }
/* Images */
img { max-width: 100%; vertical-align: bottom; }
/* Utilities */
.card { width: 100%; padding: 1.5rem; margin: 1rem 0; background-color: #222; color: white; border-radius: 0.25rem; }
.yellow.card { color: black; background-color: #FFC800; }
.tag { display: inline-block; margin-bottom: 0.25rem; margin-right: 0.25rem; text-transform: uppercase; letter-spacing: 1px; font-size: 12px; line-height: 1; padding: 6px 10px; color: black; background-color: white; border-radius: 0.25rem; }
.container { position: relative; margin: 0 auto; padding: 1.5rem 0; }
.container :first-child { margin-top: 0; }
.container :last-child { margin-bottom: 0; }
.m-400 { width: 100%; max-width: 400px; }
.u-bw { filter: grayscale(); opacity: 0.25; }
.u-ib { display: inline-block; }
.u-mt { margin-top: 1.4rem; }
.u-200 { width: 200px; border-radius: 0; }
.u-90 { width: 119px; }
.u-auto, a.u-auto { width: auto; }
.u-ml-2 { margin-left: -2.5px; }
.u-hidden { position: absolute; right: 100%; opacity: 0; }
.u-ta-center { text-align: center; }
.u-highlight { background-size: 200% 30%; background-position-y: 100%; background-image: linear-gradient(to right, #FFC800 50%, rgba(255,255,255,0) 50%); animation: load 0.4s ease-in-out 0.2s 1 normal forwards; background-repeat: no-repeat; }
.card .u-highlight { background-image: linear-gradient(to right, #444 50%, rgba(0,0,0,0) 50%); }
.yellow.card .u-highlight { background-image: linear-gradient(to right, hsl(47, 100%, 64%) 50%, rgba(0,0,0,0) 50%); }
@keyframes load { 0% { background-position-x: 100%; } 100% { background-position-x: 0%; } }
.card .phantom { display: none; opacity: 0.5; flex-grow: 1; background: linear-gradient(105deg, #FFC800 20%, hsla(47, 100%, 50%, 0) 20%), url('/images/daily.jpg'); background-size: cover; background-repeat: no-repeat; background-position: center; margin: -1.5rem; }
@media (min-width: 1000px) {
  .card .phantom { display: block; }
  .m-400 { max-width: 100%; }
  .d-900 { position: relative; width: 900px; left: -174px; }
  .d-900-f { display: flex; align-items: flex-end; justify-content: space-between; gap: 10px; overflow: hidden; }
  .d-hs { display: table-cell; vertical-align: middle; width: 50%; }
  .d-hs:first-child { width: 52%; padding-right: 1.5rem; }
  .d-hs:last-child { width: 48%; padding-left: 1.5rem; }
  .d-shift { position: absolute; z-index: -1; top: 0.5rem; left: -1.5rem; }
  .d-ta-left { text-align: left; }
}
@media (min-width: 601px) {
  .d-fr { float: right; margin-left: 1rem; }
}
ul { list-style: none; padding-left: 0; }
ul > li { padding-left: 1.3em; }
ul > li::before { 
  content: ''; position: absolute; left: 0; top: 0.3em; width: 1em; height: 1em; background-repeat: no-repeat; background-size: cover;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1792' height='1792' viewBox='0 0 1792 1792' fill='%23FFC800' %3E%3Cpath d='M1671 566q0 40-28 68l-724 724-136 136q-28 28-68 28t-68-28l-136-136-362-362q-28-28-28-68t28-68l136-136q28-28 68-28t68 28l294 295 656-657q28-28 68-28t68 28l136 136q28 28 28 68z'/%3E%3C/svg%3E");
}
.yellow ul > li::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1792' height='1792' viewBox='0 0 1792 1792' fill='black' %3E%3Cpath d='M1671 566q0 40-28 68l-724 724-136 136q-28 28-68 28t-68-28l-136-136-362-362q-28-28-28-68t28-68l136-136q28-28 68-28t68 28l294 295 656-657q28-28 68-28t68 28l136 136q28 28 28 68z'/%3E%3C/svg%3E");
}
/* .i-end::before { content: ""; display: inline-block; height: 1.25em; width: 1.25em; vertical-align: bottom; margin-bottom: 0.175em; background-size: cover; }
.i-end { margin-left: 0.4em; }
.i-whatsapp-black::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='24' width='24' viewbox='0 0 24 24' fill='black'%3E%3Cpath d='M17.5 14.4l-2-1c-.3 0-.5-.1-.7.2l-1 1.1c-.1.2-.3.2-.6.1s-1.3-.5-2.4-1.5a9 9 0 0 1-1.7-2c-.1-.4 0-.5.2-.7l.4-.5.3-.5v-.5L9 6.9c-.2-.6-.4-.5-.6-.5h-.6c-.2 0-.5 0-.8.3-.2.3-1 1-1 2.5s1 2.9 1.2 3c.1.3 2.1 3.3 5.1 4.6l1.7.6c.7.2 1.4.2 1.9.1.6 0 1.7-.7 2-1.4.3-.7.3-1.3.2-1.4-.1-.2-.3-.3-.6-.4m-5.4 7.4A10 10 0 0 1 7 20.4l-.4-.2-3.7 1 1-3.7-.3-.4A9.9 9.9 0 0 1 12.1 2a9.9 9.9 0 0 1 9.9 9.9 10 10 0 0 1-10 9.9m8.5-18.4A12.1 12.1 0 0 0 12 0 12 12 0 0 0 1.7 17.8L0 24l6.3-1.7A12 12 0 0 0 20.5 3.4'/%3E%3C/svg%3E"); } */
@keyframes myAnim { 0%, 100% { color: #ddd; } 50% { color: #FFC800; } }
h2.animate { animation: myAnim 0.8s ease 0s 1 normal forwards; }
.i-arrow::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='black' viewBox='90 100 110 310' height='24' width='24' %3E%3Cpath d='M267 261 L163 365 L104 365 L187 281 L21 281 L21 240 L187 240 L104 156 L163 156 L267 261 Z'/%3E%3C/svg%3E");
}
.i::before {
  content: "";
  display: inline-block;
  height: 18px;
  width: 18px;
  position: relative;
  top: 3px;
  margin-left: 4px;
  background-size: cover;
}