*{font-family:Arial,Helvetica,sans-serif;-webkit-tap-highlight-color:transparent;margin:0;padding:0;box-sizing:border-box;font-family:Roboto Mono,serif}@import url("https://fonts.googleapis.com/css2?family=Roboto+Mono:ital,wght@0,100..700;1,100..700&display=swap");.p{width:100px;height:100px;margin:10px}.button-class{display:flex;align-items:center;justify-content:center;padding:10px 20px;background-color:#fff;border:solid #1ba057;border-width:2px 2px 4px;border-radius:12px;font-size:16px;font-weight:700;color:#1ba057;text-decoration:none;cursor:pointer;transition:background-color .3s ease,color .3s ease}.p5:hover{color:#fff}.p4,.p5:hover{background-color:#1ba057}.p4{color:#ffd56c}#container1{display:flex;flex-direction:row;justify-content:space-between;margin:8% 18%;align-items:center}.container1-box1,.container1-box2{display:flex;flex-direction:column}.p1{height:40vh;border-radius:10px}.p1,.p2,.p3{width:30vw}.p3{height:5vh}.p4,.p5{width:20vw;height:8vh;border-radius:10px}#page1-s1{display:flex;justify-content:center;align-items:center}#page1-s1 img{height:100%}#page1-s2{display:flex;justify-content:center;align-items:center;font-weight:700;font-size:3.5rem;margin:0 10px}#page1-s2 span{color:#1ba057}#page1-s3{justify-content:center;margin:0 10px}#container2,#page1-s3{display:flex;align-items:center}#container2{flex-direction:column;justify-content:space-between;min-height:90vh;box-sizing:border-box}.page2-box{position:absolute;left:0;width:13.05vw;height:90vh;border-right:1px solid #bcbcbc;border-bottom:1px solid #bcbcbc;padding:12px;display:flex;flex-direction:column;justify-content:flex-end}.page2-box button{display:flex;background-color:#fff;border:solid #1ba057;border-width:2px 2px 4px;padding:2% 3%;border-radius:3px}.page2-box button:hover{background-color:#1ba057;color:#ffd56c}.navbar{width:100%;padding:10px 20px;border-bottom:2px solid #dadada;display:flex;justify-content:flex-end}.navbar-links{margin:15px}.navbar-links a{color:#000;text-decoration:none;font-size:15px;margin-left:20px;font-weight:500}.navbar-links .signUp{background-color:#1ba057;color:#fff;border-radius:20px;padding:10px 20px}.page2-s1{flex-direction:column;color:gray;margin-top:10vh;gap:.8rem 0;width:300px;height:200px;background-color:#fbfbfb;border:1px dotted #707070}.page2-s1,.page2-s2{display:flex;justify-content:center;align-items:center;border-radius:5px}.page2-s2{width:10%;height:40px;transition:background-color .3s ease,color .3s ease}.page2-s2:active{color:#fff;background-color:#1ba057}.page2-s3{display:flex;overflow-x:auto;gap:10px;margin:0;width:60%}.page2-s3::-webkit-scrollbar{height:8px}.page2-s3::-webkit-scrollbar-thumb{background-color:gray;border-radius:4px}.page2-s3 div{flex:0 0 calc(20%);height:100px;background-color:#d3d3d3;border-radius:5px;text-align:center;line-height:100px;margin-left:10px;margin-bottom:10px}.page2-s3 div:first-child{margin-left:0}.page2-s4{width:20%;height:50px;background-color:#1ba057;border-radius:5px;margin-bottom:2vh;padding:0;display:flex;justify-content:center;align-items:center}#container3{display:flex;flex-wrap:wrap}#page3-box{display:flex;flex-direction:row;width:100%;justify-content:space-between;height:90vh}#page3-s1{width:13.05vw;border-right:1px solid #bcbcbc;border-bottom:1px solid #bcbcbc}#page3-s2{width:100%;height:80vh;align-self:flex-end;display:flex;justify-content:space-between;align-items:center;flex-direction:column}.s2-box{border:1px solid #000;width:60vw;height:80%;padding:8px 12px;overflow-y:scroll}#page3-s2 .div{display:flex;justify-content:center;align-items:center;position:relative}#page3-s2 button{position:absolute;right:10px;border:none;background-color:transparent}#page3-s2 button:hover{cursor:pointer}#page3-s2 input{width:50vw;margin:2rem 0;font-size:1rem;padding:1rem 1.5rem;border-radius:30px;outline:none;border:1px solid #000}#container4{padding:2% 12%;display:flex;flex-direction:row;justify-content:space-between}.container4-box1,.container4-box2{width:40%;height:90vh;border-radius:10px}.container4-box2{display:flex;justify-content:space-between;flex-direction:column;background-color:#fff;padding:0 2%}#page4-s1{height:20%;display:flex;justify-content:center}.s1{height:50px;width:180px;align-self:flex-end}.s2{margin:5% 0}.s2-label{height:30px;width:180px;margin-bottom:20px}.s2-input,.s2-label{align-self:flex-start}.s2-input{height:40px;width:100%;border-radius:30px}#page4-s3{display:flex;flex-direction:column;align-items:center}.s3-1{height:60px;width:60%;border-radius:10px;background-color:#1ba057;margin-bottom:5%}.s3-1:hover{cursor:pointer}.s3-2{height:20px;width:90%;margin-bottom:10%}.container4-box1{display:flex;justify-content:center;align-items:center}.container4-box1 img{height:80%}.s1{justify-content:center;font-weight:700;font-size:2.5rem}.s1,.s2-label{display:flex;align-items:center}.s2-label{font-weight:500;align-self:center}.s2-input input{width:100%;height:100%;border-radius:15px;padding-left:1rem;border:.1px solid #000}.s2-input input:focus{border:2px solid #1ba057}.s3-1{align-items:center;font-size:1rem;font-weight:500;color:#fff}.s3-1,.s3-2{display:flex;justify-content:center}.s3-2 a{color:gray}body{transition:background-color .3s ease,color .3s ease}body.dark-mode{background-color:#121212;color:#e0e0e0}.dark-mode .free{color:#ffd56c}.dark-mode .navbar{background-color:#1f1f1f;border-bottom:2px solid #333}.dark-mode .navbar-links a{color:#e0e0e0}.dark-mode .button-class{background-color:#333;color:#e0e0e0;border-color:#444}.dark-mode .button-class:hover{background-color:#444;color:#fff}.dark-mode .page2-s3 div{background-color:#333}.dark-mode .s2-box{background-color:#1f1f1f}.dark-mode-toggle{background-color:#1ba057;color:#fff;border:none;padding:10px 20px;border-radius:5px;cursor:pointer;transition:background-color .3s ease,color .3s ease;position:absolute;top:20px;left:10px}.dark-mode-toggle:hover{background-color:#146c3a}@media (max-width:1024px){.p{width:80px;height:80px;margin:8px}.button-class{padding:8px 16px;font-size:14px}#container1{margin:10% 5%;flex-direction:column;align-items:center}.container1-box1,.container1-box2{flex-direction:column;gap:10px;align-items:center}.p1,.p2,.p3{width:45vw;height:auto}.p1{height:30vh}.p4,.p5{width:30vw;height:10vh}#page1-s1,#page1-s2,#page1-s3{display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center}#page1-s2{font-size:2.5rem;text-align:center;margin:10px 0}}@media (max-width:768px){.p{width:600px;height:60px;margin:6px}.button-class{padding:6px 12px;font-size:12px}#container1{margin:5% 2%;gap:10px}.container1-box1,.container1-box2{flex-direction:column;gap:5px}.p1,.p2,.p3{width:90vw;align-self:center;height:auto}.p1{height:40vh;margin-top:90px}.p4{margin-top:30px}.p4,.p5{width:90vw;height:8vh}#page1-s2{font-size:2rem}}@media (max-width:480px){.p4{margin-top:0}#page1-s1 img{width:50vw;height:auto}.button-class{padding:12px 24px;font-size:14px;border-radius:15px}#container1{flex-direction:column;align-items:center;margin:15% 5%}.container1-box1,.container1-box2{flex-direction:column;align-items:center;gap:10px;width:100%}.p1,.p2,.p3{width:90vw;height:auto}.p4,.p5{width:80vw;height:8vh}#page1-s2{font-size:2rem;margin:15px 0}#page1-s3{display:flex;flex-direction:column;justify-content:center;align-items:center;margin:0 10px;font-size:1.2rem;width:100%}}@media (max-width:1024px){.navbar-links a{font-size:14px}#container2{flex-direction:column;padding:20px 10px}.page2-s2{margin:25px 0 60px}.hide-box{display:none}.page2-box{width:20vw;height:auto;position:relative;margin-bottom:20px;order:5}.page2-box button{width:100%;padding:5% 7%;font-size:14px}.page2-s2{width:30%;height:45px}.page2-s3{width:40%;margin-left:260px;margin-bottom:20px}.page2-s4{width:40%;margin-bottom:30px}.page2-box{border:none}}@media (max-width:768px){.page2-box{width:70%;height:auto;position:relative;margin-bottom:20px}.page2-s2{width:50%;height:45px}.page2-s3{width:100%;flex-wrap:wrap;gap:15px}.page2-s3 div{flex:0 0 calc(45%);height:100px}.page2-s4{width:60%}}@media (max-width:480px){#container2{display:flex;flex-direction:column;padding:20px 10px;width:100vw}.page2-box{width:100%;order:5;border:none;margin-top:40px}.page2-s2{margin:25px 0 60px}.hide-box{display:none}.page2-s2{width:50%;height:50px}.page2-s3{width:40vw;flex-wrap:wrap;gap:15px;margin-left:15px;margin-bottom:20px}.page2-s3 div{flex:0 0 calc(90%);height:100px}.page2-s4{width:80%}}@media(max-width:1028px){#page3-box{display:flex;flex-direction:column}#page3-s1{align-self:center;width:95vw;border:none}#page3-s2{margin-top:30px;width:100vw}.s2-box{height:100vh}#page3-s2 input,.s2-box{width:90vw}}@media (min-width:480px) and (max-width:720px){.s2-box{margin-left:20px}}@media (max-width:1080px){#container4{flex-direction:column;padding:5%;margin-top:100px}.container4-box1,.container4-box2{width:100%;height:auto;margin-bottom:20px}.container4-box1 img{width:100%;height:auto}#page4-s1{height:auto;margin-top:20px}.s1{font-size:2rem;width:100%}.s2{margin:10px 0}.s2-label{margin-bottom:10px;text-align:center}.s2-input input,.s2-label{width:100%}.s3-1{width:80%;font-size:1rem;margin-top:10px}.s3-2,.s3-2 a{font-size:.9rem}}@media (max-width:480px){#container4{flex-direction:column;padding:5%;margin-top:20px}.container4-box1,.container4-box2{width:100%;height:auto;margin-bottom:15px}.container4-box1 img{margin-top:60px;width:100%;height:auto}#page4-s1{height:auto;margin-top:10px}.s1{font-size:1.8rem;width:100%}.s2{margin:8px 0}.s2-label{font-size:1rem;margin-bottom:5px;text-align:left}.s2-input input{width:100%;padding-left:.5rem}.s3-1{width:100%;font-size:.9rem;margin-top:10px}.s3-2,.s3-2 a{font-size:.8rem}}