:root{--pink:#ef798a;--red:#ec483f;--yellow:#fabc2a;--green:#44b97d;--blue:#5a8eff;--blue10:#eff4ff;--navy:#296f93;--purple:#b9c4fe;--grey:#c4c4c4;--light-grey:#f2f2f2;--black:#2b303a;--white:#fff}body,button{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;color:#2b303a;color:var(--black);font-family:Poppins,sans-serif;font-size:16px;margin:0}code{font-family:source-code-pro,Menlo,Monaco,Consolas,Courier New,monospace}b{color:#5a8eff;color:var(--blue);font-weight:700}.black-bold{color:#2b303a;color:var(--black)}.navbar{align-self:center;display:flex;flex-direction:row;height:48px;justify-content:space-between;width:100%}.main-container{align-items:center;background-color:#fff;box-sizing:border-box;display:flex;flex-direction:column;height:100vh;overflow-y:scroll;padding:32px 24px;width:100%}.back-arrow{padding-left:3px;width:22px}.avatar{height:48px;width:48px}.p-header{margin-top:10px;width:100%}.tutorial-panel{align-items:center;background-color:#eff4ff;background-color:var(--blue10);border-radius:8px;box-sizing:border-box;display:flex;flex-direction:column;flex-grow:4;height:100%;margin-top:32px;padding:32px 24px;width:100%}.tutorial-title-3{font-weight:500;height:72px;margin-bottom:32px;width:100%}.tutorial-title-2{font-weight:500;margin-bottom:24px;width:100%}.button-wrapper{display:flex;flex-direction:row;position:relative;width:100%}.logbook{background:#fff;background:var(--white);border:1px solid #2b303a;border:1px solid var(--black);border-radius:8px;box-sizing:border-box;font-weight:400;margin-top:32px;padding:16px 24px;width:100%}.logbook:hover{background:#f2f2f2;background:var(--light-grey)}.logbook-notif{background:#ec483f;background:var(--red);border-radius:60px;bottom:42px;color:#fff;color:var(--white);font-size:12px;font-weight:700;height:24px;line-height:24px;position:absolute;right:-12px;text-align:center;vertical-align:middle;width:24px;z-index:100}.console-wrapper{margin-bottom:auto;padding-bottom:24px;position:relative;width:75%}.console-image{width:100%}.console-select{background-color:#2b303a;opacity:0;position:absolute}.step-image{border-radius:8px;margin-bottom:24px;margin-top:auto;width:100%}.console-gif{position:absolute;width:100vw}.step8-select{background-color:#2b303a;opacity:0;position:absolute}.step8-wrapper{margin-bottom:16px;position:relative;width:100%}.step8-image{width:100%}.step10-select{background-color:#2b303a;position:absolute}.step10-message{margin-bottom:16px;margin-top:auto}.step10-wrapper{margin-bottom:16px;position:relative;width:100%}.step10-image{width:100%}.select-message{margin-bottom:16px;text-align:center}.step-button-wrapper{align-items:center;flex-direction:row;justify-content:space-between;margin-top:auto}.button-expand-wrapper,.step-button-wrapper{background:#fff;background:var(--white);border:1px solid #2b303a;border-radius:8px;box-sizing:border-box;display:flex;margin-bottom:16px;padding:16px 24px;width:100%;z-index:100}.button-expand-wrapper{align-items:flex-start;flex-direction:column;gap:24px;overflow-y:none;text-align:left}.button-expand-header{display:flex;flex-direction:row;justify-content:space-between;width:100%}.step-button-arrow{width:24px}.step-button-wrapper:hover{background:#f2f2f2;background:var(--light-grey)}.step-nav-wrapper{display:flex;flex-direction:row;justify-content:space-between;margin-top:auto;width:100%;z-index:200}.step-nav-number{font-weight:500}.video-hint-overlay-bg{align-items:center;background-color:rgba(43,48,58,.45);box-sizing:border-box;display:flex;flex-direction:column;height:100vh;justify-content:center;left:0;padding:32px 16px;position:absolute;top:0;width:100vw;z-index:995}.video-hint-overlay{background-color:#fff;background-color:var(--white);border-radius:8px;box-sizing:border-box;padding:20px;z-index:999}.video-hint-overlay-header{display:flex;flex-direction:row;justify-content:space-between;margin-bottom:20px}.video-hint{border-radius:8px;width:100%}ol{margin:0}.how-it-works-title{max-width:80%}.how-it-works{align-items:center;background-color:#fff;background-color:var(--white);border-radius:8px;box-sizing:border-box;display:flex;flex-direction:column;gap:16px;margin-bottom:16px;margin-top:auto;max-height:50vh;overflow-y:scroll;padding:16px 21px 32px 32px;width:100%}.how-it-works-gif{width:100%}.youtube-tutorial{height:530px;width:300px}.scratch-image-wrapper{align-items:center;display:flex;flex-direction:column;margin-bottom:16px;position:relative;width:100%}.scratch-cover{left:0;position:absolute;top:0;width:100%}.scratch-image{width:100%}.fade-out{opacity:0;transition:opacity 1s ease}.fade-out-2{opacity:0;transition:opacity 2s ease}.home-avatar{margin-bottom:24px;margin-top:56px}.home-title{font-weight:500;padding-bottom:16px;text-align:left;width:100%}.home-badge-wrapper{display:flex;flex-direction:row;flex-wrap:wrap;gap:16px;justify-content:space-between;padding-bottom:16px}.home-badge{width:45%}.home-name{font-size:24px;font-weight:500;margin-bottom:48px}.profile-wrapper{background-color:rgba(43,48,58,.45);justify-content:center;left:0;overflow-y:scroll;padding:100px 0 0;position:absolute;top:0;width:100vw;z-index:900}.profile-container,.profile-wrapper{align-items:center;box-sizing:border-box;display:flex;flex-direction:column;height:100%}.profile-container{background-color:#fff;background-color:var(--white);border-radius:24px 24px 0 0;padding:20px;width:100%;z-index:999}.profile-header{display:flex;flex-direction:row;justify-content:space-between;margin-bottom:20px;width:100%}.profile-title{font-weight:500;margin-bottom:16px;width:100%}.profile-body{align-items:center;display:flex;flex-direction:column;height:85vh;overflow-y:scroll;padding-bottom:16px;width:100%}.profile-avatar-wrapper{display:flex;flex-direction:row;flex-wrap:wrap;gap:16px;justify-content:center;padding-bottom:24px}.profile-avatar{border-radius:50%;width:80px}.profile-name{border:2px solid #c4c4c4;border:2px solid var(--grey);border-radius:8px;box-sizing:border-box;font-size:16px;height:56px;margin:8px 0;padding:16px 20px;width:100%}.profile-name:focus{-webkit-tap-highlight-color:rgba(255,255,255,0);-webkit-tap-highlight-color:transparent;border:2px solid #5a8eff;border:2px solid var(--blue);outline:none}.profile-save{background:#fff;background:var(--white);border:1px solid #2b303a;border:1px solid var(--black);border-radius:8px;box-sizing:border-box;font-weight:400;margin-bottom:8px;margin-top:32px;padding:16px 24px;width:200px}.profile-save:hover{background:#f2f2f2;background:var(--light-grey)}.logbook-wrapper{background-color:rgba(43,48,58,.45);height:100vh;justify-content:flex-start;left:0;padding:100px 0 0;position:absolute;top:0;width:100vw;z-index:900}.logbook-container,.logbook-wrapper{align-items:center;box-sizing:border-box;display:flex;flex-direction:column}.logbook-container{background-color:#fff;background-color:var(--white);border-radius:24px 24px 0 0;height:100%;padding:20px;width:100%;z-index:999}.logbook-entries{align-items:center;display:flex;flex-direction:column;height:80vh;overflow-y:scroll;width:100%}.logbook-header{display:flex;flex-direction:row;justify-content:space-between;margin-bottom:20px;width:100%}.logbook-title{margin-bottom:16px;width:100%}.logbook-entry{align-items:baseline;display:flex;flex-direction:column;width:100%}.logbook-ul{margin:0 0 24px}.intro-animation-container{align-items:center;background-color:#fff;background-color:var(--white);display:flex;flex-direction:column;height:100vh;justify-content:center;position:absolute;top:0;width:100vw;z-index:999}.intro-video{width:140%}.exploded-image{margin-bottom:24px;width:100%}.download-image{margin:0 0 56px;width:70%}.desktop-cont{align-items:center;background-color:#2b303a;display:flex;flex-direction:column;height:100vh;justify-content:center;width:100%}@media only screen and (min-device-width:768px) and (max-device-width:1200px){body,button{font-size:24px}.home-avatar{margin-bottom:32px;margin-top:96px;width:144px}.home-title{padding-bottom:24px}.home-badge{width:30%}.home-name{font-size:32px;margin-bottom:56px}.button-expand-wrapper,.logbook,.step-button-wrapper{padding:24px 32px}.tutorial-panel{padding:40px 32px}.tutorial-title-3{height:88px;margin-bottom:56px}.tutorial-title-2{margin-bottom:32px}.step-button-arrow{width:32px}.scratch-image,.step-image{max-width:70%}.scratch-cover{left:15%;width:70%}.avatar{width:56px}.avatar,.navbar{height:56px}.back-arrow{width:26px}.console-wrapper{width:53%}.step8-wrapper{width:70%}.step10-wrapper{width:65%}.logbook-notif{bottom:68px;font-size:20px;height:32px;line-height:32px;width:32px}.video-hint-overlay-bg{padding:36px 24px}.how-it-works{gap:32px;max-height:54vh;padding:48px 29px 32px 56px}.youtube-tutorial{height:900px;width:508px}.logbook-container{padding:36px 24px}.logbook-wrapper{padding:156px 0 0}.profile-container{padding:48px 40px}.profile-save{width:200px}.profile-avatar{width:150px}.profile-name{font-size:24px;height:72px}.intro-video{width:110%}.exploded-image{width:80%}}@media only screen and (min-device-width:1200px){.main-container{max-height:844px;max-width:390px}}.App{text-align:center}.App-logo{height:40vmin;pointer-events:none}@media (prefers-reduced-motion:no-preference){.App-logo{-webkit-animation:App-logo-spin 20s linear infinite;animation:App-logo-spin 20s linear infinite}}.App-header{align-items:center;background-color:#282c34;color:#fff;display:flex;flex-direction:column;font-size:calc(10px + 2vmin);justify-content:center;min-height:100vh}.App-link{color:#61dafb}@-webkit-keyframes App-logo-spin{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}to{-webkit-transform:rotate(1turn);transform:rotate(1turn)}}@keyframes App-logo-spin{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}to{-webkit-transform:rotate(1turn);transform:rotate(1turn)}}
/*# sourceMappingURL=main.e696f270.css.map*/