@import url(https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.0/animate.min.css);
@font-face{font-family:"Regular";src:local("NeueMontreal"),url(/fonts/NeueMontreal-Regular.otf) format("opentype")}@font-face{font-family:"Medium";src:local("NeueMontreal"),url(/fonts/NeueMontreal-Medium.otf) format("opentype")}@font-face{font-family:"Bold";src:local("NeueMontreal"),url(/fonts/NeueMontreal-Bold.otf) format("opentype")}@font-face{font-family:"Thin";src:local("NeueMontreal"),url(/fonts/NeueMontreal-Light.otf) format("opentype")}@font-face{font-family:"Kapakana",cursive;src:url("https://fonts.googleapis.com/css2?family=Kapakana:wght@300..400&display=swap")}#n8oJyxiYztdEWv_32igG{display:flex;flex-direction:column;height:100%}#n8oJyxiYztdEWv_32igG #tECT8QAzLXeHKPk3lRtz{opacity:0;padding:25px 20px;padding-top:0px;font-size:.7rem;animation:GsNTiJofsFBIwH7ldfjs .5s cubic-bezier(0.25, 0.1, 0.25, 1) 4s forwards;width:100%;text-align:center}@media screen and (max-width: 797px){#n8oJyxiYztdEWv_32igG #tECT8QAzLXeHKPk3lRtz{font-size:.6rem;padding:10px;width:100%}}#n8oJyxiYztdEWv_32igG .IRmvfQlTeSkZuP9A3wma .hb_QKOo0TJWKC2d4Aefc{flex-direction:row;justify-content:space-between;width:-webkit-fill-available;align-items:center;padding:10px 20px;opacity:0;animation:CPFzU4Kq3mZYdgFP7zsP .6s cubic-bezier(0.25, 0.1, 0.25, 1) 0s forwards;text-transform:uppercase;border-bottom:1px solid var(--secondary)}#n8oJyxiYztdEWv_32igG .IRmvfQlTeSkZuP9A3wma .hb_QKOo0TJWKC2d4Aefc .IrtYM3cVTjSETooMFwPw{gap:5px;padding:0px}#n8oJyxiYztdEWv_32igG .IRmvfQlTeSkZuP9A3wma .hb_QKOo0TJWKC2d4Aefc ul{justify-content:space-between;align-items:center;height:fit-content}#n8oJyxiYztdEWv_32igG .IRmvfQlTeSkZuP9A3wma .hb_QKOo0TJWKC2d4Aefc li{justify-content:center}#n8oJyxiYztdEWv_32igG .IRmvfQlTeSkZuP9A3wma .hb_QKOo0TJWKC2d4Aefc li a{font-family:"Regular",sans-serif;display:inline-block;position:relative;font-size:1rem}#n8oJyxiYztdEWv_32igG .IRmvfQlTeSkZuP9A3wma .hb_QKOo0TJWKC2d4Aefc li a::after{content:" ";display:block;position:absolute;width:0;bottom:0;height:1px;margin:-1px 0;left:0;background-color:var(--primary);transition:all .2s cubic-bezier(0.25, 0.1, 0.25, 1) 0s}#n8oJyxiYztdEWv_32igG .IRmvfQlTeSkZuP9A3wma .hb_QKOo0TJWKC2d4Aefc li a:hover::after{width:100%}@media screen and (max-width: 800px){#n8oJyxiYztdEWv_32igG .IRmvfQlTeSkZuP9A3wma .hb_QKOo0TJWKC2d4Aefc{padding:0px 10px}#n8oJyxiYztdEWv_32igG .IRmvfQlTeSkZuP9A3wma .hb_QKOo0TJWKC2d4Aefc ul{align-items:start}}#n8oJyxiYztdEWv_32igG .IRmvfQlTeSkZuP9A3wma .PBUIPpUONomuA3GujMlw{overflow-y:auto;flex-grow:1;display:flex;justify-content:center;align-items:flex-start;padding-top:10%}#n8oJyxiYztdEWv_32igG .IRmvfQlTeSkZuP9A3wma .PBUIPpUONomuA3GujMlw .GlWB5BH4zQl02r49Fmee{width:70%;justify-content:space-between;display:flex;flex-direction:column;height:100%}@media screen and (max-width: 800px){#n8oJyxiYztdEWv_32igG .IRmvfQlTeSkZuP9A3wma .PBUIPpUONomuA3GujMlw .GlWB5BH4zQl02r49Fmee{width:90%}}#n8oJyxiYztdEWv_32igG .IRmvfQlTeSkZuP9A3wma .vAH3cbjb_3MUdGXRUfHy,#n8oJyxiYztdEWv_32igG .IRmvfQlTeSkZuP9A3wma .A3vIOoHrcWl9iDPA17Gg{flex-grow:1;flex-direction:column;overflow-y:auto;justify-content:center;align-items:center;text-align:center;display:flex}@media screen and (max-width: 800px){#n8oJyxiYztdEWv_32igG .IRmvfQlTeSkZuP9A3wma .vAH3cbjb_3MUdGXRUfHy,#n8oJyxiYztdEWv_32igG .IRmvfQlTeSkZuP9A3wma .A3vIOoHrcWl9iDPA17Gg{width:100%;align-items:center}}#n8oJyxiYztdEWv_32igG #pfzQkCfiuU91oVTGP3zu{width:100%;position:relative;bottom:0;padding:20px 0px;display:flex;align-content:center;flex-wrap:wrap;flex-direction:column;gap:20px}#n8oJyxiYztdEWv_32igG #pfzQkCfiuU91oVTGP3zu #pzeR0U7ZdmbwW8m5D9k3{flex-direction:row;display:flex;margin-top:0em;width:70%;max-width:100%;resize:none;animation:CPFzU4Kq3mZYdgFP7zsP .8s cubic-bezier(0.25, 0.1, 0.25, 1) 3.1s forwards}@media screen and (max-width: 800px){#n8oJyxiYztdEWv_32igG #pfzQkCfiuU91oVTGP3zu{width:100%;padding:10px}}#n8oJyxiYztdEWv_32igG button{background:rgba(0,0,0,0);border:0px}#n8oJyxiYztdEWv_32igG button img{height:15px}#n8oJyxiYztdEWv_32igG button:focus{outline:none}#n8oJyxiYztdEWv_32igG textarea{width:100%;height:4rem;padding:1rem 2rem;resize:none}#n8oJyxiYztdEWv_32igG textarea:focus{outline:none}#n8oJyxiYztdEWv_32igG .dbe7Ku8wMCoNfU1n6dW0{text-align:right !important;text-transform:uppercase}#n8oJyxiYztdEWv_32igG .dbe7Ku8wMCoNfU1n6dW0 .ZFigBrQImxnEQ_6_MazA{flex-direction:row;display:flex;align-items:center;justify-content:flex-end;gap:15px}#n8oJyxiYztdEWv_32igG .dbe7Ku8wMCoNfU1n6dW0 span{color:var(--primary);font-size:1rem}@media screen and (max-width: 900px){#n8oJyxiYztdEWv_32igG .dbe7Ku8wMCoNfU1n6dW0{padding:10px}#n8oJyxiYztdEWv_32igG .dbe7Ku8wMCoNfU1n6dW0 span{font-size:1rem}}#n8oJyxiYztdEWv_32igG .Hf2a5Jl2LP5gEfVmqyat,#n8oJyxiYztdEWv_32igG .hffXNtPZrgSoauebCUp4{font-size:1rem;color:var(--primary);text-decoration:line-through;text-transform:uppercase}@media screen and (max-width: 700px){#n8oJyxiYztdEWv_32igG .Hf2a5Jl2LP5gEfVmqyat,#n8oJyxiYztdEWv_32igG .hffXNtPZrgSoauebCUp4{font-size:1rem}}#n8oJyxiYztdEWv_32igG .Hf2a5Jl2LP5gEfVmqyat{text-decoration:line-through}#n8oJyxiYztdEWv_32igG .hffXNtPZrgSoauebCUp4{text-decoration:none}#n8oJyxiYztdEWv_32igG [id=heading]{transition:250ms cubic-bezier(0.25, 0.1, 0.25, 1) all;cursor:pointer}.vu_VIA_26Rf0btPibTCh:not(.zLkWDTPHeQfMr47gX8AY) #n8oJyxiYztdEWv_32igG [id=heading]:hover{scale:.99;filter:brightness(0.95)}.vu_VIA_26Rf0btPibTCh:not(.zLkWDTPHeQfMr47gX8AY) #n8oJyxiYztdEWv_32igG [id=heading]:active{scale:.98;filter:brightness(0.8)}#n8oJyxiYztdEWv_32igG .RsFEVJKqPgWzu60QicCQ{display:flex;align-items:center}#n8oJyxiYztdEWv_32igG .JDy_JFLT5xEWtC3BILuc{width:2px;height:20px;background-color:var(--secondary);margin-right:10px;animation:yyPZe0xDl8kvTBgW3WZR .75s step-end infinite}#n8oJyxiYztdEWv_32igG .jeQRpsN0OPa17woS2U0L{padding:0px 20px}@media screen and (max-width: 800px){#n8oJyxiYztdEWv_32igG .jeQRpsN0OPa17woS2U0L{padding:0px 10px}}#n8oJyxiYztdEWv_32igG .iwHG0ccXftEMxDqNcM2a{font-size:1.15rem;line-height:normal;margin-bottom:0px;text-align:center;text-transform:uppercase;opacity:0;animation:GsNTiJofsFBIwH7ldfjs 1.5s cubic-bezier(0.25, 0.1, 0.25, 1) 1.25s forwards}#n8oJyxiYztdEWv_32igG .iwHG0ccXftEMxDqNcM2a div{padding:0px 0px 0px 20px}@media screen and (max-width: 800px){#n8oJyxiYztdEWv_32igG .iwHG0ccXftEMxDqNcM2a div{padding:0px}}#n8oJyxiYztdEWv_32igG .v0D8yS54hZrDRego1YwO{font-size:4rem;line-height:normal;text-align:left;border-bottom:solid 1px var(--secondary);padding:8% 5% 2% 20px;opacity:0;animation:GsNTiJofsFBIwH7ldfjs 1.5s cubic-bezier(0.25, 0.1, 0.25, 1) .8s forwards}@media screen and (max-width: 1300px){#n8oJyxiYztdEWv_32igG .v0D8yS54hZrDRego1YwO{font-size:3rem}}@media screen and (min-width: 501px)and (max-width: 800px){#n8oJyxiYztdEWv_32igG .v0D8yS54hZrDRego1YwO{font-size:2.5rem}}@media screen and (max-width: 500px){#n8oJyxiYztdEWv_32igG .v0D8yS54hZrDRego1YwO{font-size:1.8rem;padding:10% 4%}}#n8oJyxiYztdEWv_32igG .qnpeK5ROGueF5PBisRgo{padding-bottom:3%;padding-top:5%;color:var(--primary);width:100%}#n8oJyxiYztdEWv_32igG .qnpeK5ROGueF5PBisRgo .utVBI5DgXqOAQbZ40YA2{opacity:0;animation:CPFzU4Kq3mZYdgFP7zsP 1.4s cubic-bezier(0.25, 0.1, 0.25, 1) .4s forwards;font-size:10rem;line-height:10rem;padding:10px 0px;color:#001ecc;display:block}@media screen and (max-width: 800px){#n8oJyxiYztdEWv_32igG .qnpeK5ROGueF5PBisRgo .utVBI5DgXqOAQbZ40YA2{font-size:5rem;line-height:5rem}}#n8oJyxiYztdEWv_32igG .qnpeK5ROGueF5PBisRgo span{font-size:1rem;line-height:1.5rem;text-transform:uppercase;opacity:0;display:block;animation:NOlbzl7ihEgUke2JSQVG 1.1s cubic-bezier(0.25, 0.1, 0.25, 1) 1.2s forwards}@media screen and (max-width: 800px){#n8oJyxiYztdEWv_32igG .qnpeK5ROGueF5PBisRgo span{display:inline}}@media screen and (max-width: 800px){#n8oJyxiYztdEWv_32igG .qnpeK5ROGueF5PBisRgo{padding:15px}}#n8oJyxiYztdEWv_32igG .yvxItfB2XL0Ox5OZrD3P{text-align:right;margin-top:10px;position:relative}#n8oJyxiYztdEWv_32igG .yvxItfB2XL0Ox5OZrD3P p{font-size:2.25rem;padding:10px;color:#001ecc}#n8oJyxiYztdEWv_32igG .yvxItfB2XL0Ox5OZrD3P p::first-letter{font-family:"Kapakana",cursive !important;font-size:200%;font-weight:500}@media screen and (max-width: 800px){#n8oJyxiYztdEWv_32igG .yvxItfB2XL0Ox5OZrD3P p{margin-bottom:5%;font-size:1.8rem}}#n8oJyxiYztdEWv_32igG #pzeR0U7ZdmbwW8m5D9k3{position:relative;display:flex;align-items:center;border:1px solid var(--secondary) !important;padding:0px 20px;opacity:0;animation:CPFzU4Kq3mZYdgFP7zsP 1.25s cubic-bezier(0.25, 0.1, 0.25, 1) 1.6s forwards;border-radius:2.86rem}@media screen and (max-width: 800px){#n8oJyxiYztdEWv_32igG #pzeR0U7ZdmbwW8m5D9k3{padding:0px;padding-left:10px;width:100% !important}}#n8oJyxiYztdEWv_32igG .WU4quJvKXJJxipBd1OkT{display:flex;height:56px;width:100%;border:0px;border-radius:0px;background-color:rgba(0,0,0,0);padding:1.2rem 0px;background-position:left 4px center;background-repeat:no-repeat;background-size:3%;color:var(--primary)}#n8oJyxiYztdEWv_32igG .WU4quJvKXJJxipBd1OkT::placeholder{color:var(--primary);opacity:60%}#n8oJyxiYztdEWv_32igG .oa6JqaD_ntSvLIVPGuJX{width:100%;position:absolute;color:#888;opacity:0;animation-duration:3s}#n8oJyxiYztdEWv_32igG input{background-color:rgba(0,0,0,0) !important}#n8oJyxiYztdEWv_32igG .X5_eXDoKZz4UptGqV9iV{width:100%;position:relative}#n8oJyxiYztdEWv_32igG .FmtgU7Gf8AArsEPz28Sd{position:absolute;top:0;right:0;height:100%;border:0;border-radius:0;background:rgba(0,0,0,0);width:50px;display:flex;align-items:center;justify-content:center;color:var(--primary)}#n8oJyxiYztdEWv_32igG .FmtgU7Gf8AArsEPz28Sd span{font-size:1.4rem}@media screen and (max-width: 769px){#n8oJyxiYztdEWv_32igG .FmtgU7Gf8AArsEPz28Sd span{font-size:1.5rem}}#n8oJyxiYztdEWv_32igG .FmtgU7Gf8AArsEPz28Sd img{width:20px}#n8oJyxiYztdEWv_32igG .jeQRpsN0OPa17woS2U0L,#n8oJyxiYztdEWv_32igG .IrtYM3cVTjSETooMFwPw{justify-content:center;align-items:flex-start;display:flex;flex-direction:row-reverse}#n8oJyxiYztdEWv_32igG .GzRUfa5VHliGtMZRJsl0{display:flex;justify-content:flex-start;align-self:center;gap:10px;flex-direction:row;padding:0px}#n8oJyxiYztdEWv_32igG .GzRUfa5VHliGtMZRJsl0 .XO6fZmxrc0o_vyYzBkGG{opacity:0;border-radius:2.86rem;font-family:"Regular",sans-serif;font-size:1rem;padding:15px 20px;border:solid 1px var(--secondary);box-shadow:inset 0 0 0 0 var(--secondary);transition:all .6s cubic-bezier(0.25, 0.1, 0.25, 1) 0s;color:var(--primary);text-transform:uppercase}#n8oJyxiYztdEWv_32igG .GzRUfa5VHliGtMZRJsl0 .XO6fZmxrc0o_vyYzBkGG:hover{color:var(--base-color);box-shadow:inset 0 1500px 0 0 var(--primary)}#n8oJyxiYztdEWv_32igG .GzRUfa5VHliGtMZRJsl0 .XO6fZmxrc0o_vyYzBkGG:nth-of-type(1){animation:NOlbzl7ihEgUke2JSQVG .8s cubic-bezier(0.25, 0.1, 0.25, 1) 2.5s forwards}#n8oJyxiYztdEWv_32igG .GzRUfa5VHliGtMZRJsl0 .XO6fZmxrc0o_vyYzBkGG:nth-of-type(2){animation:NOlbzl7ihEgUke2JSQVG .8s cubic-bezier(0.25, 0.1, 0.25, 1) 2.7s forwards}#n8oJyxiYztdEWv_32igG .GzRUfa5VHliGtMZRJsl0 .XO6fZmxrc0o_vyYzBkGG:nth-of-type(3){animation:NOlbzl7ihEgUke2JSQVG .8s cubic-bezier(0.25, 0.1, 0.25, 1) 2.9s forwards}@media screen and (max-width: 797px){#n8oJyxiYztdEWv_32igG .GzRUfa5VHliGtMZRJsl0 .XO6fZmxrc0o_vyYzBkGG{width:100%;font-size:1rem;padding:10px 5px}#n8oJyxiYztdEWv_32igG .GzRUfa5VHliGtMZRJsl0 .XO6fZmxrc0o_vyYzBkGG:last-of-type{display:none !important}}@media screen and (max-width: 797px){#n8oJyxiYztdEWv_32igG .GzRUfa5VHliGtMZRJsl0{flex-direction:column;gap:10px;width:100%;padding:20px}}#n8oJyxiYztdEWv_32igG .HTTx5Jov0gh2a8FMmPog{text-align:left !important;padding:10px 20px}@media screen and (max-width: 700px){#n8oJyxiYztdEWv_32igG .HTTx5Jov0gh2a8FMmPog{padding-bottom:10px !important}}#n8oJyxiYztdEWv_32igG .CisiC44HrDSnXSizWFdX{color:var(--secondary);animation:yyPZe0xDl8kvTBgW3WZR .75s step-end infinite;font-size:2.6rem}@media screen and (max-width: 800px){#n8oJyxiYztdEWv_32igG .CisiC44HrDSnXSizWFdX{font-size:1.3rem;display:none}}#n8oJyxiYztdEWv_32igG textarea,#n8oJyxiYztdEWv_32igG .HTTx5Jov0gh2a8FMmPog span,#n8oJyxiYztdEWv_32igG .HTTx5Jov0gh2a8FMmPog{font-size:1.6rem !important;line-height:normal}@media screen and (max-width: 800px){#n8oJyxiYztdEWv_32igG textarea,#n8oJyxiYztdEWv_32igG .HTTx5Jov0gh2a8FMmPog span,#n8oJyxiYztdEWv_32igG .HTTx5Jov0gh2a8FMmPog{font-size:1.3rem !important;padding:0px}}@keyframes tpgTJCchLI41T4OsFe1j{0%{opacity:0}}@keyframes DnAIq7M7Wb40Pj2y7j1O{0%{width:0;white-space:nowrap}100%{width:100%}}@keyframes yyPZe0xDl8kvTBgW3WZR{from,to{opacity:0}50%{opacity:1;color:var(--primary)}}.b7V1ITO5StZRr4TTXVZt{height:-webkit-fill-available;align-content:center;display:flex;flex-wrap:wrap}.mUwHk15tAcuTHitenBAt{width:250px;height:250px;margin:0 auto;background-color:var(--primary);border-radius:50%;animation:iWRvZ6Kv04Da7j0lwqi7 3s infinite}@media screen and (max-width: 600px){.mUwHk15tAcuTHitenBAt{width:150px;height:150px}}.crkDgVIMbABMd1AoHulX{border:2px solid #d1cdc3;width:400px;height:400px;border-radius:50%;opacity:50%}@keyframes iWRvZ6Kv04Da7j0lwqi7{0%{transform:scale(1);opacity:1}50%{transform:scale(1.5);opacity:.5}100%{transform:scale(1);opacity:1}}.Ij6Q9OALNlPq0MPwcSrg{display:none}
.egdseIP8QyunfSZEzmqG{display:-webkit-flex;display:flex;-webkit-justify-content:space-between;justify-content:space-between;-webkit-align-items:center;align-items:center;overflow:hidden;position:relative;width:25px;height:25px;opacity:100%}@media screen and (max-width: 769px){.egdseIP8QyunfSZEzmqG{height:20px}}.r0Cu5bb7HfAJgFaeUWPZ{background-color:var(--primary);opacity:100%;width:2px;-webkit-transform-origin:center;transform-origin:center;-webkit-animation:yIIWuPA4ntakHTwD8x7b 1.5s ease infinite;animation:yIIWuPA4ntakHTwD8x7b 1.5s ease infinite;animation-fill-mode:both;transition:animation .5s}.r0Cu5bb7HfAJgFaeUWPZ.D_NT9Da6prTa7MwRGceO{-webkit-animation:KnUA2a1vVdkEkCrpnoAQ 2s ease-in-out infinite;animation:KnUA2a1vVdkEkCrpnoAQ 2s ease-in-out infinite;animation-fill-mode:both}.FOcldPSJPzp6pv3D2VOc{animation:none;height:20% !important}@keyframes yIIWuPA4ntakHTwD8x7b{0%,100%{height:75%}50%{height:90%}}@keyframes KnUA2a1vVdkEkCrpnoAQ{0%{height:100%}10%{height:60%}20%{height:40%}30%{height:70%}40%{height:50%}50%{height:60%}60%{height:50%}70%{height:40%}80%{height:70%}90%{height:50%}100%{height:100%}}
@font-face{font-family:"Regular";src:local("NeueMontreal"),url(/fonts/NeueMontreal-Regular.otf) format("opentype")}@font-face{font-family:"Medium";src:local("NeueMontreal"),url(/fonts/NeueMontreal-Medium.otf) format("opentype")}@font-face{font-family:"Bold";src:local("NeueMontreal"),url(/fonts/NeueMontreal-Bold.otf) format("opentype")}@font-face{font-family:"Thin";src:local("NeueMontreal"),url(/fonts/NeueMontreal-Light.otf) format("opentype")}@font-face{font-family:"Kapakana",cursive;src:url("https://fonts.googleapis.com/css2?family=Kapakana:wght@300..400&display=swap")}#x5t4LPoeoY9JoV5lny9B{overflow:hidden;animation-duration:2.5;margin:0}@media screen and (max-width: 800px){#x5t4LPoeoY9JoV5lny9B{padding:0px 10px !important}}#x5t4LPoeoY9JoV5lny9B .zjCX_KyVp_JWqe_fw2Tx{overflow-y:auto;height:100%;padding-bottom:15% !important}#x5t4LPoeoY9JoV5lny9B .EvNJ_X0C7v9jAIuFQhtx{font-size:1.15rem}#x5t4LPoeoY9JoV5lny9B .Hfu5XEvdkECrgNNmaQQD{padding:0px}#x5t4LPoeoY9JoV5lny9B .Q_UOXrtyTWPOjjTWOVn9{padding:20px 20px}#x5t4LPoeoY9JoV5lny9B .gNIfjP6NgT8nDJtUdY8_{height:fit-content;animation-duration:2s;text-align:center;padding:5% 0%;border-bottom:1px solid var(--secondary);max-width:100%;box-sizing:border-box;margin:0px;display:flex}#x5t4LPoeoY9JoV5lny9B .gNIfjP6NgT8nDJtUdY8_ br,#x5t4LPoeoY9JoV5lny9B .gNIfjP6NgT8nDJtUdY8_ .M6p2GV0af_qri6YJLeM8{display:none}#x5t4LPoeoY9JoV5lny9B .gNIfjP6NgT8nDJtUdY8_ .pHIOGQzsHOxAfG0bU56a{text-align:left !important;justify-self:center;padding-bottom:0px}#x5t4LPoeoY9JoV5lny9B .gNIfjP6NgT8nDJtUdY8_ .pHIOGQzsHOxAfG0bU56a .LyW9pEP4D6pRF9PNvBnj{display:none}#x5t4LPoeoY9JoV5lny9B .gNIfjP6NgT8nDJtUdY8_ .pHIOGQzsHOxAfG0bU56a .Xax13QhztpDpKXOfqnjm{align-items:center;display:flex;padding:0px 20px}#x5t4LPoeoY9JoV5lny9B .gNIfjP6NgT8nDJtUdY8_ .pHIOGQzsHOxAfG0bU56a span,#x5t4LPoeoY9JoV5lny9B .gNIfjP6NgT8nDJtUdY8_ .pHIOGQzsHOxAfG0bU56a .Xax13QhztpDpKXOfqnjm p{font-family:"Regular",sans-serif;margin-bottom:0px !important;font-size:4rem}@media screen and (max-width: 800px){#x5t4LPoeoY9JoV5lny9B .gNIfjP6NgT8nDJtUdY8_ .pHIOGQzsHOxAfG0bU56a span,#x5t4LPoeoY9JoV5lny9B .gNIfjP6NgT8nDJtUdY8_ .pHIOGQzsHOxAfG0bU56a .Xax13QhztpDpKXOfqnjm p{font-size:2rem !important;font-family:"Regular",sans-serif}}@media screen and (max-width: 1300px){#x5t4LPoeoY9JoV5lny9B .gNIfjP6NgT8nDJtUdY8_ .pHIOGQzsHOxAfG0bU56a span,#x5t4LPoeoY9JoV5lny9B .gNIfjP6NgT8nDJtUdY8_ .pHIOGQzsHOxAfG0bU56a .Xax13QhztpDpKXOfqnjm p{font-size:4rem !important}}@media screen and (min-width: 501px)and (max-width: 800px){#x5t4LPoeoY9JoV5lny9B .gNIfjP6NgT8nDJtUdY8_ .pHIOGQzsHOxAfG0bU56a span,#x5t4LPoeoY9JoV5lny9B .gNIfjP6NgT8nDJtUdY8_ .pHIOGQzsHOxAfG0bU56a .Xax13QhztpDpKXOfqnjm p{font-size:3rem !important}}@media screen and (max-width: 500px){#x5t4LPoeoY9JoV5lny9B .gNIfjP6NgT8nDJtUdY8_ .pHIOGQzsHOxAfG0bU56a span,#x5t4LPoeoY9JoV5lny9B .gNIfjP6NgT8nDJtUdY8_ .pHIOGQzsHOxAfG0bU56a .Xax13QhztpDpKXOfqnjm p{font-size:2rem !important;min-height:99px}}@media screen and (max-width: 500px){#x5t4LPoeoY9JoV5lny9B .gNIfjP6NgT8nDJtUdY8_{padding:10% 5%}}#x5t4LPoeoY9JoV5lny9B .bBPeUGJVaYX9uQl8j28_{display:flex;align-items:center;padding:10px 0px;flex-direction:column;justify-content:space-evenly;border-right:solid 1px var(--secondary);border-bottom:solid 1px var(--secondary);font-family:"Medium",sans-serif;font-size:1rem}#x5t4LPoeoY9JoV5lny9B .Lyor7FqrXPMlZcwBCzyp,#x5t4LPoeoY9JoV5lny9B .CPKWhnAHAn9wZeONnZlq{text-align:left;font-size:2.5rem;padding:5% 20px;border-bottom:1px solid var(--secondary);background-color:var(--primary);color:var(--base-color);width:100%}#x5t4LPoeoY9JoV5lny9B h3{font-size:1.8rem;margin-bottom:30px}@media screen and (max-width: 800px){#x5t4LPoeoY9JoV5lny9B h3{font-size:1.4rem}}#x5t4LPoeoY9JoV5lny9B .VwTeSLyCFFVZlQ0C9qhF{padding-bottom:5%}#x5t4LPoeoY9JoV5lny9B .VwTeSLyCFFVZlQ0C9qhF a{font-size:1.3rem;text-decoration:underline}#x5t4LPoeoY9JoV5lny9B .CPKWhnAHAn9wZeONnZlq p,#x5t4LPoeoY9JoV5lny9B h4{font-size:1.5rem;margin-top:30px;font-family:"Medium",sans-serif}@media screen and (max-width: 800px){#x5t4LPoeoY9JoV5lny9B .CPKWhnAHAn9wZeONnZlq p,#x5t4LPoeoY9JoV5lny9B h4{font-size:1.25rem}}#x5t4LPoeoY9JoV5lny9B h5{font-size:1.3rem;font-family:"Medium",sans-serif}#x5t4LPoeoY9JoV5lny9B p{font-size:1.4rem}@media screen and (max-width: 800px){#x5t4LPoeoY9JoV5lny9B p{font-size:1.2rem}}#x5t4LPoeoY9JoV5lny9B .ROSTUpz2TOTOYtvlkHxa>div{padding:5% 20%}#x5t4LPoeoY9JoV5lny9B .XuyILUaUgckJNjSqnMi9{border-top:1px solid;width:fit-content}#x5t4LPoeoY9JoV5lny9B img{width:--webkit-fill-available;animation-duration:2.5s;height:auto;max-width:100%;margin-bottom:5%}#x5t4LPoeoY9JoV5lny9B figcaption{margin-bottom:3%}@media screen and (max-width: 550px){#x5t4LPoeoY9JoV5lny9B figcaption{margin-bottom:10%}}@media screen and (min-width: 700px)and (max-width: 900px){#x5t4LPoeoY9JoV5lny9B{width:100%}#x5t4LPoeoY9JoV5lny9B .Lyor7FqrXPMlZcwBCzyp,#x5t4LPoeoY9JoV5lny9B .skFhN88bqmbcwgFuzO5l{font-size:1.6rem}}@media screen and (max-width: 769px){#x5t4LPoeoY9JoV5lny9B{width:100%}#x5t4LPoeoY9JoV5lny9B .zjCX_KyVp_JWqe_fw2Tx{padding-bottom:50% !important}#x5t4LPoeoY9JoV5lny9B .Lyor7FqrXPMlZcwBCzyp{font-size:1.5rem}#x5t4LPoeoY9JoV5lny9B .gNIfjP6NgT8nDJtUdY8_ .pHIOGQzsHOxAfG0bU56a span p,#x5t4LPoeoY9JoV5lny9B .gNIfjP6NgT8nDJtUdY8_{padding-left:0px;margin-bottom:0px}#x5t4LPoeoY9JoV5lny9B .LyW9pEP4D6pRF9PNvBnj{display:none}#x5t4LPoeoY9JoV5lny9B .bBPeUGJVaYX9uQl8j28_{border-right:none}#x5t4LPoeoY9JoV5lny9B .Q_UOXrtyTWPOjjTWOVn9{padding:0px;font-size:1.4rem}#x5t4LPoeoY9JoV5lny9B .Q_UOXrtyTWPOjjTWOVn9 .zbaRLlSZ_x3HYIBu_ZOd{transform:translateX(50px)}#x5t4LPoeoY9JoV5lny9B .ROSTUpz2TOTOYtvlkHxa>div{padding:20px 0px}}#x5t4LPoeoY9JoV5lny9B ul{padding-left:20px;gap:10px;padding:0px}#x5t4LPoeoY9JoV5lny9B ul li{list-style:circle}#x5t4LPoeoY9JoV5lny9B ul .Lyor7FqrXPMlZcwBCzyp{padding:15% 5%}#x5t4LPoeoY9JoV5lny9B ul .Lyor7FqrXPMlZcwBCzyp,#x5t4LPoeoY9JoV5lny9B ul .skFhN88bqmbcwgFuzO5l{font-size:1.5rem}

