button,button>.icon-wrapper,button>.icon-wrapper>svg{display:flex;align-items:center;justify-content:center}button>.icon-wrapper>svg{height:100%;width:100%}.icon-and-text-btn{gap:10px}.landing-page{display:flex;flex-direction:column;justify-content:center}.page-title{margin-bottom:25px;text-align:start;font-size:25px;line-height:1.2}.feature-cards-container{display:flex;flex-direction:column;gap:25px;margin:55px 0 45px}.feature-card{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:4px;background-color:var(--main-card-background);box-shadow:0 2px 4px var(--shadow-colour)}.feature-card-icon-container,.feature-card-icon-container>img{height:25px;width:25px}.feature-title,.feature-description{text-align:start}.feature-title{font-size:14px;font-weight:700}.feature-description{font-size:12px}.btn-wrapper{display:flex;align-items:center;justify-content:center;width:100%}header{display:flex;align-items:center;justify-content:center;width:100%;padding:12px;background-color:var(--main-card-background);box-shadow:0 2px 2px var(--shadow-colour);z-index:1}.header-content{display:flex;align-items:center;justify-content:space-evenly;width:100%;max-width:var(--max-content-width)}.logo-container{height:40px;width:40px;border-radius:50%}.logo-container>img{height:100%;width:100%}.header-title{font-size:30px;font-weight:700}.theme-btn>.icon-wrapper{height:30px;width:30px}.theme-btn>.icon-wrapper>svg{fill:var(--toggle-theme-btn-colour)}.theme-btn:hover>.icon-wrapper>svg{fill:var(--toggle-theme-hover-btn-colour)}.theme-btn:active>.icon-wrapper>svg{fill:var(--toggle-theme-active-btn-colour)}footer{width:100%;padding:10px;background-color:var(--main-card-background);box-shadow:0 -2px 2px var(--shadow-colour)}.footer-content-wrapper{display:flex;align-items:center;justify-content:center;gap:5px;width:100%}.footer-text{font-size:14px}.footer-image-container>a{display:flex;align-items:center;justify-content:center}.footer-image-container>a,.footer-image-container>a>svg{height:20px;width:20px}.footer-image-container>a>svg{fill:var(--footer-icon-colour)}#root{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:100vh;width:100vw;margin:0 auto;text-align:center;color:var(--main-colour);background-color:var(--main-background)}main{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:25px}main{flex-grow:1;width:100%;max-width:var(--max-content-width)}button{display:flex;align-items:center;justify-content:center;font-size:16px;font-weight:750;border:none;border-radius:4px;outline:none;background:none;cursor:pointer}.default-btn{width:135px;min-height:46px;padding:5px 15px;color:var(--default-btn-colour);background-color:var(--default-btn-background)}.default-btn:hover{background-color:var(--default-btn-hover-background)}.default-btn:active{background-color:var(--default-btn-active-background)}.add-form-section-btn{align-self:self-start;font-size:23px;color:var(--add-form-section-btn-colour)}.add-form-section-btn:hover{color:var(--add-form-section-btn-hover-colour)}.add-form-section-btn:active{color:var(--add-form-section-btn-active-colour)}.add-form-section-btn>.icon-wrapper{height:25px;width:25px}.add-form-section-btn>.icon-wrapper>svg{fill:var(--add-form-section-btn-colour)}.add-form-section-btn:hover>.icon-wrapper>svg{fill:var(--add-form-section-btn-hover-colour)}.add-form-section-btn:active>.icon-wrapper>svg{fill:var(--add-form-section-btn-active-colour)}.form-section{display:grid;column-gap:20px}.deleteable-form-section{margin-bottom:30px;padding-bottom:20px;border-bottom:2px dashed var(--form-deletable-underline)}.form-field-container,.date-field-container{display:grid;grid-template-rows:auto 1fr;justify-items:start}.form-field-container{grid-column:span 2}label{align-self:flex-start;font-size:16px;font-weight:600;color:var(--form-label-colour)}input{height:var(--input-field-height)}textarea{height:calc(3 * var(--input-field-height))}input,textarea{width:100%;padding:8px;color:var(--form-input-colour);border:1px solid var(--form-input-border);border-radius:5px;background-color:var(--form-input-background);-webkit-appearance:none;-moz-appearance:none;appearance:none}input:focus-visible,textarea:focus-visible{border-color:var(--form-input-focus-border);outline:1px solid var(--form-input-focus-outline)}.delete-form-section-btn-wrapper{grid-column:span 2;display:flex;justify-content:flex-end}.del-form-section-btn{border:none;background:none}.del-form-section-btn>.icon-wrapper{height:25px;width:25px}.del-form-section-btn>.icon-wrapper>svg{fill:var(--delete-form-btn-colour)}.del-form-section-btn:hover>.icon-wrapper>svg{fill:var(--delete-form-btn-hover-colour)}.del-form-section-btn:active>.icon-wrapper>svg{fill:var(--delete-form-btn-active-colour)}:root{--input-field-height: 35px}.form{display:grid;grid-template-columns:1fr 1fr;column-gap:20px;row-gap:16px}.form-title{margin:60px 0 35px;border-bottom:2px solid var(--form-title-underline-colour);font-size:30px;font-weight:500;text-align:start;color:var(--form-title-colour)}.preview-page-container{display:flex;flex-direction:column;gap:15px;padding:16px 8px;font-family:Josefin Sans,sans-serif;color:var(--black);background-color:var(--white);box-shadow:0 0 4px var(--shadow-colour)}.page-subsection{display:flex;flex-direction:column;text-align:start;font-size:15px;font-weight:300}.subsection-title{text-align:start;font-size:18px;font-weight:600;padding-bottom:2px;margin-bottom:8px;border-bottom:2px solid var(--grey-200)}.experience-company,.education-school,.experience-position,.education-degree{font-weight:400}.experience-achievements,.education-degree,.experience-position{padding-left:16px}.experience-list,.education-list{display:flex;flex-direction:column;gap:15px}.header-section{display:flex;flex-direction:column;padding:32px 24px 0}.name{font-size:40px;font-weight:600}.profession{font-size:20px;font-weight:500}.contact-about-section{display:flex;flex-direction:column}.contact-info{padding-top:10px;border-top:2px solid var(--black)}.contact-details-list{display:grid;grid-template-columns:repeat(2,1fr);grid-template-rows:repeat(2,1fr)}.contact-detail-item{display:flex;gap:1px}.contact-icon{width:20px;height:20px}.contact-icon>img{width:100%;height:100%}.contact-text{text-align:end}:root{--step-count: 4;--gap-count: calc(var(--step-count) + 1)}.progress-tracker{display:grid;grid-template-rows:auto auto;gap:10px;align-items:center;height:100%;width:100%}.step-indicators{display:grid;grid-template-columns:repeat(4,1fr);align-items:center;justify-items:center;overflow:hidden}.step-marker{display:grid;grid-template-rows:1fr auto;align-items:center;justify-items:center;gap:2px;height:100%;width:100%;overflow:hidden}.step-icon,.step-label{width:99%;max-width:70px}.step-icon{position:relative;display:flex;align-items:center;justify-content:center;aspect-ratio:1 / 1;border-radius:50%}.step-icon>img{position:absolute;object-fit:contain;height:62%;width:auto}.step-icon:before,.step-icon:after{position:absolute;top:50%;height:2px;width:100%;content:""}.step-icon:before{left:-100%}.step-icon:after{right:-100%}.step-label{color:#fff;font-weight:700;font-size:9pt;overflow:hidden}.progress-bar{display:flex;align-items:center;height:25px;width:100%;border-radius:10px/25%;overflow:hidden}.progress{height:100%;background:var(--progress-bar-complete-gradient)}.step-icon,.step-icon:before,.step-icon:after,.step-label,.progress-bar{background-color:var(--tracker-incomplete-background-colour)}.step-active>div,.step-complete>div,.step-active>.step-icon:before,.step-complete>.step-icon:before,.step-complete>.step-icon:after,.step-marker.step-active:last-of-type>.step-icon:after{background-color:var(--tracker-complete-background-colour)}@media screen and (max-width: 500px){.step-icon,.step-label{width:99%;max-width:70px}.step-label{font-size:9pt}.progress-bar{height:25px}}.nav-buttons-wrapper{display:flex;align-items:center;justify-content:space-between;margin-top:45px;width:100%}.back-btn>.icon-wrapper{height:30px;width:30px}.back-btn>.icon-wrapper>svg{fill:var(--back-btn-colour)}.back-btn:hover>.icon-wrapper>svg{fill:var(--back-btn-hover-colour)}.back-btn:active>.icon-wrapper>svg{fill:var(--back-btn-active-colour)}.back-btn{color:var(--back-btn-colour)}.back-btn:hover{color:var(--back-btn-hover-colour)}.back-btn:active{color:var(--back-btn-active-colour)}.content-page{flex-grow:1;width:100%;max-width:var(--max-content-width)}:root{font-family:Inter,system-ui,Avenir,Helvetica,Arial,sans-serif;line-height:1.5;font-weight:400;color-scheme:light dark;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;--max-content-width: 500px;--primary-100: #00d1ff;--primary-200: #00B8E6;--primary-300: #00A7CC;--primary-400: #07B8DF;--moon-colour: #87cefa;--sun-colour: #fdc018;--red-100: #ff0800;--red-200: #9e0000;--grey-100: #FCFCFC;--grey-200: #d9d9d9;--grey-300: #bbbbbb;--grey-400: #A6A6A6;--grey-500: #767676;--grey-600: #777777;--grey-700: #555555;--grey-800: #444444;--grey-900: #333333;--grey-1000: #212121;--black: #000000;--white: #ffffff;--shadow-colour: #00000025}*{box-sizing:border-box;margin:0;padding:0;border:none}body{display:flex;place-items:center;min-width:320px;min-height:100vh;--tracker-complete-background-colour: var(--primary-100);--progress-bar-complete-gradient: linear-gradient(to right, var(--primary-100), var(--primary-400));--form-title-colour: var(--primary-100);--form-title-underline-colour: var(--form-title-colour);--form-input-focus-border: var(--primary-100);--form-input-focus-outline: var(--form-input-focus-border);--footer-link-background: var(--white);--default-btn-colour: var(--white);--default-btn-background: var(--primary-100);--default-btn-hover-background: var(--primary-200);--default-btn-active-background: var(--primary-300);--delete-form-btn-colour: var(--grey-500);--delete-form-btn-hover-colour: var(--red-100);--delete-form-btn-active-colour: var(--red-200);--add-form-section-btn-colour: var(--primary-100);--add-form-section-btn-hover-colour: var(--primary-200);--add-form-section-btn-active-colour: var(--primary-300);--toggle-theme-btn-colour: var(--grey-300);--back-btn-hover-colour: var(--grey-400)}body.light{--main-background: var(--grey-100);--main-card-background: var(--white);--main-colour: var(--black);--tracker-incomplete-background-colour: var(--grey-200);--form-label-colour: var(--grey-500);--form-input-colour: var(--black);--form-input-background: var(--white);--form-input-border: var(--grey-200);--form-deletable-underline: var(--black);--footer-icon-colour: var(--black);--toggle-theme-hover-btn-colour: var(--black);--toggle-theme-active-btn-colour: var(--moon-colour);--back-btn-colour: var(--grey-200);--back-btn-active-colour: var(--black)}body.dark{--main-background: var(--grey-1000);--main-card-background: var(--black);--main-colour: var(--white);--tracker-incomplete-background-colour: var(--grey-700);--form-label-colour: var(--grey-300);--form-input-colour: var(--white);--form-input-background: var(--grey-900);--form-input-border: var(--grey-800);--form-deletable-underline: var(--white);--footer-icon-colour: var(--white);--toggle-theme-hover-btn-colour: var(--white);--toggle-theme-active-btn-colour: var(--sun-colour);--back-btn-colour: var(--grey-600);--back-btn-active-colour: var(--white)}