@import url(https://fonts.googleapis.com/css2?family=Caveat:wght@400;500;600;700&family=Homemade+Apple&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap);:root{--blue:#2593ce;--black:#023047;--primaryWhite:#b0e0f7;--secondaryWhite:#8bccec;--green:#c1ff82;--white:#fff;--largestText:24px;--normalText:14px;--smallText:12px;--mobileSmall:10px;--textFont:"Roboto";--scriptFont:"Homemade Apple"}.App{display:flex;flex-direction:column;height:100vh;position:relative}body{background-image:url(/10DaysOfCode-LTE/static/media/background.f7139a07464d9f53f9dd.png);background-position:50%;background-size:cover;font-family:Roboto,sans-serif;font-family:var(--textFont),sans-serif;margin:0;overflow-x:hidden}.centerArea{align-items:center;display:flex;flex-direction:column;margin:0 20px}.Cloud{position:relative}.Cloud img{-webkit-animation:wave 2s linear infinite;animation:wave 2s linear infinite;object-fit:cover;position:absolute;top:0;width:100vw}.Cloud img:first-child{-webkit-animation-delay:-.2s;animation-delay:-.2s;height:25vh;z-index:-1}.Cloud img:last-child{-webkit-animation-delay:-.5s;animation-delay:-.5s;height:33vh;z-index:-2}@-webkit-keyframes wave{0%{-webkit-transform:translateY(0);transform:translateY(0)}50%{-webkit-transform:translateY(-5px);transform:translateY(-5px)}to{-webkit-transform:translateY(0);transform:translateY(0)}}@keyframes wave{0%{-webkit-transform:translateY(0);transform:translateY(0)}50%{-webkit-transform:translateY(-5px);transform:translateY(-5px)}to{-webkit-transform:translateY(0);transform:translateY(0)}}@media screen and (max-width:800px){.Cloud img:first-child{height:20vh}.Cloud img:last-child{height:30vh}}.Logo{display:flex;justify-content:center;padding:20px 0 0}@media screen and (max-width:800px){.Logo img{width:300px}}.DayButtons{grid-gap:10px;display:grid;gap:10px;grid-template-columns:repeat(5,70px);grid-template-rows:repeat(2,30px);justify-content:center;margin:0 auto;width:400px}.DayButtons .dayBtn{background-color:var(--green);border:none;border-radius:5px;cursor:pointer;font-family:inherit;font-size:var(--smallText);font-weight:600;transition-duration:.2s}.dayBtn.alert{-webkit-animation:flash .5s linear 3;animation:flash .5s linear 3}@-webkit-keyframes flash{0%{border:none}50%{border:2px solid var(--black)}to{border:none}}@keyframes flash{0%{border:none}50%{border:2px solid var(--black)}to{border:none}}.DayButtons .dayBtn:hover{-webkit-transform:scale(1.1);transform:scale(1.1)}.DayButtons .selected{background-color:var(--black);color:var(--green)}@media screen and (max-width:800px){.DayButtons{grid-template-columns:repeat(5,50px);grid-template-rows:repeat(2,30px);width:200px}.DayButtons .dayBtn{font-size:var(--mobileSmall)}}.UploadArea{border:3px dotted var(--white);margin:20px 0;padding:5px}.UploadArea.alert{-webkit-animation:alert .5s linear 3;animation:alert .5s linear 3}@-webkit-keyframes alert{0%{border:3px dotted var(--black)}50%{border:3px dotted var(--white)}to{border:3px dotted var(--black)}}@keyframes alert{0%{border:3px dotted var(--black)}50%{border:3px dotted var(--white)}to{border:3px dotted var(--black)}}#uploadBtn{align-items:center;background-color:var(--primaryWhite);color:var(--blue);cursor:pointer;display:flex;flex-direction:column;font-size:var(--normalText);font-weight:600;gap:10px;height:350px;justify-content:center;width:380px}#uploadBtn img{width:50px}#uploadBtn:hover+#imgUpload,.UploadArea:hover{border-color:var(--black)}#demoImg{border:3px dotted var(--black);width:40%!important}@media screen and (max-width:800px){#uploadBtn{font-size:var(--smallText);height:280px;text-align:center;width:280px}#uploadBtn img{width:30px}}.TextArea textarea{border:none;border:2px solid var(--white);border-radius:5px;color:var(--black);font-family:inherit;font-size:var(--smallText);height:80px!important;padding:10px 20px;resize:none;width:220px!important}.TextArea textarea:focus{border:2px solid var(--black);outline:none}.TextArea{position:relative}.wordLimit{bottom:10px;color:gray;font-size:var(--smallText);position:absolute;right:10px}@media screen and (max-width:800px){.TextArea textarea{font-size:var(--mobileSmall);height:80px!important;width:120px!important}}.InputArea{align-items:flex-start;display:flex;justify-content:space-between;margin-bottom:20px;width:380px}.InputArea button{background-color:var(--green);border:none;border-radius:5px;cursor:pointer;font-family:inherit;font-size:var(--normalText);font-weight:500;padding:10px 20px;transition-duration:.2s}.InputArea button:hover{-webkit-transform:scale(1.1);transform:scale(1.1)}.aboutLink{border-bottom:1px dotted var(--primaryWhite);color:var(--primaryWhite);font-size:var(--smallText);font-weight:300;text-decoration:none}.aboutLink:hover{border-bottom:1px dotted #fff;color:#fff}@media screen and (max-width:800px){.InputArea{gap:10px;max-width:270px;width:80vw}.InputArea button{font-size:var(--smallText);font-weight:500;padding:10px 20px}}#planeRight{right:80vw;top:30vh}#planeLeft,#planeRight{-webkit-animation:move-plane 4s ease-in-out infinite;animation:move-plane 4s ease-in-out infinite;position:absolute;z-index:-1}#planeLeft{-webkit-animation-delay:-.5s;animation-delay:-.5s;left:80vw;top:60vh}@-webkit-keyframes move-plane{0%{-webkit-transform:translateY(0) rotate(0);transform:translateY(0) rotate(0)}50%{-webkit-transform:translateY(20px) rotate(3deg);transform:translateY(20px) rotate(3deg)}to{-webkit-transform:translateY(0) rotate(0);transform:translateY(0) rotate(0)}}@keyframes move-plane{0%{-webkit-transform:translateY(0) rotate(0);transform:translateY(0) rotate(0)}50%{-webkit-transform:translateY(20px) rotate(3deg);transform:translateY(20px) rotate(3deg)}to{-webkit-transform:translateY(0) rotate(0);transform:translateY(0) rotate(0)}}@media screen and (max-width:800px){#planeRight{width:100px}#planeLeft{display:none}}.Footer{display:flex;gap:50px;justify-content:flex-end;margin:0 50px;position:relative}.Footer img{height:100px}#otopus{bottom:0;height:350px;position:absolute;right:65vw}@media screen and (max-width:800px){.Footer{display:flex;gap:50px;justify-content:center;margin:0 50px}.Footer img{height:80px}#otopus{display:none}}.Edit h3{font-family:var(--scriptFont),cursive;font-size:28px;font-weight:200;margin-top:0;text-align:center}.Edit h3,.Edit h4{color:var(--primaryWhite)}.Edit h4{font-size:var(--normalText);font-weight:500;letter-spacing:.5px;margin:15px auto;width:350px}.controlArea{align-items:flex-start;height:80px;justify-content:space-between}.btnContain,.controlArea{display:flex;margin:0 auto;width:350px}#downloadBtn,.btnContain{justify-content:center}#downloadBtn{align-items:center;background-color:var(--green);border:none;border-radius:5px;color:var(--black);cursor:pointer;display:flex;font-family:inherit;font-weight:600;gap:5px;height:30px;margin-top:10px;transition:-webkit-transform .2s;transition:transform .2s;transition:transform .2s,-webkit-transform .2s;width:100%}#downloadBtn img{width:20px}#downloadBtn:hover{-webkit-transform:translateY(-2px);transform:translateY(-2px)}.aboutLinkContainer{margin:5px auto;width:350px}@media screen and (max-width:800px){.Edit h3{font-size:20px}.Edit h4{font-size:var(--smallText);text-align:center}.Edit h4,.aboutLinkContainer,.btnContain,.controlArea{width:70vw}}#bg{width:100%}.ImageArea{align-items:center;display:flex;flex-direction:column;justify-content:center}.Image{height:350px;position:relative;width:350px}.mainPicContainer{height:150px;object-fit:cover;overflow:hidden;width:200px}#frame,.mainPicContainer{bottom:0;left:0;margin:auto;position:absolute;right:0;top:0}#frame{width:350px}#picText{bottom:13%;color:var(--black);font-family:Caveat,cursive;font-size:12px;left:50%;margin:0;position:absolute;text-align:center;-webkit-transform:translate(-50%);transform:translate(-50%);width:50%}@media screen and (max-width:800px){.Image{height:70vw;width:70vw}.mainPicContainer{height:40%;object-fit:cover;overflow:hidden;width:50%}#frame,.mainPicContainer{bottom:0;left:0;margin:auto;position:absolute;right:0;top:0}#frame{width:100%}#picText{font-size:2.3vw}}#dayText{bottom:10px;left:50%;position:absolute;-webkit-transform:translate(-50%);transform:translate(-50%);width:35%}.ImageSetting{display:flex;flex-direction:column;gap:10px}.slider{align-items:center;display:flex;gap:5px;justify-content:flex-end}.slider img{width:20px}.slider input{-webkit-appearance:none;background:var(--black);border-radius:5px;height:5px;width:100px}.slider input::-webkit-slider-runnable-track{-webkit-appearance:none;background:transparent;border:none;box-shadow:none}.slider input::-webkit-slider-thumb{-webkit-appearance:none;background:var(--black);border-radius:50%;box-shadow:0 0 2px 0 #555;cursor:pointer;height:20px;width:20px}.moveBtns{grid-gap:5px;display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(2,1fr)}.up{grid-row:1}.down,.up{grid-column:2}.down,.left{grid-row:2}.left{grid-column:1}.right{grid-column:3;grid-row:2}.moveBtns button{align-items:center;background-color:var(--black);border:none;border-radius:5px;cursor:pointer;display:flex;height:30px;justify-content:center;transition-duration:.1s;width:40px}.moveBtns button:hover{-webkit-transform:scale(1.1);transform:scale(1.1)}.down img{-webkit-transform:rotate(180deg);transform:rotate(180deg)}.left img{-webkit-transform:rotate(-90deg);transform:rotate(-90deg)}.right img{-webkit-transform:rotate(90deg);transform:rotate(90deg)}.ColorSetting{grid-gap:10px;display:grid;gap:10px;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(3,1fr);margin-left:30px}.colorBtn{border:none;border:3px solid var(--blue);border-radius:50%;box-sizing:border-box;cursor:pointer;display:block;height:23px;transition:-webkit-transform .2s;transition:transform .2s;transition:transform .2s,-webkit-transform .2s;width:23px}.colorBtn:hover{-webkit-transform:scale(1.1);transform:scale(1.1)}.colorBtn.selected{border:3px solid var(--black)}.btn1{background-color:#79be42}.btn2{background-color:#c64f40}.btn3{background-color:#dacb4d}.btn4{background-color:#f27c33}.btn5{background-color:#655da9}.btn6{background-color:#d44b9b}@media screen and (max-width:800px){.colorBtn{border:2px solid var(--blue)}.colorBtn.selected{border:2px solid var(--black)}}.ControlBtns{display:flex;gap:10px}.controlBtn{align-items:center;background-color:var(--primaryWhite);border:none;border:3px solid var(--blue);border-radius:50%;box-sizing:border-box;cursor:pointer;display:flex;height:38px;justify-content:center;transition:-webkit-transform .2s;transition:transform .2s;transition:transform .2s,-webkit-transform .2s;width:38px}.controlBtn:hover{-webkit-transform:scale(1.1);transform:scale(1.1)}.controlBtn.selected{border:3px solid var(--black)}.controlBtn img{width:25px}@media screen and (max-width:800px){.controlBtn{height:35px;width:35px}.ControlBtns{flex-wrap:wrap;gap:5px}}.cardContainer{background-color:hsla(0,0%,100%,.2);border-radius:5px;display:flex;gap:20px;justify-content:space-around;padding:30px 50px;width:500px}.About,.card{align-items:center;display:flex;flex-direction:column}.About h3{font-family:var(--scriptFont),cursive;font-size:28px;font-weight:200;margin-top:0}.About h3,.AboutText{color:var(--primaryWhite);text-align:center}.AboutText{font-size:var(--smallText);font-weight:300}.AboutText a{border-bottom:1px dotted pink;color:pink;font-weight:300;text-decoration:none}.backHome{border-bottom:1px dotted var(--primaryWhite);color:var(--primaryWhite);font-size:var(--smallText);text-decoration:none}.backHome:hover{border-bottom:1px dotted #fff;color:#fff}.card img{border-radius:50%;height:100px;object-fit:cover;width:100px}.card h4{color:#fff;font-weight:400;margin:5px 0 3px}.card h4,.card h5{font-size:var(--smallText);text-align:center}.card h5{color:var(--primaryWhite);font-weight:300;margin:0}@media screen and (max-width:800px){.cardContainer{flex-wrap:wrap;padding:30px 5vw;width:70vw}.card img{height:80px;width:80px}}
/*# sourceMappingURL=main.7f3a586d.css.map*/