@font-face{font-family:"Regular";src:local("NeueMontreal"),url(/fonts/NeueMontreal-Regular.otf) format("opentype")}@font-face{font-family:"Medium";src:local("NeueMontreal"),url(/fonts/NeueMontreal-Medium.otf) format("opentype")}@font-face{font-family:"Bold";src:local("NeueMontreal"),url(/fonts/NeueMontreal-Bold.otf) format("opentype")}@font-face{font-family:"Thin";src:local("NeueMontreal"),url(/fonts/NeueMontreal-Light.otf) format("opentype")}@font-face{font-family:"Kapakana",cursive;src:url("https://fonts.googleapis.com/css2?family=Kapakana:wght@300..400&display=swap")}.axFQtB8GUINRBJlxRjeQ{font-family:"Regular",sans-serif !important;background:#fff !important;color:var(--primary) !important;display:flex;flex-wrap:wrap;justify-content:space-between;left:0px;position:fixed;width:100%;z-index:1;bottom:0px;align-items:baseline;flex-direction:column;padding-bottom:25px;border-top:1px solid var(--primary)}.axFQtB8GUINRBJlxRjeQ h1{font-family:"Medium",sans-serif;color:var(--primary) !important}.XU14ZqKEzn7ogfOYIxQJ{font-size:1.25rem;padding:25px 25px}#IICbGvLXSNchThXOlfC3{margin-left:25px;border:none;padding:10px 20px;border:1px solid var(--primary);background:var(--base-color) !important;color:var(--primary) !important}.JD2cVr41wNfsnwgbKi9Y{background:var(--primary) !important;color:var(--base-color) !important;margin-left:15px;padding:10px 20px}
:export {
  base: #f1f0eb;
  primary: #0d0e13;
  secondary: #D1CDC3;
  tertiary: #001ecc;
  piglet: #ffbdf1;
  innovate: #3300ff;
  sunglow: #ffe067;
  sunsetpink: #f24b86;
  sunsetMobile: #e7115c;
  lime: #caff8a;
  whitegray: #f5f5f5;
  lightergray: #e8e8e8;
  lightgray: #767676;
  turqouise: #2ec4b6;
  lavender: #e7c1eb;
  tangerine: #ff6d1b;
  orange: rgba(255, 109, 27, 0.5);
  sky: #3399ff;
  matcha: #d0e9b1;
  coral: #ff7f50;
  brick: #f77474;
  tertiary: blue;
  tiffany: #88e7c5;
  lighttheme-base: #f1f0eb;
  lighttheme-primary: #0d0e13;
  darktheme-base: #0d0e13;
  darktheme-primary: #f1f0eb; }

@font-face {
  font-family: "Regular";
  src: local("NeueMontreal"), url(/fonts/NeueMontreal-Regular.otf) format("opentype"); }
@font-face {
  font-family: "Medium";
  src: local("NeueMontreal"), url(/fonts/NeueMontreal-Medium.otf) format("opentype"); }
@font-face {
  font-family: "Bold";
  src: local("NeueMontreal"), url(/fonts/NeueMontreal-Bold.otf) format("opentype"); }
@font-face {
  font-family: "Thin";
  src: local("NeueMontreal"), url(/fonts/NeueMontreal-Light.otf) format("opentype"); }
@font-face {
  font-family: "Kapakana", cursive;
  src: url("https://fonts.googleapis.com/css2?family=Kapakana:wght@300..400&display=swap"); }
:export {
  base: #f1f0eb;
  primary: #0d0e13;
  secondary: #D1CDC3;
  tertiary: #001ecc;
  piglet: #ffbdf1;
  innovate: #3300ff;
  sunglow: #ffe067;
  sunsetpink: #f24b86;
  sunsetMobile: #e7115c;
  lime: #caff8a;
  whitegray: #f5f5f5;
  lightergray: #e8e8e8;
  lightgray: #767676;
  turqouise: #2ec4b6;
  lavender: #e7c1eb;
  tangerine: #ff6d1b;
  orange: rgba(255, 109, 27, 0.5);
  sky: #3399ff;
  matcha: #d0e9b1;
  coral: #ff7f50;
  brick: #f77474;
  tertiary: blue;
  tiffany: #88e7c5;
  lighttheme-base: #f1f0eb;
  lighttheme-primary: #0d0e13;
  darktheme-base: #0d0e13;
  darktheme-primary: #f1f0eb; }

@font-face {
  font-family: "Regular";
  src: local("NeueMontreal"), url(/fonts/NeueMontreal-Regular.otf) format("opentype"); }
@font-face {
  font-family: "Medium";
  src: local("NeueMontreal"), url(/fonts/NeueMontreal-Medium.otf) format("opentype"); }
@font-face {
  font-family: "Bold";
  src: local("NeueMontreal"), url(/fonts/NeueMontreal-Bold.otf) format("opentype"); }
@font-face {
  font-family: "Thin";
  src: local("NeueMontreal"), url(/fonts/NeueMontreal-Light.otf) format("opentype"); }
@font-face {
  font-family: "Kapakana", cursive;
  src: url("https://fonts.googleapis.com/css2?family=Kapakana:wght@300..400&display=swap"); }
body,
html,
button,
input {
  font-family: "Regular", sans-serif;
  font-size: 0.85rem;
  letter-spacing: 0.4px;
  line-height: normal; }

div {
  letter-spacing: 0.4px; }

h1 {
  font-family: "Regular", serif;
  color: var(--primary);
  font-weight: 300;
  font-size: 2rem; }
  h1::first-letter {
    font-family: "Kapakana", cursive;
    font-size: 200%;
    font-weight: 500; }

.title,
.hello {
  font-family: "Regular", serif;
  text-transform: uppercase; }
  .title::first-letter,
  .hello::first-letter {
    font-family: "Kapakana", cursive;
    font-size: 200%;
    font-weight: 500; }

h2 {
  font-family: "Medium", sans-serif;
  font-size: 1.875rem;
  color: #001ecc; }
  h2::first-letter {
    font-family: "Kapakana", cursive;
    font-size: 200%;
    font-weight: 500; }

h3 {
  font-family: "Medium", sans-serif;
  font-size: 1.25rem; }
  @media screen and (max-width: 900px) {
    h3 {
      font-size: 1.3rem; } }

h4 {
  font-family: "Regular", sans-serif;
  font-size: 1rem; }

h5 {
  font-family: "Regular", sans-serif;
  font-weight: 600;
  font-size: 1rem; }

p,
span,
button,
input,
li {
  font-family: "Regular", sans-serif;
  font-weight: 400;
  font-size: 1rem; }
  @media screen and (max-width: 800px) {
    p,
    span,
    button,
    input,
    li {
      font-size: 1.2rem; } }

a {
  font-family: "Medium", sans-serif;
  color: var(--primary);
  font-size: 1rem; }
  a:hover {
    text-decoration: none;
    color: var(--primary); }
  @media screen and (max-width: 800px) {
    a {
      font-size: 1.2rem; } }

p::first-letter {
  text-transform: uppercase; }

.tags {
  font-weight: 400;
  font-size: 0.7rem; }

@media only screen and (max-width: 480px) {
  h1 {
    margin-top: 5%;
    font-size: 2em !important; }

  h2 {
    font-size: 1.6rem;
    margin-bottom: 2%; } }
*,
*::before,
*::after {
  box-sizing: border-box; }

*,
body {
  text-wrap: pretty; }
  *::-webkit-scrollbar,
  body::-webkit-scrollbar {
    width: 5px;
    height: 5px;
    background-color: transparent; }
  *::-webkit-scrollbar-thumb,
  body::-webkit-scrollbar-thumb {
    background-color: transparent; }
  *:hover::-webkit-scrollbar,
  body:hover::-webkit-scrollbar {
    width: 5px;
    height: 5px; }
  *:hover::-webkit-scrollbar-thumb,
  body:hover::-webkit-scrollbar-thumb {
    background-color: var(--primary); }

@keyframes jumbo {
  from {
    background-position: 50% 50%, 50% 50%; }
  to {
    background-position: 350% 50%, 350% 50%; } }
.transition-width {
  transition-duration: 0.15s;
  transition-property: width;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); }

.overflow-hidden {
  overflow: hidden; }

.overflow-x-hidden {
  overflow-x: hidden; }

.flex-col {
  flex-direction: column; }

.w-full {
  width: 100%; }

.h-full {
  height: 100%; }

.flex {
  display: flex; }

.flex-shrink-0 {
  flex-shrink: 0; }

.-z-0,
.z-0 {
  z-index: 0; }

.relative {
  position: relative; }

.flex-1 {
  flex: 1 1 0%; }

.max-w-full {
  max-width: 100%; }

.themeToggle {
  width: max-content;
  padding: 10px;
  gap: 5px;
  flex-direction: row-reverse;
  display: flex; }
  @media screen and (max-width: 800px) {
    .themeToggle {
      padding: 0px 0px; } }

.toggle {
  padding: 12px;
  padding-left: 12px;
  padding-bottom: 0px; }
  @media screen and (max-width: 800px) {
    .toggle {
      padding: 10px 0px; } }

@media screen and (max-width: 800px) {
  #root {
    flex-direction: column; } }
#loader {
  z-index: 1; }

.loader {
  flex-direction: column;
  font-size: 5rem;
  text-align: center;
  justify-content: center;
  display: flex;
  width: 100%;
  height: 100vh;
  align-items: center; }

.loader--hide {
  display: none; }

* {
  box-sizing: border-box;
  scroll-behavior: smooth; }

html,
body {
  height: 100%;
  margin: 0;
  /* This is to ensure there are no default margins */
  padding: 0;
  /* This is to ensure there are no default paddings */
  color: var(--primary) !important; }

body {
  font-family: "Regular", sans-serif; }

@media screen and (max-width: 800px) {
  body {
    min-height: 100vh;
    /* mobile viewport bug fix */
    min-height: -webkit-fill-available;
    margin: 0px 0px; } }
.main {
  display: flex;
  height: 100%;
  overflow: hidden;
  flex: 1 1 0%;
  max-width: 100%;
  position: relative;
  width: 100%; }

#app {
  background-color: var(--base-color);
  height: 100%;
  color: var(--primary) !important;
  overflow: hidden;
  flex-direction: row; }
  #app::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url("https://www.textures4photoshop.com/tex/thumbs/seamless-texture-rough-paper-free-thumb33.jpg");
    background-repeat: repeat;
    background-blend-mode: multiply;
    opacity: 0.1;
    pointer-events: none;
    z-index: -1; }
  @media screen and (min-width: 796px) {
    #app {
      padding-left: 0px; } }
  @media screen and (max-width: 796px) {
    #app {
      flex-direction: column; } }

