* { outline: none; border: none; user-select: none; margin: 0; padding: 0; scroll-behavior: smooth;
font-size: 16px; line-height: 22px; font-family: 'Reddit Mono', 'Fira Code', 'PT Sans', Arial, Verdana, Tahoma; 
-webkit-tap-highlight-color: transparent; -webkit-touch-callout: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; }

a { color: var(--theme_color); transition: all .3s ease-in-out; text-underline-offset: 2px; }
a:hover { color: var(--theme_contrast); }

::-webkit-scrollbar { width: 5px; }
::-webkit-scrollbar-track { box-shadow: inset 0 0 5px #CB6015; border-radius: 0px; }
::-webkit-scrollbar-thumb { background: #CB6015; border-radius: 0px; }

@view-transition {
  navigation: auto;
}
@supports (view-transition-name: none) {
  ::view-transition-old(root),
  ::view-transition-new(root) {
    animation-duration: .2s;
    animation-timing-function: ease-in-out; }
}

img { image-rendering: crisp-edges; image-rendering: -moz-crisp-edges; image-rendering: -o-crisp-edges; image-rendering: -webkit-optimize-contrast; 
transform: translateZ(0); -webkit-backface-visibility: hidden; -ms-transform: translateZ(0); -webkit-transform: translateZ(0); -ms-interpolation-mode: nearest-neighbor; }
/* old bg color #f4ecd7 */
html { height: 100%; background-color: var(--theme_bg); margin: 0; padding: 0; }
body { background-color: transparent; height: 100%; margin: 0; padding: 0; }

h1 { font-size: 32px; line-height: 32px; margin-bottom: 15px; word-spacing: -0.15em; }
h2 span { font-size: 26px; line-height: 26px; margin-bottom: 15px; word-spacing: -0.15em; color: rgba(0,0,0,0.25); font-weight: 400; margin-left: 2px; }
h3 { font-size: 20px; line-height: 20px; margin-bottom: 15px; word-spacing: -0.1em; }
h4 { font-size: 16px; line-height: 16px; margin-bottom: 15px; word-spacing: -0.1em; }
p { margin-bottom: 15px; word-spacing: -0.02em; }
b { font-weight: 700; }
u { text-decoration: underline; text-underline-offset: 5px; text-decoration-color: #A5A333; }
.gap { margin-bottom: 4px; }

/*
button { color: #fff; background-color: transparent; font-weight: 700; font-size: 17px; line-height: 46px; height: 54px; padding: 0px 30px 0px 30px;
word-spacing: -0.05em;
border-radius: 30px; -moz-border-radius: 30px; -webkit-border-radius: 30px; cursor: pointer; border: 2px solid #fff; margin: 0px auto 0px auto; display: table;
transition: color .3s ease-in-out, background-color .3s ease-in-out, border .3s ease-in-out, fill .3s ease-in-out; }
button:hover { color: #fff; background-color: rgba(255, 255, 255, .1); border: 2px solid rgba(255,255,255,.5); }
button svg { fill: #111; transition: fill .3s ease-in-out; }
button:hover svg { fill: #CB6015; }
*/


.quick_signup { color: #fff; background-color: rgba(24,24,24,.75); font-weight: 700; font-size: 20px; line-height: 20px; padding: 18px 0px 20px 0px;
    word-spacing: -0.05em; width: 140px; text-decoration: none;
    border-radius: 30px; -moz-border-radius: 30px; -webkit-border-radius: 30px; cursor: pointer; border: 0px solid #fff; margin: 0px 3px 15px 3px; display: inline-block;
    transition: color .3s ease-in-out, background-color .3s ease-in-out, border .3s ease-in-out, fill .3s ease-in-out; }
.quick_signup:hover { color: #fff; background-color: rgba(24,24,24,.9); border: 0px solid #fff; }
.quick_signup svg { fill: #111; transition: fill .3s ease-in-out; }
.quick_signup:hover svg { fill: #CB6015; }


a.button { color: var(--theme_contrast); background-color: rgba(255,255,255,.33); font-weight: 700; font-size: 14px; line-height: 24px; 
    border-radius: 6px; cursor: pointer; border: 1.5px solid transparent;
    transition: color .3s ease-in-out, background-color .3s ease-in-out, border .3s ease-in-out, fill .3s ease-in-out;
    margin: 0px 0px 0px 0px; padding: 6px 34px 6px 16px; letter-spacing: -0.01em; text-decoration: none;
    /*box-shadow: 0px 0px 15px 0px rgba(255,255,255,.33);*/
}
a.button:hover { color: var(--theme_color); border: 1.5px solid transparent; background-color: rgba(255,255,255,.5); }
a.button svg { fill: var(--theme_contrast); transition: fill .3s ease-in-out; width: 20px; }
a.button:hover svg { fill: var(--theme_color); }

a.goto { color: var(--theme_contrast); background-color: rgba(255,255,255,.33); font-weight: 700; font-size: 14px; line-height: 24px; 
    border-radius: 24px; cursor: pointer; border: 1.5px solid transparent;
    transition: color .3s ease-in-out, background-color .3s ease-in-out, border .3s ease-in-out, fill .3s ease-in-out;
    margin: 0px 0px 0px 0px; padding: 5px 34px 5px 16px; letter-spacing: -0.01em; word-spacing: -0.2em; text-decoration: none; display: inline-block;
    /*box-shadow: 0px 0px 15px 0px rgba(255,255,255,.33);*/
}
a.goto:hover { color: var(--theme_contrast); border: 1.5px solid transparent; background-color: rgba(255,255,255,.5); }
a.goto svg { 
    stroke-width: 2.25;
    stroke: var(--theme_contrast);
    fill: none;
    fill: var(--theme_contrast);
    transition: fill .3s ease-in-out; width: 20px; margin: 0px 0px -1px 2px; position: absolute;  }
a.goto:hover svg {
    stroke-width: 2.25;
    stroke: var(--theme_contrast);
    fill: none;
    fill: var(--theme_contrast);
}

a.action { color: var(--theme_color_hover); background-color: #f8f8f7; font-weight: 700; font-size: 14px; line-height: 24px; display: table;
    border-radius: 24px; -moz-border-radius: 24px; -webkit-border-radius: 24px; cursor: pointer; border: 1px solid transparent;
    transition: color .3s ease-in-out, background-color .3s ease-in-out, border .3s ease-in-out, fill .3s ease-in-out, text-underline-offset .3s ease-in-out;
    margin: 0px auto 15px auto; padding: 6px 18px 6px 18px; letter-spacing: -0.01em; word-spacing: -0.1em; text-decoration: none; text-underline-offset: 4px;
}
a.action:hover { color: var(--theme_color_hover); border: 1px solid transparent; text-decoration: none; background-color: #f2f1ef; }



.cap { height: 44px; line-height: 45px; text-align: center; background-color: var(--theme_contrast); 
transition: color .3s ease-in-out, background-color .3s ease-in-out; }
.cap:hover { background-color: #2a2a2b; cursor: pointer; }
.cap div { display: inline-block; padding: 11px 0px 0px 0px; }
.cap span { font-size: 14px; font-weight: 600; color: #fff; width: 100%; white-space: nowrap; overflow: hidden; border-right: 3px solid rgba(255,255,255,.33); display: inline-block;
animation: typing 2s steps(36), cursor .4s step-end infinite alternate; padding-right: 2px; }

@keyframes cursor {
    50% { border-color: transparent; }
}

@keyframes typing {
    from { width: 0; }
}


.heading { padding: 0px 20px 0px 20px; max-width: 1200px; margin: 0px auto 0px auto; }
@media only screen and (max-width: 720px) { 
.heading { padding: 0px 10px 0px 10px; }
}

.cover { display: table; margin: 0px auto 0px auto; box-shadow: 0px 0px 30px 15px rgba(255,255,255,.5);
width: 100%; max-width: 1400px; min-height: 75vh; background-color: transparent; border-radius: 12px;
background-size: cover; background-repeat: no-repeat; background-position: top center; }

.ease-in { opacity: 0; -webkit-transition: all 2.5s ease; -moz-transition: all 2.5s ease; -ms-transition: all 2.5s ease; -o-transition: all 2.5s ease;  }


.grid-2 { display: grid; gap: 0px 30px; width: 100%; grid-template: repeat(1, 1fr) / repeat(2, 1fr); }
.grid-4 { display: grid; gap: 15px 15px; width: 100%; grid-template: repeat(1, 1fr) / repeat(3, 1fr); }
.grid-cell-square { background-color: transparent; border-radius: 24px; -moz-border-radius: 24px; -webkit-border-radius: 24px; 
    padding: 0px 0px 10px 0px; /* aspect-ratio: 1 / 1; */
background-size: cover; background-repeat: no-repeat; background-position: top center;  }
.grid-cell-square img { width: calc(100% - 0px); margin: 0px 0px 0px 0px; display: block; border-radius: 24px; -moz-border-radius: 24px; -webkit-border-radius: 24px; z-index: 1000; }
.grid-cell-square h3 { letter-spacing: -0.01em; color: var(--theme_color_hover); transition: color .3s ease-in-out; word-spacing: -0.15em; }
.grid-cell-square p { transition: color .3s ease-in-out, opacity .3s ease-in-out; color: rgba(49,39,34,.75); opacity: .9; word-spacing: -0.15em; }
.grid-cell-square:hover { cursor: normal; transition: color .3s ease-in-out, opacity .5s ease-in-out;  }
.grid-cell-square:hover img { box-shadow: #fff 0px 0px 0px; }
.grid-cell-square:hover h3 { color: var(--theme_color);
    text-decoration: underline;
    text-decoration-style: dashed;
    text-underline-offset: 10px;
    text-decoration-color: rgba(49,39,34,.15);
    text-decoration-thickness: 1px;

}
.grid-cell-square:hover p { opacity: .75; }
.grid-cell-square a.action { color: var(--theme_dark_7); font-weight: 600; background-color: rgba(255,255,255,.25); }
.grid-cell-square:hover a.action { color: var(--theme_dark_6); font-weight: 600; background-color: rgba(255,255,255,.5); }

.grid-cell-square2 { padding: 0px 0px 0px 0px; }
.grid-cell-square2 img { border-radius: 15px; -moz-border-radius: 15px; -webkit-border-radius: 15px; }

@media only screen and (max-width: 720px) { 
.grid-2 { grid-template: repeat(1, 1fr) / repeat(1, 1fr); gap: 5px 10px }
.grid-4 { display: grid; gap: 15px 15px; width: 100%; grid-template: repeat(1, 1fr) / repeat(1, 1fr); }
.grid-cell-square { padding: 0px 0px 15px 0px; }
}
 

.grid_flower { display: grid; gap: 30px 30px; width: 100%; grid-template: repeat(1, 1fr) / repeat(4, 1fr); }
.grid_flower_cell { background-color: transparent; border-radius: 24px; -moz-border-radius: 24px; -webkit-border-radius: 24px; 
    padding: 0px 0px 0px 0px; width: 100%; text-align: center; 
background-size: cover; background-repeat: no-repeat; background-position: top center; 
transition: transform 1s ease-in-out;
}

.grid_flower_cell:hover img { transform: scale(1.05,1.05); }

@media only screen and (max-width: 1080px) { 
.grid_flower { display: grid; gap: 15px 30px; width: 100%; grid-template: repeat(1, 1fr) / repeat(2, 1fr); }
}
@media only screen and (max-width: 640px) { 
.grid_flower { display: grid; gap: 15px 30px; width: 100%; grid-template: repeat(1, 1fr) / repeat(1, 1fr); }
}


.grid_todo { display: grid; gap: 30px 30px; width: 100%; grid-template: repeat(1, 1fr) / repeat(3, 1fr); }

.grid_todo a { text-decoration: none; }


.grid_todo_cell { background-color: transparent; border-radius: 24px; -moz-border-radius: 24px; -webkit-border-radius: 24px; margin: 0px auto 0px auto;
vertical-align: top; 
padding: 0px 0px 30px 0px; width: 100%; text-align: center; background-size: cover; background-repeat: no-repeat; background-position: top center;  }

.grid_todo_cell img { width: calc(100% - 0px); margin: 0px 0px 0px 0px; display: block; border-radius: 24px; -moz-border-radius: 24px; -webkit-border-radius: 24px; z-index: 1000; }
.grid_todo_cell h3 { color: #fff; letter-spacing: -0.01em; transition: color .3s ease-in-out; }
.grid_todo_cell p { color: rgba(255,255,255,.75); transition: color .3s ease-in-out; }
.grid_todo_cell:hover { cursor: pointer; }
.grid_todo_cell:hover img {  }
.grid_todo_cell:hover h3 { color: rgba(255,255,255,.75);
    text-decoration: underline;
    text-decoration-style: dashed;
    text-underline-offset: 10px;
    text-decoration-color: rgba(255,255,255,.15);
    text-decoration-thickness: 1px;
 
}
.grid_todo_cell:hover p { color: rgba(255,255,255,.5); }

@media only screen and (max-width: 1080px) { 
.grid_todo { 
    margin: 0px auto 0px auto;
    display: grid; gap: 0px 30px; width: 100%; grid-template: repeat(1, 1fr) / repeat(1, 1fr); justify-items: center; align-items: center; justify-content: space-evenly; }
}

.grid_todo_cell .action { color: rgba(255,255,255,.4); background-color: rgba(255,255,255,.03); font-weight: 600; font-size: 14px; line-height: 24px; display: table;
    border-radius: 24px; -moz-border-radius: 24px; -webkit-border-radius: 24px; cursor: pointer; border: 0px solid #fff;
    transition: color .3s ease-in-out, background-color .3s ease-in-out, border .3s ease-in-out, fill .3s ease-in-out, text-underline-offset .3s ease-in-out;
    margin: 0px auto 15px auto; padding: 6px 18px 6px 18px; letter-spacing: -0.01em; text-decoration: none; text-underline-offset: 4px;
}
.grid_todo_cell:hover .action { color: rgba(255,255,255,.75); border: 0px solid rgba(255,255,255,.1); text-decoration: none; background-color: rgba(255,255,255,.06); }


.footer_links { font-size: 14px; line-height: 22px; word-spacing: -0.2em; }
.footer_links * { font-size: 14px; line-height: 23px; }
.footer_links a { text-decoration: underline; text-underline-offset: 6px; text-decoration-color: #dccca5; margin: 0px 6px 0px 0px; }
.footer_links a:hover { color: #CB6015; }

.time-label { vertical-align: top; display: table; margin: 0px auto 0px auto; word-spacing -0.2em; background-color: rgba(255,255,255,.75); border-radius: 20px; padding: 5px 14px 3px 13px; }
.time-label .clock { display: inline-block; line-height: 20px; height: 20px; vertical-align: top; overflow: hidden; margin-left: -5px; }
.time-label .clock svg { width: 20px; height: 20px; fill: #111 !important; }
.time-label .time-message { color: #111; font-size: 14px; line-height: 20px; height: 20px; font-weight: 500; display: inline-block; vertical-align: top; margin: 0px 0px 0px 8px; word-spacing: -0.1em; }

.news_sub_wrap { padding: 0px 15px 0px 15px; margin-top: 0px; }
.news_sub { border-radius: 25px; -moz-border-radius: 25px; -webkit-border-radius: 25px; color: #fff; border: 0px solid #fff; 
border-style: solid inset solid solid; display: table; height: 51px; line-height: 30px; width: calc(100% - 50px); 
padding: 0px 25px 0px 25px; margin: 0px 0px 0px 0px; background-color: rgba(255, 255, 255, 1); font-weight: 700; font-size: 18px;
box-shadow: 0 0 0 2px #fff inset; transition: color .3s ease-in-out, box-shadow .3s ease-in-out, fill .3s ease-in-out; }
.news_sub:hover { box-shadow: 0 0 0 2px #fff inset; color: #fff; cursor: pointer;  }
.news_sub svg { fill: #CB6015; display: inline-block; position: absolute; margin: 11px 0px 0px 5px; transition: fill .3s ease-in-out; }
.news_sub svg:hover { fill: #111; }
.news_sub input[type="text"] { width: 100%; color: #bdb091; background-color: transparent; height: 47px; line-height: 47px; border: none; 
padding: 0px 0px 0px 0px; margin: 0px 0px 0px 0px; }
.news_sub input[type="text"]:focus { color: #111; }
.news_sub_field { display: table-cell; vertical-align: top; padding: 2px 0px 0px 0px; }
.news_sub_button { display: table-cell; width: 24px; vertical-align: top; padding: 2px 23px 0px 0px; text-align: right; }