:root{--fp-max-width: 88.6rem;--fp-accent-color: #a97c67;--fp-label-color: #1d3e4b;--fp--input-border-color: #b3a5a2;--fp-input-max-width: 31.4rem;--fp-input-min-height: 4.4rem;--fp-font-size-base: 1.4rem;--fp-circle-rotate: 0deg}.moon-wrapper{display:grid;grid-template-columns:1fr 1fr;margin:0 auto;max-width:var(--fp-max-width)}@media screen and (max-width: 768px){.moon-wrapper{grid-template-columns:1fr;gap:2rem;padding:0 1.5rem}}.moon-form{padding-bottom:12rem}@media screen and (max-width: 768px){.moon-form{padding-bottom:0}}.moon-form form{display:flex;flex-direction:column;gap:1.5rem}.moon-form form label{display:flex;flex-direction:column;gap:.5rem;font-size:var(--fp-font-size-base);font-weight:700;color:var(--fp-label-color)}.moon-form select{position:relative;-webkit-appearance:none;-moz-appearance:none;appearance:none;color:var(--fp-accent-color);max-width:var(--fp-input-max-width);width:100%;min-height:var(--fp-input-min-height);border-radius:0;border:1px solid var(--fp--input-border-color);padding:.8rem 2.2rem .8rem 1.6rem;background-color:#fff;font-weight:700;font-size:var(--fp-font-size-base);text-transform:capitalize;background-image:url("data:image/svg+xml,%3Csvg width='14' height='8' viewBox='0 0 14 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0.296612 0.296481C0.692115 -0.0987395 1.33338 -0.0989143 1.72878 0.296481L6.98709 5.55479L12.2454 0.296481C12.6409 -0.0987395 13.2822 -0.0989143 13.6776 0.296481C14.073 0.691875 14.0728 1.33315 13.6776 1.72865L7.70317 7.70304L7.62625 7.77297C7.25508 8.07576 6.71919 8.07559 6.34793 7.77297L6.271 7.70304L0.296612 1.72865C-0.0988706 1.33317 -0.0988706 0.691963 0.296612 0.296481Z' fill='%23B3A5A2'/%3E%3C/svg%3E%0A");background-repeat:no-repeat;background-position:center right 1.8rem;background-size:1.4rem .8rem}@media screen and (max-width: 768px){.moon-form select{max-width:100%}}.moon-form form button{background-color:var(--fp-accent-color);color:#fff;font-size:1.4rem;font-weight:700;max-width:var(--fp-input-max-width);width:100%;min-height:var(--fp-input-min-height);padding:.8rem 1.5rem;margin-top:1.5rem;border-radius:0;border:none;cursor:pointer}@media screen and (max-width: 768px){.moon-form form button{max-width:100%}}.moon-form button.moon-button-current{background-color:transparent;border:0;color:var(--fp-accent-color);font-size:var(--fp-font-size-base);font-weight:700;text-align:center;width:100%;max-width:var(--fp-input-max-width);min-height:var(--fp-input-min-height);text-decoration:none}.moon-form button.moon-button-current:hover{text-decoration:underline}@media screen and (max-width: 768px){.moon-form button.moon-button-current{max-width:100%}}.moon-form button.moon-button-current:hover{opacity:1}.moon-image-wrapper{position:relative;width:100%;aspect-ratio:1 / 1;-webkit-mask-image:url(mask.svg);mask-image:url(mask.svg);-webkit-mask-size:cover;mask-size:cover;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center}@media screen and (max-width: 768px){.moon-image-wrapper{width:85%;margin:0 auto}}.moon-image-wrapper img{width:100%;height:100%;aspect-ratio:1 / 1;max-width:100%;transform-origin:center center;transition:transform .4s cubic-bezier(.04,.8,.6,.89);transform:rotate(var(--fp-circle-rotate, 0deg))}.moon-phases{background-color:#fff}.moon-phases>div{padding:11rem 0 8rem;margin:0 auto;max-width:var(--fp-max-width)}@media screen and (max-width: 1024px){.moon-phases>div{padding:8rem 1.5rem}}@media screen and (max-width: 768px){.moon-phases>div{padding:5rem 1.5rem}}.moon-phases h2{font-size:3.6rem;text-transform:uppercase;color:var(--fp-label-color);font-weight:700;margin-bottom:3rem}.moon-phases_wrapper{display:grid;grid-template-columns:1fr 1fr;gap:3rem}@media screen and (max-width: 768px){.moon-phases_wrapper{grid-template-columns:1fr}}.moon-phases_wrapper strong{display:block;font-size:1.4rem;color:var(--fp-label-color);font-weight:700;padding:1.5rem 0}.moon-phases_wrapper ul,li{list-style:none;padding:0;margin:0;font-size:1.4rem;color:var(--fp-label-color);font-weight:400}.moon-phases_wrapper ul{display:grid;grid-template-columns:repeat(2,1fr);grid-template-rows:repeat(var(--fp-number-li, 6),auto);grid-auto-flow:column;column-gap:1em;row-gap:.5em}