.content {
  padding: 0px; }

.row {
  width: 100%;
  margin: 0; }

.bold {
  font-weight: 500; }

svg .dynamic-color-fill {
  fill: var(--base-color); }

svg .dynamic-color-stroke {
  stroke: var(--base-color); }

line {
  stroke: #ffbdf1;
  stroke-width: 1.5; }

.logo-container {
  display: flex;
  align-items: center;
  justify-content: flex-end; }

.logo {
  width: 60px; }

.item-container {
  display: flex;
  flex: 1 1 auto; }
  .item-container .items {
    flex: 1 1 auto; }
    .item-container .items .item {
      overflow: hidden;
      position: relative;
      padding: 15px 0px 15px 0px;
      flex-grow: 1;
      transition: all 0.6s cubic-bezier(0.645, 0.045, 0.355, 1);
      display: flex; }
      .item-container .items .item .item-info {
        display: flex; }
        .item-container .items .item .item-info a {
          display: flex;
          font-weight: 400;
          width: 100%; }
        .item-container .items .item .item-info .item-details {
          position: absolute;
          top: 0;
          right: 0;
          height: 100%;
          padding: 16px;
          display: flex;
          flex-direction: column;
          justify-content: space-between;
          text-align: right;
          align-items: flex-end;
          flex-wrap: wrap; }
        .item-container .items .item .item-info .item-body {
          display: flex;
          flex-direction: row;
          justify-content: space-between;
          height: 100%;
          width: 100%; }
      .item-container .items .item:hover {
        opacity: 1;
        z-index: -1; }
        .item-container .items .item:hover .item-info {
          opacity: 1;
          z-index: -1; }
    .item-container .items:hover .item-info {
      opacity: 0.2;
      transition: all 0.25s ease-out; }

.width {
  width: 0;
  height: 1px; }

.height {
  width: 1px;
  height: 0%; }

.top {
  top: 0; }

.bottom {
  bottom: 0; }

.right {
  right: 0; }

.left {
  left: 0; }

.line {
  position: absolute;
  background-color: var(--primary); }

.line.left.top.height,
.line.right.top.height {
  animation: growHeight 1.5s forwards;
  animation-delay: 1.5s; }

.line.left.bottom.width,
.line.left.top.width {
  animation: growWidth 1.5s forwards;
  animation-delay: 1.5s; }

.arrow,
.arrow-l,
.arrow-d,
.arrow-r {
  transition: 0.2s ease-in;
  display: inline-block; }

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
textarea:-webkit-autofill,
textarea:-webkit-autofill:hover,
textarea:-webkit-autofill:focus,
select:-webkit-autofill,
select:-webkit-autofill:hover,
select:-webkit-autofill:focus {
  background: transparent;
  transition: background-color 5000s ease-in-out 0.3s;
  color: var(--primary) !important;
  -webkit-text-fill-color: var(--primary) !important;
  caret-color: var(--primary) !important; }

@keyframes growWidth {
  0% {
    width: 0; }
  100% {
    width: 100%;
    transition: width 0.5s 0s cubic-bezier(0.215, 0.61, 0.355, 1); } }
@keyframes growHeight {
  0% {
    height: 0; }
  100% {
    height: 100%;
    transition: height 0.5s 0.5s cubic-bezier(0.215, 0.61, 0.355, 1); } }
@keyframes fadeUp {
  0% {
    opacity: 0;
    transform: translateY(300%); }
  75% {
    opacity: 0; }
  100% {
    opacity: 1;
    transform: translateY(0);
    transition: transform 1.1s cubic-bezier(0.23, 1, 0.32, 1), -webkit-transform 1.1s cubic-bezier(0.23, 1, 0.32, 1); } }
@media only screen and (max-width: 1023px) {
  .item:last-child .line.left.top.height {
    display: block !important; } }
@media only screen and (max-width: 1023px) {
  .logo-container {
    display: none; } }
@media only screen and (max-width: 900px) {
  .hamburger-react {
    margin-right: -12px; }

  .tags {
    margin-bottom: 5% !important;
    animation: none; } }
@media only screen and (max-width: 700px) {
  html body {
    cursor: auto !important; }

  .custom-cursor {
    display: none; } }
@font-face {
  font-family: "Regular";
  src: local("NeueMontreal"), url(/fonts/NeueMontreal-Regular.otf) format("opentype"); }
@font-face {
  font-family: "Medium";
  src: local("NeueMontreal"), url(/fonts/NeueMontreal-Medium.otf) format("opentype"); }
@font-face {
  font-family: "Bold";
  src: local("NeueMontreal"), url(/fonts/NeueMontreal-Bold.otf) format("opentype"); }
@font-face {
  font-family: "Thin";
  src: local("NeueMontreal"), url(/fonts/NeueMontreal-Light.otf) format("opentype"); }
@font-face {
  font-family: "Kapakana", cursive;
  src: url("https://fonts.googleapis.com/css2?family=Kapakana:wght@300..400&display=swap"); }
:export {
  base: #f1f0eb;
  primary: #0d0e13;
  secondary: #D1CDC3;
  tertiary: #001ecc;
  piglet: #ffbdf1;
  innovate: #3300ff;
  sunglow: #ffe067;
  sunsetpink: #f24b86;
  sunsetMobile: #e7115c;
  lime: #caff8a;
  whitegray: #f5f5f5;
  lightergray: #e8e8e8;
  lightgray: #767676;
  turqouise: #2ec4b6;
  lavender: #e7c1eb;
  tangerine: #ff6d1b;
  orange: rgba(255, 109, 27, 0.5);
  sky: #3399ff;
  matcha: #d0e9b1;
  coral: #ff7f50;
  brick: #f77474;
  tertiary: blue;
  tiffany: #88e7c5;
  lighttheme-base: #f1f0eb;
  lighttheme-primary: #0d0e13;
  darktheme-base: #0d0e13;
  darktheme-primary: #f1f0eb; }

@font-face {
  font-family: "Regular";
  src: local("NeueMontreal"), url(/fonts/NeueMontreal-Regular.otf) format("opentype"); }
@font-face {
  font-family: "Medium";
  src: local("NeueMontreal"), url(/fonts/NeueMontreal-Medium.otf) format("opentype"); }
@font-face {
  font-family: "Bold";
  src: local("NeueMontreal"), url(/fonts/NeueMontreal-Bold.otf) format("opentype"); }
@font-face {
  font-family: "Thin";
  src: local("NeueMontreal"), url(/fonts/NeueMontreal-Light.otf) format("opentype"); }
@font-face {
  font-family: "Kapakana", cursive;
  src: url("https://fonts.googleapis.com/css2?family=Kapakana:wght@300..400&display=swap"); }
.loader--hide {
  display: none !important; }

.css-loader {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  display: flex;
  justify-content: center;
  align-items: center; }

.css-loader .css-loader-line {
  display: block;
  width: 80%;
  overflow: hidden;
  position: relative;
  -webkit-transition: opacity 0.3s cubic-bezier(0.4, 0, 0, 1);
  transition: opacity 0.3s cubic-bezier(0.4, 0, 0, 1);
  height: 1px; }

.css-loader .css-loader-line:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background-color: var(--primary);
  transform: scale3d(0, 1, 1) translate3d(0, 0, 0);
  animation: loader 1s cubic-bezier(0.4, 0, 0, 1) infinite;
  transform-origin: left center; }

@keyframes loader {
  0% {
    -webkit-transform: scale3d(0, 1, 1) translate3d(0, 0, 0);
    transform: scale3d(0, 1, 1) translate3d(0, 0, 0); }
  50% {
    -webkit-transform: scale3d(1, 1, 1) translate3d(0, 0, 0);
    transform: scale3d(1, 1, 1) translate3d(0, 0, 0); }
  100% {
    -webkit-transform: scale3d(1, 1, 1) translate3d(100%, 0, 0);
    transform: scale3d(1, 1, 1) translate3d(100%, 0, 0); } }
:export {
  base: #f1f0eb;
  primary: #0d0e13;
  secondary: #D1CDC3;
  tertiary: #001ecc;
  piglet: #ffbdf1;
  innovate: #3300ff;
  sunglow: #ffe067;
  sunsetpink: #f24b86;
  sunsetMobile: #e7115c;
  lime: #caff8a;
  whitegray: #f5f5f5;
  lightergray: #e8e8e8;
  lightgray: #767676;
  turqouise: #2ec4b6;
  lavender: #e7c1eb;
  tangerine: #ff6d1b;
  orange: rgba(255, 109, 27, 0.5);
  sky: #3399ff;
  matcha: #d0e9b1;
  coral: #ff7f50;
  brick: #f77474;
  tertiary: blue;
  tiffany: #88e7c5;
  lighttheme-base: #f1f0eb;
  lighttheme-primary: #0d0e13;
  darktheme-base: #0d0e13;
  darktheme-primary: #f1f0eb; }

@font-face {
  font-family: "Regular";
  src: local("NeueMontreal"), url(/fonts/NeueMontreal-Regular.otf) format("opentype"); }
@font-face {
  font-family: "Medium";
  src: local("NeueMontreal"), url(/fonts/NeueMontreal-Medium.otf) format("opentype"); }
@font-face {
  font-family: "Bold";
  src: local("NeueMontreal"), url(/fonts/NeueMontreal-Bold.otf) format("opentype"); }
@font-face {
  font-family: "Thin";
  src: local("NeueMontreal"), url(/fonts/NeueMontreal-Light.otf) format("opentype"); }
@font-face {
  font-family: "Kapakana", cursive;
  src: url("https://fonts.googleapis.com/css2?family=Kapakana:wght@300..400&display=swap"); }
.navIndex {
  height: 100%;
  flex-direction: row;
  color: var(--primary); }

li {
  position: relative;
  font-family: "Regular", sans-serif;
  text-decoration: none;
  list-style-type: none;
  font-size: 1.25rem; }

.stucky {
  position: sticky;
  top: 0;
  z-index: 9;
  margin: 0px;
  display: flex; }

#verticalNavContent {
  flex-direction: row;
  align-items: flex-start;
  align-self: stretch;
  display: flex;
  height: 100%;
  width: fit-content; }

