html,body,h1,h2,h3,p{margin:0;padding:0;color:#fff}@font-face{font-family:lemon;src:url(/LEMONMILK-Medium.otf)}*{scrollbar-width:none;-ms-overflow-style:none;font-family:lemon}*::-webkit-scrollbar{display:none}h1{font-size:calc(2vh + 2vw)}.mainContainer{position:relative;display:flex;justify-content:center;align-items:center;width:100vw;height:100vh;overflow:hidden}.App{display:flex;flex-direction:row;justify-content:center;align-items:center;height:100vh;width:100vw;background-color:#202020;overflow:hidden}.mainPage{display:flex;flex-direction:row;justify-content:center;align-items:center;width:100%;height:100%;box-sizing:border-box}.contentsBox{width:70%;height:100%;box-sizing:border-box;overflow-y:hidden;display:flex;flex-direction:column}.contents{width:100%;height:100%;max-height:100%;overflow:hidden;box-sizing:border-box;display:flex}.imagesBox{background-color:#add8e6;width:30%;height:100%}.themeImage{width:100%;height:100%;object-fit:cover;object-position:center}.tabsContainer{width:50%;height:100%;max-height:100%;max-width:100%;box-sizing:border-box;position:relative;padding:5%;gap:5%}.notes{width:100%;height:100%;max-height:100%;max-width:100%;box-sizing:border-box}.tasks{width:50%;height:100%;max-height:100%;max-width:100%;box-sizing:border-box}.tasks{display:flex;flex-direction:column;padding:5%;gap:5%}.notes{display:flex;flex-direction:column;gap:5%}.mainForm{display:flex;flex-direction:row;flex-wrap:nowrap;box-sizing:border-box;width:100%}.mainFormInput{border:calc(.1vh + .1vw) solid pink;border-radius:calc(.5vh + .5vw)}.mainInput{background-color:#171717;border:none;box-sizing:border-box;border-radius:calc(.5vh + .5vw) 0 0 calc(.5vh + .5vw);padding:calc(.5vh + .5vw) calc(1vh + 1vw);font-size:calc(.7vh + .7vw);width:100%}.mainInput:focus{border:none;outline:none}.mainSubmit{background-color:#171717;border-radius:0 calc(.5vh + .5vw) calc(.5vh + .5vw) 0;padding:calc(.5vh + .5vw) calc(1vh + 1vw);font-size:calc(.9vh + .9vw);box-sizing:border-box;width:max-content;border:none;color:#fff}.cardsBox,.memoirBox{box-sizing:border-box;display:flex;flex-direction:column;gap:5%;overflow-y:scroll;height:100%}.card,.memoir{display:flex;background-color:#12121200;padding:calc(1vh + 1vw);border-radius:calc(.5vh + .5vw);width:100%;font-size:calc(.1vh + .1vw);border:calc(.1vh + .1vw) solid pink;text-align:left;color:#fff;font-size:calc(.7vh + .7vw)}.star{margin-right:calc(1vh + 1vw);font-size:calc(.7vh + .7vw)}.changeBtnSave{width:100%;border-radius:0 calc(.5vh + .5vw) 0 0!important}.changeBtnDelete{border-radius:0 0 calc(.5vh + .5vw) 0!important;width:100%}.tabs{display:flex;background-color:#1b1b1b;box-sizing:border-box;justify-content:space-between;padding:calc(.5vh + .5vw) 0}.tab{font-size:calc(.7vh + .7vw);background-color:transparent;color:#fff;border:none;flex:1;transition:text-shadow .5s ease}.buttonSection{position:absolute;display:flex;justify-content:flex-end;top:0;left:0;right:0;z-index:10;gap:5%;margin-right:calc(1vh + 1vw)}.tabs1{display:flex;justify-content:center;align-items:center;border:none;color:#fff;font-size:calc(.7vh + .7vw);background-color:#1b1b1b00;box-sizing:border-box;padding:calc(.5vh + .5vw) 0}.themesContainer{position:absolute;width:100%;height:100%;display:flex;flex-direction:row;justify-content:center;align-items:center;-webkit-backdrop-filter:brightness(.3);backdrop-filter:brightness(.3);padding:calc(3vh + 3vw);box-sizing:border-box;z-index:1000}.themeBox{display:flex;width:100%;height:100%;box-sizing:border-box}.mainThemeBox{width:100%;height:100%;overflow-y:scroll;box-sizing:border-box;background-color:#151515;margin:calc(.5vh + .5vw);padding:calc(1vh + 1vw);border-radius:calc(.5vh + .5vw);border:calc(.1vh + .1vw) solid pink;display:grid;grid-template-columns:repeat(auto-fill,minmax(min(20vw,20vh),1fr));gap:calc(.5vh + .5vw)}.themesBox{display:flex;aspect-ratio:16/9;overflow:hidden;margin:calc(.5vh + .5vw);border-radius:calc(.5vh + .5vw);border:calc(.1vh + .1vw) solid pink;padding:0;justify-content:space-evenly;background-color:transparent;background-size:cover}.themeImageBox,.themeColor{flex:1}.themeImageBox img{width:100%;height:100%;object-fit:cover}.themeColor{width:100%;height:100%}.deleteTheme{font-size:calc(.5vh + .5vw);padding-left:calc(.5vh + .5vw);background-color:transparent;border:none;color:#fff}.themeFormBox{margin:calc(.5vh + .5vw);padding:5%;width:100%;height:100%;box-sizing:border-box;border-radius:calc(.5vh + .5vw);border:calc(.1vh + .1vw) solid pink;display:flex;gap:5%;flex-direction:column;background-color:#151515}.themeHeader{text-align:center;text-shadow:0 0 calc(1vh + 1vw) pink}.imageInput{display:flex;background-color:#12121200;padding:calc(.5vh + .5vw);margin:calc(.5vh + .5vw) 0;border-radius:calc(.5vh + .5vw);border:calc(.1vh + .1vw) solid pink;width:100%;height:100%;flex:1;box-sizing:border-box;font-size:calc(1vh + 1vw);text-align:left;color:#fff}.themeColorInput{border:calc(.1vh + .1vw) solid pink;border-radius:calc(.5vh + .5vw);width:calc(2vh + 2vw);height:100%;width:100%;box-sizing:border-box;padding:0;cursor:pointer;-webkit-appearance:none;-moz-appearance:none;appearance:none;flex:1}.themeText{font-size:calc(1vh + 1vw);display:flex;align-content:center;flex:1}.themeColorInputBox{display:flex;width:100%;flex:1}.addTheme{background-color:#fff0;border:solid calc(.1vh + .1vw);border-radius:calc(.5vh + .5vw);padding:calc(.2vh + .2vw) calc(.6vh + .6vw);margin:calc(.5vh + .5vw) 0;color:#fff;font-size:calc(.8vh + .8vw);flex:1}.mainThemeButton{position:absolute;color:#fff;text-shadow:0 0 calc(1vh + 1vw) pink;font-size:calc(3vh + 3vw);z-index:100;display:flex;width:auto;height:auto;right:0;top:0;margin:calc(.5vh + .5vw);background-color:transparent;border:none}.themeColorInput::-webkit-color-swatch-wrapper{padding:calc(1vh + 1vw);border-radius:calc(.5vh + .5vw)}.themeColorInput::-webkit-color-swatch{border:calc(.1vh + .1vw) solid pink;border-radius:calc(.5vh + .5vw)}.themeColorInput::-moz-color-swatch{border:calc(.1vh + .1vw) solid pink;border-radius:calc(.5vh + .5vw)}p{font-size:calc(.5vh + .5vw)}.App-logo{display:none}.input{background-color:#171717;border:none;border-radius:calc(.5vh + .5vw) 0 0 calc(.5vh + .5vw);padding:calc(.5vh + .5vw) calc(1vh + 1vw);margin:calc(1vh + 1vw) 0;font-size:calc(.5vh + .5vw)}.submit{background-color:#171717;border-radius:0 calc(.5vh + .5vw) calc(.5vh + .5vw) 0;padding:calc(.5vh + .5vw) calc(1vh + 1vw);font-size:calc(.5vh + .5vw);border:none;color:#fff}.mainHabitContainer{box-sizing:border-box;overflow-y:scroll;display:flex;flex-direction:column;gap:5%;height:100%}.cat{display:flex;flex-direction:column;height:fit-content}.addHabbitRealButton{background-color:#171717;border:none;color:#fff;display:flex;justify-content:space-between;align-items:center;box-sizing:border-box;border-radius:calc(.5vh + .5vw);padding:calc(.5vh + .5vw) calc(1vh + 1vw);font-size:calc(.7vh + .7vw);width:100%}.addHabitBut{font-size:calc(.9vh + .9vw)}.habitsContain{height:100%;width:100%;display:flex;flex-direction:column;box-sizing:border-box;gap:5%}.habitBox{height:100%;overflow-y:auto;display:flex;flex-direction:column;box-sizing:border-box;gap:10%}.habitSection{width:100%;height:auto;display:flex;flex-direction:column;gap:5%;box-sizing:border-box;background-color:#151515;border-radius:calc(1vh + 1vw)}.habitName{font-size:calc(1.3vh + 1.3vw);box-sizing:border-box}.habitNameBox{padding:calc(1vh + 1vw)}.habitDetsBox{display:flex;justify-content:space-between;box-sizing:border-box;align-items:center;padding:0 calc(1vh + 1vw)}.habitDet{font-size:calc(.7vh + .7vw)}.habitButton{background-color:#fff;box-shadow:0 0 calc(1vh + 1vw) pink;box-sizing:border-box;border:none;border-radius:calc(.5vh + .5vw);padding:calc(.2vh + .2vw) calc(.6vh + .6vw);margin:calc(.5vh + .5vw);color:#ff76d8;font-size:calc(1vh + 1vw)}.circleBox{width:100%;height:auto;box-sizing:border-box;display:grid;grid-template-rows:repeat(4,1fr);grid-auto-flow:column;gap:calc(.3vh + .3vw);overflow-x:scroll;overflow-y:hidden;padding:calc(1vh + 1vw);margin-bottom:calc(.5vh + .5vw)}.circles{width:calc(1vh + 1vw);height:calc(1vh + 1vw);border-radius:calc(.3vh + .3vw)}.tasksForm,.memoirFormBox{display:flex}.submitButton{background-color:transparent;font-size:calc(.5vh + .5vw);border:none;color:#fff;margin-left:calc(1vh + 1vw)}.addHabitButton{text-shadow:0 0 calc(1vh + 1vw) pink;font-size:calc(1vh + 1vw);background-color:transparent;border:none;color:#fff;font-size:calc(2vh + 2vw);position:absolute}.habitTitleBox{position:relative}.habitForm{margin-top:calc(1vh + 1vw);padding:calc(1vh + 1vw);border-radius:calc(.5vh + .5vw);border:calc(.1vh + .1vw) solid pink;display:flex;flex-direction:column;justify-content:space-evenly}.habitInput{display:flex;background-color:#12121200;padding:calc(.5vh + .5vw);margin:calc(.5vh + .5vw) 0;border-radius:calc(.5vh + .5vw);border:calc(.1vh + .1vw) solid pink;font-size:calc(.5vh + .5vw);width:100%;box-sizing:border-box;text-align:left;color:#fff}.habitInput:focus{border:white calc(.1vh + .1vw) solid;color:#fff}.habitSubmit{background-color:#151515;border:solid calc(.1vh + .1vw) pink;border-radius:calc(.5vh + .5vw);padding:calc(.2vh + .2vw) calc(.6vh + .6vw);margin:calc(.5vh + .5vw);color:#fff;font-size:calc(1vh + 1vw)}.habitTextMain{font-size:calc(1vh + 1vw)}.habitText{font-size:calc(.8vh + .8vw)}.habitGoal,.habitColor,.habitNameBox{display:flex;align-items:center}.habitColorInput{border:calc(.1vh + .1vw) solid pink;color:#0e599f;border-radius:calc(.5vh + .5vw);width:10%;height:calc(1.5vh + 1.5vw);box-sizing:border-box;padding:0;cursor:pointer;-webkit-appearance:none;-moz-appearance:none;appearance:none;margin-left:calc(.5vh + .5vw)}.goalText{margin-left:calc(1vh + 1vw)}.habitColorInput::-webkit-color-swatch-wrapper{padding:calc(1vh + 1vw);border-radius:calc(1vh + 1vw)}.habitColorInput::-webkit-color-swatch{border:calc(.1vh + .1vw) solid pink;border-radius:calc(1vh + 1vw)}.habitColorInput::-moz-color-swatch{border:calc(.1vh + .1vw) solid pink;border-radius:calc(1vh + 1vw)}.deleteHabitButton{text-shadow:0 0 calc(1vh + 1vw) pink;font-size:calc(2vh + 2vw);margin-left:calc(1vh + 1vw);background-color:transparent;border:none;color:#fff}.deleteHabitButton2{text-shadow:0 0 calc(1vh + 1vw) pink;font-size:calc(1vh + 1vw);background-color:transparent;border:none;color:#fff}.buttonBoxes{display:flex;flex-direction:column;justify-content:center;align-items:center}input{color:#fff}input[type=number]::-webkit-outer-spin-button,input[type=number]::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}input[type=number]{-moz-appearance:textfield}input:focus{outline:none}.login-container{background-color:#151515;height:100vh;width:100vw;display:flex}.login-box1{width:100%;height:100%;overflow:hidden;background-size:cover;background-position:center;position:relative}.begin-box{width:50%;position:absolute;height:100%;display:flex;flex-direction:column;justify-content:center;align-items:center;background-color:transparent;border:none;text-align:left;transition:scale 1s ease,background-color 1s}.begin-box:hover{scale:1.1;background-color:#000000c3}.begin-title{border-radius:calc(.5vh + .5vw);font-size:calc(3vh + 3vw);border:none;color:#615bc1;padding:5%;box-sizing:border-box;text-shadow:calc(.2vh + .2vw) calc(.2vh + .2vw) calc(.2vh + .2vw) rgba(0,0,0,.381)}.login-header{text-shadow:0 0 calc(1vh + 1vw) rgb(97,91,193);color:#fff}.login-box2{width:50%;height:100vh;box-sizing:border-box;background-color:#151515;display:flex;flex-direction:column;align-items:center;right:0%;justify-content:center;position:absolute}.login-box{width:80%;height:auto;padding:10%;box-sizing:border-box;background-color:#151515;border-radius:calc(2vh + 2vw);display:flex;flex-direction:column;justify-content:flex-start;align-items:center;box-shadow:0 calc(1vh + 1vw) calc(1vh + 1vw) #000;border:calc(.1vh + .1vw) solid rgb(97,91,193);gap:calc(2vh + 2vw)}.login-img{height:100%;background-position:center}.login-title{width:100%;font-size:calc(2vh + 2vw);text-align:center;color:#615bc1;text-wrap:nowrap;word-break:keep-all;text-overflow:ellipsis;white-space:nowrap;box-sizing:border-box}.login-form-box{width:100%;height:100%;display:flex;flex-direction:column;justify-content:center;align-items:center;justify-content:space-evenly;box-sizing:border-box}.login-text{flex-grow:1;width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:calc(2vh + 2vw);text-shadow:0 0 calc(.5vh + .5vw) rgb(97,91,193);text-align:left}.login-form{flex-grow:1;display:flex;flex-direction:column;width:100%;box-sizing:border-box;gap:calc(2vh + 2vw)}.login-input-box{display:flex;flex-direction:column;justify-content:center;align-items:center;width:100%;height:100%;justify-content:space-evenly;box-sizing:border-box;gap:calc(1vh + 1vw)}.username-input,.password-input{background-color:transparent;border-radius:calc(1vh + 1vw);width:100%;padding:5%;border:calc(.1vh + .1vw) solid rgb(97,91,193);font-size:calc(1vh + 1vw);box-sizing:border-box}.login-buttons-container{width:100%;height:100%;display:flex;flex-direction:column;justify-content:space-evenly;box-sizing:border-box;gap:calc(.5vh + .5vw)}.login-btn,.signup-btn{width:100%;border-radius:calc(.5vh + .5vw);font-size:calc(1vh + 1vw);border:none;background-color:#fff0;color:#fff;box-sizing:border-box}.submit-btn{width:100%;height:100%;border-radius:calc(.5vh + .5vw);font-size:calc(1vh + 1vw);border:none;background-color:#fff;color:#615bc1;box-sizing:border-box}.login-header{color:#fff;box-sizing:border-box}.error-message{font-size:calc(1vh + 1vw);position:absolute;color:#af1010;text-align:center;margin-bottom:2%;width:100%;box-sizing:border-box;bottom:0}@media (max-aspect-ratio: 1/1){.login-container{flex-direction:column}.begin-box{width:100%;height:50%;justify-content:center}.login-box2{width:100%;height:max-content;bottom:0;padding:5%}.mainPage{flex-direction:column-reverse}.imagesBox{width:100%;height:20%}.contentsBox{width:100%}.themeBox{flex-direction:column-reverse}}