@charset "UTF-8";
@font-face {
    font-family: 'Orbit';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2310@1.0/Orbit-Regular.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
}
/* 36318f fabe00 */
html,body,div,p,a,img,header,footer,section,article,aside,nav,h1,h2,h3,h4,h5,input,label,button,select,ul,ol,textarea { display: block; position: relative; box-sizing: border-box; margin: 0; padding: 0; border: 0 none; outline: none; -webkit-tap-highlight-color: #0000; appearance: none; border-radius: 0; line-height: 1; touch-action: manipulation; }
span,strong { position: relative; box-sizing: border-box; margin: 0; padding: 0; border: 0 none; line-height: 1; }
body,input,button,select,textarea { width: 100%; font-family: 'Orbit', sans-serif; font-size: 3.5rem; color: #36318f; -webkit-tap-highlight-color: #0000; outline: none; }
html { font-size: 1vw; }
body { font-size: 3.5rem; overflow: hidden; background-color: #36318f; transition: background-color .5s ease; }
p { word-break: keep-all; }
img { width: 100%; height: auto; }
a { text-decoration: none; color: inherit; cursor: pointer; -webkit-tap-highlight-color: #0000; outline: none; }

.btn { display: flex; justify-content: center; align-items: center; height: 10rem; border-radius: 1rem; font-size: 4rem; background-color: #36318f; color: #fff; cursor: pointer; -webkit-tap-highlight-color: #0000; outline: none; }

body.count { background-color: #fff; }

.progress-bar { position: fixed; bottom: 0; left: 0; width: 100%; height: 0; background-color: #fabe00; z-index: 0; transition: height .3s ease-in-out; }

.all-wrap { position: fixed; top: 0; left: 0; width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; }

.init-wrap { width: 100%; max-width: 400px; padding: 0 10rem; }
.init-wrap h1 { width: 20rem; margin: 0 auto 10rem; }
.init-wrap input { text-align: center; height: 10rem; padding: 2rem; border-radius: 1rem; margin-bottom: 2rem; }
.init-wrap button { background-color: #fabe00; color: #36318f; }
.init-wrap .btn-load { margin-bottom: 8rem; }
.init-wrap textarea { height: 40rem; padding: 2rem; border-radius: 1rem; margin-bottom: 2rem; resize: none; }
.init-wrap .btn-wrap { display: flex; justify-content: space-between; }
.init-wrap .btn-wrap input { width: 30rem; }
.init-wrap .btn-wrap button { width: 48rem; }

.wrap { width: 100%; max-width: 400px; padding: 0 10rem; }
.text-box { display: flex; justify-content: center; align-items: center; width: 100%; height: 36rem; text-align: center; word-break: keep-all; line-height: 1.2; padding: 4rem; margin-bottom: 5rem; border-radius: 2rem; background-color: #36318f; color: #fff; }
.counter-box { display: flex; flex-direction: column; align-items: center; }
.counter-box .goal { font-size: 5rem; padding-top: 4rem; border-top: 1px solid #36318f; }
.counter-box .count { display: flex; justify-content: center; align-items: center; height: 46rem; }
.counter-box .count span { font-size: 23rem; font-weight: bold; letter-spacing: -.5rem; transition: transform .5s cubic-bezier(.69,2.02,.51,.34); }

button.reset { position: fixed; top: 2rem; right: 2rem; width: 10rem; height: 10rem; padding: 2rem; background-color: transparent; z-index: 999; }
button.reset svg { fill: #36318f; }
button.count { position: absolute; bottom: 0; left: 27rem; width: 46rem; height: 46rem; background-color: #fabe0077; z-index: 999; border-radius: 4rem; opacity: 1; font-size: 15rem; font-weight: bold; color: #fff; text-shadow: 0 0 4rem #0003; transition: opacity .3s ease; }

#countWrap { display: none; }

@media all and (min-width: 400px) {
    html { font-size: 4px; }
}