.bgRemove {
  background-color: transparent;
  transition: background-color 0.5s ease; }

.bgChange {
  background-color: var(--base-color);
  transition: background-color 0.5s ease;
  border-bottom: solid 1px var(--secondary); }

ul {
  display: flex;
  height: 100%;
  flex-direction: row;
  align-items: flex-start;
  width: 100%;
  padding: 0px; }
  @media screen and (max-width: 900px) {
    ul {
      flex-direction: column; } }
  ul li {
    width: 100%; }

.nav-link {
  display: flex;
  justify-content: space-between;
  align-items: center;
  align-self: stretch;
  text-decoration: none;
  box-shadow: inset 0 0 0 0 var(--primary);
  transition: all 0.6s ease-in-out 0s;
  opacity: 0;
  animation-duration: 0.5s;
  animation-timing-function: ease;
  animation-fill-mode: forwards;
  padding: 20px 10px !important;
  margin-left: -1px; }
  .nav-link .active {
    font-weight: 600; }
  .nav-link:hover {
    color: var(--base-color);
    border-left: 2px solid var(--primary);
    box-shadow: inset 0 1500px 0 0 var(--primary); }
  .nav-link div {
    position: relative;
    font-family: "Regular", sans-serif;
    text-decoration: none;
    list-style-type: none;
    font-size: 1.25rem; }

.navbar-brand {
  text-align: left;
  display: flex;
  padding: 0px; }
  .navbar-brand p,
  .navbar-brand span {
    font-family: "Regular", sans-serif;
    margin: 0;
    font-weight: 400;
    transition: 2s all cubic-bezier(0.075, 0.82, 0.165, 1); }

.active {
  font-weight: 500; }

.build-info {
  border: 2px solid;
  padding: 5px; }
  .build-info span,
  .build-info i {
    padding-left: 5px; }

@media only screen and (min-width: 767px) and (max-width: 980px) {
  .navIndex {
    width: 100%;
    position: relative;
    /* To stick to the top */
    transition: height 0.5s ease-in-out, opacity 0.5s ease-in-out;
    height: 0;
    /* Start with 0 width for closed state */
    opacity: 0;
    /* Start with 0 opacity for closed state */
    overflow: hidden;
    /* Prevent content from overflowing when nav is closed */
    display: flex;
    /* Keep display:flex to maintain the structure */ }

  #verticalNavContent {
    width: 100%; } }
/* Keyframes for vertical sliding in */
@keyframes slideInVertical {
  0% {
    opacity: 0;
    transform: translateY(20px); }
  100% {
    opacity: 1;
    transform: translateY(0); } }
/* Keyframes for horizontal sliding in */
@keyframes slideInHorizontal {
  0% {
    opacity: 0;
    transform: translateX(50px);
    /* Adjust if you want the items to come from more to the left */ }
  100% {
    opacity: 1;
    transform: translateX(0); } }
/* Mobile view: up to 796px */
@media (max-width: 796px) {
  .indexTitle {
    height: max-content; }

  .navIndex {
    height: 0;
    opacity: 0;
    /* Start with 0 opacity for closed state */
    overflow: hidden;
    /* Prevent content from overflowing when nav is closed */
    display: flex;
    /* Keep display:flex to maintain the structure */
    transition: height 0.5s ease-in-out, opacity 0.5s ease-in-out; }

  .navIndex.open {
    width: 100%;
    height: 310px;
    opacity: 1 !important; }
    .navIndex.open #verticalNavContent {
      width: 100% !important; }
    .navIndex.open .nav-link {
      animation-name: slideInVertical;
      transition: none;
      box-shadow: none; }
      .navIndex.open .nav-link:hover {
        transition: none;
        box-shadow: none;
        color: var(--primary); }
      .navIndex.open .nav-link div {
        position: relative;
        font-family: "Regular", sans-serif;
        text-decoration: none;
        list-style-type: none;
        font-size: 1.25rem; } }
/* Desktop view: 797px and above */
@media (min-width: 797px) {
  /* Adjust #nav for smooth opening/closing */
  #nav {
    transition: width 0.5s ease-in-out, opacity 0.5s ease-in-out;
    width: 0;
    /* Start with 0 width for closed state */
    opacity: 0;
    /* Start with 0 opacity for closed state */
    overflow: hidden;
    /* Prevent content from overflowing when nav is closed */
    display: flex;
    /* Keep display:flex to maintain the structure */ }

  /* When open, set width to full and opacity to 1 */
  #nav.open {
    width: 203px;
    /* Adjust according to desired open state width */
    opacity: 1; }

  .nav-link.pageTitle {
    /* Apply horizontal animation */
    transform: rotate(180deg) !important;
    animation-name: slideInHorizontal; }

  /* Set flex-direction to row for horizontal layout */
  #verticalNavContent,
  ul {
    flex-direction: row; } }
:export {
  base: #f1f0eb;
  primary: #0d0e13;
  secondary: #D1CDC3;
  tertiary: #001ecc;
  piglet: #ffbdf1;
  innovate: #3300ff;
  sunglow: #ffe067;
  sunsetpink: #f24b86;
  sunsetMobile: #e7115c;
  lime: #caff8a;
  whitegray: #f5f5f5;
  lightergray: #e8e8e8;
  lightgray: #767676;
  turqouise: #2ec4b6;
  lavender: #e7c1eb;
  tangerine: #ff6d1b;
  orange: rgba(255, 109, 27, 0.5);
  sky: #3399ff;
  matcha: #d0e9b1;
  coral: #ff7f50;
  brick: #f77474;
  tertiary: blue;
  tiffany: #88e7c5;
  lighttheme-base: #f1f0eb;
  lighttheme-primary: #0d0e13;
  darktheme-base: #0d0e13;
  darktheme-primary: #f1f0eb; }

@font-face {
  font-family: "Regular";
  src: local("NeueMontreal"), url(/fonts/NeueMontreal-Regular.otf) format("opentype"); }
@font-face {
  font-family: "Medium";
  src: local("NeueMontreal"), url(/fonts/NeueMontreal-Medium.otf) format("opentype"); }
@font-face {
  font-family: "Bold";
  src: local("NeueMontreal"), url(/fonts/NeueMontreal-Bold.otf) format("opentype"); }
@font-face {
  font-family: "Thin";
  src: local("NeueMontreal"), url(/fonts/NeueMontreal-Light.otf) format("opentype"); }
@font-face {
  font-family: "Kapakana", cursive;
  src: url("https://fonts.googleapis.com/css2?family=Kapakana:wght@300..400&display=swap"); }
.page-title {
  border-left: 1px solid var(--secondary);
  border-right: 0px !important; }
  @media screen and (max-width: 800px) {
    .page-title {
      border: none;
      border-top: 1px solid var(--secondary);
      border-bottom: 0px; } }

#page-index {
  display: flex;
  align-items: center;
  align-self: stretch;
  padding: 0px;
  transition: transform 2.5s ease;
  /* Add a smooth transition */
  width: fit-content;
  text-transform: uppercase; }
  @media screen and (max-width: 796px) {
    #page-index {
      width: 100%;
      flex-direction: column; } }
  #page-index .stucky {
    position: sticky;
    position: -webkit-sticky;
    /* For Safari */
    top: 0;
    z-index: 9;
    margin: 0px; }
  #page-index .edition,
  #page-index .pageTitle {
    border-left: solid 1px var(--secondary); }
  #page-index .edition,
  #page-index .pageTitle,
  #page-index .indexTitle {
    transform: rotate(180deg);
    padding: 20px 0px; }
    @media screen and (max-width: 796px) {
      #page-index .edition,
      #page-index .pageTitle,
      #page-index .indexTitle {
        transform: rotate(0deg); } }
  #page-index .edition,
  #page-index .pageTitle,
  #page-index .indexTitle,
  #page-index .toggle-theme,
  #page-index .titles {
    display: flex;
    flex-direction: row;
    /* This makes the flex direction vertical */
    justify-content: space-between;
    writing-mode: vertical-rl;
    /* makes the content inside each item vertical */
    height: 100%; }
    @media screen and (max-width: 796px) {
      #page-index .edition,
      #page-index .pageTitle,
      #page-index .indexTitle,
      #page-index .toggle-theme,
      #page-index .titles {
        writing-mode: horizontal-tb;
        /* makes the content inside each item vertical */
        height: auto;
        width: 100%;
        border: none; } }
  #page-index .toggle-theme {
    transform: rotate(180deg);
    justify-content: center;
    gap: 25px; }
  #page-index .edition {
    padding-left: 0px;
    align-items: center; }
    #page-index .edition .navbar-brand {
      padding-right: 0px; }
    @media screen and (max-width: 796px) {
      #page-index .edition {
        border-bottom: solid 1px var(--secondary);
        padding: 0px 10px; } }
  #page-index .pageTitle,
  #page-index .indexTitle {
    overflow: hidden;
    position: relative;
    min-width: 40px;
    width: fit-content; }
    @media screen and (max-width: 796px) {
      #page-index .pageTitle,
      #page-index .indexTitle {
        border: none;
        border-bottom: solid 1px var(--secondary);
        width: 100%;
        padding: 10px 10px; } }
    #page-index .pageTitle .titles,
    #page-index .indexTitle .titles {
      display: flex;
      flex-direction: row;
      /* This makes the flex direction vertical */
      justify-content: space-between;
      align-items: center; }
      #page-index .pageTitle .titles span,
      #page-index .pageTitle .titles h1,
      #page-index .pageTitle .titles span > div,
      #page-index .indexTitle .titles span,
      #page-index .indexTitle .titles h1,
      #page-index .indexTitle .titles span > div {
        color: var(--primary);
        margin: 0px;
        font-size: 1.25rem !important;
        font-family: "Regular", sans-serif; }
        @media screen and (max-width: 796px) {
          #page-index .pageTitle .titles span,
          #page-index .pageTitle .titles h1,
          #page-index .pageTitle .titles span > div,
          #page-index .indexTitle .titles span,
          #page-index .indexTitle .titles h1,
          #page-index .indexTitle .titles span > div {
            animation: none;
            font-size: 1.5rem !important; } }
      #page-index .pageTitle .titles span,
      #page-index .indexTitle .titles span {
        display: flex; }
        @media screen and (max-width: 796px) {
          #page-index .pageTitle .titles span,
          #page-index .indexTitle .titles span {
            animation: none; } }
  @media screen and (max-width: 796px) {
    #page-index .indexTitle {
      padding: 10px; } }

:export {
  base: #f1f0eb;
  primary: #0d0e13;
  secondary: #D1CDC3;
  tertiary: #001ecc;
  piglet: #ffbdf1;
  innovate: #3300ff;
  sunglow: #ffe067;
  sunsetpink: #f24b86;
  sunsetMobile: #e7115c;
  lime: #caff8a;
  whitegray: #f5f5f5;
  lightergray: #e8e8e8;
  lightgray: #767676;
  turqouise: #2ec4b6;
  lavender: #e7c1eb;
  tangerine: #ff6d1b;
  orange: rgba(255, 109, 27, 0.5);
  sky: #3399ff;
  matcha: #d0e9b1;
  coral: #ff7f50;
  brick: #f77474;
  tertiary: blue;
  tiffany: #88e7c5;
  lighttheme-base: #f1f0eb;
  lighttheme-primary: #0d0e13;
  darktheme-base: #0d0e13;
  darktheme-primary: #f1f0eb; }

.line-container {
  display: -webkit-flex;
  display: flex;
  -webkit-justify-content: space-between;
  justify-content: space-between;
  -webkit-align-items: center;
  align-items: center;
  overflow: hidden;
  position: relative;
  width: 25px;
  height: 25px;
  opacity: 100%; }
  @media screen and (max-width: 769px) {
    .line-container {
      height: 20px; } }

.lines {
  background-color: var(--primary);
  opacity: 100%;
  width: 2px;
  -webkit-transform-origin: center;
  transform-origin: center;
  -webkit-animation: idle 1.5s ease infinite;
  animation: idle 1.5s ease infinite;
  animation-fill-mode: both;
  transition: animation 0.5s; }

.lines.speaking {
  -webkit-animation: voiceWave 2s ease-in-out infinite;
  animation: voiceWave 2s ease-in-out infinite;
  animation-fill-mode: both; }

.soundOff {
  animation: none;
  height: 20% !important; }

@keyframes idle {
  0%,
  100% {
    height: 75%; }
  50% {
    height: 90%; } }
@keyframes voiceWave {
  0% {
    height: 100%; }
  10% {
    height: 60%; }
  20% {
    height: 40%; }
  30% {
    height: 70%; }
  40% {
    height: 50%; }
  50% {
    height: 60%; }
  60% {
    height: 50%; }
  70% {
    height: 40%; }
  80% {
    height: 70%; }
  90% {
    height: 50%; }
  100% {
    height: 100%; } }
:export {
  base: #f1f0eb;
  primary: #0d0e13;
  secondary: #D1CDC3;
  tertiary: #001ecc;
  piglet: #ffbdf1;
  innovate: #3300ff;
  sunglow: #ffe067;
  sunsetpink: #f24b86;
  sunsetMobile: #e7115c;
  lime: #caff8a;
  whitegray: #f5f5f5;
  lightergray: #e8e8e8;
  lightgray: #767676;
  turqouise: #2ec4b6;
  lavender: #e7c1eb;
  tangerine: #ff6d1b;
  orange: rgba(255, 109, 27, 0.5);
  sky: #3399ff;
  matcha: #d0e9b1;
  coral: #ff7f50;
  brick: #f77474;
  tertiary: blue;
  tiffany: #88e7c5;
  lighttheme-base: #f1f0eb;
  lighttheme-primary: #0d0e13;
  darktheme-base: #0d0e13;
  darktheme-primary: #f1f0eb; }

@font-face {
  font-family: "Regular";
  src: local("NeueMontreal"), url(/fonts/NeueMontreal-Regular.otf) format("opentype"); }
@font-face {
  font-family: "Medium";
  src: local("NeueMontreal"), url(/fonts/NeueMontreal-Medium.otf) format("opentype"); }
@font-face {
  font-family: "Bold";
  src: local("NeueMontreal"), url(/fonts/NeueMontreal-Bold.otf) format("opentype"); }
@font-face {
  font-family: "Thin";
  src: local("NeueMontreal"), url(/fonts/NeueMontreal-Light.otf) format("opentype"); }
@font-face {
  font-family: "Kapakana", cursive;
  src: url("https://fonts.googleapis.com/css2?family=Kapakana:wght@300..400&display=swap"); }
#home-page {
  animation-duration: 1s;
  overflow-x: hidden;
  /** GRADIENT BACKGROUND **/ }
  #home-page .chat transition-width {
    transition-duration: 0.15s;
    transition-property: width;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); }
  #home-page .animatedwrapper {
    position: absolute;
    left: 30%;
    top: -600px;
    z-index: -1;
    width: 100%;
    height: 100%;
    isolation: isolate; }
  #home-page .dot {
    --size: 600px;
    display: none;
    position: absolute;
    left: calc(var(--size) / 3 * -1);
    top: calc(var(--size) / 3 * -1);
    width: var(--size);
    height: var(--size);
    mix-blend-mode: soft-light;
    border-radius: var(--size);
    filter: blur(calc(var(--size) / 3));
    animation: dot-animation ease-in-out 20s infinite;
    will-change: transform;
    z-index: -1;
    opacity: 1; }
  @supports (mix-blend-mode: soft-light) and (filter: blur(1px)) {
    #home-page .dot {
      display: block; } }
  #home-page .dot--one {
    background-color: #ffa0cb;
    background-blend-mode: overlay; }
  #home-page .dot--two {
    animation-delay: -7s;
    background-color: #e7c1eb;
    background-blend-mode: overlay; }
  #home-page .dot--three {
    animation-delay: -14s;
    background: #ffe067;
    background-blend-mode: overlay; }
  @media only screen and (max-width: 600px) {
    #home-page .animatedwrapper {
      left: 35%;
      top: 500px;
      z-index: -1; }
    #home-page .dot {
      --size: 150px;
      filter: blur(calc(var(--size) / 1)); } }
