h1,main{justify-content:center;display:flex}.accordion,.tab__content,html{overflow:hidden}#sketchContainer,.bottom-tab,.tab__close,.tab__label,h1,main{display:flex}.description-card,canvas{box-shadow:0 10px 30px 5px rgba(0,0,0,.3)}.save-button span,h1{font-family:Audiowide,serif}#how-to-use,.tab__close,.tab__label{cursor:pointer;color:#21bbe6;font-family:sans-serif}#how-to-use,.copyright,.description{font-family:sans-serif}body,html,main{height:100%}*{box-sizing:inherit;margin:0;padding:0}html{box-sizing:border-box}body{background:#162220;background:linear-gradient(90deg,#162220 0,#000 47%,#162220 100%)}main{align-items:center;flex-direction:column}h1{position:absolute;top:4vh;font-size:50px;margin:0 45px 55px;color:#dafaf4}#sketchContainer{margin-top:10vh;justify-content:center;align-items:center}.description-card,.tab__label{justify-content:space-between}canvas{border:3px solid #137c99;border-radius:35px}.tab{position:relative}.copyright,.description-card,.dna-image,.hexa-image,.tab input{position:absolute}.tab input{opacity:0;z-index:-1}.tab__content{max-height:0;transition:.35s}.tab input:checked~.tab__content{max-height:40rem}.accordion{border:2px solid #44abda}#how-to-use:hover,.copyright,.description,.tab__label:hover{color:#dafaf4}.tab__label{padding:.5rem 1rem 1rem;font-size:18px;line-height:1.15}.tab__label::after{content:"\276F";width:1em;height:1em;text-align:center;transform:rotate(90deg);transition:.35s}.tab input:checked+.tab__label::after{transform:rotate(270deg)}.tab__close{justify-content:flex-end;padding:.5rem 1rem;font-size:.75rem}.bottom-tab{justify-content:center}.tab input:not(:checked)+.tab__label:hover::after{animation:.5s infinite bounce}@keyframes bounce{25%{transform:rotate(90deg) translate(.25rem)}75%{transform:rotate(90deg) translate(-.25rem)}}.description-card{top:0;padding:18px;display:flex;flex-direction:column;left:0;margin:3vw 5vw 5vw 3vw;background-color:#1a1a1aee;width:20vw;border-radius:25px;min-width:320px;max-height:90vh;overflow-y:auto}.description-card p{margin-bottom:1em}.description{font-size:16px;margin:2vw 0 1vw}.description-bottom-line{text-align:center;margin-top:3rem}.save-button{all:unset;background-color:#303030;padding:12px 20px;border-radius:15px;cursor:pointer;transition:background-color .15s;margin-top:20px}.save-button span{margin-bottom:15px;color:#dafaf4;font-size:16px}.save-button:hover{background-color:#137c99}.save-button-mobile{display:none}.download-icon{width:15px;margin-right:5px}.dna-image{bottom:2vw;left:-15vw;width:45vw;z-index:-1}.hexa-image{top:-35vw;right:-35vw;rotate:-180deg;width:90vw;height:auto;z-index:-2;scale:0.5}.copyright{font-size:13px;bottom:5px;cursor:pointer;text-decoration:none;left:50vw;transform:translateX(-50%)}.shepherd-button,.shepherd-cancel-icon,.shepherd-text,.shepherd-theme-arrows{color:#dafaf4!important}.description-card::-webkit-scrollbar{width:12px}.description-card::-webkit-scrollbar-track{background:#f1f1f1;border-radius:10px}.description-card::-webkit-scrollbar-thumb{background:#555;border-radius:10px}.description-card::-webkit-scrollbar-thumb:hover{background:#137c99}.dg.main .close-bottom{background-color:#137c99!important}#how-to-use{width:100%;margin-top:1em;margin-bottom:0;text-align:center;padding-right:10px}#how-to-use:hover{filter:brightness(1.5)}.shepherd-theme-arrows{font-family:sans-serif!important;border-radius:15px!important;padding:2px!important}.shepherd-content{padding:.75rem!important;border-radius:15px!important}.shepherd-arrow::before,.shepherd-content{background-color:#414f60!important}.shepherd-arrow::before{border:2px solid #dafaf4}.shepherd-cancel-icon:hover{color:#21bbe6!important}.shepherd-header{padding:0 .75rem!important;height:20px}.shepherd-text{padding:.5em .75em 1.5em!important}.shepherd-footer{display:flex;justify-content:space-between;align-items:center;padding:0 .75rem!important}.shepherd-pagination{margin-right:auto}.shepherd-button{background-color:#137c99!important;font-size:16px;font-weight:500}.shepherd-button:hover{background-color:#21bbe6!important;color:#162220!important}.warning{color:#80fbdf}#loading-screen{position:fixed;top:0;left:0;width:100%;height:100%;background-color:rgba(0,0,0,.8);display:flex;justify-content:center;align-items:center;z-index:10000}.spinner{border:5px solid #f3f3f3;border-top:5px solid #3498db;border-radius:50%;width:50px;height:50px;animation:1s linear infinite spin}@keyframes spin{0%{transform:rotate(0)}100%{transform:rotate(360deg)}}@media (max-width:767px){#how-to-use,h1{text-align:center}body{background:#162220;background:linear-gradient(90deg,#162220 15%,#000 50%,#162220 85%)}html{overflow:auto}main{justify-content:start;position:relative;overflow-y:auto;overflow-x:hidden}h1{font-size:27px;margin-top:2vh}#sketchContainer{margin-top:0}.p5Canvas{position:absolute;bottom:5vh;left:50%;transform:translateX(-50%);z-index:0}.description-card{top:12vh;padding:15px;transform:translateX(-50%);left:45vw;margin:5vw;background-color:#1a1a1aee;border-radius:25px;z-index:2;min-width:320px}.gui-color,.gui-main{max-width:210px;top:0}.description-card p{margin-bottom:1em}.description{color:#dafaf4;font-size:13px;margin-bottom:2vw;margin-top:2em;font-family:sans-serif}#how-to-use,.tab__label{font-size:15px}.description-bottom-line{margin-top:2rem}#how-to-use{cursor:pointer;width:100%;color:#21bbe6;margin-top:1em;margin-bottom:.3em;padding-right:10px;font-family:sans-serif}.save-button{display:none}.save-button-mobile{border:none;outline:0;background:#137c99;text-decoration:none;display:block;bottom:25px;right:5vw;position:fixed;padding:10px 18px;border-radius:15px;cursor:pointer;transition:background-color .15s;margin-top:20px;z-index:1000}.dg.main .close-bottom,.shepherd-button{background-color:#137c99!important}.save-button-mobile span{margin-bottom:15px;color:#dafaf4;font-family:Audiowide,serif;font-size:14px}.save-button-mobile:hover{background-color:#303030}.copyright{font-size:10px}.dg.main{display:flex;flex-direction:column;height:100vh!important;position:fixed!important}.dg.main ul{flex-grow:1}#color-manager,.step4{margin-top:30px}.gui-main{transform:scale(.8);transform-origin:top right;overflow:hidden;right:0}.gui-color .property-name,.gui-main .property-name{font-size:12px}.gui-color{transform:scale(.8);transform-origin:top right;right:180px}.dg.main .close-button{font-size:15px!important;padding:5px!important;height:30px!important;width:210px!important;margin-top:auto!important}.shepherd-theme-arrows{max-width:80vw!important}.shepherd-cancel-icon{color:#dafaf4!important;font-size:30px!important}.shepherd-header{padding:0 .45rem!important;height:15px}.shepherd-text{padding:.2em .45em 1.2em .35em!important;font-size:13px!important;line-height:1rem!important}.shepherd-footer{padding:0 .45rem!important}.shepherd-pagination{margin-right:auto;font-size:13px!important}.shepherd-button{color:#dafaf4!important;font-size:16px;font-weight:500;padding:.4rem .5rem .3rem!important}.shepherd-button:hover{background-color:#21bbe6!important;color:#162220!important}.warning{color:#80fbdf}.dna-image{position:absolute;top:80px;left:-10vh;width:30vh;z-index:-1}.hexa-image{top:-20vw;right:-40vw;rotate:-130deg;scale:0.9}}@media (max-width:767px) and (orientation:landscape){main{overflow:hidden;height:120vh}.description-card{min-width:60vw;padding:15px;max-height:70vh;overflow-y:scroll}.description-card p{margin-bottom:1em}.description{font-size:13px}.shepherd-theme-arrows{max-width:80vw!important}.shepherd-cancel-icon{color:#dafaf4!important;font-size:30px!important}.shepherd-header{padding:0 .45rem!important;height:15px}.shepherd-text{padding:.2em .45em 1.2em .35em!important;font-size:13px!important;line-height:1rem!important}.shepherd-footer{padding:0 .45rem!important}.shepherd-pagination{margin-right:auto;font-size:13px!important}.shepherd-button{background-color:#137c99!important;color:#dafaf4!important;font-size:16px;font-weight:500;padding:.4rem .5rem .3rem!important}.shepherd-button:hover{background-color:#21bbe6!important;color:#162220!important}}@media (min-width:768px) and (max-width:1280px){.dg.main,h1{display:flex}h1{font-size:35px;justify-content:center;margin:0 45px 55px 0;font-family:Audiowide,serif;color:#dafaf4}.description-card{min-width:215px;padding:15px}.description-card p{margin-bottom:1em}.description{font-size:14px}.hexa-image{top:-30vw;right:-30vw;rotate:-180deg;scale:0.7}.gui-color,.gui-main{max-width:210px;top:0}.dg.main{flex-direction:column;height:100vh!important;position:fixed!important}.dg.main ul{flex-grow:1}#color-manager,.step4{margin-top:30px}.gui-main{transform:scale(.8);transform-origin:top right;overflow:hidden;right:0}.gui-color .property-name,.gui-main .property-name{font-size:12px}.gui-color{transform:scale(.8);transform-origin:top right;right:180px}.dg.main .close-button{font-size:15px!important;padding:5px!important;height:30px!important;width:210px!important;margin-top:auto!important}.dg.main .close-bottom{background-color:#137c99!important}}