@import url(https://fonts.googleapis.com/css?family=Lexend:300,400,600,700,800,900,1000&display=swap);*,::after,::before{-webkit-box-sizing:border-box;box-sizing:border-box}.h1,.h2,.h3,.h4,.h5,.h6,h1,h2,h3,h4,h5,h6{margin:0;margin-bottom:.5rem;font-weight:500}.h1,h1{font-size:calc(1.3875rem + 1.65vw)}@media (min-width:1200px){.h1,h1{font-size:1.6rem}}.squaredle-h1{font-size:38px!important;font-weight:900!important}.squaredle_head{font-size:26px!important;font-weight:900!important;text-align:center}.squaredle-h2{font-size:19px!important;font-weight:400!important}.squaredle_h3{font-size:19px!important;font-weight:700!important}.squaredle_text{font-size:18px;margin:auto}.squaredle_step{margin: 30px auto 12px;max-width:700px}@media (max-width:1024px){.squaredle_head{font-size:24px!important;font-weight:800!important}}@media (max-width:512px){.squaredle_head{font-size:20px!important;font-weight:800!important}}@media (max-width:767px){.squaredle-h1{font-size:34px!important}}p{margin-top:0;margin-bottom:1rem}ul{padding-left:2rem}ul{margin-top:0;margin-bottom:1rem}ul ul{margin-bottom:0}.squaredle_ul{padding-left:0}.list-inline-item{display:inline-block}.list-inline-item:not(:last-child){margin-right:.5rem}.container{width:100%;padding-right:var(--bs-gutter-x,.75rem);padding-left:var(--bs-gutter-x,.75rem);margin-right:auto;margin-left:auto}@media (min-width:576px){.container{max-width:540px}}@media (min-width:768px){.container{max-width:720px}}@media (min-width:992px){.container{max-width:960px}}@media (min-width:1200px){.container{max-width:1140px}}@media (min-width:1400px){.container{max-width:1320px}}.row{--bs-gutter-x:1.5rem;--bs-gutter-y:0;display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;margin-top:calc(-1 * var(--bs-gutter-y));margin-right:calc(-0.5 * var(--bs-gutter-x));margin-left:calc(-0.5 * var(--bs-gutter-x))}.row>*{-ms-flex-negative:0;flex-shrink:0;width:100%;max-width:100%;padding-right:calc(var(--bs-gutter-x) * 0.5);padding-left:calc(var(--bs-gutter-x) * 0.5);margin-top:var(--bs-gutter-y)}@media (min-width:768px){.col-md-8{-webkit-box-flex:0;-ms-flex:0 0 auto;flex:0 0 auto;width:66.66666667%}.col-md-9{-webkit-box-flex:0;-ms-flex:0 0 auto;flex:0 0 auto;width:75%}}@media (min-width:992px){.col-lg-8{-webkit-box-flex:0;-ms-flex:0 0 auto;flex:0 0 auto;width:66.66666667%}.col-lg-6{-webkit-box-flex:0;-ms-flex:0 0 auto;flex:0 0 auto;width:56%}}.squaredle_share{margin: 50px 0 30px}.squaredle_title{background-color:#a6daff}.squaredle_note{background-color:#eaffe5;margin-bottom: 30px;}.justify-content-center{-webkit-box-pack:center!important;-ms-flex-pack:center!important;justify-content:center!important}.align-items-center{-webkit-box-align:center!important;-ms-flex-align:center!important;align-items:center!important}.align-content-center{-ms-flex-line-pack:center!important;align-content:center!important}.my-2{margin-top:0.5rem!important;margin-bottom:0.5rem!important}.mt-0{margin-top:0!important}.mt-1{margin-top:0.25rem!important}.mt-2{margin-top:0.5rem!important}.mt-3{margin-top:1rem!important}.mt-4{margin-top:1.5rem!important}.mt-5{margin-top:3rem!important}.mb-1{margin-bottom:0.25rem!important}.mb-2{margin-bottom:0.5rem!important}.mb-4{margin-bottom:1.5rem!important}.mb-5{margin-bottom:3rem!important}.pb-1{padding-bottom:0.25rem!important}.pb-2{padding-bottom:0.5rem!important}.pb-5{padding-bottom:3rem!important}.text-start{text-align:left!important}.text-end{text-align:right!important}.text-center{text-align:center!important}.bg-light{--bs-bg-opacity:1;background-color:rgba(var(--bs-light-rgb),var(--bs-bg-opacity))!important}@media (min-width:1200px){.container,.container-lg,.container-md,.container-sm{max-width:1140px}}.text-primary{color:#72b0fa!important}body{font-family:Lexend,sans-serif;overflow-x:hidden!important;font-size:16px;color:#161c2d;margin: 0}.section-title .title{letter-spacing:.5px;font-size:28px!important}@media (max-width:768px){.section-title .title{font-size:24px!important}}.number{font-size:26px;font-weight:700;margin:0px}.para-desc{max-width:1000px;margin:20px;}.bg-half{padding:32px 0;background-size:cover;-ms-flex-item-align:center;-ms-grid-row-align:center;align-self:center;position:relative;background-position:center center}.footer__logo{height:24px;display:block;-ms-flex-negative:0;flex-shrink:0;margin-bottom:10px}.footer__logo img{height:24px;display:block}.footer{padding:20px 0 10px;background:rgba(231,235,241,.58)}.container{max-width:100%;margin:0 auto;padding:0 15px}.footer__top{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;margin-bottom:5px}.footer__bottom{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}.footer__message{color:#9599ae;line-height:24px;text-align:center;font-size:13px;margin:20px auto 10px}.footer__copir{color:#2c2f3e;font-size:13px;font-weight:400;line-height:12px}.footer__links{color:#2c2f3e;font-size:13px;font-weight:400;line-height:12px;padding:0;margin:0;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.footer__links li{border-left:1px solid #75798d;padding-left:10px;margin-left:10px;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:end;-ms-flex-align:end;align-items:flex-end}

.faq_block {
	border-radius: 14px;
	margin-top: 35px;
	padding: 32px;
	background-color: #a6daff
}

body.dark .faq_block {
	color: #000
}

.squaredle_but {
    display: block;
    margin: 12px;
    max-width: 500px;
    text-align: center;
    padding: 12px 20px;
    font-size: 14px;
    font-weight: 600;
    border-radius: 8px;
    color: #000000!important;
    background-color: #ffda18;
    transition: .2s ease-in-out;
}

.squaredle_but:hover {
    background-color: #ffc518;
}

body.dark .squaredle-h1,.squaredle-h2 {
	color: #1e1e1e
}

.spell_h3 {
	padding-bottom: 10px;
	margin-top: 0;
	font-weight: 700;
	text-align: left
}

.spell_text {
	text-align: left;
	font-size: 18px
}

a, a:visited {
    text-decoration: none;
}

.step_number {
    font-size:24px;
    font-weight:700;
    width: 42px;
    height: 42px;
    -webkit-box-shadow: 0 0 20px rgb(0 0 0 / 12%);
    box-shadow: 0 0 20px rgb(0 0 0 / 12%);
    background-color: #e7d7ff;
    text-align: center;
    line-height: 42px;
    border-radius: 50%;
    color: #000;
    border: 1px solid;
    margin: auto;
}

.step_head {
    font-size:20px;
    font-weight:700;
    margin-top:16px;
}

.frames_block {
	display: table;
	-ms-flex-wrap: wrap;
	flex-wrap: wrap
	max-width: 1000px;
	margin: auto	
}
.faq_block {
	border-radius: 14px;
	margin-top: 35px;
	padding: 32px;
	background-color: #bfd4e080
}
@media (max-width:991px) {
	.frames_block {
		margin-left: 3px;
		margin-right: 3px
	}
}
.we_but {
	display: inline-flex;
	min-height: 90px;
	max-height: 90px;
	align-items: center;
	margin: 12px;
	text-align: center;
	padding: 2px 13px;
	outline: 0;
	font-size: 22px;
	letter-spacing: .5px;
	font-weight: 600;
	border: 1px solid;
	border-radius: 8px;
	color: #3c4858!important;
	background-color: #f8f9fc;
	transition: transform .2s
}
@media (max-width:710px) {
	.we_but {
		font-size: 16px;
		margin-top: 5px
	}
}
.we_but:hover {
	transform: translate(0, -3px)
}
.wemage {
	width: 38px;
	margin-right: 10px;
	margin-top: 10px;
}
.we_d {
	margin: auto
}

.item {
    border-radius: 5px;
    cursor: pointer;
    font-size: 20px;
    font-weight: bold;
    padding: 14px 24px 14px;
    display: inline-block;
    margin: 5px;
    background: #ffd600;
    color: black;
    line-height: 1.5em;
    border: 1px solid #c8c8c8;
}

.infinite-craft-table{margin:0 auto;overflow:auto}.infinite-craft-table tr td,.infinite-craft-table tr th{padding:12px;vertical-align:middle;border:1px solid #c8cfdb}.links{display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;margin:-12px}
@media (max-width:1108px){.infinite-craft-table{display:inline-block;width:100%}}
.infinite-craft-text p{font-size:16px;line-height:28px;color:#2b2e3a}.infinite-craft-text p:after{content:'';clear:both;display:table}.infinite-craft-text p img{float:left;display:block;margin:0 15px 15px 0;max-width:50%}.infinite-craft-text p.center img{float:none;display:block;margin:15px auto 5px}.infinite-craft-text a{color:#222;text-decoration:none}.infinite-craft-text ul{padding:5px 0}.infinite-craft-text ul li{position:relative;padding-left:20px;font-size:16px;line-height:30px;color:#2b2e3a;margin-bottom:10px;display:block}.infinite-craft-text ul li:before{content:'';position:absolute;top:10px;left:0;width:8px;height:8px;background:#2b2e3a;border-radius:2px}.infinite-craft-text ul li sup{color:#e52e2e;font-weight:700;margin-left:3px}.infinite-craft-text__date{color:#75798d;font-size:15px;font-weight:400;font-style:italic;margin:25px 0}.infinite-craft-text>img{display:block;margin:25px auto;max-width:100%}.infinite-craft-text .ol{counter-reset:item;padding:0;margin:20px 0 0}.infinite-craft-text .ol li{display:block;position:relative;text-align:center;padding-top:70px;margin-bottom:25px;color:#2b2e3a;font-size:16px;line-height:24px}.infinite-craft-text .ol li h3{color:#13141c;font-size:20px;font-weight:700;line-height:30px;margin:0}.infinite-craft-text .ol li img{margin:10px auto 0;border-radius:10px;box-shadow:0 0 30px rgba(0,0,0,.1)}.infinite-craft-text .ol li span{color:#2b2e3a;font-size:16px;font-weight:400;display:block;line-height:30px}.infinite-craft-text .ol li:before{content:counters(item, ".") " ";counter-increment:item;width:55px;height:55px;-webkit-box-shadow:0 0 25px rgba(0,0,0,.1);box-shadow:0 0 25px rgba(0,0,0,.1);background-color:#fff;position:absolute;top:0;left:calc(50% - 27px)



.showUnavailableElements .item.item-used {
    filter: brightness(50%)
}

.visibility-toggle {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 0.5rem;
    margin: 1rem;
    position: absolute;
    top: 0;
    right: 0;
}

.item:hover {
    border: 1px solid #45505c;
}

.ingredients-list {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    height: min-content;
}

@media (max-width) {
    #element {
        flex-direction: column-reverse
    }
}

.text-link {
    text-decoration: underline;
    margin-top: 5px;
    color: #949494;
    cursor: pointer;
}

.search-bar {
    font-size: 1.5em;
    border-radius: 5px;
    padding: 10px;
    font-weight: bold;
    line-height: 1.5em;
    width: 100%;
    max-width:600px;
    margin: 1rem;
    text-align: center;
    border: 2px solid #d1dae5;
    color: #000;
    background:#fff
}

.search-bar-wrapper {
    display: flex;
    flex-direction: row;
    align-items: center;
    width: 100%;
    justify-content:center
}

@media (max-width: 1000px) {
    #app {
        padding: 1rem 1rem 1rem;
    }
}

.toast {
    position: fixed;
    top: 0;
    left: 0;
    background-color: #000000aa;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    z-index: 100;
}

.toast-body {
    background-color: #242424;
    border-radius: 0.5rem;
    padding: 3rem 4rem 2rem;
    display: flex;
    flex-direction: column;
}

.sr-only {
    border: 0;
    padding: 0;
    margin: 0;
    position: absolute !important;
    height: 1px;
    width: 1px;
    overflow: hidden;
    clip: rect(1px 1px 1px 1px);
    clip: rect(1px, 1px, 1px, 1px);
    clip-path: inset(50%);
    white-space: nowrap;
}

.github-link {
    color: #c6c7c7;
    display: flex;
    align-items: center;
    text-decoration: none;
    gap: 10px;
    position: relative;
    top: 0px;
    margin-left: 0px;
    margin-right: 10px;
    text-wrap: nowrap;
}

.github-link-text {
    display: flex;
    align-items: center;
    text-decoration: none;
}

.sub-header {
    text-align: center;
    margin-top: 4px;
    color: gray;
}

.github-link:hover {
    color: #949494;
    transition: color var(--transition-s) ease;
}

@media (max-width: 1000px) {
    .toast-body {
        text-align: center;
    }
    .github-link-text {
        display: none
    }
}

.slide-up-enter-active,
.slide-up-leave-active {
    transition: all 0.12s ease !important;
}

.slide-up-enter,
.slide-up-leave-to {
    opacity: 0 !important;
    transform: translateY(30px) !important;
}

.slide-up-leave-from,
.slide-right-leave-from {
    opacity: 0 !important;
}

.slide-right-enter-active,
.slide-right-leave-active {
    transition: all 0.08s ease !important;
}

.slide-right-leave-to {
    opacity: 0 !important;
    transform: translateX(10px) !important;
}

.slide-right-enter {
    opacity: 0 !important;
    transform: translateX(-10px) !important;
}

.slider-container {
    transition: transform 0.2s ease-in-out;
    position: relative;
    width: 100%;
    margin-bottom: 30px;
}

.slider {
    display: flex;
    transition: transform 0.2s ease-in-out;
}

.panel {
    flex: 0 0 500px;
    opacity: 0.5;
    text-align: center;
    border-radius: 10px;
    height: min-content;
    margin: 20px;
    transform-origin: top;
    transition: all 0.2s ease-in-out;
}

.panel:not(.center-panel) {
    transform: scale(0.9, 0.95);
}

.center-panel {
    opacity: 1;
}

.controls {
    position: absolute;
    width: calc(50% - 290px);
    min-height: 100%;
    display: flex;
    justify-content: center;
    cursor: pointer;
    background: transparent;
    border: none;
    z-index: 2;
}

.right-arrow {
    right: 0px;
    justify-content: flex-start;
}

.left-arrow {
    left: 0px;
    justify-content: flex-end;
}

.nav-bar {
    display: flex;
    background: #d1dbe7;
    position: fixed;
    height: 50px;
    bottom: 0px;
    width: 100%;
    left: 0px;
}

.nav-bar-link {
    transition: all 0.1s ease;
    width: 100%;
    color: #000;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
}

.nav-bar-link:hover:not(.selected-link) {
    color: #545c66;
}

.selected-link {
    color:#000;
    font-weight: bold;
    border-bottom: 2px solid #000;
}

@media (min-width: 1000px) {
    .nav-bar {
        display: none;
    }
}