@keyframes dot-animation {
  0% {
    transform: translate(0, 0); }
  33% {
    transform: translate(calc(var(--size) / 1.5), 0); }
  66% {
    transform: translate(0, calc(var(--size) / 1.5)); }
  100% {
    transform: translate(0, 0); } }
:export {
  base: #f1f0eb;
  primary: #0d0e13;
  secondary: #D1CDC3;
  tertiary: #001ecc;
  piglet: #ffbdf1;
  innovate: #3300ff;
  sunglow: #ffe067;
  sunsetpink: #f24b86;
  sunsetMobile: #e7115c;
  lime: #caff8a;
  whitegray: #f5f5f5;
  lightergray: #e8e8e8;
  lightgray: #767676;
  turqouise: #2ec4b6;
  lavender: #e7c1eb;
  tangerine: #ff6d1b;
  orange: rgba(255, 109, 27, 0.5);
  sky: #3399ff;
  matcha: #d0e9b1;
  coral: #ff7f50;
  brick: #f77474;
  tertiary: blue;
  tiffany: #88e7c5;
  lighttheme-base: #f1f0eb;
  lighttheme-primary: #0d0e13;
  darktheme-base: #0d0e13;
  darktheme-primary: #f1f0eb; }

@font-face {
  font-family: "Regular";
  src: local("NeueMontreal"), url(/fonts/NeueMontreal-Regular.otf) format("opentype"); }
@font-face {
  font-family: "Medium";
  src: local("NeueMontreal"), url(/fonts/NeueMontreal-Medium.otf) format("opentype"); }
@font-face {
  font-family: "Bold";
  src: local("NeueMontreal"), url(/fonts/NeueMontreal-Bold.otf) format("opentype"); }
@font-face {
  font-family: "Thin";
  src: local("NeueMontreal"), url(/fonts/NeueMontreal-Light.otf) format("opentype"); }
@font-face {
  font-family: "Kapakana", cursive;
  src: url("https://fonts.googleapis.com/css2?family=Kapakana:wght@300..400&display=swap"); }
/* App Styles */
#chatWrapper {
  display: flex;
  flex-direction: column;
  height: 100%;
  /* Animations */ }
  #chatWrapper #disclaimer {
    opacity: 0;
    padding: 25px 20px;
    padding-top: 0px;
    font-size: 0.7rem;
    animation: fadeIn 0.5s cubic-bezier(0.25, 0.1, 0.25, 1) 4s forwards;
    width: 100%;
    text-align: center; }
    @media screen and (max-width: 797px) {
      #chatWrapper #disclaimer {
        font-size: 0.6rem;
        padding: 10px;
        width: 100%; } }
  #chatWrapper .app .homeNav {
    flex-direction: row;
    justify-content: space-between;
    width: -webkit-fill-available;
    align-items: center;
    padding: 10px 20px;
    opacity: 0;
    animation: fadeInDown 0.6s cubic-bezier(0.25, 0.1, 0.25, 1) 0s forwards;
    text-transform: uppercase;
    border-bottom: 1px solid var(--secondary); }
    #chatWrapper .app .homeNav .themeToggle {
      gap: 5px;
      padding: 0px; }
    #chatWrapper .app .homeNav ul {
      justify-content: space-between;
      align-items: center;
      height: fit-content; }
    #chatWrapper .app .homeNav li {
      justify-content: center; }
    #chatWrapper .app .homeNav li a {
      font-family: "Regular", sans-serif;
      display: inline-block;
      position: relative;
      font-size: 1rem; }
      #chatWrapper .app .homeNav li a::after {
        content: " ";
        display: block;
        position: absolute;
        width: 0;
        bottom: 0;
        height: 1px;
        margin: -1px 0;
        left: 0;
        background-color: var(--primary);
        transition: all 0.2s cubic-bezier(0.25, 0.1, 0.25, 1) 0s; }
      #chatWrapper .app .homeNav li a:hover::after {
        width: 100%; }
    @media screen and (max-width: 800px) {
      #chatWrapper .app .homeNav {
        padding: 0px 10px; }
        #chatWrapper .app .homeNav ul {
          align-items: start; } }
  #chatWrapper .app .answerTxt {
    overflow-y: auto;
    /* Allows scrolling within `.response` if content overflows */
    flex-grow: 1;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    padding-top: 10%; }
    #chatWrapper .app .answerTxt .answerWrapper {
      width: 70%;
      justify-content: space-between;
      display: flex;
      flex-direction: column;
      height: 100%; }
      @media screen and (max-width: 800px) {
        #chatWrapper .app .answerTxt .answerWrapper {
          width: 90%; } }
  #chatWrapper .app .response,
  #chatWrapper .app .repliesWrapper {
    flex-grow: 1;
    flex-direction: column;
    overflow-y: auto;
    /* Allows scrolling within `.response` if content overflows */
    justify-content: center;
    align-items: center;
    text-align: center;
    display: flex; }
    @media screen and (max-width: 800px) {
      #chatWrapper .app .response,
      #chatWrapper .app .repliesWrapper {
        width: 100%;
        align-items: center; } }
  #chatWrapper #inputWrapper {
    width: 100%;
    position: relative;
    bottom: 0;
    padding: 20px 0px;
    display: flex;
    align-content: center;
    flex-wrap: wrap;
    flex-direction: column;
    gap: 20px; }
    #chatWrapper #inputWrapper #input {
      flex-direction: row;
      display: flex;
      margin-top: 0em;
      width: 70%;
      max-width: 100%;
      resize: none;
      animation: fadeInDown 0.8s cubic-bezier(0.25, 0.1, 0.25, 1) 3.1s forwards; }
    @media screen and (max-width: 800px) {
      #chatWrapper #inputWrapper {
        width: 100%;
        padding: 10px; } }
  #chatWrapper button {
    background: transparent;
    border: 0px; }
    #chatWrapper button img {
      height: 15px; }
    #chatWrapper button:focus {
      outline: none; }
  #chatWrapper textarea {
    width: 100%;
    height: 4rem;
    padding: 1rem 2rem;
    resize: none; }
    #chatWrapper textarea:focus {
      outline: none; }
  #chatWrapper .soundBtn {
    text-align: right !important;
    text-transform: uppercase; }
    #chatWrapper .soundBtn .inner {
      flex-direction: row;
      display: flex;
      align-items: center;
      justify-content: flex-end;
      gap: 15px; }
    #chatWrapper .soundBtn span {
      color: var(--primary);
      font-size: 1rem; }
    @media screen and (max-width: 900px) {
      #chatWrapper .soundBtn {
        padding: 10px; }
        #chatWrapper .soundBtn span {
          font-size: 1rem; } }
  #chatWrapper .soundOff,
  #chatWrapper .soundOn {
    font-size: 1rem;
    color: var(--primary);
    text-decoration: line-through;
    text-transform: uppercase; }
    @media screen and (max-width: 700px) {
      #chatWrapper .soundOff,
      #chatWrapper .soundOn {
        font-size: 1rem; } }
  #chatWrapper .soundOff {
    text-decoration: line-through; }
  #chatWrapper .soundOn {
    text-decoration: none; }
  #chatWrapper [id="heading"] {
    transition: 250ms cubic-bezier(0.25, 0.1, 0.25, 1) all;
    cursor: pointer; }
    .form:not(.open) #chatWrapper [id="heading"]:hover {
      scale: 0.99;
      filter: brightness(0.95); }
    .form:not(.open) #chatWrapper [id="heading"]:active {
      scale: 0.98;
      filter: brightness(0.8); }
  #chatWrapper .icon-container {
    display: flex;
    align-items: center; }
  #chatWrapper .typewriter-icon {
    width: 2px;
    height: 20px;
    background-color: var(--secondary);
    margin-right: 10px;
    animation: blink-caret 0.75s step-end infinite; }
  #chatWrapper .time {
    padding: 0px 20px; }
    @media screen and (max-width: 800px) {
      #chatWrapper .time {
        padding: 0px 10px; } }
  #chatWrapper .timeMessage {
    font-size: 1.15rem;
    line-height: normal;
    margin-bottom: 0px;
    text-align: center;
    text-transform: uppercase;
    opacity: 0;
    animation: fadeIn 1.5s cubic-bezier(0.25, 0.1, 0.25, 1) 1.25s forwards; }
    #chatWrapper .timeMessage div {
      padding: 0px 0px 0px 20px; }
      @media screen and (max-width: 800px) {
        #chatWrapper .timeMessage div {
          padding: 0px; } }
  #chatWrapper .helloMsg {
    font-size: 4rem;
    line-height: normal;
    text-align: left;
    border-bottom: solid 1px var(--secondary);
    padding: 8% 5% 2% 20px;
    opacity: 0;
    animation: fadeIn 1.5s cubic-bezier(0.25, 0.1, 0.25, 1) 0.8s forwards; }
    @media screen and (max-width: 1300px) {
      #chatWrapper .helloMsg {
        font-size: 3rem; } }
    @media screen and (min-width: 501px) and (max-width: 800px) {
      #chatWrapper .helloMsg {
        font-size: 2.5rem; } }
    @media screen and (max-width: 500px) {
      #chatWrapper .helloMsg {
        font-size: 1.8rem;
        padding: 10% 4%; } }
  #chatWrapper .helloPrompt {
    padding-bottom: 3%;
    padding-top: 5%;
    color: var(--primary);
    width: 100%; }
    #chatWrapper .helloPrompt .title {
      opacity: 0;
      animation: fadeInDown 1.4s cubic-bezier(0.25, 0.1, 0.25, 1) 0.4s forwards;
      font-size: 10rem;
      line-height: 10rem;
      padding: 10px 0px;
      color: #001ecc;
      display: block; }
      @media screen and (max-width: 800px) {
        #chatWrapper .helloPrompt .title {
          font-size: 5rem;
          line-height: 5rem; } }
    #chatWrapper .helloPrompt span {
      font-size: 1rem;
      line-height: 1.5rem;
      text-transform: uppercase;
      opacity: 0;
      display: block;
      animation: fadeInUp 1.1s cubic-bezier(0.25, 0.1, 0.25, 1) 1.2s forwards; }
      @media screen and (max-width: 800px) {
        #chatWrapper .helloPrompt span {
          display: inline; } }
    @media screen and (max-width: 800px) {
      #chatWrapper .helloPrompt {
        padding: 15px; } }
  #chatWrapper .sent-prompt-container {
    text-align: right;
    margin-top: 10px;
    position: relative; }
    #chatWrapper .sent-prompt-container p {
      font-size: 2.25rem;
      padding: 10px;
      color: #001ecc; }
      #chatWrapper .sent-prompt-container p::first-letter {
        font-family: "Kapakana", cursive !important;
        font-size: 200%;
        font-weight: 500; }
      @media screen and (max-width: 800px) {
        #chatWrapper .sent-prompt-container p {
          margin-bottom: 5%;
          font-size: 1.8rem; } }
  #chatWrapper #input {
    position: relative;
    display: flex;
    align-items: center;
    border: 1px solid var(--secondary) !important;
    padding: 0px 20px;
    opacity: 0;
    animation: fadeInDown 1.25s cubic-bezier(0.25, 0.1, 0.25, 1) 1.6s forwards;
    border-radius: 2.86rem; }
    @media screen and (max-width: 800px) {
      #chatWrapper #input {
        padding: 0px;
        padding-left: 10px;
        width: 100% !important; } }
  #chatWrapper .spotlight__input {
    display: flex;
    height: 56px;
    width: 100%;
    border: 0px;
    border-radius: 0px;
    background-color: transparent;
    padding: 1.2rem 0px;
    background-position: left 4px center;
    background-repeat: no-repeat;
    background-size: 3%;
    color: var(--primary); }
  #chatWrapper .spotlight__input::placeholder {
    color: var(--primary);
    opacity: 60%; }
  #chatWrapper .placeholder-overlay {
    width: 100%;
    position: absolute;
    color: #888;
    opacity: 0;
    animation-duration: 3s; }
  #chatWrapper input {
    background-color: transparent !important; }
  #chatWrapper .buttonIn {
    width: 100%;
    position: relative; }
  #chatWrapper .spotlightBtn {
    position: absolute;
    top: 0;
    right: 0;
    height: 100%;
    border: 0;
    border-radius: 0;
    background: transparent;
    width: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--primary); }
    #chatWrapper .spotlightBtn span {
      font-size: 1.4rem; }
      @media screen and (max-width: 769px) {
        #chatWrapper .spotlightBtn span {
          font-size: 1.5rem; } }
    #chatWrapper .spotlightBtn img {
      width: 20px; }
  #chatWrapper .time,
  #chatWrapper .themeToggle {
    justify-content: center;
    align-items: flex-start;
    display: flex;
    flex-direction: row-reverse; }
  #chatWrapper .quick-replies {
    display: flex;
    justify-content: flex-start;
    align-self: center;
    gap: 10px;
    flex-direction: row;
    padding: 0px; }
    #chatWrapper .quick-replies .quick-reply-button {
      opacity: 0;
      border-radius: 2.86rem;
      font-family: "Regular", sans-serif;
      font-size: 1rem;
      padding: 15px 20px;
      border: solid 1px var(--secondary);
      box-shadow: inset 0 0 0 0 var(--secondary);
      transition: all 0.6s cubic-bezier(0.25, 0.1, 0.25, 1) 0s;
      color: var(--primary);
      text-transform: uppercase; }
      #chatWrapper .quick-replies .quick-reply-button:hover {
        color: var(--base-color);
        box-shadow: inset 0 1500px 0 0 var(--primary); }
      #chatWrapper .quick-replies .quick-reply-button:nth-of-type(1) {
        animation: fadeInUp 0.8s cubic-bezier(0.25, 0.1, 0.25, 1) 2.5s forwards; }
      #chatWrapper .quick-replies .quick-reply-button:nth-of-type(2) {
        animation: fadeInUp 0.8s cubic-bezier(0.25, 0.1, 0.25, 1) 2.7s forwards; }
      #chatWrapper .quick-replies .quick-reply-button:nth-of-type(3) {
        animation: fadeInUp 0.8s cubic-bezier(0.25, 0.1, 0.25, 1) 2.9s forwards; }
      @media screen and (max-width: 797px) {
        #chatWrapper .quick-replies .quick-reply-button {
          width: 100%;
          font-size: 1rem;
          padding: 10px 5px; }
          #chatWrapper .quick-replies .quick-reply-button:last-of-type {
            display: none !important; } }
    @media screen and (max-width: 797px) {
      #chatWrapper .quick-replies {
        flex-direction: column;
        gap: 10px;
        width: 100%;
        padding: 20px; } }
  #chatWrapper .react-typed {
    text-align: left !important;
    padding: 10px 20px; }
    @media screen and (max-width: 700px) {
      #chatWrapper .react-typed {
        padding-bottom: 10px !important; } }
  #chatWrapper .cursor {
    color: var(--secondary);
    animation: blink-caret 0.75s step-end infinite;
    font-size: 2.6rem; }
    @media screen and (max-width: 800px) {
      #chatWrapper .cursor {
        font-size: 1.3rem;
        display: none; } }
  #chatWrapper textarea,
  #chatWrapper .react-typed span,
  #chatWrapper .react-typed {
    font-size: 1.6rem !important;
    line-height: normal; }
    @media screen and (max-width: 800px) {
      #chatWrapper textarea,
      #chatWrapper .react-typed span,
      #chatWrapper .react-typed {
        font-size: 1.3rem !important;
        padding: 0px; } }
@keyframes cursor-blink {
  0% {
    opacity: 0; } }
@keyframes typing {
  0% {
    width: 0;
    white-space: nowrap; }
  100% {
    width: 100%; } }
@keyframes blink-caret {
  from,
    to {
    opacity: 0; }
  50% {
    opacity: 1;
    color: var(--primary); } }
.breathing-circle-container {
  height: -webkit-fill-available;
  align-content: center;
  display: flex;
  flex-wrap: wrap; }

.breathing-circle {
  width: 250px;
  height: 250px;
  margin: 0 auto;
  background-color: var(--primary);
  border-radius: 50%;
  animation: breathing 3s infinite; }
  @media screen and (max-width: 600px) {
    .breathing-circle {
      width: 150px;
      height: 150px; } }

.circle {
  border: 2px solid #D1CDC3;
  width: 400px;
  height: 400px;
  border-radius: 50%;
  opacity: 50%; }

@keyframes breathing {
  0% {
    transform: scale(1);
    opacity: 1; }
  50% {
    transform: scale(1.5);
    opacity: 0.5; }
  100% {
    transform: scale(1);
    opacity: 1; } }
.none {
  display: none; }

@font-face {
  font-family: "Regular";
  src: local("NeueMontreal"), url(/fonts/NeueMontreal-Regular.otf) format("opentype"); }
@font-face {
  font-family: "Medium";
  src: local("NeueMontreal"), url(/fonts/NeueMontreal-Medium.otf) format("opentype"); }
@font-face {
  font-family: "Bold";
  src: local("NeueMontreal"), url(/fonts/NeueMontreal-Bold.otf) format("opentype"); }
