"I love free-code-camp"

2022-05-04 02:28:49

This site runs best with JavaScript enabled..button-secondary{border-radius:4px;padding:12px 12px;background:#fff;}@media (max-width: 767px){h1{font-size:30px;}h2{font-size:24px;}}hr{margin:50px 0;border:none;border-top:1px solid #D3D3D3;background:none;}em{font-family:;}strong,b{font-family:Inter Semibold;}strong em,b em{font-family:;}input,textarea{border-radius:4px;border:1px solid #D3D3D3;padding:5px 10px;box-shadow:0 0 3px rgba(0, 0, 0, 0.1);font-family:Inter Regular;}input::-webkit-input-placeholder{opacity:0.4;}input::-moz-placeholder{opacity:0.4;}input:-ms-input-placeholder{opacity:0.4;}textarea::-webkit-input-placeholder{opacity:0.4;}textarea::-moz-placeholder{opacity:0.4;}textarea:-ms-input-placeholder{opacity:0.4;}input::placeholder,textarea::placeholder{opacity:0.4;}.gatsby-resp-image-image{background:none!important;box-shadow:0;}button{border-radius:4px;background-color:#17A974;border:none;color:#fff;padding:8px 15px;cursor:pointer;border:1px solid #17A974;-webkit-transition:all 100ms ease;transition:all 100ms ease;}button:hover:not(:disabled){background:#4024d4;border:1px solid #4024d4;-webkit-transition:all 100ms ease;transition:all 100ms ease;}button:disabled{opacity:0.6;cursor:auto;}code{padding:2px 4px;background:#f4f3fa;color:#222426;border-radius:3px;}a code{color:#573EDE;}pre{background-color:#061526;border-radius:4px;font-size:16px;padding:10px;overflow-x:auto;}pre::-webkit-scrollbar{width:100%;height:5px;border-radius:0 0 5px 5px;}pre::-webkit-scrollbar-track{background:#061526;border-radius:0 0 4px 4px;border:1px solid rgba(0, 0, 0, 0.2);}pre::-webkit-scrollbar-thumb{background:#888;border-radius:5px;}.highlight-line{background-color:rgba(201, 167, 255, 0.2);margin:0 -10px;padding:0 5px;border-left:5px solid #c9a7ff;}h1 .anchor svg,h2 .anchor svg,h3 .anchor svg,h4 .anchor svg,h5 .anchor svg,h6 .anchor svg{position:absolute;left:-24px;height:100%;width:20px;-webkit-transition:all 0.2s;transition:all 0.2s;opacity:0;}h1:hover .anchor svg,h2:hover .anchor svg,h3:hover .anchor svg,h4:hover .anchor svg,h5:hover .anchor svg,h6:hover .anchor svg{opacity:1;}form{margin:0;}ul,ol{list-style-position:inside;margin-left:0;font-size:;}*,*:before,*:after{box-sizing:inherit;}html,body{font-family:Inter Regular,sans-serif;font-style:normal;padding:0;margin:0;}html{text-rendering:optimizeLegibility;overflow-x:hidden;overflow-y:auto!important;box-sizing:border-box;-ms-overflow-style:scrollbar;-webkit-tap-highlight-color:rgba(0, 0, 0, 0);scroll-behavior:smooth;}body{color:#222426;background-color:#fafafa;}::selection{color:#fff;background-color:#573EDE;}a{color:#573EDE;-webkit-transition:all 0.3s ease-in-out;transition:all 0.3s ease-in-out;-webkit-text-decoration:none;text-decoration:none;}a:hover,a:focus{color:#4024d4;}a:not([href]):not([tabindex]){color:inherit;-webkit-text-decoration:none;text-decoration:none;}a:not([href]):not([tabindex]):hover,a:not([href]):not([tabindex]):focus{color:inherit;-webkit-text-decoration:none;text-decoration:none;}a:not([href]):not([tabindex]):focus{outline:0;}blockquote{border-left:5px solid #573EDE;padding-left:1rem!important;margin-left:0!important;margin-right:0!important;font-style:italic;}blockquote p{line-height:1.3!important;}[tabindex='-1']:focus{outline:none!important;}details{margin-bottom:1rem;}pre{margin-top:0;margin-bottom:1rem;overflow:auto;white-space:pre;}pre,code{font-family:SFMono-Regular,Menlo,Monaco,Consolas,'Liberation Mono','Courier New',monospace;}figure{margin:0 0 1rem 0;}img{vertical-align:middle;}[role='button']{cursor:pointer;}a,area,button,[role='button'],input,label,select,summary,textarea{touch-action:manipulation;}table{border-collapse:collapse;background-color:#fafafa;}caption{padding-top:1.5rem;padding-bottom:1.5rem;color:#222426;text-align:center;caption-side:bottom;}th{text-align:left;}label{display:inline-block;margin-bottom:0.5rem;}button:focus{outline:1px dotted;outline:5px auto -webkit-focus-ring-color;}input,button,select,textarea{line-height:inherit;}input[type='date'],input[type='time'],input[type='datetime-local'],input[type='month']{-webkit-appearance:listbox;}textarea{resize:vertical;}fieldset{min-width:0;padding:0;margin:0;border:0;}legend{display:block;width:100%;padding:0;margin-bottom:0.5rem;font-size:1.5rem;line-height:inherit;}input[type='search']{-webkit-appearance:none;}output{display:inline-block;}svg:not(:root){overflow:hidden;vertical-align:middle;}[hidden]{display:none!important;}.css-18roemd{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;width:100%;min-height:100vh;}.css-18pny36{-webkit-flex:1 0 auto;-ms-flex:1 0 auto;flex:1 0 auto;}.css-zp2vgh{width:100%;background:linear-gradient( -213deg, #5e31dc 0%, #1e243a 100% );z-index:0;position:relative;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;padding-top:40px;}.css-zp2vgh *{color:#fff;}.css-zp2vgh .particles{position:absolute;inset:0px;}.css-zp2vgh .images{background-image:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB3aWR0aD0iNzQ5IiBoZWlnaHQ9IjUzMCIgdmlld0JveD0iMCAwIDc0OSA1MzAiPjxkZWZzPjxsaW5lYXJHcmFkaWVudCBpZD0icGF0aC1yaWdodC1hIiB4MT0iNjkuODQ0JSIgeDI9IjI2LjY2MiUiIHkxPSItNDcuNjg3JSIgeTI9IjExNi4zNDUlIj48c3RvcCBvZmZzZXQ9IjAlIiBzdG9wLWNvbG9yPSIjNUMzM0RDIi8+PHN0b3Agb2Zmc2V0PSI0MS42MTMlIiBzdG9wLWNvbG9yPSIjMjQxRDQ0Ii8+PHN0b3Agb2Zmc2V0PSI4NC4yMTYlIiBzdG9wLWNvbG9yPSIjMjQxRDQ0Ii8+PHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSIjNDQxRDQ0Ii8+PC9saW5lYXJHcmFkaWVudD48cGF0aCBpZD0icGF0aC1yaWdodC1iIiBkPSJNNjkxLDUzMS4wMTQzNDQgQzc0Mi43NDc0OTksNDQxLjQ3NDU4NSA3OTkuMTM4OTM4LDM1Mi4wMTg0NSA5NzEuOTM4MzY3LDI4OS45MzAxMTggQzEyNTkuOTM4MzcsMTg2LjQ0OTIyMyAxMjc3LjAzMzA4LDk5LjA5MTA2NjUgMTMwOS4zNDA0Myw2LjY3MzQ5NzA5ZS0xMyBDMTMwOS4wNTczMywtMi4yMzQxMjY0MWUtMTQgMTc2OC4yMzYzNSwwIDE3NjguMjM2MzUsMCBDMTc2OC4yMzYyNyw4NS41ODQ3MTQgMTQ3Mi43OTE5LDIyMC4zNDYzNyAxNDAwLjkzODM3LDMxOC43MTA2NzggQzEzNTUuMDcxNzksMzgxLjUgMTM1NS4wNzE3OSw0NDggMTM3MC43NDM4OCw1MzEuMDE0MzQ0IEMxMzcwLjcxMDY2LDUzMS4wMTQzNDQgNjkxLjQzODM2Nyw1MzIuODU2OTk2IDY5MSw1MzEuMDE0MzQ0IFoiLz48ZmlsdGVyIGlkPSJwYXRoLXJpZ2h0LWMiIHdpZHRoPSIxMDkuNiUiIGhlaWdodD0iMTE5LjQlIiB4PSItNC44JSIgeT0iLTkuNyUiIGZpbHRlclVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCI+PGZlR2F1c3NpYW5CbHVyIGluPSJTb3VyY2VBbHBoYSIgcmVzdWx0PSJzaGFkb3dCbHVySW5uZXIxIiBzdGREZXZpYXRpb249IjQ2LjUiLz48ZmVPZmZzZXQgZHk9IjEwIiBpbj0ic2hhZG93Qmx1cklubmVyMSIgcmVzdWx0PSJzaGFkb3dPZmZzZXRJbm5lcjEiLz48ZmVDb21wb3NpdGUgaW49InNoYWRvd09mZnNldElubmVyMSIgaW4yPSJTb3VyY2VBbHBoYSIgazI9Ii0xIiBrMz0iMSIgb3BlcmF0b3I9ImFyaXRobWV0aWMiIHJlc3VsdD0ic2hhZG93SW5uZXJJbm5lcjEiLz48ZmVDb2xvck1hdHJpeCBpbj0ic2hhZG93SW5uZXJJbm5lcjEiIHZhbHVlcz0iMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMC41MTU4Nzk3NTUgMCIvPjwvZmlsdGVyPjwvZGVmcz48ZyBmaWxsPSJub25lIiBvcGFjaXR5PSIuOCIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoLTY5MSkiPjx1c2UgZmlsbD0idXJsKCNwYXRoLXJpZ2h0LWEpIiB4bGluazpocmVmPSIjcGF0aC1yaWdodC1iIi8+PHVzZSBmaWxsPSIjMDAwIiBmaWx0ZXI9InVybCgjcGF0aC1yaWdodC1jKSIgeGxpbms6aHJlZj0iI3BhdGgtcmlnaHQtYiIvPjxwYXRoIHN0cm9rZT0iIzI0MUQ0NCIgc3Ryb2tlLWxpbmVqb2luPSJzcXVhcmUiIHN0cm9rZS13aWR0aD0iMyIgZD0iTTY5My40OTY1OTMsNTI5LjY5NDEwOSBDNjkzLjQ5NjY3LDUyOS42OTM5NzYgNjkzLjQ5Njc0Nyw1MjkuNjkzODQzIDY5My40OTY4MjQsNTI5LjY5MzcxIEM2OTMuOTI3MjkyLDUyOS43MDc2NTggNjk0LjEwMzg0NSw1MjkuNzA4OTA0IDY5NC4xMjA1NTgsNTI5LjcxNDM0NSBDNjkzLjkwMDYxMyw1MjkuNzA3NjUzIDY5My42OTI2MTIsNTI5LjcwMDkwNyA2OTMuNDk2NTkzLDUyOS42OTQxMDkgWiBNMTMxMC40Mjk0OSwxLjUgQzEzMTAuNTQyNjIsMS4xNTIxOTg3MSAxMzEwLjY1NDgyLDAuODA3NjUzNjE4IDEzMTAuNzY2NTUsMC40NjQ5NjY1MTcgTDEzMTEuNDA3MiwtMS41IEwxMzA5LjM0MDMxLC0xLjUgTDEzMDkuMzQwMzUsMS41IEwxMzEwLjQyOTQ5LDEuNSBaIE0xNzY2LjcwNTg5LDEuNSBMMTc2OC4yMzYzNSwxLjUgTDE3NjYuNzM2MzUsLTEuMzM0ODc4NWUtMDYgQzE3NjYuNzM2MzUsMC40OTc1NzA3MDggMTc2Ni43MjYwNywwLjk5NzU2NDk1NCAxNzY2LjcwNTUzLDEuNSBaIE0xMzY4LjkzNzQ5LDUyOS41MjE0NTUgQzEzNjkuMDQ3MzIsNTMwLjExMDEzNiAxMzY5LjE1ODEzLDUzMC43MDA1MTYgMTM2OS4yNjk5MSw1MzEuMjkyNjExIEwxMzcwLjc0Mzg4LDUzMS4wMTQzNDQgTDEzNzAuNzQzODgsNTI5LjUxNTQ5MiBDMTM3MC40OTkwNyw1MjkuNTE2NjQ4IDEzNjkuODg3MjIsNTI5LjUxODY2MSAxMzY4LjkzNzQ5LDUyOS41MjE0NTUgWiBNMTM3MC43NDM4OCw1MjkuNTE1NDkyIEwxMzcwLjc0Mzg4LDUyOS41MTQzNDQgQzEzNzAuOTA3MSw1MjkuNTE0MzQ0IDEzNzAuOTA0MzYsNTI5LjUxNDczNCAxMzcwLjc0Mzg4LDUyOS41MTU0OTIgWiBNNjkzLjA5MTc5NSw1MjkuNjc5MzQyIEM2OTMuMDc2MzI0LDUyOS42Nzg3NDggNjkzLjA2MDk0Myw1MjkuNjc4MTUyIDY5My4wNDU2NTMsNTI5LjY3NzU1NyBDNjkzLjA2MTUyNiw1MjkuNjc4MTc1IDY5My4wNzcxOTQsNTI5LjY3ODc4IDY5My4wOTI2NTksNTI5LjY3OTM3MyBaIE02OTMuNDE5MzI0LDUyOS44Mjc1NjcgQzY5Mi45MTQ3ODMsNTI5Ljk0MjIyNSA2OTIuMzQyNjEzLDUzMC4xNzY4MDYgNjkyLjQ1OTI3NCw1MzAuNjY3MTgzIEw2OTIuMjk4NzEzLDUzMS43NjQ5MDcgQzY5Mi42NzUwMzgsNTMxLjExMzc0NSA2OTMuMDQ4NTQ3LDUzMC40NjgwMDcgNjkzLjQxOTMyNCw1MjkuODI3NTY3IFoiLz48L2c+PC9zdmc+),url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB3aWR0aD0iMzI2IiBoZWlnaHQ9IjUzMCIgdmlld0JveD0iMCAwIDMyNiA1MzAiPjxkZWZzPjxsaW5lYXJHcmFkaWVudCBpZD0icGF0aC1sZWZ0LWEiIHgxPSI2OS44NDQlIiB4Mj0iMjYuNjYyJSIgeTE9Ii00Ny42ODclIiB5Mj0iMTE2LjM0NSUiPjxzdG9wIG9mZnNldD0iMCUiIHN0b3AtY29sb3I9IiM1QzMzREMiLz48c3RvcCBvZmZzZXQ9IjQxLjYxMyUiIHN0b3AtY29sb3I9IiMyNDFENDQiLz48c3RvcCBvZmZzZXQ9Ijg0LjIxNiUiIHN0b3AtY29sb3I9IiMyNDFENDQiLz48c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiM0NDFENDQiLz48L2xpbmVhckdyYWRpZW50PjxwYXRoIGlkPSJwYXRoLWxlZnQtYiIgZD0iTS02MDcuODc3MDMzLDQwNC41NzQyNDYgQy01NzIuOTU4MzE2LDM4Mi41MDU0NDkgLTUzMS42OTkyNzIsMzYzLjkyNDEyNyAtNDgwLjcwMDg4LDM0NS42MTE3OTYgQy0xNjQuMzM3MzgzLDIzMi4wMTMwNTcgLTIzLjE4MTY5MDYsMTMxLjA4OTI1OCAxMi4zMDc0MzM5LDIyLjMwOTU2MyBDMTEuOTk2NDQ5OSwyMi4zMDk1NjMgMzg4LjA3MTgwNSwxMjEuNjE2NzA1IDM4Ny43MjcxNSwxMjIuOTAyOTczIEMyODcuMjg3NjI4LDIwNS4zNjU1OTkgMTExLjY1MTMsMzAxLjY5Nzk0MyA1Ni40NTc5NzQ5LDM3Ny4yMDYzNzUgQzEzLjMyMzM2NDgsNDM2LjIxNzYxOCA3LjExNzI0MTc4LDQ5OC4yMTQ1MDUgMTcuMDI2OTAxOCw1NzIuMDE2NzUxIEMxNy4yMjIyNzk1LDU3MS4yODc1OTEgLTYwOC43MzIwNTgsNDA0LjM0NTE0MyAtNjA3Ljg3NzAzMyw0MDQuNTc0MjQ2IFoiLz48ZmlsdGVyIGlkPSJwYXRoLWxlZnQtYyIgd2lkdGg9IjExMC4zJSIgaGVpZ2h0PSIxMTguNyUiIHg9Ii01LjIlIiB5PSItOS40JSIgZmlsdGVyVW5pdHM9Im9iamVjdEJvdW5kaW5nQm94Ij48ZmVHYXVzc2lhbkJsdXIgaW49IlNvdXJjZUFscGhhIiByZXN1bHQ9InNoYWRvd0JsdXJJbm5lcjEiIHN0ZERldmlhdGlvbj0iNDYuNSIvPjxmZU9mZnNldCBkeT0iMTAiIGluPSJzaGFkb3dCbHVySW5uZXIxIiByZXN1bHQ9InNoYWRvd09mZnNldElubmVyMSIvPjxmZUNvbXBvc2l0ZSBpbj0ic2hhZG93T2Zmc2V0SW5uZXIxIiBpbjI9IlNvdXJjZUFscGhhIiBrMj0iLTEiIGszPSIxIiBvcGVyYXRvcj0iYXJpdGhtZXRpYyIgcmVzdWx0PSJzaGFkb3dJbm5lcklubmVyMSIvPjxmZUNvbG9yTWF0cml4IGluPSJzaGFkb3dJbm5lcklubmVyMSIgdmFsdWVzPSIwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwLjUxNTg3OTc1NSAwIi8+PC9maWx0ZXI+PC9kZWZzPjxnIGZpbGw9Im5vbmUiIG9wYWNpdHk9Ii44IiB0cmFuc2Zvcm09InJvdGF0ZSgtMTUgLTExMC4wNzUgMjk3LjE2MykiPjx1c2UgZmlsbD0idXJsKCNwYXRoLWxlZnQtYSkiIHhsaW5rOmhyZWY9IiNwYXRoLWxlZnQtYiIvPjx1c2UgZmlsbD0iIzAwMCIgZmlsdGVyPSJ1cmwoI3BhdGgtbGVmdC1jKSIgeGxpbms6aHJlZj0iI3BhdGgtbGVmdC1iIi8+PHBhdGggc3Ryb2tlPSIjMjQxRDQ0IiBzdHJva2UtbGluZWpvaW49InNxdWFyZSIgc3Ryb2tlLXdpZHRoPSIzIiBkPSJNMzg0LjY4NCwxMjMuNDU1ODEgQzM4NS4zMTk1MSwxMjMuNjQ2MjI1IDM4NS44MzY3MzIsMTIzLjgwNTY0NSAzODYuMjMzNTA1LDEyMy45MzM0MjQgQzM4Ni41NTcyMDIsMTI0LjAzNzY2OSAzODYuNzk0OTA0LDEyNC4xMTkwNTMgMzg2LjkzNjU4NiwxMjQuMTczNDEyIEMzODUuMzAzNjcxLDEyMy41NDY5MTIgMzg1LjkxNzM4LDEyMy44NjE1NzMgMzg2LjI3ODI2MSwxMjIuNTE0NzQ0IEwzODcuNzI3MTUsMTIyLjkwMjk3MyBMMzg2Ljc3NTMyNiwxMjEuNzQzNjUgQzM4Ni4wNzc0MjEsMTIyLjMxNjY0MiAzODUuMzgwNDc4LDEyMi44ODcyMzkgMzg0LjY4NCwxMjMuNDU1ODEgWiBNLTYwNC4xNTU5MTMsNDA0LjAxNDE3MiBDLTYwNC43NTE0NTYsNDAzLjg1NTMzNCAtNjA1LjI5MzA2MSw0MDMuNzEwODg2IC02MDUuNzcyNTQyLDQwMy41ODMwMTIgQy02MDYuNTcwMjg1LDQwMy4zNzAyNjIgLTYwNi41NzAyODUsNDAzLjM3MDI2MiAtNjA3LjA3NjMyNSw0MDMuMjM1MzE5IEMtNjA3LjI3Mzc1OSw0MDMuMTgyNjczIC02MDcuMjczNzU5LDQwMy4xODI2NzMgLTYwNy4zOTY1MTEsNDAzLjE0OTk0NyBDLTYwNy40NDM3ODIsNDAzLjEzNzM0NSAtNjA3LjQ0Mzc4Miw0MDMuMTM3MzQ1IC02MDcuNDcyMjQ3LDQwMy4xMjk3NiBMLTYwNy40ODkyNDIsNDAzLjEyNTIzNCBMLTYwNy40OTUxMjQsNDAzLjEyMzY3MyBMLTYwNy40OTgwNzEsNDAzLjEyMjg5OSBMLTYwOC4yODAyNjksNDA2LjAxOTAzOCBMLTYwOC4yNjUyNjEsNDA2LjAyMzEzNSBMLTYwNy42MzA4NTUsNDA2LjE5MzEyNCBMLTYwNy4wNzU2NTcsNDA1Ljg0MjIzNiBDLTYwNi4xMDgwMjUsNDA1LjIzMDY4NyAtNjA1LjEzNDgyNSw0MDQuNjIxMzU3IC02MDQuMTU1OTE3LDQwNC4wMTQxNyBaIE0xMi43NDcyOTkxLDIwLjg3NTkzOTQgQzEyLjc0Njc4LDIwLjg3NTc5MDMgMTIuNzQ2MjQ0NSwyMC44NzU2MzgxIDEyLjc0NTY0NjUsMjAuODc1NDY4MSBDMTIuNzQ2MDU4NCwyMC44NzU1ODggMTIuNzQ2Mzg1NSwyMC44NzU2ODMyIDEyLjc0Njg1MjgsMjAuODc1ODE3MSBaIi8+PC9nPjwvc3ZnPg==);-webkit-background-position:center right,center left;background-position:center right,center left;background-repeat:no-repeat;-webkit-background-size:contain;background-size:contain;position:absolute;inset:0px;}@media (max-width: 1023px){.css-zp2vgh .images{-webkit-background-size:cover;background-size:cover;}}@media (max-width: 767px){.css-zp2vgh{padding-top:60px;}}.css-1veja2n{height:336px;position:relative;z-index:10;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;-webkit-justify-content:center;justify-content:center;padding-bottom:0;}.css-1dmedy0{width:100%;margin:0 auto;max-width:800px;padding:40px 40px;height:336px;position:relative;z-index:10;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;-webkit-justify-content:center;justify-content:center;padding-bottom:0;}@media (max-width: 767px){.css-1dmedy0{padding:20px 20px;}}.css-1ei4vu2{margin-top:-40px;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;text-align:center;}.css-u3bijs{position:relative;z-index:5;line-height:1;letter-spacing:1px;margin:0;font-size:60px;font-family:Inter Thin;height:100%;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;padding-bottom:0;}@media (max-width: 1023px){.css-u3bijs{font-size:50px;}}MACIEK SITKOWSKI.css-1alx1k7{color:hsla(255, 100%, 100%, 0.9);font-family:Inter Regular;font-size:25px;margin-bottom:0;}@media (max-width: 1023px){.css-1alx1k7{font-size:20px;}}FRONT-END DEVELOPER.css-qytyzv{z-index:10;position:fixed;top:0;width:100%;-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;padding:10px 0;background:none;font-family:Inter Light;-webkit-transition:background 100ms;transition:background 100ms;}.css-1xn00s8{width:100%;margin:0 auto;max-width:800px;padding:0px 40px;}@media (max-width: 767px){.css-1xn00s8{padding:0px 20px;}}.css-11vwntr{width:100%;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-webkit-justify-content:space-between;justify-content:space-between;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}.css-1nr7vpc{position:relative;font-family:Inter Regular;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}.css-1nr7vpc img{margin-bottom:0;max-width:50px;position:absolute;border-radius:100%;background:rgba(40, 28, 77, 0.7);}.css-1nr7vpc:hover,.css-1nr7vpc:focus{background:transparent;}.css-u7beu9{-webkit-text-decoration:none;text-decoration:none;color:#fff;position:relative;font-family:Inter Regular;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}.css-u7beu9:hover,.css-u7beu9:focus{background:rgba(40, 28, 77, 0.3);color:white;}.css-u7beu9 img{margin-bottom:0;max-width:50px;position:absolute;border-radius:100%;background:rgba(40, 28, 77, 0.7);}.css-u7beu9:hover,.css-u7beu9:focus{background:transparent;}Maciek Sitkowski.css-1rqjet3{font-size:16px;line-height:1.25;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}.css-1rqjet3 .mobile-nav{display:none;visibility:hidden;}@media (max-width: 767px){.css-1rqjet3 .mobile-nav{display:block;visibility:visible;}}.css-fiyo81{z-index:30;top:-5px;position:relative;background:transparent;border:none;}.css-fiyo81:hover:not(.touch),.css-fiyo81:focus{background:transparent;border:none;outline:none;}.css-15omx5b{width:24px;height:2px;background:#fff;position:absolute;left:0;background:#fff;-webkit-transition:all 250ms cubic-bezier(0.86, 0, 0.07, 1);transition:all 250ms cubic-bezier(0.86, 0, 0.07, 1);}.css-15omx5b::before{content:'';top:-8px;width:24px;height:2px;background:#fff;position:absolute;left:0;-webkit-transform:rotate(0);-moz-transform:rotate(0);-ms-transform:rotate(0);transform:rotate(0);-webkit-transition:all 250ms cubic-bezier(0.86, 0, 0.07, 1);transition:all 250ms cubic-bezier(0.86, 0, 0.07, 1);}.css-15omx5b::after{top:8px;content:'';width:24px;height:2px;background:#fff;position:absolute;left:0;-webkit-transform:rotate(0);-moz-transform:rotate(0);-ms-transform:rotate(0);transform:rotate(0);-webkit-transition:all 250ms cubic-bezier(0.86, 0, 0.07, 1);transition:all 250ms cubic-bezier(0.86, 0, 0.07, 1);}.css-dm6wq8{padding:8px 10px;border-radius:3px;background:transparent;}.css-dm6wq8+.css-dm6wq8{margin-left:10px;}@media (max-width: 767px){.css-dm6wq8{display:none;}}.css-52bqml{-webkit-text-decoration:none;text-decoration:none;color:#fff;padding:8px 10px;border-radius:3px;background:transparent;}.css-52bqml:hover,.css-52bqml:focus{background:rgba(40, 28, 77, 0.3);color:white;}.css-52bqml+.css-52bqml{margin-left:10px;}@media (max-width: 767px){.css-52bqml{display:none;}}Major projectsAll projectsContactResumeAbout.css-1ft8sxf{margin-top:-40px;position:relative;background:white;border-radius:5px;padding:40px 80px 60px 80px;margin-bottom:40px;box-shadow:0 0 3px rgba(0, 0, 0, 0.1);}@media (max-width: 767px){.css-1ft8sxf{padding:40px;border-radius:0;}}.css-1ft8sxf h2{text-align:center;}.css-5epjup{width:100%;margin:0 auto;max-width:800px;padding:40px 40px;margin-top:-40px;position:relative;background:white;border-radius:5px;padding:40px 80px 60px 80px;margin-bottom:40px;box-shadow:0 0 3px rgba(0, 0, 0, 0.1);}@media (max-width: 767px){.css-5epjup{padding:20px 20px;}}@media (max-width: 767px){.css-5epjup{padding:40px;border-radius:0;}}.css-5epjup h2{text-align:center;}ABOUT ME.css-qkomnt{margin-bottom:40px;}.css-11wwt34{margin-bottom:0.465rem;-webkit-transition:all 100ms ease;transition:all 100ms ease;font-size:22px;font-family:Inter Regular;}.css-11wwt34:hover{color:#573EDE;-webkit-transition:all 100ms ease;transition:all 100ms ease;}Who am I?.css-eki88a{width:100%;}.css-eki88a p{margin-bottom:4px;}@media (max-width: 320px){.css-eki88a p{text-align:justify;}}Hi, I'm Maciek, a self-taught programmer from Poland. One day I decidedto switch career from being waiter/barman. What I didn't know back then isthat in the process of learning to code I would soon discover a true passion.What do I do?I have year of experience developing web applications, buildingwebsites and actively contributing to Open Source projects. My world revolves aroundReact - that's the technology I know best and work daily with..css-i1tn3z{padding:40px 0;}.css-1j8unki{text-align:center;margin:0 auto;max-width:550px;}MAJOR PROJECTSThese are the projects that I spent the most time working on and the ones that I constantly keep updating..css-1oy36ob{display:grid;grid-gap:40px;}.css-50ltoi{background:#0F1B35;}.css-13lxo47{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;border-radius:8px;overflow:hidden;max-width:800px;margin:0 auto;background:#0F1B35;}@media (max-width: 767px){.css-13lxo47{-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;}}.css-1e1pg9j{width:100%;padding:40px 0 40px 40px;color:#fff;text-align:left;}@media (max-width: 767px){.css-1e1pg9j{padding:32px 16px;text-align:center;}}.css-187umcq{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-webkit-justify-content:space-between;justify-content:space-between;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}@media (max-width: 767px){.css-187umcq{-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;}.css-187umcq a{margin-bottom:10px;}}.css-16qv2i2{color:#fff;}Habit Tracker App.css-1y5nzvx{display:grid;grid-auto-flow:column;grid-gap:10px;}.css-1y5nzvx img{margin-bottom:0;}.css-10m4w9g{font-size:28px;line-height:32px;font-family:Inter Bold;margin-top:1rem;margin-bottom:0;color:#fff;}Build a routine of positive, life changing habits.css-18v96mn{margin:0.75rem 0;padding-bottom:1rem;font-size:16px;opacity:0.8;} Habit Tracker is my final project for Harvard's CS50 course. It's built as MVP (minimal viable product) and its core functionality is to track user's habits..css-ukkyad{padding:10px 16px;color:white!important;background-image:linear-gradient(180deg, #566FF8 0%, #394FDC 100%);border-radius:5px;font-size:17px;font-family:Inter Semibold;border:none;-webkit-transition:all 250ms ease;transition:all 250ms ease;}.css-ukkyad:hover{-webkit-transition:all 250ms ease;transition:all 250ms ease;background-image:linear-gradient(180deg, #4A60DE 0%, #2F43C2 100%)!important;border:none!important;}Read more.css-1kog7df{width:100%;max-width:340px;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:end;-ms-flex-pack:end;-webkit-justify-content:flex-end;justify-content:flex-end;padding:0 20px;position:relative;overflow:hidden;}@media (max-width: 767px){.css-1kog7df{padding-top:7rem;max-width:100%;}}.css-104uqnb{position:absolute;height:100%;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;-webkit-box-pack:center;-ms-flex-pack:center;-webkit-justify-content:center;justify-content:center;}.css-104uqnb h3{font-family:Inter Semibold;font-size:20px;margin-top:18px;color:#fff;}.css-suhbll.barchart{padding:0;border:0;outline:0;background:transparent;}.css-suhbll.barchart svg:hover .purple{fill:#884cf6;}.css-suhbll.barchart svg:hover .blue{fill:#3b82dd;}.css-suhbll.barchart svg:hover .green{fill:#18b27a;}.css-suhbll.barchart svg:hover .yellow{fill:#ffba0a;}.css-suhbll.barchart svg:hover .red{fill:#e85b51;}.css-suhbll.barchart:hover{background:transparent;border:0;}Track your progress!.css-c5wql1{padding:50px 16px;box-shadow:0 7px 19px 0 rgba(0,0,0,0.3),0 12px 47px 0 rgba(0,0,0,0.31);border-radius:8px 8px 0 0;max-width:250px;max-height:200px;width:100%;height:100%;}.css-ta5ja7{background:#fff;box-shadow:0 0 3px rgba(0, 0, 0, 0.1);}.css-1ng7xkf{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;border-radius:8px;overflow:hidden;max-width:800px;margin:0 auto;border:1px solid #F6F6F6;background:#fff;box-shadow:0 0 3px rgba(0, 0, 0, 0.1);}@media (max-width: 767px){.css-1ng7xkf{-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;}}.css-mqq68z{width:100%;padding:40px 0 40px 40px;text-align:left;}@media (max-width: 767px){.css-mqq68z{padding:32px 16px;text-align:center;}}.css-7b7t20{color:#000;}Pocket Globe App.css-17y7p5x{font-size:28px;line-height:32px;font-family:Inter Bold;margin-top:1rem;margin-bottom:0;}.css-17y7p5x div{color:#485FEA;}Discover the countries from all around the world The app uses D3.js and React to create a highly interactive and responsive globe. Then it connects to various APIs to get some data about selected country.Read more.css-94oyz8{position:absolute;height:100%;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;-webkit-box-pack:center;-ms-flex-pack:center;-webkit-justify-content:center;justify-content:center;}.css-94oyz8 h3{font-family:Inter Semibold;font-size:20px;margin-top:18px;color:0F1B35;}.css-uirrvv svg{cursor:-webkit-grab;cursor:grab;}.css-uirrvv circle{fill:#fff;stroke:#0F1B35;}.css-uirrvv path{fill:#0F1B35;}Play and explore!.css-1uk14v1{border:1px solid #F6F6F6;padding:50px 16px;background:#FFFFFF;box-shadow:0 7px 19px 0 rgba(0,0,0,0.04),0 12px 47px 0 rgba(0,0,0,0.05);border-radius:8px 8px 0 0;max-width:250px;max-height:200px;width:100%;height:100%;}.css-1dogv67{width:100%;margin:0 auto;max-width:90vw;padding:40px 0;}.css-vulh02{text-align:center;margin:3.1rem 0 2.325rem 0;}.css-vulh02 h2{font-family:Inter Light;}.css-vlb8rn{margin:0 auto;max-width:550px;}ALL PROJECTSBelow you can find all my finished projects. Select a technology to see only those projects where it has been used..css-1nn8z2s{margin:0 auto;max-width:700px;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-flex-wrap:wrap;-webkit-flex-wrap:wrap;-ms-flex-wrap:wrap;flex-wrap:wrap;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;-webkit-justify-content:center;justify-content:center;}.css-171gonh{color:black;background:white;}.css-171gonh:hover,.css-171gonh:focus{color:black!important;background:#fafafa!important;}.css-4s818j{padding:8px 15px 8px 12px;box-shadow:0 0 3px rgba(0, 0, 0, 0.1);border:none!important;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;margin:5px;color:black;background:white;}.css-4s818j:focus{outline:none;}.css-4s818j img{margin:0;margin-right:10px;}.css-4s818j:hover,.css-4s818j:focus{color:#222426;background:#fafafa!important;border:none;}.css-4s818j:hover,.css-4s818j:focus{color:black!important;background:#fafafa!important;} React Material UI JavaScript D3.js Firebase Sass Bootstrap CSS HTML Redux TypeScript Node.js MongoDB Jest.css-cy57py{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-flex-wrap:wrap;-webkit-flex-wrap:wrap;-ms-flex-wrap:wrap;flex-wrap:wrap;-webkit-box-pack:center;-webkit-box-pack:center;-ms-flex-pack:center;-webkit-justify-content:center;justify-content:center;}.css-ku4kef{width:320px;background:#fff;box-shadow:0 1px 3px 0 rgba(0, 0, 0, 0.1);border-radius:5px;padding:20px;margin:20px;}@media (max-width: 767px){.css-ku4kef{margin:10px;}}@media (max-width: 320px){.css-ku4kef{margin:10px 0;}}.css-ku4kef img{margin-bottom:0;}.css-ku4kef h1{margin-top:0;font-family:Inter Bold,sans-serif;font-size:26px;}.css-ku4kef .button{font-size:16px;padding:15px 20px;background-image:linear-gradient(-180deg, #8161ff 0%, #5b36d0 100%);text-align:center;border:1px solid transparent;color:white;border-radius:5px;}.css-ku4kef .button:hover{background-image:linear-gradient(-180deg, #4054f4 0%, #3647ce 100%);border:1px solid transparent;}.css-ku4kef h1{font-size:22px;min-height:55px;}@media (max-width: 767px){.css-ku4kef h1{min-height:auto;}}.css-ku4kef img{margin-bottom:0;}Wikipedia Map.css-ym5nqf{position:relative;overflow:hidden;margin-bottom:20px;}.css-ym5nqf .banner{-webkit-transition:-webkit-transform 0.5s ease-out;transition:transform 0.5s ease-out;}.css-ym5nqf .banner:hover{-webkit-transform:scale(1.1);-moz-transform:scale(1.1);-ms-transform:scale(1.1);transform:scale(1.1);}.css-cu64f9{height:110px;overflow:hidden;}.css-cu64f9 p{font-size:16px;color:hsla(0, 0%, 0%, 0.75);margin-top:0.775rem;}React application for exploring Wikipedia articles, displayed on Google Maps..css-7ek9aq{display:block;margin-top:20px;font-size:16px;}.css-7ek9aq:hover{-webkit-text-decoration:underline;text-decoration:underline;}Source code .css-la0w30{margin-top:20px;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-webkit-justify-content:space-between;justify-content:space-between;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}.css-s4iacp{cursor:pointer;padding:6px 12px;color:#573EDE!important;background-color:white;border-radius:5px;font-size:16px;font-family:Inter Semibold;border:1px solid #573EDE;-webkit-transition:all 300ms ease;transition:all 300ms ease;}.css-s4iacp:hover{-webkit-transition:all 300ms ease;transition:all 300ms ease;color:white!important;background-image:linear-gradient(180deg, #4A60DE 0%, #2F43C2 100%)!important;border:1px solid #573EDE;}Project live.css-10zshwb{display:grid;grid-auto-flow:column;grid-gap:5px;}.css-10zshwb img{-webkit-user-events:none;-moz-user-events:none;-ms-user-events:none;user-events:none;}.css-k1zaas{position:relative;}.css-k1zaas span{color:#fff;padding:4px 8px;font-size:0.625rem;font-family:'Roboto','Helvetica','Arial',sans-serif;font-weight:500;line-height:1.4em;border-radius:4px;background-color:rgba(97, 97, 97, 0.9);-webkit-transition:opacity 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;transition:opacity 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;position:absolute;opacity:0;visibility:hidden;margin-left:-15px;-webkit-transform:translateX(-50%);-moz-transform:translateX(-50%);-ms-transform:translateX(-50%);transform:translateX(-50%);}.css-k1zaas:hover span{top:-95%;opacity:0.9;visibility:visible;}ReactMaterial UIJavaScriptURL ShortenerAn URL shortener that allows to reduce long links, just paste the long URL and click Shorten.Source code Project liveNode.jsMongoDBJestTypeScriptRequest Header ParserA microservice that parses a request and returns a JSON object with your IP, preferred language and software.Source code Project liveNode.jsJestTypeScriptTimestamp MicroserviceVery simple timestamp microservice built as an introduction to Node.js.Source code Project liveNode.jsJestTypeScriptHangman GameA simple Hangman Game that uses WordsAPI.Source code Project liveReactSassJestJavaScriptBudget CalculatorLearning TypeScript and practicing writing tests using Jest and React Testing Library.Source code Project liveReactSassJestTypeScriptHabit Tracker AppFinal project for Harvard’s CS50 course. Its core functionality is to track user’s habits.Source code Project liveReactMaterial UIFirebaseJavaScriptPocket Globe AppUse the draggable and zoomable globe to explore countries of the world.Source code Project liveD3.jsReactMaterial UIJavaScriptD3 Treemap DiagramIn this Treemap Diagram you can select one of the datasets available: Kickstarter Pledges, Movies Sales and Video Games Sales.Source code Project liveD3.jsSassJavaScriptD3 Choropleth MapThis Choropleth Map shows the data about Educational Attainment in United States for years 2010-2014.Source code Project liveD3.jsSassJavaScriptD3 Heat MapThis Heat Map shows Monthly Global Land-Surface Temperature for years 1753 - 2015.Source code Project liveD3.jsCSSJavaScriptD3 Scatter PlotThis scatter plot shows the data about the doping in professional bicycle racing.Source code Project liveD3.jsCSSJavaScriptD3 Bar ChartThis Bar Chart shows the Gross Domestic Product in United States for years 1947 - 2015.Source code Project liveD3.jsCSSJavaScriptTask ManagerSimple task managing app. Experimenting with Redux and Material UI.Source code Project liveReactReduxMaterial UIJavaScriptPomodoro ClockPomodoro Clock is a productivity app. It helps you to stay focused and finish your tasks effectively.Source code Project liveReactMaterial UIJavaScriptJavascript CalculatorJavaScript calculator that uses immediate execution for input logic. Additionally I practiced recreating a really cool design from dribbble.Source code Project liveReactSassJavaScriptDrum MachineThis app lets you listen to some Internet Classics and adds something special for the fans of Rick and Morty.Source code Project liveReactMaterial UISassJavaScriptMarkdown PreviewerMarkdown Previewer contains a textarea for markdown input and a preview tab where the converted text appears.Source code Project liveReactSassJavaScriptRandom Quote MachineRandom Quote Machine fetches for you a random, motivational quote with its author. It also changes the theme on every new quote.Source code Project liveReactSassJavaScriptSimple Personal PortfolioA simple and clean portfolio for a web developer. Practice Responsive Web Design.Source code Project liveSassHTMLBootstrapProduct Landing PageProduct Landing Page built for fake Diagon Alley brand. Practice Responsive Web Design.Source code Project liveHTMLCSSTechnical Documentation PageA technical documentation page about Asynchronous JavaScript. Practice Responsive Web Design.Source code Project liveSassHTMLBootstrapGym Contact FormContact form for a fake Mr Muscle Gym brand. Practice Mobile First Design.Source code Project liveHTMLCSSBootstrapBruce Lee Tribute PageTribute Page for Bruce Lee. Practicing Responsive Web Design.Source code Project liveHTMLCSS.css-ozd7xs{-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;}.css-lb51vg{position:relative;background:#231c42;color:white;margin-top:70px;}.css-lb51vg .particles{position:absolute;inset:0px;}.css-1icfbs9{position:relative;z-index:10;padding-top:0;padding-bottom:0;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-webkit-justify-content:space-between;justify-content:space-between;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}@media (max-width: 767px){.css-1icfbs9{padding-top:0;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;}}.css-lr94eu{width:100%;margin:0 auto;max-width:800px;padding:40px 40px;position:relative;z-index:10;padding-top:0;padding-bottom:0;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-webkit-justify-content:space-between;justify-content:space-between;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}@media (max-width: 767px){.css-lr94eu{padding:20px 20px;}}@media (max-width: 767px){.css-lr94eu{padding-top:0;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;}}.css-1e8p7o5{margin-top:-40px;}.css-13c9h76{color:white;max-width:350px;padding:40px;background:#231c42;background-image:linear-gradient( -213deg, #5e31dc 0%, #1e243a 100%),linear-gradient(32deg, rgba(255, 255, 255, 0.25) 33%, rgba(0, 0, 0, 0.25) 100%);border-radius:5px;}.css-3eyhh7{margin-bottom:1.55rem;margin-top:0;color:white;}Send message.css-s7x4gh{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;-webkit-align-items:flex-start;-webkit-box-align:flex-start;-ms-flex-align:flex-start;align-items:flex-start;}.css-s7x4gh label{margin:10px 0;}.css-s7x4gh .field-error{display:block;color:rgba(255, 255, 255, 0.75);font-size:80%;}.css-s7x4gh input,.css-s7x4gh label{width:100%;font-size:16px;}@media (max-width: 767px){.css-s7x4gh{-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;-webkit-align-items:flex-start;-webkit-box-align:flex-start;-ms-flex-align:flex-start;align-items:flex-start;width:auto;}.css-s7x4gh label,.css-s7x4gh input{margin:5px 0 0 0!important;width:100%;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;}}.css-s7x4gh button{margin-top:20px;font-size:16px;}.css-eb0hr8{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;-webkit-align-items:flex-end;-webkit-box-align:flex-end;-ms-flex-align:flex-end;align-items:flex-end;}.css-eb0hr8 div{margin:50px 0;}@media (max-width: 767px){.css-eb0hr8 div{margin:20px 0;}}@media (max-width: 767px){.css-eb0hr8{-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}}.css-eb0hr8 h4{font-family:Inter Light;font-size:14px;color:white;}.css-jsy3m2{color:rgba(255,255,255,0.7);}.css-jsy3m2:hover{color:rgba(255, 255, 255, 1);}.css-1y2kt8k{margin-left:20px;color:rgba(255,255,255,0.7);}.css-1y2kt8k:hover{color:rgba(255, 255, 255, 1);}free-code-campby Maciek Sitkowski