@font-face {
  font-family: "Thin";
  src: local("NeueMontreal"), url(/fonts/NeueMontreal-Light.otf) format("opentype"); }
@font-face {
  font-family: "Kapakana", cursive;
  src: url("https://fonts.googleapis.com/css2?family=Kapakana:wght@300..400&display=swap"); }
:export {
  base: #f1f0eb;
  primary: #0d0e13;
  secondary: #D1CDC3;
  tertiary: #001ecc;
  piglet: #ffbdf1;
  innovate: #3300ff;
  sunglow: #ffe067;
  sunsetpink: #f24b86;
  sunsetMobile: #e7115c;
  lime: #caff8a;
  whitegray: #f5f5f5;
  lightergray: #e8e8e8;
  lightgray: #767676;
  turqouise: #2ec4b6;
  lavender: #e7c1eb;
  tangerine: #ff6d1b;
  orange: rgba(255, 109, 27, 0.5);
  sky: #3399ff;
  matcha: #d0e9b1;
  coral: #ff7f50;
  brick: #f77474;
  tertiary: blue;
  tiffany: #88e7c5;
  lighttheme-base: #f1f0eb;
  lighttheme-primary: #0d0e13;
  darktheme-base: #0d0e13;
  darktheme-primary: #f1f0eb; }

#article-page {
  overflow: hidden;
  animation-duration: 2.5;
  margin: 0; }
  @media screen and (max-width: 800px) {
    #article-page {
      padding: 0px 10px !important; } }
  #article-page .post {
    overflow-y: auto;
    height: 100%;
    padding-bottom: 15% !important; }
  #article-page .privacy {
    font-size: 1.15rem; }
  #article-page .content {
    padding: 0px; }
  #article-page .title {
    padding: 20px 20px; }
  #article-page .header {
    height: fit-content;
    animation-duration: 2s;
    text-align: center;
    padding: 5% 0%;
    border-bottom: 1px solid var(--secondary);
    max-width: 100%;
    box-sizing: border-box;
    margin: 0px;
    display: flex; }
    #article-page .header br,
    #article-page .header .readTime {
      display: none; }
    #article-page .header .Typewriter {
      text-align: left !important;
      justify-self: center;
      padding-bottom: 0px; }
      #article-page .header .Typewriter .Typewriter__cursor {
        display: none; }
      #article-page .header .Typewriter .Typewriter__wrapper {
        align-items: center;
        display: flex;
        padding: 0px 20px; }
    #article-page .header .Typewriter span,
    #article-page .header .Typewriter .Typewriter__wrapper p {
      font-family: "Regular", sans-serif;
      margin-bottom: 0px !important;
      font-size: 4rem; }
      @media screen and (max-width: 800px) {
        #article-page .header .Typewriter span,
        #article-page .header .Typewriter .Typewriter__wrapper p {
          font-size: 2rem !important;
          font-family: "Regular", sans-serif; } }
      @media screen and (max-width: 1300px) {
        #article-page .header .Typewriter span,
        #article-page .header .Typewriter .Typewriter__wrapper p {
          font-size: 4rem !important; } }
      @media screen and (min-width: 501px) and (max-width: 800px) {
        #article-page .header .Typewriter span,
        #article-page .header .Typewriter .Typewriter__wrapper p {
          font-size: 3rem !important; } }
      @media screen and (max-width: 500px) {
        #article-page .header .Typewriter span,
        #article-page .header .Typewriter .Typewriter__wrapper p {
          font-size: 2rem !important;
          min-height: 99px; } }
    @media screen and (max-width: 500px) {
      #article-page .header {
        padding: 10% 5%; } }
  #article-page .info {
    display: flex;
    align-items: center;
    padding: 10px 0px;
    flex-direction: column;
    justify-content: space-evenly;
    border-right: solid 1px var(--secondary);
    border-bottom: solid 1px var(--secondary);
    font-family: "Medium", sans-serif;
    font-size: 1rem; }
  #article-page .objTxt,
  #article-page .ending {
    text-align: left;
    font-size: 2.5rem;
    padding: 5% 20px;
    border-bottom: 1px solid var(--secondary);
    background-color: var(--primary);
    color: var(--base-color);
    width: 100%; }
  #article-page h3 {
    font-size: 1.8rem;
    margin-bottom: 30px; }
    @media screen and (max-width: 800px) {
      #article-page h3 {
        font-size: 1.4rem; } }
  #article-page .original {
    padding-bottom: 5%; }
    #article-page .original a {
      font-size: 1.3rem;
      text-decoration: underline; }
  #article-page .ending p,
  #article-page h4 {
    font-size: 1.5rem;
    margin-top: 30px;
    font-family: "Medium", sans-serif; }
    @media screen and (max-width: 800px) {
      #article-page .ending p,
      #article-page h4 {
        font-size: 1.25rem; } }
  #article-page h5 {
    font-size: 1.3rem;
    font-family: "Medium", sans-serif; }
  #article-page p {
    font-size: 1.4rem; }
    @media screen and (max-width: 800px) {
      #article-page p {
        font-size: 1.2rem; } }
  #article-page .body > div {
    padding: 5% 20%; }
  #article-page .padding-cap {
    border-top: 1px solid;
    width: fit-content; }
  #article-page img {
    width: --webkit-fill-available;
    animation-duration: 2.5s;
    height: auto;
    max-width: 100%;
    margin-bottom: 5%; }
  #article-page figcaption {
    margin-bottom: 3%; }
    @media screen and (max-width: 550px) {
      #article-page figcaption {
        margin-bottom: 10%; } }
  @media screen and (min-width: 700px) and (max-width: 900px) {
    #article-page {
      width: 100%; }
      #article-page .objTxt,
      #article-page .probTxt {
        font-size: 1.6rem; } }
  @media screen and (max-width: 769px) {
    #article-page {
      width: 100%; }
      #article-page .post {
        padding-bottom: 50% !important; }
      #article-page .objTxt {
        font-size: 1.5rem; }
      #article-page .header .Typewriter span p,
      #article-page .header {
        padding-left: 0px;
        margin-bottom: 0px; }
      #article-page .Typewriter__cursor {
        display: none; }
      #article-page .info {
        border-right: none; }
      #article-page .title {
        padding: 0px;
        font-size: 1.4rem; }
        #article-page .title .arrow-r {
          transform: translateX(50px); }
      #article-page .body > div {
        padding: 20px 0px; } }
  #article-page ul {
    padding-left: 20px;
    gap: 10px;
    padding: 0px; }
    #article-page ul li {
      list-style: circle; }
    #article-page ul .objTxt {
      padding: 15% 5%; }
    #article-page ul .objTxt,
    #article-page ul .probTxt {
      font-size: 1.5rem; }

:export {
  base: #f1f0eb;
  primary: #0d0e13;
  secondary: #D1CDC3;
  tertiary: #001ecc;
  piglet: #ffbdf1;
  innovate: #3300ff;
  sunglow: #ffe067;
  sunsetpink: #f24b86;
  sunsetMobile: #e7115c;
  lime: #caff8a;
  whitegray: #f5f5f5;
  lightergray: #e8e8e8;
  lightgray: #767676;
  turqouise: #2ec4b6;
  lavender: #e7c1eb;
  tangerine: #ff6d1b;
  orange: rgba(255, 109, 27, 0.5);
  sky: #3399ff;
  matcha: #d0e9b1;
  coral: #ff7f50;
  brick: #f77474;
  tertiary: blue;
  tiffany: #88e7c5;
  lighttheme-base: #f1f0eb;
  lighttheme-primary: #0d0e13;
  darktheme-base: #0d0e13;
  darktheme-primary: #f1f0eb; }

@font-face {
  font-family: "Regular";
  src: local("NeueMontreal"), url(/fonts/NeueMontreal-Regular.otf) format("opentype"); }
@font-face {
  font-family: "Medium";
  src: local("NeueMontreal"), url(/fonts/NeueMontreal-Medium.otf) format("opentype"); }
@font-face {
  font-family: "Bold";
  src: local("NeueMontreal"), url(/fonts/NeueMontreal-Bold.otf) format("opentype"); }
@font-face {
  font-family: "Thin";
  src: local("NeueMontreal"), url(/fonts/NeueMontreal-Light.otf) format("opentype"); }
@font-face {
  font-family: "Kapakana", cursive;
  src: url("https://fonts.googleapis.com/css2?family=Kapakana:wght@300..400&display=swap"); }
#portfolio-page {
  display: flex;
  flex-direction: column;
  overflow: hidden !important;
  /* Style for all item containers */
  /* Hover effect for all item containers */
  /* Initial style for the first item */
  /* Special class to reduce opacity of the first item */ }
  @media screen and (max-width: 800px) {
    #portfolio-page {
      padding: 0px 10px; } }
  #portfolio-page h3,
  #portfolio-page p {
    margin-bottom: 0px; }
  #portfolio-page h3,
  #portfolio-page .arrow {
    font-size: 2rem; }
  #portfolio-page .item-title,
  #portfolio-page img,
  #portfolio-page ul {
    will-change: opacity; }
  #portfolio-page .title {
    border-bottom: 1px solid var(--secondary);
    padding: 20px; }
  #portfolio-page .line.left.bottom.width {
    animation-delay: 0.5s;
    animation-duration: 2.5s; }
  #portfolio-page .items {
    white-space: nowrap;
    width: 100%;
    display: flex;
    flex-direction: row;
    align-items: center;
    padding-left: 0px;
    height: calc(100vh - 75px);
    overflow-x: auto;
    overflow-y: hidden;
    padding-right: 6%; }
    @media screen and (max-width: 1300px) {
      #portfolio-page .items {
        padding-right: 10%; } }
    @media screen and (max-width: 1100px) {
      #portfolio-page .items {
        padding-right: 15%; } }
    @media screen and (max-width: 900px) {
      #portfolio-page .items {
        padding-right: 0px; } }
    #portfolio-page .items:first {
      padding-left: 20px; }
    #portfolio-page .items::-webkit-scrollbar {
      width: 1px;
      height: 5px;
      background-color: transparent; }
    #portfolio-page .items::-webkit-scrollbar-thumb {
      background-color: transparent; }
    #portfolio-page .items:hover::-webkit-scrollbar {
      width: 1px;
      height: 5px; }
    #portfolio-page .items:hover::-webkit-scrollbar-thumb {
      background-color: var(--primary); }
  #portfolio-page .privacy {
    max-width: 800px;
    font-size: 1rem;
    text-transform: none; }
  #portfolio-page .item-container {
    display: flex;
    height: 100%; }
    #portfolio-page .item-container .item {
      width: 60vw;
      height: 100vh;
      max-width: 92vw;
      min-height: 660px;
      flex: none;
      justify-content: space-between;
      align-items: flex-start;
      padding-left: 0;
      display: flex;
      position: relative;
      border-right: 1px solid var(--secondary);
      overflow: hidden;
      flex-direction: column; }
      #portfolio-page .item-container .item .item-info {
        width: 100%;
        align-self: start; }
      #portfolio-page .item-container .item .item-title {
        opacity: 0;
        animation: fadeIn 1.5s ease-in forwards;
        animation-delay: 1s;
        max-width: 700px;
        padding: 20px;
        align-self: flex-start;
        margin-bottom: 2px; }
        #portfolio-page .item-container .item .item-title h3 {
          font-family: "Regular", sans-serif;
          white-space: normal;
          margin-bottom: 1%; }
        #portfolio-page .item-container .item .item-title p {
          font-family: "Medium", sans-serif; }
      #portfolio-page .item-container .item ul {
        display: flex;
        flex-direction: row;
        padding: 0px;
        margin: 0;
        opacity: 0;
        animation: fadeIn 1.25s ease-in forwards;
        animation-delay: 2s; }
        #portfolio-page .item-container .item ul li {
          padding-right: 20px; }
      #portfolio-page .item-container .item img {
        width: 100%;
        opacity: 0;
        animation: fadeIn 1.5s ease-in forwards;
        animation-delay: 1s;
        height: 60%;
        align-self: end;
        filter: blur(60px);
        mix-blend-mode: color;
        transition: all 1.5s cubic-bezier(0.175, 0.885, 0.32, 1.275) 0ms; }
        #portfolio-page .item-container .item img:hover {
          filter: blur(0px);
          height: auto; }
  #portfolio-page .item-container {
    opacity: 0.5 !important;
    /* Default lower opacity */
    transition: all 0.5s ease-in;
    height: 100%; }
  #portfolio-page .item-container:hover {
    opacity: 1 !important;
    /* Full opacity on hover */
    transition: all 0.5s ease-in; }
    #portfolio-page .item-container:hover .arrow {
      transform: translateX(50%) !important; }
  #portfolio-page .items .item-container:first-child {
    opacity: 1 !important;
    /* Full opacity initially */
    transition: all 0.5s ease-in; }
  #portfolio-page .items .item-container:first-child.first-item-reduced-opacity {
    opacity: 0.5 !important;
    transition: all 0.5s ease-in; }
  @media screen and (max-width: 797px) {
    #portfolio-page {
      overflow: auto !important; }
      #portfolio-page .item-title {
        padding: 50px 20px !important;
        padding-bottom: 150px !important; }
      #portfolio-page .title {
        padding-top: 10%; }
      #portfolio-page img {
        width: -webkit-fill-available !important;
        height: auto !important;
        max-height: 100px;
        filter: blur(40px) !important; }
      #portfolio-page h2 {
        padding: 10px 0px; }
      #portfolio-page .privacy {
        margin-bottom: 2%; }
      #portfolio-page h3,
      #portfolio-page .arrow {
        font-size: 1.4rem !important;
        margin-bottom: 1%; }
      #portfolio-page .content.title {
        padding: 10px 0px;
        position: relative;
        background-color: var(--base-color);
        z-index: 1;
        align-content: center;
        flex-wrap: wrap; }
      #portfolio-page .items {
        flex-direction: column;
        animation: none;
        height: 100%;
        overflow: auto;
        will-change: transform; }
        #portfolio-page .items .item-container {
          width: 100%;
          height: fit-content;
          opacity: 1 !important; }
          #portfolio-page .items .item-container .item {
            will-change: transform;
            width: 100%;
            height: fit-content;
            max-width: 100%;
            min-height: 0;
            border-right: none;
            border-bottom: 1px solid var(--secondary); } }
  @media screen and (min-width: 700px) and (max-width: 1000px) {
    #portfolio-page .item {
      flex-direction: row !important;
      align-items: center !important; }
    #portfolio-page img {
      margin-left: 10px; } }

:export {
  base: #f1f0eb;
  primary: #0d0e13;
  secondary: #D1CDC3;
  tertiary: #001ecc;
  piglet: #ffbdf1;
  innovate: #3300ff;
  sunglow: #ffe067;
  sunsetpink: #f24b86;
  sunsetMobile: #e7115c;
  lime: #caff8a;
  whitegray: #f5f5f5;
  lightergray: #e8e8e8;
  lightgray: #767676;
  turqouise: #2ec4b6;
  lavender: #e7c1eb;
  tangerine: #ff6d1b;
  orange: rgba(255, 109, 27, 0.5);
  sky: #3399ff;
  matcha: #d0e9b1;
  coral: #ff7f50;
  brick: #f77474;
  tertiary: blue;
  tiffany: #88e7c5;
  lighttheme-base: #f1f0eb;
  lighttheme-primary: #0d0e13;
  darktheme-base: #0d0e13;
  darktheme-primary: #f1f0eb; }

@font-face {
  font-family: "Regular";
  src: local("NeueMontreal"), url(/fonts/NeueMontreal-Regular.otf) format("opentype"); }
@font-face {
  font-family: "Medium";
  src: local("NeueMontreal"), url(/fonts/NeueMontreal-Medium.otf) format("opentype"); }
@font-face {
  font-family: "Bold";
  src: local("NeueMontreal"), url(/fonts/NeueMontreal-Bold.otf) format("opentype"); }
@font-face {
  font-family: "Thin";
  src: local("NeueMontreal"), url(/fonts/NeueMontreal-Light.otf) format("opentype"); }
@font-face {
  font-family: "Kapakana", cursive;
  src: url("https://fonts.googleapis.com/css2?family=Kapakana:wght@300..400&display=swap"); }
#journal-page {
  display: flex;
  flex-direction: column;
  overflow: auto;
  /* Style for all item containers */
  /* Hover effect for all item containers */
  /* Initial style for the first item */
  /* Special class to reduce opacity of the first item */ }
  @media screen and (max-width: 800px) {
    #journal-page {
      padding: 0px 10px; } }
  #journal-page h3,
  #journal-page p {
    margin-bottom: 0px; }
  #journal-page h3,
  #journal-page .arrow {
    font-size: 2rem; }
  #journal-page .item-title,
  #journal-page img,
  #journal-page ul {
    will-change: opacity; }
  #journal-page a:hover {
    text-underline-offset: 5px; }
    #journal-page a:hover .arrow-r {
      transform: translateY(-25%) !important; }
  #journal-page .title {
    border-bottom: 1px solid var(--secondary);
    padding: 20px; }
    #journal-page .title p {
      margin-bottom: 2%;
      text-transform: none; }
  #journal-page .items {
    white-space: nowrap;
    width: 100%;
    display: flex;
    flex-direction: column;
    padding-left: 0px;
    z-index: -1; }
    #journal-page .items:first {
      padding-left: 20px; }
  #journal-page .item-container {
    display: flex;
    height: 100%; }
    #journal-page .item-container .item {
      width: 100%;
      flex: none;
      justify-content: space-between;
      align-items: flex-start;
      padding-left: 0;
      display: flex;
      position: relative;
      border-bottom: 1px solid var(--secondary);
      overflow: hidden;
      flex-direction: column; }
      #journal-page .item-container .item .item-info {
        width: 100%;
        align-self: start; }
      #journal-page .item-container .item .item-title {
        opacity: 0;
        animation-delay: 1s;
        padding: 5% 20px;
        align-self: flex-start;
        max-width: 80%;
        animation: fadeIn 1.5s ease-in 1s forwards; }
        #journal-page .item-container .item .item-title h3 {
          white-space: normal;
          margin-bottom: 1%; }
        #journal-page .item-container .item .item-title p {
          font-family: "Regular", sans-serif; }
  #journal-page .sub {
    color: var(--primary); }
  #journal-page .readTime {
    color: #969696;
    font-family: "Regular", sans-serif; }
  #journal-page .item-container {
    opacity: 0.5 !important;
    /* Default lower opacity */
    transition: all 0.5s ease-in;
    animation: fadeIn 1.5s ease-in 1s forwards; }
  #journal-page .item-container:hover {
    opacity: 1 !important;
    /* Full opacity on hover */
    transition: all 0.5s ease-in; }
    #journal-page .item-container:hover .arrow {
      transform: translateX(50%) !important; }
  #journal-page .items .item-container:first-child {
    opacity: 1 !important;
    /* Full opacity initially */
    transition: all 0.5s ease-in; }
  #journal-page .items .item-container:first-child.first-item-reduced-opacity {
    opacity: 0.5 !important;
    transition: all 0.5s ease-in; }
  @media screen and (max-width: 797px) {
    #journal-page {
      max-height: fit-content;
      overflow: auto !important; }
      #journal-page .title {
        padding: 0px !important;
        padding-top: 10%; }
      #journal-page img {
        width: -webkit-fill-available !important;
        height: auto !important;
        max-height: 400px; }
      #journal-page h2 {
        padding: 10px 0px; }
      #journal-page .privacy {
        margin-bottom: 2%; }
      #journal-page h3,
      #journal-page .arrow {
        font-size: 1.4rem !important;
        margin-bottom: 1%; }
      #journal-page .content.title {
        padding: 10px 10px;
        position: relative;
        top: 0px;
        background-color: var(--base-color);
        z-index: 1;
        align-content: center;
        flex-wrap: wrap; }
      #journal-page .items {
        flex-direction: column;
        overflow: auto;
        height: 100%;
        max-height: max-content;
        opacity: 0;
        animation: fadeIn 0.5s ease-in 1s forwards; }
        #journal-page .items .item-container {
          border: none;
          max-width: 100%; }
          #journal-page .items .item-container .item {
            padding: 50px 0px;
            width: -webkit-fill-available;
            display: flex;
            min-height: fit-content;
            height: auto;
            border-bottom: 1px solid var(--secondary);
            border-right: none;
            justify-content: center;
            opacity: 1 !important; }
            #journal-page .items .item-container .item .item-title,
            #journal-page .items .item-container .item img {
              padding: 0px; }
            #journal-page .items .item-container .item .item-title {
              opacity: 1 !important;
              padding-bottom: 2%; } }
  @media screen and (min-width: 700px) and (max-width: 1000px) {
    #journal-page .item {
      flex-direction: row !important;
      align-items: center !important; }
    #journal-page img {
      margin-left: 10px; } }

@font-face {
  font-family: "Regular";
  src: local("NeueMontreal"), url(/fonts/NeueMontreal-Regular.otf) format("opentype"); }
@font-face {
  font-family: "Medium";
  src: local("NeueMontreal"), url(/fonts/NeueMontreal-Medium.otf) format("opentype"); }
@font-face {
  font-family: "Bold";
  src: local("NeueMontreal"), url(/fonts/NeueMontreal-Bold.otf) format("opentype"); }
@font-face {
  font-family: "Thin";
  src: local("NeueMontreal"), url(/fonts/NeueMontreal-Light.otf) format("opentype"); }
@font-face {
  font-family: "Kapakana", cursive;
  src: url("https://fonts.googleapis.com/css2?family=Kapakana:wght@300..400&display=swap"); }
:export {
  base: #f1f0eb;
  primary: #0d0e13;
  secondary: #D1CDC3;
  tertiary: #001ecc;
  piglet: #ffbdf1;
  innovate: #3300ff;
  sunglow: #ffe067;
  sunsetpink: #f24b86;
  sunsetMobile: #e7115c;
  lime: #caff8a;
  whitegray: #f5f5f5;
  lightergray: #e8e8e8;
  lightgray: #767676;
  turqouise: #2ec4b6;
  lavender: #e7c1eb;
  tangerine: #ff6d1b;
  orange: rgba(255, 109, 27, 0.5);
  sky: #3399ff;
  matcha: #d0e9b1;
  coral: #ff7f50;
  brick: #f77474;
  tertiary: blue;
  tiffany: #88e7c5;
  lighttheme-base: #f1f0eb;
  lighttheme-primary: #0d0e13;
  darktheme-base: #0d0e13;
  darktheme-primary: #f1f0eb; }

#post-page {
  height: calc(100vh - 0px);
  /* Adjust this value based on your needs. */
  animation-duration: 2.5;
  margin: 0; }
  @media screen and (max-width: 800px) {
    #post-page {
      padding: 0px 10px !important; } }
  #post-page .header {
    height: fit-content;
    animation-duration: 2s;
    text-align: center;
    padding: 8% 0%;
    border-bottom: 1px solid var(--secondary);
    max-width: 100%;
    box-sizing: border-box; }
    #post-page .header .scrib {
      font-family: "Medium", sans-serif; }
    #post-page .header .Typewriter {
      text-align: center !important; }
    #post-page .header .Typewriter span {
      font-size: 8rem;
      font-family: "Regular", sans-serif;
      margin-bottom: 0px; }
      @media screen and (max-width: 800px) {
        #post-page .header .Typewriter span {
          font-size: 2rem !important;
          font-family: "Regular", sans-serif; } }
      @media screen and (max-width: 1300px) {
        #post-page .header .Typewriter span {
          font-size: 6rem !important; } }
      @media screen and (min-width: 501px) and (max-width: 800px) {
        #post-page .header .Typewriter span {
          font-size: 5rem !important; } }
      @media screen and (max-width: 500px) {
        #post-page .header .Typewriter span {
          font-size: 3rem !important; } }
    @media screen and (max-width: 500px) {
      #post-page .header {
        padding: 10% 5%; } }
  #post-page .post {
    z-index: 0;
    overflow: scroll;
    max-height: 100%;
    padding-bottom: 15% !important; }
    #post-page .post::-webkit-scrollbar {
      width: 5px;
      background-color: transparent; }
    #post-page .post::-webkit-scrollbar-thumb {
      background-color: transparent; }
    #post-page .post:hover::-webkit-scrollbar {
      width: 5px; }
    #post-page .post:hover::-webkit-scrollbar-thumb {
      background-color: var(--primary); }
  #post-page .intro {
    display: flex;
    align-items: flex-start;
    animation-duration: 2.5s;
    flex-direction: column;
    justify-content: space-evenly;
    border-right: solid 1px var(--secondary);
    border-bottom: solid 1px var(--secondary); }
    #post-page .intro h2 {
      font-size: 2.2rem;
      font-family: "Medium", sans-serif; }
    #post-page .intro h3 {
      padding: 20px;
      font-family: "Medium", sans-serif; }
    @media screen and (max-width: 797px) {
      #post-page .intro {
        border-right: 0px;
        height: max-content; } }
    #post-page .intro .context a {
      text-decoration: underline; }
      #post-page .intro .context a:hover {
        background-color: var(--secondary); }
  #post-page .objTxt {
    text-align: center;
    font-size: 3rem;
    padding: 15% 10%;
    border-bottom: 1px solid var(--secondary);
    background-color: var(--primary);
    color: var(--base-color);
    width: 100%; }
  #post-page .project {
    border-bottom: 1px solid var(--secondary);
    width: 100%;
    box-sizing: border-box;
    /* Include padding in the width calculation */ }
    #post-page .project h3 {
      font-size: 2rem;
      padding: 20px;
      padding-bottom: 0px; }
    #post-page .project p {
      width: 100%;
      font-size: 1.5rem;
      padding: 20px;
      margin-bottom: 0px; }
  #post-page h4 {
    font-weight: 500; }
  #post-page .padding-cap {
    border-top: 1px solid;
    width: fit-content; }
  #post-page img {
    width: 100%;
    animation-duration: 2.5s;
    height: auto;
    max-width: 100%; }
  #post-page .img {
    padding: 0;
    border-right: 1px solid var(--secondary);
    border-left: 1px solid var(--secondary);
    border-bottom: 1px solid var(--secondary);
    display: flex;
    align-items: center; }
  #post-page figcaption {
    margin-bottom: 3%; }
    @media screen and (max-width: 550px) {
      #post-page figcaption {
        margin-bottom: 10%; } }
  #post-page .bgRow {
    flex-direction: row;
    display: flex;
    border-bottom: 1px solid var(--secondary);
    height: -webkit-fill-available; }
    #post-page .bgRow .bgContent {
      padding: 20px;
      justify-content: center;
      align-content: center;
      display: flex;
      flex-wrap: wrap; }
    #post-page .bgRow p {
      margin: 0;
      height: fit-content; }
    #post-page .bgRow .bgTitle {
      justify-content: center;
      display: flex;
      align-content: center;
      flex-wrap: wrap;
      border-right: 1px solid var(--secondary); }
    @media screen and (max-width: 900px) {
      #post-page .bgRow {
        min-height: 50px;
        height: fit-content;
        flex-direction: column; }
        #post-page .bgRow .bgTitle {
          border-right: none;
          border-bottom: 1px solid var(--secondary); }
        #post-page .bgRow .bgContent {
          padding: 20px 0px; }
        #post-page .bgRow .bgTitle {
          height: fit-content;
          padding: 10px; }
          #post-page .bgRow .bgTitle h3 {
            padding: 0px; } }
  #post-page .method {
    padding: 20px; }
    #post-page .method p {
      font-size: 1rem !important;
      font-family: "Regular", sans-serif;
      margin-bottom: 0; }
      @media screen and (max-width: 769px) {
        #post-page .method p {
          font-size: 1rem !important; } }
    @media screen and (max-width: 769px) {
      #post-page .method {
        padding: 20px 0px; } }
  #post-page ul {
    padding-left: 20px;
    gap: 10px; }
    #post-page ul li {
      list-style: circle; }
  #post-page .project-info .row {
    margin-bottom: 1%; }
  #post-page .btn:focus {
    box-shadow: none; }
  @media screen and (max-width: 797px) {
    #post-page {
      overflow: auto !important;
      height: max-content; }
      #post-page .title {
        padding: 0px;
        font-size: 1.4rem; }
        #post-page .title .arrow-r {
          transform: translateX(50px); } }
  @media screen and (min-width: 700px) and (max-width: 900px) {
    #post-page {
      width: 100%; }
      #post-page .objTxt,
      #post-page .probTxt {
        font-size: 1.6rem; }
      #post-page .project h3 {
        font-size: 3rem; } }
  @media screen and (max-width: 769px) {
    #post-page {
      width: 100%;
      padding: 0px; }
      #post-page .project p,
      #post-page .project,
      #post-page .project h3 {
        padding: 10px 0px; }
      #post-page .post {
        padding-bottom: 50%; }
      #post-page .objTxt {
        padding: 15% 5%; }
      #post-page .objTxt,
      #post-page .probTxt {
        font-size: 1.5rem; }
      #post-page .project h3 {
        font-size: 1.8rem; } }

:export {
  base: #f1f0eb;
  primary: #0d0e13;
  secondary: #D1CDC3;
  tertiary: #001ecc;
  piglet: #ffbdf1;
  innovate: #3300ff;
  sunglow: #ffe067;
  sunsetpink: #f24b86;
  sunsetMobile: #e7115c;
  lime: #caff8a;
  whitegray: #f5f5f5;
  lightergray: #e8e8e8;
  lightgray: #767676;
  turqouise: #2ec4b6;
  lavender: #e7c1eb;
  tangerine: #ff6d1b;
  orange: rgba(255, 109, 27, 0.5);
  sky: #3399ff;
  matcha: #d0e9b1;
  coral: #ff7f50;
  brick: #f77474;
  tertiary: blue;
  tiffany: #88e7c5;
  lighttheme-base: #f1f0eb;
  lighttheme-primary: #0d0e13;
  darktheme-base: #0d0e13;
  darktheme-primary: #f1f0eb; }

@font-face {
  font-family: "Regular";
  src: local("NeueMontreal"), url(/fonts/NeueMontreal-Regular.otf) format("opentype"); }
@font-face {
  font-family: "Medium";
  src: local("NeueMontreal"), url(/fonts/NeueMontreal-Medium.otf) format("opentype"); }
@font-face {
  font-family: "Bold";
  src: local("NeueMontreal"), url(/fonts/NeueMontreal-Bold.otf) format("opentype"); }
@font-face {
  font-family: "Thin";
  src: local("NeueMontreal"), url(/fonts/NeueMontreal-Light.otf) format("opentype"); }
@font-face {
  font-family: "Kapakana", cursive;
  src: url("https://fonts.googleapis.com/css2?family=Kapakana:wght@300..400&display=swap"); }
.stickyNav {
  position: sticky;
  z-index: 1;
  position: sticky;
  top: 0;
  overflow: hidden; }
  .stickyNav .toggle {
    top: 0; }
  .stickyNav .title {
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    border-bottom: 1px solid var(--secondary);
    font-size: 2rem;
    padding: 20px 20px; }
    .stickyNav .title .arrow-l {
      font-size: 2rem !important;
      line-height: 1.2rem; }
      .stickyNav .title .arrow-l:hover {
        transform: translateX(-10px); }
  .stickyNav .titleTxt {
    display: flex;
    justify-content: space-between;
    align-items: center; }
    @media screen and (max-width: 800px) {
      .stickyNav .titleTxt {
        padding: 10px 0px !important; } }
  .stickyNav .project-anchors {
    border-bottom: solid 1px var(--secondary); }
    @media screen and (max-width: 900px) {
      .stickyNav .project-anchors {
        display: none; } }
    .stickyNav .project-anchors ul {
      list-style: none;
      display: flex;
      flex-direction: row;
      justify-content: flex-start;
      margin: 0;
      padding: 0px 20px;
      width: fit-content; }
      .stickyNav .project-anchors ul li {
        scroll-behavior: smooth;
        padding-right: 3rem;
        width: fit-content; }
        .stickyNav .project-anchors ul li .nav-link {
          padding-left: 0px !important;
          text-transform: capitalize;
          text-decoration: underline;
          text-underline-offset: 5px;
          border: none; }
          .stickyNav .project-anchors ul li .nav-link:active, .stickyNav .project-anchors ul li .nav-link:hover {
            font-weight: 500 !important; }
  .stickyNav .postInfo {
    width: 100%; }
    .stickyNav .postInfo .postTags {
      border-bottom: solid 1px var(--secondary);
      display: flex;
      align-items: center;
      padding: 10px;
      font-size: 1.3rem !important;
      width: 100%;
      justify-content: center; }
    .stickyNav .postInfo .postTags {
      padding-left: 0px !important; }
      @media screen and (max-width: 1000px) {
        .stickyNav .postInfo .postTags {
          display: none; } }
      .stickyNav .postInfo .postTags ul {
        flex-direction: row;
        padding-left: 0px !important;
        margin: 0px;
        width: fit-content; }
        .stickyNav .postInfo .postTags ul li {
          list-style: none !important;
          font-size: 1.15rem !important;
          width: fit-content; }
  .stickyNav .privacy {
    max-width: 800px;
    font-size: 1rem; }
  .stickyNav #post-nav {
    width: 100%;
    min-width: -webkit-fill-available; }
    .stickyNav #post-nav .pre,
    .stickyNav #post-nav .next {
      text-align: center;
      justify-content: center;
      display: flex;
      align-self: center;
      padding: 10px;
      border-bottom: solid 1px var(--secondary); }
      .stickyNav #post-nav .pre span,
      .stickyNav #post-nav .next span {
        font-size: 1rem; }
      @media (hover: hover) {
        .stickyNav #post-nav .pre:hover,
        .stickyNav #post-nav .next:hover {
          background-color: rgba(0, 0, 0, 0.1); } }
      @media screen and (max-width: 700px) {
        .stickyNav #post-nav .pre,
        .stickyNav #post-nav .next {
          padding: 4%; } }
    .stickyNav #post-nav .pre {
      border-right: 1px solid var(--secondary); }
      .stickyNav #post-nav .pre:hover .arrow-l {
        transform: translateX(-15px); }
    .stickyNav #post-nav .next:hover .arrow-r {
      transform: translateX(15px); }
    .stickyNav #post-nav .nav-row {
      justify-content: space-between;
      align-items: center;
      margin-right: 0;
      margin-left: 0;
      width: 100%;
      min-width: -webkit-fill-available; }
    .stickyNav #post-nav .prenext-title {
      display: block; }
    @media (min-width: 300px) and (max-width: 1030px) {
      .stickyNav #post-nav a {
        font-size: 1rem; } }
  @media screen and (max-width: 797px) {
    .stickyNav .stickyNav {
      overflow: visible !important;
      height: max-content;
      position: sticky;
      top: 0px; }
      .stickyNav .stickyNav .content {
        padding: 10px;
        background-color: var(--base-color);
        z-index: 1; }
        .stickyNav .stickyNav .content h1 {
          margin: 0px;
          font-size: 1.6rem !important; }
      .stickyNav .stickyNav h2 {
        padding: 10px 0px; }
      .stickyNav .stickyNav #post-nav .row {
        margin: 0px !important; }
      .stickyNav .stickyNav .privacy {
        max-width: 300px;
        margin-bottom: 2%; }
      .stickyNav .stickyNav .toggle {
        padding-top: 0px;
        padding-bottom: 10px; } }

:export {
  base: #f1f0eb;
  primary: #0d0e13;
  secondary: #D1CDC3;
  tertiary: #001ecc;
  piglet: #ffbdf1;
  innovate: #3300ff;
  sunglow: #ffe067;
  sunsetpink: #f24b86;
  sunsetMobile: #e7115c;
  lime: #caff8a;
  whitegray: #f5f5f5;
  lightergray: #e8e8e8;
  lightgray: #767676;
  turqouise: #2ec4b6;
  lavender: #e7c1eb;
  tangerine: #ff6d1b;
  orange: rgba(255, 109, 27, 0.5);
  sky: #3399ff;
  matcha: #d0e9b1;
  coral: #ff7f50;
  brick: #f77474;
  tertiary: blue;
  tiffany: #88e7c5;
  lighttheme-base: #f1f0eb;
  lighttheme-primary: #0d0e13;
  darktheme-base: #0d0e13;
  darktheme-primary: #f1f0eb; }

@font-face {
  font-family: "Regular";
  src: local("NeueMontreal"), url(/fonts/NeueMontreal-Regular.otf) format("opentype"); }
@font-face {
  font-family: "Medium";
  src: local("NeueMontreal"), url(/fonts/NeueMontreal-Medium.otf) format("opentype"); }
@font-face {
  font-family: "Bold";
  src: local("NeueMontreal"), url(/fonts/NeueMontreal-Bold.otf) format("opentype"); }
@font-face {
  font-family: "Thin";
  src: local("NeueMontreal"), url(/fonts/NeueMontreal-Light.otf) format("opentype"); }
@font-face {
  font-family: "Kapakana", cursive;
  src: url("https://fonts.googleapis.com/css2?family=Kapakana:wght@300..400&display=swap"); }
#about-page {
  max-height: 100vh;
  /* adjust as needed */
  overflow-y: auto; }
  @media screen and (max-width: 800px) {
    #about-page {
      padding: 0px 10px; } }
  #about-page h3 {
    font-size: 1.15rem; }
  #about-page::-webkit-scrollbar {
    width: 5px;
    background-color: transparent; }
  #about-page::-webkit-scrollbar-thumb {
    background-color: transparent; }
  #about-page:hover::-webkit-scrollbar {
    width: 5px; }
  #about-page:hover::-webkit-scrollbar-thumb {
    background-color: var(--primary); }
  #about-page .heading {
    padding: 20px;
    border-bottom: solid 1px var(--secondary);
    margin-bottom: 1%; }
    @media screen and (max-width: 800px) {
      #about-page .heading {
        padding: 10px 0px; } }
  #about-page .sub {
    padding-right: 15%; }
    @media screen and (max-width: 800px) {
      #about-page .sub {
        padding: 10px 0px; } }
  #about-page a {
    font-family: "Medium", sans-serif; }
    #about-page a:hover {
      text-underline-offset: 5px; }
      #about-page a:hover .arrow-r {
        transform: translateY(-25%) !important; }
  #about-page .intro {
    display: flex;
    flex-direction: column;
    margin-bottom: 5%; }
    #about-page .intro .intro-text {
      opacity: 0;
      animation: fadeIn 1.5s ease 1s forwards; }
      #about-page .intro .intro-text a:hover .arrow-d {
        transform: translateY(15%) !important; }
    @media screen and (max-width: 769px) {
      #about-page .intro {
        padding: 0px;
        border: 0px; }
        #about-page .intro div {
          padding: 0px; }
        #about-page .intro .author {
          font-family: "Medium", sans-serif; } }
  #about-page .title {
    padding-bottom: 2%;
    border-bottom: 1px solid;
    margin-bottom: 2%; }
    @media screen and (max-width: 769px) {
      #about-page .title {
        margin-bottom: 5%;
        margin-top: 5%; } }
  #about-page .xp {
    border-top: 1px solid var(--secondary);
    padding: 0px;
    padding-bottom: 4%;
    height: auto;
    animation-delay: 1s;
    animation-duration: 1s;
    transition-timing-function: ease-in; }
    #about-page .xp .row {
      border-bottom: 1px solid var(--secondary);
      padding: 10px 20px; }
    @media screen and (max-width: 769px) {
      #about-page .xp {
        padding: 0px; }
        #about-page .xp .row {
          padding: 10px 0px; } }
  #about-page .faq {
    margin-bottom: 1%; }
  #about-page .btn:focus {
    box-shadow: none; }
  #about-page .card-body {
    background-color: transparent;
    border-radius: 0;
    padding: 1.25rem 0px; }
    #about-page .card-body p {
      margin-bottom: 0px; }
  #about-page .card-title {
    border: 0px;
    align-items: center;
    padding: 0px;
    margin-top: 0;
    margin-bottom: 0px !important;
    justify-content: space-between; }
    #about-page .card-title p {
      font-weight: 500;
      margin-bottom: 0;
      padding: 0px; }
    #about-page .card-title .btn {
      font-size: 2rem;
      color: var(--primary); }
      #about-page .card-title .btn:hover {
        color: var(--secondary); }
      #about-page .card-title .btn:hover, #about-page .card-title .btn:focus, #about-page .card-title .btn:active {
        text-decoration: none; }
  #about-page .xp-sec ul {
    padding: 0px;
    list-style: none;
    float: none;
    flex-direction: column; }
    #about-page .xp-sec ul li {
      text-transform: lowercase;
      font-size: 1.15rem; }
  @media screen and (max-width: 769px) {
    #about-page .xp p,
    #about-page .xp-sec p {
      margin-bottom: 0; } }
  @media screen and (max-width: 769px) {
    #about-page {
      margin-top: 0; }
      #about-page .xp {
        border-top: solid 1px var(--secondary);
        margin-bottom: 10%;
        height: auto; }
        #about-page .xp .card-title {
          margin-top: 0px; }
        #about-page .xp .no-left-pad {
          padding-left: 0px;
          padding-bottom: 2%; } }

:export {
  base: #f1f0eb;
  primary: #0d0e13;
  secondary: #D1CDC3;
  tertiary: #001ecc;
  piglet: #ffbdf1;
  innovate: #3300ff;
  sunglow: #ffe067;
  sunsetpink: #f24b86;
  sunsetMobile: #e7115c;
  lime: #caff8a;
  whitegray: #f5f5f5;
  lightergray: #e8e8e8;
  lightgray: #767676;
  turqouise: #2ec4b6;
  lavender: #e7c1eb;
  tangerine: #ff6d1b;
  orange: rgba(255, 109, 27, 0.5);
  sky: #3399ff;
  matcha: #d0e9b1;
  coral: #ff7f50;
  brick: #f77474;
  tertiary: blue;
  tiffany: #88e7c5;
  lighttheme-base: #f1f0eb;
  lighttheme-primary: #0d0e13;
  darktheme-base: #0d0e13;
  darktheme-primary: #f1f0eb; }

@font-face {
  font-family: "Regular";
  src: local("NeueMontreal"), url(/fonts/NeueMontreal-Regular.otf) format("opentype"); }
@font-face {
  font-family: "Medium";
  src: local("NeueMontreal"), url(/fonts/NeueMontreal-Medium.otf) format("opentype"); }
@font-face {
  font-family: "Bold";
  src: local("NeueMontreal"), url(/fonts/NeueMontreal-Bold.otf) format("opentype"); }
@font-face {
  font-family: "Thin";
  src: local("NeueMontreal"), url(/fonts/NeueMontreal-Light.otf) format("opentype"); }
@font-face {
  font-family: "Kapakana", cursive;
  src: url("https://fonts.googleapis.com/css2?family=Kapakana:wght@300..400&display=swap"); }
#contact-page {
  height: calc(var(--vh, 1vh) * 100);
  overflow: auto; }
  @media screen and (max-width: 800px) {
    #contact-page {
      padding: 0px 10px !important; } }
  #contact-page::-webkit-scrollbar {
    width: 5px;
    background-color: transparent; }
  #contact-page::-webkit-scrollbar-thumb {
    background-color: transparent; }
  #contact-page:hover::-webkit-scrollbar {
    width: 5px; }
  #contact-page:hover::-webkit-scrollbar-thumb {
    background-color: var(--primary); }
  #contact-page .toggle {
    padding: 11px 0px; }
  #contact-page .wrapper {
    height: 100%; }
  #contact-page .header {
    height: fit-content;
    animation-duration: 2s;
    text-align: center;
    padding: 5% 5%;
    border-bottom: 1px solid var(--secondary); }
    #contact-page .header .scrib {
      font-family: "Medium", sans-serif; }
    #contact-page .header h2 {
      font-size: 4rem;
      font-family: "Regular", sans-serif;
      margin-bottom: 0px; }
      @media screen and (max-width: 800px) {
        #contact-page .header h2 {
          font-size: 2rem;
          font-family: "Regular", sans-serif; } }
      @media screen and (max-width: 1300px) {
        #contact-page .header h2 {
          font-size: 3rem; } }
      @media screen and (min-width: 501px) and (max-width: 800px) {
        #contact-page .header h2 {
          font-size: 2.5rem; } }
      @media screen and (max-width: 500px) {
        #contact-page .header h2 {
          font-size: 2rem; } }
    @media screen and (max-width: 500px) {
      #contact-page .header {
        padding: 10% 5%;
        animation: fadeIn !important; } }
  #contact-page .content {
    height: 100%; }
  #contact-page a:hover {
    text-decoration: underline;
    text-underline-offset: 5px; }
    #contact-page a:hover .arrow-r {
      transform: translateY(-5px); }
  #contact-page .social-info {
    padding: 20px;
    border-right: solid 1px var(--secondary);
    display: flex;
    flex-direction: column;
    animation-duration: 1s;
    animation-delay: 0.5s; }
    #contact-page .social-info .emailAdd {
      display: flex;
      align-items: center;
      margin-bottom: 5%; }
  #contact-page .social {
    opacity: 0;
    animation: fadeIn 1s ease-in 1.5s forwards; }
    #contact-page .social h3 {
      margin-bottom: 5%; }
    #contact-page .social .links {
      width: 100%;
      display: flex;
      justify-content: space-between;
      flex-direction: column; }
      #contact-page .social .links a {
        margin-bottom: 2%; }
        #contact-page .social .links a:last-child {
          margin-bottom: 0; }
  #contact-page .form {
    animation-delay: 1.8s;
    animation-duration: 1.5s;
    animation-timing-function: ease-in; }
  #contact-page #contactForm {
    padding: 20px;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-start; }
  #contact-page label {
    width: 100%;
    font-size: 1rem;
    margin-bottom: 3%; }
    #contact-page label:last-child {
      margin-bottom: 2%; }
    @media (min-width: 300px) and (max-width: 700px) {
      #contact-page label {
        margin-bottom: 10% !important; } }
  #contact-page .errorMessage {
    padding: 10px;
    border: 1px solid;
    background: rgba(0, 0, 0, 0.15); }
  #contact-page input[type="text"],
  #contact-page input[type="email"],
  #contact-page textarea {
    width: 100%;
    font-size: 20px;
    margin-bottom: 2%;
    border-radius: 0px;
    border: 0;
    border-bottom: solid 1px var(--secondary);
    background-color: transparent;
    color: var(--primary);
    padding: 10px 0px; }
    #contact-page input[type="text"]::placeholder,
    #contact-page input[type="email"]::placeholder,
    #contact-page textarea::placeholder {
      color: var(--primary); }
    #contact-page input[type="text"]:focus,
    #contact-page input[type="email"]:focus,
    #contact-page textarea:focus {
      outline: none;
      outline-color: transparent; }
    @media (min-width: 300px) and (max-width: 700px) {
      #contact-page input[type="text"],
      #contact-page input[type="email"],
      #contact-page textarea {
        font-size: 20px;
        margin-bottom: 10%; } }
  #contact-page textarea {
    resize: none;
    margin-bottom: 3%;
    max-height: 5rem;
    background-color: transparent;
    border-radius: 0px; }
    @media (min-width: 300px) and (max-width: 1000px) {
      #contact-page textarea {
        max-height: 12rem;
        height: 10rem; } }
  #contact-page .send {
    margin-top: 0;
    width: fit-content;
    border: 1px solid;
    color: var(--primary);
    text-align: center;
    background-color: transparent;
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: inset 0 0 0 0 var(--primary);
    transition: all 0.6s ease-in-out 0s;
    color: var(--primary);
    padding: 1% 5%; }
    #contact-page .send:hover {
      color: var(--base-color);
      box-shadow: inset 0 1500px 0 0 var(--primary); }
  #contact-page .toast {
    position: absolute;
    bottom: 5%;
    right: 1%; }
  #contact-page .toast,
  #contact-page .toast-header {
    height: fit-content;
    background: var(--base-color);
    box-shadow: none;
    border-color: var(--primary);
    color: var(--primary); }
  #contact-page .close {
    opacity: 1; }
  #contact-page .close span {
    color: var(--primary);
    font-size: 1rem;
    text-shadow: none; }
    #contact-page .close span:hover {
      color: var(--base-color); }
  @media screen and (max-width: 900px) {
    #contact-page .social-info {
      padding: 0px;
      border: 0px;
      border-bottom: solid 1px var(--secondary);
      animation: none; }
    #contact-page #contactForm {
      padding: 20px 0px; } }

:export {
  base: #f1f0eb;
  primary: #0d0e13;
  secondary: #D1CDC3;
  tertiary: #001ecc;
  piglet: #ffbdf1;
  innovate: #3300ff;
  sunglow: #ffe067;
  sunsetpink: #f24b86;
  sunsetMobile: #e7115c;
  lime: #caff8a;
  whitegray: #f5f5f5;
  lightergray: #e8e8e8;
  lightgray: #767676;
  turqouise: #2ec4b6;
  lavender: #e7c1eb;
  tangerine: #ff6d1b;
  orange: rgba(255, 109, 27, 0.5);
  sky: #3399ff;
  matcha: #d0e9b1;
  coral: #ff7f50;
  brick: #f77474;
  tertiary: blue;
  tiffany: #88e7c5;
  lighttheme-base: #f1f0eb;
  lighttheme-primary: #0d0e13;
  darktheme-base: #0d0e13;
  darktheme-primary: #f1f0eb; }

@font-face {
  font-family: "Regular";
  src: local("NeueMontreal"), url(/fonts/NeueMontreal-Regular.otf) format("opentype"); }
@font-face {
  font-family: "Medium";
  src: local("NeueMontreal"), url(/fonts/NeueMontreal-Medium.otf) format("opentype"); }
@font-face {
  font-family: "Bold";
  src: local("NeueMontreal"), url(/fonts/NeueMontreal-Bold.otf) format("opentype"); }
@font-face {
  font-family: "Thin";
  src: local("NeueMontreal"), url(/fonts/NeueMontreal-Light.otf) format("opentype"); }
@font-face {
  font-family: "Kapakana", cursive;
  src: url("https://fonts.googleapis.com/css2?family=Kapakana:wght@300..400&display=swap"); }
.cookie-consent-banner {
  font-family: "Regular", sans-serif !important;
  background: white !important;
  color: var(--primary) !important;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  left: 0px;
  position: fixed;
  width: 100%;
  z-index: 1;
  bottom: 0px;
  align-items: baseline;
  flex-direction: column;
  padding-bottom: 25px;
  border-top: 1px solid var(--primary); }
  .cookie-consent-banner h1 {
    font-family: "Medium", sans-serif;
    color: var(--primary) !important; }

.cookie-consent-text {
  font-size: 1.25rem;
  padding: 25px 25px; }

#rcc-decline-button {
  margin-left: 25px;
  border: none;
  padding: 10px 20px;
  border: 1px solid var(--primary);
  background: var(--base-color) !important;
  color: var(--primary) !important; }

.cookie-consent-button {
  background: var(--primary) !important;
  color: var(--base-color) !important;
  margin-left: 15px;
  padding: 10px 20px; }