diff --git a/src/css/styles.css b/src/css/styles.css index 9a1bdc3..791cbc3 100644 --- a/src/css/styles.css +++ b/src/css/styles.css @@ -46,7 +46,7 @@ font-style: italic; /* Italic style */ font-display: swap; } -:root { +body { --primary-colour: #22252c; --accent-colour: #363d48; --secondary-colour: #f22c50; @@ -56,7 +56,6 @@ --error-colour: #d30a2e; --info-colour: #4d8cff; } - body.light-mode { --primary-colour: #f9f9f9; --accent-colour: #f0e9f2; diff --git a/src/css/styles.css.map b/src/css/styles.css.map index 5e2035f..0359337 100644 --- a/src/css/styles.css.map +++ b/src/css/styles.css.map @@ -1 +1 @@ -{"version":3,"sources":["..\\scss\\abstracts\\_fonts.scss","styles.css","..\\scss\\abstracts\\_variables.scss","..\\scss\\base\\_typography.scss","..\\scss\\base\\_reset.scss","..\\scss\\base\\_base.scss","..\\scss\\components\\_primary-button.scss","..\\scss\\components\\_universal-section-style.scss","..\\scss\\components\\_mobile-nav.scss","..\\scss\\abstracts\\_mixins.scss","..\\scss\\components\\_btn-down.scss","..\\scss\\components\\_extended-description.scss","..\\scss\\components\\_colour-mode.scss","..\\scss\\layout\\_header.scss","..\\scss\\layout\\_footer.scss","..\\scss\\layout\\_landing.scss","..\\scss\\layout\\_projects.scss","..\\scss\\layout\\_skills.scss","..\\scss\\layout\\_about.scss","..\\scss\\layout\\_experience.scss","..\\scss\\layout\\_contact.scss"],"names":[],"mappings":"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","file":"styles.css","sourcesContent":["// Fallback for browsers not supporting variable fonts\r\n@supports not (font-variation-settings: normal) {\r\n @font-face {\r\n font-family: \"Unbounded\";\r\n src: url(../assets/fonts/Unbounded/static/Unbounded-Regular.ttf) format(\"truetype\");\r\n font-weight: 400; /* Regular weight */\r\n font-display: swap; /* Ensure font swap is applied */\r\n }\r\n\r\n @font-face {\r\n font-family: \"Unbounded\";\r\n src: url(../assets/fonts/Unbounded/static/Unbounded-Bold.ttf) format(\"truetype\");\r\n font-weight: 700; /* Bold weight */\r\n font-display: swap;\r\n }\r\n\r\n @font-face {\r\n font-family: \"Karla\";\r\n src: url(../assets/fonts/Karla/static/Karla-Regular.ttf) format(\"truetype\");\r\n font-weight: 400; /* Regular weight */\r\n font-display: swap;\r\n }\r\n\r\n @font-face {\r\n font-family: \"Karla\";\r\n src: url(../assets/fonts/Karla/static/Karla-Regular.ttf) format(\"truetype\");\r\n font-weight: 700; /* Bold weight */\r\n font-display: swap;\r\n }\r\n}\r\n\r\n// Variable fonts for browsers that support it\r\n@font-face {\r\n font-family: \"Unbounded\";\r\n src: url(../assets/fonts/Unbounded/Unbounded-VariableFont_wght.ttf) format(\"truetype\");\r\n font-weight: 100 1000; /* Weight range for variable font */\r\n font-stretch: 25% 151%; /* Stretch range if applicable */\r\n font-display: swap;\r\n}\r\n\r\n@font-face {\r\n font-family: \"Karla\";\r\n src: url(../assets/fonts/Karla/Karla-VariableFont_wght.ttf) format(\"truetype\");\r\n font-weight: 100 1000; /* Weight range for variable font */\r\n font-stretch: 25% 151%; /* Stretch range if applicable */\r\n font-display: swap;\r\n}\r\n@font-face {\r\n font-family: \"Karla\";\r\n src: url(../assets/fonts/Karla/Karla-Italic-VariableFont_wght.ttf) format(\"truetype\");\r\n font-weight: 100 1000; /* Weight range for variable font */\r\n font-stretch: 25% 151%; /* Stretch range if applicable */\r\n font-style: italic; /* Italic style */\r\n font-display: swap;\r\n}\r\n","@supports not (font-variation-settings: normal) {\n @font-face {\n font-family: \"Unbounded\";\n src: url(../assets/fonts/Unbounded/static/Unbounded-Regular.ttf) format(\"truetype\");\n font-weight: 400; /* Regular weight */\n font-display: swap; /* Ensure font swap is applied */\n }\n @font-face {\n font-family: \"Unbounded\";\n src: url(../assets/fonts/Unbounded/static/Unbounded-Bold.ttf) format(\"truetype\");\n font-weight: 700; /* Bold weight */\n font-display: swap;\n }\n @font-face {\n font-family: \"Karla\";\n src: url(../assets/fonts/Karla/static/Karla-Regular.ttf) format(\"truetype\");\n font-weight: 400; /* Regular weight */\n font-display: swap;\n }\n @font-face {\n font-family: \"Karla\";\n src: url(../assets/fonts/Karla/static/Karla-Regular.ttf) format(\"truetype\");\n font-weight: 700; /* Bold weight */\n font-display: swap;\n }\n}\n@font-face {\n font-family: \"Unbounded\";\n src: url(../assets/fonts/Unbounded/Unbounded-VariableFont_wght.ttf) format(\"truetype\");\n font-weight: 100 1000; /* Weight range for variable font */\n font-stretch: 25% 151%; /* Stretch range if applicable */\n font-display: swap;\n}\n@font-face {\n font-family: \"Karla\";\n src: url(../assets/fonts/Karla/Karla-VariableFont_wght.ttf) format(\"truetype\");\n font-weight: 100 1000; /* Weight range for variable font */\n font-stretch: 25% 151%; /* Stretch range if applicable */\n font-display: swap;\n}\n@font-face {\n font-family: \"Karla\";\n src: url(../assets/fonts/Karla/Karla-Italic-VariableFont_wght.ttf) format(\"truetype\");\n font-weight: 100 1000; /* Weight range for variable font */\n font-stretch: 25% 151%; /* Stretch range if applicable */\n font-style: italic; /* Italic style */\n font-display: swap;\n}\n:root {\n --primary-colour: #22252c;\n --accent-colour: #363d48;\n --secondary-colour: #f22c50;\n --text-colour: #f0e9f2;\n --success-colour: #55d6c2;\n --warning-colour: #eb5e55;\n --error-colour: #d30a2e;\n --info-colour: #4d8cff;\n}\n\nbody.light-mode {\n --primary-colour: #f9f9f9;\n --accent-colour: #f0e9f2;\n --secondary-colour: #f22c50;\n --text-colour: #22252c;\n --success-colour: #55d6c2;\n --warning-colour: #eb5e55;\n --error-colour: #d30a2e;\n --info-colour: #4d8cff;\n}\nbody.light-mode p,\nbody.light-mode a,\nbody.light-mode li,\nbody.light-mode time,\nbody.light-mode button {\n font-weight: 500;\n}\nbody.light-mode .primary-btn img {\n filter: invert(1);\n}\nbody.light-mode .some-links-wrapper img {\n filter: invert(1);\n}\nbody.light-mode .outer-header-container {\n background-blend-mode: normal;\n}\nbody.light-mode .btn-down-container {\n transform: translate(-80%, -50%);\n}\nbody.light-mode .btn-down-container .btn-down {\n border: 2px solid var(--secondary-colour);\n}\nbody.light-mode .primary-btn {\n border: 2px solid var(--secondary-colour);\n}\nbody.light-mode .skills-container::before {\n background: linear-gradient(to right, rgb(240, 233, 242), rgba(240, 233, 242, 0));\n}\nbody.light-mode .skills-container::after {\n background: linear-gradient(to left, rgb(240, 233, 242), rgba(240, 233, 242, 0));\n}\n@media (width <= 1000px) {\n body.light-mode .btn-down-container {\n transform: translate(-50%, -50%);\n }\n}\n@media (width <= 600px) {\n body.light-mode .btn-down-container {\n transform: translate(-50%, -80%);\n }\n}\n\nh1,\nh2,\nh3,\nh4,\nh5,\nh6,\nol,\nul,\na,\np,\nb,\nsmall,\nbutton,\nspan,\nfigcaption,\ntime {\n color: var(--text-colour);\n line-height: 125%;\n}\n\nh1,\nh2,\nh3,\nh4,\nh5,\nh6 {\n font-family: \"Unbounded\", sans-serif;\n font-weight: 400;\n letter-spacing: 2px;\n}\n\nh1 {\n font-size: 2rem;\n}\n\nh2 {\n font-size: 1.5rem;\n}\n\nh3 {\n font-size: 1.125rem;\n}\n\nol,\nul,\na,\np,\nb,\nbutton,\nspan,\nfigcaption,\ntime {\n font: 400 1.125rem/125% \"Karla\", sans-serif;\n letter-spacing: 1px;\n}\n\nsmall {\n font-family: \"Karla\", sans-serif;\n}\n\ntime {\n font-size: 1rem;\n}\n\n@media (width <= 900px) {\n ol,\n ul,\n a,\n p,\n b,\n button,\n span,\n figcaption,\n time {\n font-size: 1rem;\n }\n h1 {\n font-size: 1.5rem;\n }\n h2 {\n font-size: 1.125rem;\n }\n h3 {\n font-size: 1rem;\n }\n}\n* {\n margin: 0;\n padding: 0;\n box-sizing: border-box;\n}\n\nol,\nul {\n list-style: none;\n}\n\na {\n text-decoration: none;\n}\n\nbutton {\n background: none;\n border: none;\n outline: none;\n cursor: pointer;\n}\n\naddress {\n font-style: normal;\n}\n\nhtml {\n scroll-behavior: smooth;\n}\n\nfooter {\n background-color: var(--accent-colour);\n}\n\n.primary-btn {\n display: flex;\n position: relative;\n align-items: center;\n justify-content: center;\n gap: 10px;\n border: 1px solid var(--secondary-colour);\n padding: 12px 24px;\n font-size: 1.125rem;\n font-weight: 600;\n}\n.primary-btn img {\n height: 1.25rem;\n width: 1.25rem;\n}\n.primary-btn:hover,\n.primary-btn :active {\n transition: all 0.3s ease-in-out;\n color: var(--primary-colour);\n}\n.primary-btn:hover img,\n.primary-btn :active img {\n filter: invert(1);\n}\n\n.primary-btn::before {\n content: \"\";\n position: absolute;\n background-color: var(--secondary-colour);\n color: var(--primary-colour);\n top: 0;\n left: 0;\n width: 100%;\n height: 20%;\n transition: all 0.3s ease-in-out;\n z-index: -1;\n opacity: 0;\n}\n\n.primary-btn:hover::before {\n height: 100%;\n opacity: 1;\n}\n\n.primary-btn:active {\n border: 1px solid var(--text-colour);\n color: var(--text-colour);\n}\n.primary-btn:active img {\n filter: invert(0);\n}\n\n.primary-btn:active::before {\n width: 100%;\n opacity: 0;\n}\n\n@media (width <= 600px) {\n .primary-btn {\n padding: 10px 20px;\n font-size: 1rem;\n }\n}\n.section {\n max-width: 1400px;\n margin: 0 auto;\n padding: 4rem 1rem;\n}\n\n.primary-colour {\n background-color: var(--primary-colour);\n}\n\n.asset-colour {\n background-color: var(--accent-colour);\n}\n\n.spacing-4 {\n margin: 4rem 0 0 0;\n}\n\n.section-heading {\n display: flex;\n flex-direction: column;\n max-width: fit-content;\n position: relative;\n}\n\n.heading-underline {\n display: inline-block;\n border-bottom: 1px solid var(--secondary-colour);\n width: 50%;\n margin-top: 0.5rem;\n}\n\n/* --- hamburger menu --- */\n.hamburger,\n.mobile-nav {\n display: none;\n}\n\n@media (width <= 800px) {\n .hamburger {\n display: block;\n position: relative;\n width: 1.625rem;\n cursor: pointer;\n outline: none;\n border: none;\n }\n .hamburger:focus-visible {\n border: 1px solid var(--text-colour);\n padding: 2px;\n }\n .hamburger-bar,\n .hamburger::after,\n .hamburger::before {\n content: \"\";\n display: block;\n height: 1px;\n width: 100%;\n margin: 6px 0;\n background-color: var(--text-colour);\n transition: 0.3s ease-in-out;\n }\n .hamburger.is-active::after,\n .hamburger.is-active::before {\n background-color: var(--text-colour);\n }\n .hamburger.is-active .hamburger-bar {\n opacity: 0;\n }\n .hamburger.is-active:before {\n transform: rotate(-45deg) translate(-5px, 5px);\n }\n .hamburger.is-active:after {\n transform: rotate(45deg) translate(-5px, -5px);\n }\n .mobile-nav {\n position: fixed;\n display: flex;\n flex-direction: column;\n justify-content: start;\n align-items: center;\n gap: 8rem;\n top: 0;\n left: 100%;\n width: 100%;\n height: 100vh;\n background-color: var(--primary-colour);\n padding-top: 150px;\n z-index: 1000;\n transition: 0.3s ease-in-out;\n }\n .mobile-nav.is-active {\n left: 0;\n }\n .page-link-wrapper {\n flex-direction: column;\n }\n}\n.no-scroll {\n overflow: hidden;\n}\n\n.btn-down {\n display: inline-block;\n padding: 1rem;\n background-color: transparent;\n border: 1px solid var(--secondary-colour);\n border-radius: 50%;\n line-height: 0;\n position: relative;\n}\n.btn-down:hover img,\n.btn-down :active img {\n filter: brightness(0) invert(0);\n}\n\n.btn-down::before {\n content: \"\";\n position: absolute;\n background-color: var(--secondary-colour);\n border-radius: inherit;\n top: 0;\n left: 0;\n width: 100%;\n height: 30%;\n transition: all 0.3s ease-in-out;\n opacity: 0;\n color: var(--primary-colour);\n}\n\n.btn-down:hover::before {\n width: 100%;\n height: 100%;\n opacity: 1;\n}\n\n.btn-down:active {\n border: 1px solid var(--text-colour);\n}\n\n.btn-down:active::before {\n width: 100%;\n opacity: 0;\n}\n\n.description-btn {\n align-self: flex-start;\n font-size: 1rem;\n font-style: italic;\n border-bottom: 1px solid var(--secondary-colour);\n padding: 2px 5px;\n transition: all 0.3s ease-in-out;\n}\n.description-btn:hover {\n filter: opacity(0.7);\n}\n.description-btn:active {\n border-bottom: 1px solid var(--text-colour);\n}\n\n.description-wrapper {\n display: flex;\n flex-direction: column;\n gap: 2rem;\n position: relative;\n top: -100%;\n transition: all 0.3s ease-in-out;\n height: 0;\n opacity: 0;\n visibility: hidden;\n margin-bottom: -2rem;\n}\n.description-wrapper ul {\n list-style: disc;\n padding-left: 1.125rem;\n}\n.description-wrapper.is-active {\n top: 0;\n height: 100%;\n opacity: 1;\n visibility: visible;\n margin-bottom: 0;\n}\n\n.tech-wrapper {\n display: flex;\n align-items: center;\n flex-wrap: wrap;\n gap: 0.5rem;\n color: var(--text-colour);\n}\n.tech-wrapper img {\n width: 3rem;\n}\n\n.project-description-underline {\n display: inline-block;\n border-bottom: 1px solid var(--accent-colour);\n width: 50%;\n align-self: start;\n}\n\n.colour-mode-wrapper {\n display: flex;\n align-items: center;\n justify-content: center;\n border: 2px solid var(--text-colour);\n border-radius: 20px;\n padding: 2px 5px;\n}\n.colour-mode-wrapper .colour-mode-btn {\n display: block;\n line-height: 0;\n position: relative;\n opacity: 0;\n visibility: hidden;\n transition: all 0.3s ease-in-out;\n pointer-events: none;\n}\n.colour-mode-wrapper .colour-mode-btn.is-active {\n opacity: 1;\n visibility: visible;\n pointer-events: all;\n top: 0;\n}\n.colour-mode-wrapper .colour-mode-btn:focus-visible {\n border: 1px solid var(--text-colour);\n padding: 2px;\n}\n.colour-mode-wrapper .colour-mode-btn .light-mode-icon,\n.colour-mode-wrapper .colour-mode-btn .dark-mode-icon {\n width: 20px;\n height: 20px;\n pointer-events: none;\n}\n.colour-mode-wrapper p {\n font-size: 0.75rem;\n pointer-events: none;\n}\n\n.colour-mode-btn:hover img {\n filter: opacity(0.7);\n}\n.colour-mode-btn:active img {\n transform: scale(1.2);\n}\n\n@media (width <= 800px) {\n .colour-mode-wrapper p {\n display: none;\n }\n .light-mode-icon,\n .dark-mode-icon {\n width: 27px;\n height: 27px;\n }\n}\n.header-bar {\n display: flex;\n justify-content: space-between;\n align-items: center;\n padding: 1rem 1rem;\n position: fixed;\n width: 100%;\n left: 0;\n right: 0;\n top: 0;\n max-width: 1400px;\n margin: 0 auto;\n transition: all 0.3s ease-in-out;\n}\n\n.header-bar-container {\n position: fixed;\n width: 100%;\n left: 0;\n transition: all 0.3s ease-in-out;\n z-index: 9999;\n}\n.header-bar-container.scroll-up {\n background-color: var(--primary-colour);\n filter: drop-shadow(0 1px 3px var(--secondary-colour));\n opacity: 0.9;\n padding: 1.5rem;\n}\n.header-bar-container.scroll-down {\n opacity: 0;\n pointer-events: none;\n}\n\n.logo-container {\n color: var(--text-colour);\n line-height: 0;\n}\n\n.links-container {\n display: flex;\n align-items: center;\n justify-content: space-between;\n}\n\n.page-link-wrapper {\n display: flex;\n align-items: center;\n gap: 2rem;\n}\n\n.main-link {\n position: relative;\n padding: 5px 0.5rem;\n}\n\n.main-link::before {\n content: \"\";\n position: absolute;\n bottom: 0;\n left: 0;\n width: 0%;\n height: 1px;\n background-color: var(--secondary-colour);\n color: var(--text-colour);\n transition: width 0.3s ease-in-out;\n}\n\n.main-link:hover::before {\n width: 100%;\n}\n\n.main-link:active::before {\n background-color: var(--text-colour);\n}\n\n.page-link-wrapper a {\n font-size: 1.25rem;\n color: var(--text-colour);\n}\n\n.some-links-wrapper {\n display: flex;\n align-items: center;\n gap: 1rem;\n}\n.some-links-wrapper img {\n display: block;\n height: 20px;\n width: 20px;\n}\n\n.some-links-wrapper a:hover,\n.some-links-wrapper a:active {\n filter: opacity(0.7);\n}\n\n.utility-btn-wrapper {\n display: flex;\n align-items: center;\n gap: 2rem;\n}\n\n@media (width <= 1000px) {\n .header-bar-container nav:last-of-type {\n display: none;\n }\n}\n@media (width <= 900px) {\n .page-link-wrapper .main-link {\n font-size: 1rem;\n }\n}\n@media (width <= 800px) {\n .header-bar-container nav {\n display: none;\n }\n}\n.inner-footer {\n max-width: 1400px;\n margin: 0 auto;\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n gap: 3rem;\n padding: 2rem 1rem 1rem;\n}\n\n.footer-main-nav {\n display: flex;\n flex-wrap: wrap;\n justify-content: center;\n align-items: center;\n gap: 2rem;\n}\n\n.some-container {\n display: flex;\n justify-content: center;\n align-items: center;\n gap: 1rem;\n}\n\n.footer-logo-container {\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n gap: 0.5rem;\n color: var(--text-colour);\n}\n.footer-logo-container a {\n line-height: 0;\n}\n\n.copyright {\n border-top: 1px solid var(--text-colour);\n width: 80vw;\n max-width: 1400px;\n margin: 0 auto;\n padding: 1rem 0 1rem;\n font-style: italic;\n text-align: center;\n font-size: 0.8rem;\n}\n\n@media (width <= 600px) {\n .inner-footer {\n gap: 2rem;\n }\n .footer-main-nav {\n flex-direction: column;\n gap: 1rem;\n }\n}\n.landing-section {\n background-color: var(--primary-colour);\n}\n\n.outer-header-container {\n height: 100vh;\n width: 100%;\n max-width: 1400px;\n margin: 0 auto;\n padding: 0 1rem;\n background: no-repeat url(\"../assets/images/profile1.webp\") 100% center/60% auto;\n background-color: var(--primary-colour);\n background-blend-mode: luminosity;\n overflow: hidden;\n position: relative;\n z-index: 1;\n}\n\n.intro-container {\n display: flex;\n flex-direction: column;\n justify-content: center;\n text-align: left;\n gap: 2rem;\n max-width: 90ch;\n position: relative;\n top: 50%;\n transform: translate(0, -50%);\n}\n\n.name-container {\n display: flex;\n align-items: center;\n justify-self: center;\n color: var(--text-colour);\n margin: 0 0 0.5rem 0;\n}\n.name-container h1 {\n font-size: 3rem;\n display: inline-flex;\n align-items: baseline;\n line-height: 0;\n}\n.name-container img {\n display: inline-block;\n position: relative;\n bottom: -10px;\n width: 5rem;\n height: auto;\n margin-right: -22px;\n}\n.name-container .intro-text {\n font-size: 1.5rem;\n}\n\n.intro-btn-container {\n display: flex;\n justify-content: left;\n align-items: center;\n gap: 2rem;\n position: relative;\n z-index: 1;\n}\n\n.btn-down-container {\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n gap: 1rem;\n position: absolute;\n bottom: 0;\n left: 50%;\n transform: translate(-50%, -50%);\n}\n\n@media (width <= 1120px) {\n .intro-container .name-container h1 {\n font-size: 2.5rem;\n }\n .intro-container .intro-text {\n max-width: 50ch;\n }\n}\n@media (width <= 800px) {\n .outer-header-container {\n background-position: 120% 60%;\n }\n .intro-container .name-container h1 {\n font-size: 2rem;\n }\n .intro-container .name-container img {\n width: 4rem;\n margin-right: -16px;\n }\n}\n@media (width <= 600px) {\n .outer-header-container {\n background-position: 120% 100%;\n background-size: 60%;\n background: none;\n }\n .intro-container {\n align-items: center;\n text-align: center;\n gap: 2rem;\n transform: translate(0, -70%);\n }\n .intro-container:last-child {\n padding-top: 1rem;\n }\n .intro-btn-container {\n flex-direction: column;\n gap: 1rem;\n }\n .btn-down-container {\n text-align: center;\n transform: translate(-50%, -80%);\n gap: 0.5rem;\n }\n}\n@media (width <= 400px) {\n .intro-container .name-container h1 {\n font-size: 1.5rem;\n }\n}\n@media (width <= 320px) {\n .intro-container .name-container h1 {\n font-size: 1.25rem;\n }\n .btn-down-container p {\n font-size: 0.875rem;\n }\n}\n.project-wrapper {\n display: flex;\n flex-direction: column;\n align-items: start;\n justify-content: center;\n padding: 4rem 0 0;\n}\n\n.outer-container {\n display: grid;\n grid-template-columns: 1fr 1fr;\n align-items: center;\n justify-items: left;\n position: relative;\n}\n\n.text-outer-wrapper {\n grid-column: 1/2;\n padding: 0 0.5rem 0 0;\n display: flex;\n flex-direction: column;\n gap: 2rem;\n max-width: 65ch;\n}\n\n.video-wrapper {\n grid-column: 2/2;\n color: var(--text-colour);\n}\n.video-wrapper video {\n width: 100%;\n height: auto;\n min-width: 450px;\n}\n\n.text-inner-wrapper {\n display: flex;\n flex-direction: column;\n gap: 0.5rem;\n}\n\n.project-btn-container {\n display: flex;\n align-items: flex-start;\n gap: 2rem;\n z-index: 0;\n}\n\n.project-underline {\n display: inline-block;\n border-bottom: 1px solid var(--accent-colour);\n width: 100%;\n margin-top: 4rem;\n}\n\n@media (width <= 1000px) {\n .project-wrapper {\n align-items: center;\n }\n .outer-container {\n display: flex;\n flex-direction: column-reverse;\n gap: 2rem;\n }\n .text-outer-wrapper {\n padding: 0;\n }\n .video-wrapper video {\n max-width: 65ch;\n min-width: auto;\n }\n}\n@media (width <= 600px) {\n .outer-container {\n align-items: center;\n gap: 1rem;\n }\n .project-btn-container {\n flex-direction: column;\n align-items: center;\n gap: 1rem;\n }\n}\n@keyframes slide {\n from {\n transform: translateX(0);\n }\n to {\n transform: translateX(-100%);\n }\n}\n.skills-container {\n overflow: hidden;\n white-space: nowrap;\n position: relative;\n}\n\n.skills-container::before {\n content: \"\";\n display: block;\n position: absolute;\n width: 50px;\n height: 100%;\n top: 0;\n left: 0;\n z-index: 2;\n background: linear-gradient(to right, rgb(54, 61, 72), rgba(54, 61, 72, 0));\n}\n\n.skills-container::after {\n content: \"\";\n display: block;\n position: absolute;\n width: 50px;\n height: 100%;\n top: 0;\n right: 0;\n z-index: 2;\n background: linear-gradient(to left, rgb(54, 61, 72), rgba(54, 61, 72, 0));\n}\n\n.skill-slider {\n animation: slide 20s infinite linear;\n display: inline-flex;\n}\n\n.skill-wrapper {\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n gap: 1rem;\n width: 135px;\n height: 135px;\n background: var(--primary-colour);\n border-radius: 5px;\n margin: 0 2rem;\n color: var(--text-colour);\n}\n.skill-wrapper img {\n height: 50px;\n width: 50px;\n}\n\n.skills-container:hover .skill-slider {\n animation-play-state: paused;\n}\n\n@media (width <= 600px) {\n .skill-wrapper {\n gap: 0.5rem;\n width: 100px;\n height: 100px;\n }\n .skill-wrapper img {\n height: 30px;\n width: 30px;\n }\n}\n.about-container {\n display: flex;\n flex-direction: column;\n gap: 2rem;\n width: 100%;\n}\n\n.full-wrapper {\n display: flex;\n justify-content: space-around;\n align-items: center;\n flex-wrap: wrap;\n}\n\n.main-wrapper {\n display: flex;\n flex-direction: column;\n gap: 2rem;\n max-width: 65ch;\n}\n\n.secondary-wrapper {\n display: flex;\n flex-direction: column;\n gap: 0.5rem;\n max-width: 20vw;\n min-width: 250px;\n color: var(--text-colour);\n}\n.secondary-wrapper figcaption {\n font-size: 1rem;\n color: var(--text-colour);\n}\n\n@media (width <= 800px) {\n .full-wrapper {\n flex-direction: column;\n gap: 2rem;\n }\n .secondary-wrapper {\n align-items: center;\n width: 100%;\n max-width: 65ch;\n }\n .secondary-wrapper img {\n max-width: 200px;\n }\n .secondary-wrapper figcaption {\n max-width: 65ch;\n }\n}\n@media (width <= 600px) {\n .full-wrapper {\n text-align: center;\n }\n .secondary-wrapper figcaption {\n text-align: center;\n }\n}\n.qualification-container {\n display: flex;\n flex-direction: column;\n padding-bottom: 4rem;\n}\n.qualification-container h2 {\n margin: 0 0 1rem 0;\n}\n\n.qualification-wrapper {\n display: flex;\n justify-content: space-around;\n align-items: center;\n gap: 2rem;\n background-color: var(--primary-colour);\n padding: 2rem 2rem 0;\n}\n\n.qualification-wrapper:last-child {\n padding: 2rem;\n}\n\n.qualification-articles {\n display: flex;\n flex-direction: column;\n gap: 1rem;\n max-width: 65ch;\n}\n.qualification-articles ul {\n list-style: disc;\n padding-left: 2rem;\n}\n.qualification-articles ul li {\n font-size: 1rem;\n}\n\n.experience-outer-container {\n display: flex;\n justify-content: space-between;\n align-items: stretch;\n gap: 2rem;\n}\n\n.left,\n.right {\n flex: 1;\n}\n\n.right h2 {\n text-align: right;\n}\n\n.center {\n display: flex;\n justify-content: center;\n align-items: center;\n}\n\n.vertical-line {\n width: 1px;\n height: 90%;\n background-color: var(--secondary-colour);\n filter: opacity(0.7);\n}\n\n.card-container {\n display: flex;\n flex-direction: column;\n gap: 1rem;\n padding: 2rem;\n background-color: var(--primary-colour);\n margin-top: 2rem;\n}\n.card-container .experience-date {\n display: flex;\n align-items: center;\n gap: 0.5rem;\n}\n.card-container .experience-date p:first-of-type {\n font-style: normal;\n font-size: 1rem;\n}\n.card-container p:last-of-type {\n font-style: italic;\n max-width: 65ch;\n}\n.card-container ul {\n list-style: disc;\n padding-left: 2rem;\n font-weight: 300;\n}\n.card-container ul li {\n font-size: 1rem;\n max-width: 65ch;\n}\n.card-container ul li a {\n font-size: 1rem;\n}\n\n.card-container:first-of-type {\n margin-top: 1rem;\n}\n\n.optional-heading {\n margin: 2rem 0 0;\n}\n\n#interests {\n font-style: normal;\n font-size: 1rem;\n}\n\n.experience-btn-container {\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n gap: 1rem;\n margin-top: 4rem;\n position: relative;\n z-index: 0;\n}\n.experience-btn-container p {\n font-size: 1rem;\n}\n\n.btn-wrapper {\n display: flex;\n justify-content: center;\n flex-wrap: wrap;\n gap: 2rem;\n}\n\n@media (width <= 800px) {\n .qualification-wrapper {\n flex-direction: column;\n }\n .experience-outer-container {\n flex-direction: column-reverse;\n }\n .left,\n .right {\n text-align: left;\n }\n .left h2,\n .right h2 {\n text-align: left;\n }\n .vertical-line {\n display: none;\n }\n .card-container {\n padding: 1rem;\n }\n}\n@media (width <= 600px) {\n .qualification-container {\n text-align: center;\n }\n .qualification-container h2 {\n text-align: center;\n }\n .qualification-container ul {\n list-style: none;\n }\n .experience-outer-container h2 {\n text-align: center;\n }\n .experience-outer-container ul {\n list-style: none;\n }\n .card-container {\n padding: 1rem;\n text-align: center;\n align-items: center;\n }\n}\n.contact-container {\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n text-align: center;\n gap: 2rem;\n max-width: 65ch;\n margin: 0 auto 4rem;\n}\n\n.contact-card-container:first-of-type {\n margin-top: 2rem;\n}\n\n.contact-card-container {\n display: flex;\n justify-content: space-around;\n align-items: center;\n width: 100%;\n max-width: inherit;\n background-color: var(--accent-colour);\n}\n\n.contact-card-wrapper {\n display: flex;\n flex-direction: column;\n align-items: start;\n text-align: left;\n gap: 1rem;\n padding: 2rem;\n}\n.contact-card-wrapper a:hover,\n.contact-card-wrapper a :active {\n filter: opacity(0.7);\n}\n\n.contact-inner-wrapper {\n display: flex;\n align-items: center;\n gap: 0.5rem;\n color: var(--text-colour);\n}\n.contact-inner-wrapper img {\n width: 20px;\n height: 20px;\n}\n\n.contact-some-container {\n display: flex;\n gap: 1rem;\n padding: 2rem;\n}\n\n.contact-some-link {\n display: flex;\n flex-direction: column;\n align-items: center;\n gap: 0.5rem;\n padding: 0.5rem;\n}\n.contact-some-link p {\n font-size: 0.75rem;\n}\n.contact-some-link:hover,\n.contact-some-link :active {\n filter: opacity(0.7);\n}\n\n@media (width <= 500px) {\n .contact-container {\n margin: 0;\n }\n .contact-card-container {\n flex-direction: column;\n }\n .contact-card-container:first-of-type {\n margin-top: 0;\n }\n .contact-card-wrapper {\n align-items: center;\n text-align: center;\n gap: 0.5rem;\n padding: 1rem 2rem;\n }\n}\n@media (width <= 400px) {\n .some-links-wrapper {\n flex-wrap: wrap;\n }\n .contact-some-link p {\n display: none;\n }\n}",":root {\r\n // Dark mode colours\r\n --primary-colour: #22252c;\r\n --accent-colour: #363d48;\r\n --secondary-colour: #f22c50;\r\n --text-colour: #f0e9f2;\r\n --success-colour: #55d6c2;\r\n --warning-colour: #eb5e55;\r\n --error-colour: #d30a2e;\r\n --info-colour: #4d8cff;\r\n}\r\n\r\nbody.light-mode {\r\n // Light mode colours and styling\r\n --primary-colour: #f9f9f9;\r\n --accent-colour: #f0e9f2;\r\n --secondary-colour: #f22c50;\r\n --text-colour: #22252c;\r\n --success-colour: #55d6c2;\r\n --warning-colour: #eb5e55;\r\n --error-colour: #d30a2e;\r\n --info-colour: #4d8cff;\r\n\r\n p,\r\n a,\r\n li,\r\n time,\r\n button {\r\n font-weight: 500;\r\n }\r\n\r\n .primary-btn img {\r\n filter: invert(1);\r\n }\r\n .some-links-wrapper img {\r\n filter: invert(1);\r\n }\r\n\r\n .outer-header-container {\r\n background-blend-mode: normal;\r\n }\r\n\r\n .btn-down-container {\r\n transform: translate(-80%, -50%);\r\n\r\n .btn-down {\r\n border: 2px solid var(--secondary-colour);\r\n }\r\n }\r\n\r\n .primary-btn {\r\n border: 2px solid var(--secondary-colour);\r\n }\r\n\r\n .skills-container::before {\r\n background: linear-gradient(to right, rgba(240, 233, 242, 1), rgba(240, 233, 242, 0));\r\n }\r\n .skills-container::after {\r\n background: linear-gradient(to left, rgba(240, 233, 242, 1), rgba(240, 233, 242, 0));\r\n }\r\n\r\n @media (width <= 1000px) {\r\n .btn-down-container {\r\n transform: translate(-50%, -50%);\r\n }\r\n }\r\n @media (width <= 600px) {\r\n .btn-down-container {\r\n transform: translate(-50%, -80%);\r\n }\r\n }\r\n}\r\n\r\n// general styles\r\n$main-border: 1px solid var(--secondary-colour);\r\n$border-radius: 5px;\r\n$max-width: 1400px;\r\n$max-characters-width: 65ch;\r\n$transition: 0.3s ease-in-out;\r\n$opacity: 0.7;\r\n","@use \"../abstracts/fonts\";\r\n@use \"../abstracts/variables\";\r\n\r\n// Default font colour\r\nh1,\r\nh2,\r\nh3,\r\nh4,\r\nh5,\r\nh6,\r\nol,\r\nul,\r\na,\r\np,\r\nb,\r\nsmall,\r\nbutton,\r\nspan,\r\nfigcaption,\r\ntime {\r\n color: var(--text-colour);\r\n line-height: 125%;\r\n}\r\n\r\n// Default font styling for headlines\r\nh1,\r\nh2,\r\nh3,\r\nh4,\r\nh5,\r\nh6 {\r\n font-family: \"Unbounded\", sans-serif;\r\n font-weight: 400;\r\n letter-spacing: 2px;\r\n}\r\n\r\nh1 {\r\n font-size: 2rem;\r\n}\r\nh2 {\r\n font-size: 1.5rem;\r\n}\r\nh3 {\r\n font-size: 1.125rem;\r\n}\r\n\r\n// Default font styling for lists, links, paragraphs, buttons and spans\r\nol,\r\nul,\r\na,\r\np,\r\nb,\r\nbutton,\r\nspan,\r\nfigcaption,\r\ntime {\r\n font: 400 1.125rem/125% \"Karla\", sans-serif;\r\n letter-spacing: 1px;\r\n}\r\n\r\np,\r\nb,\r\nfigcaption {\r\n // font-weight: 300;\r\n}\r\n\r\nsmall {\r\n font-family: \"Karla\", sans-serif;\r\n}\r\n\r\ntime {\r\n font-size: 1rem;\r\n}\r\n\r\n@media (width <= 900px) {\r\n ol,\r\n ul,\r\n a,\r\n p,\r\n b,\r\n button,\r\n span,\r\n figcaption,\r\n time {\r\n font-size: 1rem;\r\n }\r\n\r\n h1 {\r\n font-size: 1.5rem;\r\n }\r\n h2 {\r\n font-size: 1.125rem;\r\n }\r\n h3 {\r\n font-size: 1rem;\r\n }\r\n}\r\n","// ----------------------------------\r\n// Default resets\r\n// ----------------------------------\r\n* {\r\n margin: 0;\r\n padding: 0;\r\n box-sizing: border-box;\r\n}\r\n\r\nol,\r\nul {\r\n list-style: none;\r\n}\r\n\r\na {\r\n text-decoration: none;\r\n}\r\n\r\nbutton {\r\n background: none;\r\n border: none;\r\n outline: none;\r\n cursor: pointer;\r\n}\r\n\r\naddress {\r\n font-style: normal;\r\n}\r\n\r\n","@use \"../abstracts/variables\";\r\n\r\n// ----------------------------------\r\n// Base element styling\r\n// ----------------------------------\r\nhtml {\r\n scroll-behavior: smooth;\r\n}\r\n\r\nfooter {\r\n background-color: var(--accent-colour);\r\n}\r\n","@use \"../abstracts/variables\";\r\n@use \"../base/reset\";\r\n\r\n.primary-btn {\r\n display: flex;\r\n position: relative;\r\n align-items: center;\r\n justify-content: center;\r\n gap: 10px;\r\n border: variables.$main-border;\r\n padding: 12px 24px;\r\n font-size: 1.125rem;\r\n font-weight: 600;\r\n\r\n img {\r\n height: 1.25rem;\r\n width: 1.25rem;\r\n }\r\n\r\n &:hover,\r\n :active {\r\n transition: all variables.$transition;\r\n color: var(--primary-colour);\r\n img {\r\n filter: invert(1);\r\n }\r\n }\r\n}\r\n\r\n// Button hover effect\r\n.primary-btn::before {\r\n content: \"\";\r\n position: absolute;\r\n background-color: var(--secondary-colour);\r\n color: var(--primary-colour);\r\n top: 0;\r\n left: 0;\r\n width: 100%;\r\n height: 20%;\r\n transition: all variables.$transition;\r\n z-index: -1;\r\n opacity: 0;\r\n}\r\n\r\n.primary-btn:hover::before {\r\n height: 100%;\r\n opacity: 1;\r\n}\r\n\r\n// button active effect\r\n.primary-btn:active {\r\n border: 1px solid var(--text-colour);\r\n color: var(--text-colour);\r\n\r\n img {\r\n filter: invert(0);\r\n }\r\n}\r\n\r\n.primary-btn:active::before {\r\n // removes the hover effect\r\n width: 100%;\r\n opacity: 0;\r\n}\r\n\r\n@media (width <= 600px) {\r\n .primary-btn {\r\n padding: 10px 20px;\r\n font-size: 1rem;\r\n }\r\n}\r\n","@use \"../abstracts/variables\";\r\n// ----------------------------------\r\n// Universal section styling\r\n// ----------------------------------\r\n.section {\r\n max-width: variables.$max-width;\r\n margin: 0 auto;\r\n padding: 4rem 1rem;\r\n}\r\n\r\n// Used inside .section-wrapper for changing the background colour of the sections.\r\n.primary-colour {\r\n background-color: var(--primary-colour);\r\n}\r\n.asset-colour {\r\n background-color: var(--accent-colour);\r\n}\r\n\r\n// Spacing used in the sections\r\n.spacing-4 {\r\n margin: 4rem 0 0 0;\r\n}\r\n\r\n.section-heading {\r\n display: flex;\r\n flex-direction: column;\r\n max-width: fit-content;\r\n position: relative;\r\n}\r\n\r\n.heading-underline {\r\n display: inline-block;\r\n border-bottom: variables.$main-border;\r\n width: 50%;\r\n margin-top: 0.5rem;\r\n}\r\n","@use \"../abstracts/variables\";\r\n@use \"../abstracts/mixins\";\r\n\r\n/* --- hamburger menu --- */\r\n.hamburger,\r\n.mobile-nav {\r\n display: none;\r\n}\r\n\r\n@media (width <= 800px) {\r\n .hamburger {\r\n display: block;\r\n position: relative;\r\n width: 1.625rem;\r\n cursor: pointer;\r\n outline: none;\r\n border: none;\r\n &:focus-visible {\r\n @include mixins.focus-styles;\r\n }\r\n }\r\n\r\n .hamburger-bar,\r\n .hamburger::after,\r\n .hamburger::before {\r\n content: \"\";\r\n display: block;\r\n height: 1px;\r\n width: 100%;\r\n margin: 6px 0;\r\n background-color: var(--text-colour);\r\n transition: variables.$transition;\r\n }\r\n\r\n .hamburger.is-active::after,\r\n .hamburger.is-active::before {\r\n background-color: var(--text-colour);\r\n }\r\n\r\n .hamburger.is-active .hamburger-bar {\r\n opacity: 0;\r\n }\r\n .hamburger.is-active:before {\r\n transform: rotate(-45deg) translate(-5px, 5px);\r\n }\r\n\r\n .hamburger.is-active:after {\r\n transform: rotate(45deg) translate(-5px, -5px);\r\n }\r\n\r\n .mobile-nav {\r\n position: fixed;\r\n display: flex;\r\n flex-direction: column;\r\n justify-content: start;\r\n align-items: center;\r\n gap: 8rem;\r\n top: 0;\r\n left: 100%;\r\n width: 100%;\r\n height: 100vh;\r\n background-color: var(--primary-colour);\r\n padding-top: 150px;\r\n z-index: 1000;\r\n transition: variables.$transition;\r\n }\r\n\r\n .mobile-nav.is-active {\r\n left: 0;\r\n }\r\n\r\n .page-link-wrapper {\r\n flex-direction: column;\r\n }\r\n}\r\n\r\n// to not being able to scroll while mobile nav is displaying\r\n.no-scroll {\r\n overflow: hidden;\r\n}\r\n","@use \"./variables\";\r\n\r\n// Focus state style\r\n@mixin focus-styles {\r\n border: 1px solid var(--text-colour);\r\n padding: 2px;\r\n}\r\n","@use \"../abstracts/variables\";\r\n\r\n.btn-down {\r\n display: inline-block;\r\n padding: 1rem;\r\n background-color: transparent;\r\n border: variables.$main-border;\r\n border-radius: 50%;\r\n line-height: 0;\r\n position: relative;\r\n &:hover,\r\n :active {\r\n img {\r\n filter: brightness(0) invert(0); // change icon colour when hovered\r\n }\r\n }\r\n}\r\n\r\n.btn-down::before {\r\n content: \"\";\r\n position: absolute;\r\n background-color: var(--secondary-colour);\r\n border-radius: inherit;\r\n top: 0;\r\n left: 0;\r\n width: 100%;\r\n height: 30%;\r\n transition: all variables.$transition;\r\n opacity: 0;\r\n color: var(--primary-colour);\r\n}\r\n\r\n.btn-down:hover::before {\r\n width: 100%;\r\n height: 100%;\r\n opacity: 1;\r\n}\r\n\r\n// button active effect\r\n.btn-down:active {\r\n border: 1px solid var(--text-colour);\r\n}\r\n\r\n.btn-down:active::before {\r\n // removes the background colour\r\n width: 100%;\r\n opacity: 0;\r\n}\r\n","@use \"../abstracts/variables\";\r\n\r\n.description-btn {\r\n align-self: flex-start;\r\n font-size: 1rem;\r\n font-style: italic;\r\n border-bottom: variables.$main-border;\r\n padding: 2px 5px;\r\n transition: all variables.$transition;\r\n\r\n &:hover {\r\n filter: opacity(variables.$opacity);\r\n }\r\n &:active {\r\n border-bottom: 1px solid var(--text-colour);\r\n }\r\n}\r\n\r\n.description-wrapper {\r\n display: flex;\r\n flex-direction: column;\r\n gap: 2rem;\r\n //transition effects\r\n position: relative;\r\n top: -100%;\r\n transition: all variables.$transition;\r\n height: 0;\r\n opacity: 0;\r\n visibility: hidden;\r\n margin-bottom: -2rem;\r\n\r\n ul {\r\n list-style: disc;\r\n padding-left: 1.125rem;\r\n }\r\n\r\n // displaying content through JS\r\n &.is-active {\r\n top: 0;\r\n height: 100%;\r\n opacity: 1;\r\n visibility: visible;\r\n margin-bottom: 0;\r\n }\r\n}\r\n\r\n.tech-wrapper {\r\n display: flex;\r\n align-items: center;\r\n flex-wrap: wrap;\r\n gap: 0.5rem;\r\n color: var(--text-colour);\r\n\r\n img {\r\n width: 3rem;\r\n }\r\n}\r\n\r\n.project-description-underline {\r\n display: inline-block;\r\n border-bottom: 1px solid var(--accent-colour);\r\n width: 50%;\r\n align-self: start;\r\n}\r\n","@use \"../abstracts/variables\";\r\n@use \"../abstracts/mixins\";\r\n// ----------------------------------\r\n// Colour mode elements\r\n// ----------------------------------\r\n.colour-mode-wrapper {\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n border: 2px solid var(--text-colour);\r\n border-radius: 20px;\r\n padding: 2px 5px;\r\n\r\n .colour-mode-btn {\r\n display: block;\r\n line-height: 0;\r\n // transition effect\r\n position: relative;\r\n opacity: 0;\r\n visibility: hidden;\r\n transition: all variables.$transition;\r\n pointer-events: none; // To target only the button element in the event listener\r\n\r\n &.is-active {\r\n opacity: 1;\r\n visibility: visible;\r\n pointer-events: all; // To target only the button element in the event listener\r\n top: 0;\r\n }\r\n\r\n &:focus-visible {\r\n @include mixins.focus-styles;\r\n }\r\n\r\n .light-mode-icon,\r\n .dark-mode-icon {\r\n width: 20px;\r\n height: 20px;\r\n pointer-events: none; // To target only the button element in the event listener\r\n }\r\n }\r\n\r\n p {\r\n font-size: 0.75rem;\r\n pointer-events: none; // To target only the button element in the event listener\r\n }\r\n}\r\n\r\n.colour-mode-btn {\r\n &:hover {\r\n img {\r\n filter: opacity(variables.$opacity);\r\n }\r\n }\r\n &:active {\r\n img {\r\n transform: scale(1.2);\r\n }\r\n }\r\n}\r\n\r\n// ---------- Media queries --------\r\n// ---------------------------------\r\n@media (width <= 800px) {\r\n .colour-mode-wrapper p {\r\n display: none;\r\n }\r\n .light-mode-icon,\r\n .dark-mode-icon {\r\n width: 27px;\r\n height: 27px;\r\n }\r\n}\r\n","@use \"../abstracts/variables\";\r\n@use \"../abstracts/mixins\";\r\n// ----------------------------------\r\n// header / nav bar\r\n// ----------------------------------\r\n.header-bar {\r\n display: flex;\r\n justify-content: space-between;\r\n align-items: center;\r\n padding: 1rem 1rem;\r\n position: fixed;\r\n width: 100%;\r\n left: 0;\r\n right: 0;\r\n top: 0;\r\n max-width: variables.$max-width;\r\n margin: 0 auto;\r\n transition: all variables.$transition;\r\n}\r\n\r\n.header-bar-container {\r\n position: fixed;\r\n width: 100%;\r\n left: 0;\r\n transition: all variables.$transition;\r\n z-index: 9999;\r\n\r\n // Classes thats get implemented when scrolling\r\n &.scroll-up {\r\n background-color: var(--primary-colour);\r\n filter: drop-shadow(0 1px 3px var(--secondary-colour));\r\n opacity: 0.9;\r\n padding: 1.5rem;\r\n }\r\n &.scroll-down {\r\n opacity: 0;\r\n pointer-events: none; // Makes header links not clickable when hidden\r\n }\r\n}\r\n\r\n.logo-container {\r\n // Add white colour to the logo to cheat the contrast ratio\r\n color: var(--text-colour);\r\n line-height: 0;\r\n}\r\n\r\n.links-container {\r\n display: flex;\r\n align-items: center;\r\n justify-content: space-between;\r\n}\r\n\r\n.page-link-wrapper {\r\n display: flex;\r\n align-items: center;\r\n gap: 2rem;\r\n}\r\n\r\n.main-link {\r\n position: relative;\r\n padding: 5px 0.5rem;\r\n}\r\n\r\n.main-link::before {\r\n content: \"\";\r\n position: absolute;\r\n bottom: 0;\r\n left: 0;\r\n width: 0%;\r\n height: 1px;\r\n background-color: var(--secondary-colour);\r\n color: var(--text-colour);\r\n transition: width variables.$transition;\r\n}\r\n\r\n.main-link:hover::before {\r\n width: 100%;\r\n}\r\n\r\n.main-link:active::before {\r\n background-color: var(--text-colour);\r\n}\r\n\r\n.page-link-wrapper a {\r\n font-size: 1.25rem;\r\n color: var(--text-colour);\r\n}\r\n\r\n.some-links-wrapper {\r\n display: flex;\r\n align-items: center;\r\n gap: 1rem;\r\n\r\n img {\r\n display: block;\r\n height: 20px;\r\n width: 20px;\r\n }\r\n}\r\n\r\n.some-links-wrapper a:hover,\r\n.some-links-wrapper a:active {\r\n filter: opacity(variables.$opacity);\r\n}\r\n\r\n.utility-btn-wrapper {\r\n display: flex;\r\n align-items: center;\r\n gap: 2rem;\r\n}\r\n\r\n// ----------------------------------\r\n// Media query < 900px\r\n// ----------------------------------\r\n@media (width <= 1000px) {\r\n .header-bar-container nav:last-of-type {\r\n display: none;\r\n }\r\n}\r\n\r\n@media (width <= 900px) {\r\n .page-link-wrapper .main-link {\r\n font-size: 1rem;\r\n }\r\n}\r\n\r\n@media (width <= 800px) {\r\n .header-bar-container nav {\r\n display: none;\r\n }\r\n}\r\n","@use \"../abstracts/variables\";\r\n\r\n// ----------------------------------\r\n// Footer styling\r\n// ----------------------------------\r\n.inner-footer {\r\n max-width: variables.$max-width;\r\n margin: 0 auto;\r\n display: flex;\r\n flex-direction: column;\r\n justify-content: center;\r\n align-items: center;\r\n gap: 3rem;\r\n padding: 2rem 1rem 1rem;\r\n}\r\n\r\n.footer-main-nav {\r\n display: flex;\r\n flex-wrap: wrap;\r\n justify-content: center;\r\n align-items: center;\r\n gap: 2rem;\r\n}\r\n\r\n.some-container {\r\n display: flex;\r\n justify-content: center;\r\n align-items: center;\r\n gap: 1rem;\r\n}\r\n\r\n.footer-logo-container {\r\n display: flex;\r\n flex-direction: column;\r\n justify-content: center;\r\n align-items: center;\r\n gap: 0.5rem;\r\n // Add white colour to the logo to cheat the contrast ratio\r\n color: var(--text-colour);\r\n a {\r\n line-height: 0;\r\n }\r\n}\r\n\r\n.copyright {\r\n border-top: 1px solid var(--text-colour);\r\n width: 80vw;\r\n max-width: variables.$max-width;\r\n margin: 0 auto;\r\n padding: 1rem 0 1rem;\r\n font-style: italic;\r\n text-align: center;\r\n font-size: 0.8rem;\r\n}\r\n\r\n@media (width <= 600px) {\r\n .inner-footer {\r\n gap: 2rem;\r\n }\r\n\r\n .footer-main-nav {\r\n flex-direction: column;\r\n gap: 1rem;\r\n }\r\n}\r\n","@use \"../abstracts/variables\";\r\n\r\n// ----------------------------------\r\n// Content on landing section\r\n// ----------------------------------\r\n.landing-section {\r\n background-color: var(--primary-colour);\r\n}\r\n\r\n.outer-header-container {\r\n height: 100vh;\r\n width: 100%;\r\n max-width: variables.$max-width;\r\n margin: 0 auto;\r\n padding: 0 1rem;\r\n background: no-repeat url(\"../assets/images/profile1.webp\") 100% center / 60% auto;\r\n background-color: var(--primary-colour);\r\n background-blend-mode: luminosity;\r\n overflow: hidden;\r\n // Ensures the content is on top of the background image\r\n position: relative;\r\n z-index: 1;\r\n}\r\n\r\n.intro-container {\r\n display: flex;\r\n flex-direction: column;\r\n justify-content: center;\r\n text-align: left;\r\n gap: 2rem;\r\n max-width: 90ch;\r\n position: relative;\r\n top: 50%;\r\n transform: translate(0, -50%);\r\n}\r\n\r\n.name-container {\r\n display: flex;\r\n align-items: center;\r\n justify-self: center;\r\n color: var(--text-colour); // to cheat the contrast checker for the logo div\r\n margin: 0 0 0.5rem 0;\r\n\r\n h1 {\r\n font-size: 3rem;\r\n display: inline-flex;\r\n align-items: baseline;\r\n line-height: 0;\r\n }\r\n\r\n img {\r\n display: inline-block;\r\n position: relative;\r\n bottom: -10px;\r\n width: 5rem;\r\n height: auto;\r\n margin-right: -22px;\r\n }\r\n\r\n .intro-text {\r\n font-size: 1.5rem;\r\n }\r\n}\r\n\r\n.intro-btn-container {\r\n display: flex;\r\n justify-content: left;\r\n align-items: center;\r\n gap: 2rem;\r\n position: relative; // To display hover state\r\n z-index: 1; // To display hover state\r\n}\r\n\r\n.btn-down-container {\r\n display: flex;\r\n flex-direction: column;\r\n justify-content: center;\r\n align-items: center;\r\n gap: 1rem;\r\n position: absolute;\r\n bottom: 0;\r\n left: 50%;\r\n transform: translate(-50%, -50%);\r\n}\r\n\r\n// ----------------------------------\r\n// Media query on landing section\r\n// ----------------------------------\r\n@media (width <= 1120px) {\r\n .intro-container {\r\n .name-container {\r\n h1 {\r\n font-size: 2.5rem;\r\n }\r\n }\r\n\r\n .intro-text {\r\n max-width: 50ch;\r\n }\r\n }\r\n}\r\n\r\n@media (width <= 800px) {\r\n .outer-header-container {\r\n background-position: 120% 60%;\r\n }\r\n .intro-container {\r\n .name-container {\r\n h1 {\r\n font-size: 2rem;\r\n }\r\n\r\n img {\r\n width: 4rem;\r\n margin-right: -16px;\r\n }\r\n }\r\n }\r\n}\r\n\r\n@media (width <= 600px) {\r\n .outer-header-container {\r\n background-position: 120% 100%;\r\n background-size: 60%;\r\n background: none;\r\n }\r\n .intro-container {\r\n align-items: center;\r\n text-align: center;\r\n gap: 2rem;\r\n transform: translate(0, -70%);\r\n }\r\n\r\n .intro-container:last-child {\r\n padding-top: 1rem;\r\n }\r\n\r\n .intro-btn-container {\r\n flex-direction: column;\r\n gap: 1rem;\r\n }\r\n\r\n .btn-down-container {\r\n text-align: center;\r\n transform: translate(-50%, -80%);\r\n gap: 0.5rem;\r\n }\r\n}\r\n\r\n@media (width <= 400px) {\r\n .intro-container {\r\n .name-container {\r\n h1 {\r\n font-size: 1.5rem;\r\n }\r\n }\r\n }\r\n}\r\n\r\n@media (width <= 320px) {\r\n .intro-container {\r\n .name-container {\r\n h1 {\r\n font-size: 1.25rem;\r\n }\r\n }\r\n }\r\n\r\n .btn-down-container {\r\n p {\r\n font-size: 0.875rem;\r\n }\r\n }\r\n}\r\n","@use \"../abstracts/variables\";\r\n@use \"../components/primary-button\";\r\n\r\n// ----------------------------------\r\n// Projects section\r\n// ----------------------------------\r\n.project-wrapper {\r\n display: flex;\r\n flex-direction: column;\r\n align-items: start;\r\n justify-content: center;\r\n padding: 4rem 0 0;\r\n}\r\n\r\n.outer-container {\r\n display: grid;\r\n grid-template-columns: 1fr 1fr;\r\n align-items: center;\r\n justify-items: left;\r\n position: relative;\r\n}\r\n\r\n.text-outer-wrapper {\r\n grid-column: 1 / 2;\r\n padding: 0 0.5rem 0 0;\r\n display: flex;\r\n flex-direction: column;\r\n gap: 2rem;\r\n max-width: variables.$max-characters-width;\r\n}\r\n\r\n.video-wrapper {\r\n grid-column: 2 / 2;\r\n color: var(\r\n --text-colour\r\n ); // Adding white colour to the image div to cheat the contrast checker\r\n video {\r\n width: 100%;\r\n height: auto;\r\n min-width: 450px;\r\n }\r\n}\r\n\r\n.text-inner-wrapper {\r\n display: flex;\r\n flex-direction: column;\r\n gap: 0.5rem;\r\n}\r\n\r\n.project-btn-container {\r\n display: flex;\r\n align-items: flex-start;\r\n gap: 2rem;\r\n z-index: 0; // To display hover state\r\n}\r\n\r\n.project-underline {\r\n display: inline-block;\r\n border-bottom: 1px solid var(--accent-colour);\r\n width: 100%;\r\n margin-top: 4rem;\r\n}\r\n\r\n@media (width <= 1000px) {\r\n .project-wrapper {\r\n align-items: center;\r\n }\r\n .outer-container {\r\n display: flex;\r\n flex-direction: column-reverse;\r\n gap: 2rem;\r\n }\r\n\r\n .text-outer-wrapper {\r\n padding: 0;\r\n }\r\n\r\n .video-wrapper {\r\n video {\r\n max-width: variables.$max-characters-width;\r\n min-width: auto;\r\n }\r\n }\r\n}\r\n\r\n@media (width <= 600px) {\r\n .outer-container {\r\n align-items: center;\r\n gap: 1rem;\r\n }\r\n\r\n .project-btn-container {\r\n flex-direction: column;\r\n align-items: center;\r\n gap: 1rem;\r\n }\r\n}\r\n","@use \"../abstracts/variables\";\r\n\r\n// ----------------------------------\r\n// Skills section styling\r\n// ----------------------------------\r\n\r\n// animation for the skill slider\r\n@keyframes slide {\r\n from {\r\n transform: translateX(0);\r\n }\r\n to {\r\n transform: translateX(-100%);\r\n }\r\n}\r\n\r\n.skills-container {\r\n overflow: hidden;\r\n white-space: nowrap; // Prevents the slider from wrapping\r\n position: relative;\r\n}\r\n\r\n// Creates a fade in/out style on the left and right side of the slider\r\n.skills-container::before {\r\n content: \"\";\r\n display: block;\r\n position: absolute;\r\n width: 50px;\r\n height: 100%;\r\n top: 0;\r\n left: 0;\r\n z-index: 2;\r\n background: linear-gradient(to right, rgba(54, 61, 72, 1), rgba(54, 61, 72, 0));\r\n}\r\n// Creates a fade in/out style on the left and right side of the slider\r\n.skills-container::after {\r\n content: \"\";\r\n display: block;\r\n position: absolute;\r\n width: 50px;\r\n height: 100%;\r\n top: 0;\r\n right: 0;\r\n z-index: 2;\r\n background: linear-gradient(to left, rgba(54, 61, 72, 1), rgba(54, 61, 72, 0));\r\n}\r\n\r\n.skill-slider {\r\n animation: slide 20s infinite linear;\r\n display: inline-flex;\r\n}\r\n\r\n.skill-wrapper {\r\n display: flex;\r\n flex-direction: column;\r\n align-items: center;\r\n justify-content: center;\r\n gap: 1rem;\r\n width: 135px;\r\n height: 135px;\r\n background: var(--primary-colour);\r\n border-radius: variables.$border-radius;\r\n margin: 0 2rem;\r\n color: var(--text-colour); // Adding white text colour to cheat the contrast checker\r\n\r\n img {\r\n height: 50px;\r\n width: 50px;\r\n }\r\n}\r\n\r\n// Pauses the animation when the user hovers over the skills container\r\n.skills-container:hover {\r\n .skill-slider {\r\n animation-play-state: paused;\r\n }\r\n}\r\n\r\n@media (width <= 600px) {\r\n .skill-wrapper {\r\n gap: 0.5rem;\r\n width: 100px;\r\n height: 100px;\r\n\r\n img {\r\n height: 30px;\r\n width: 30px;\r\n }\r\n }\r\n}\r\n","@use \"../abstracts/variables\";\r\n\r\n// ----------------------------------\r\n// About section styling\r\n// ----------------------------------\r\n.about-container {\r\n display: flex;\r\n flex-direction: column;\r\n gap: 2rem;\r\n width: 100%;\r\n}\r\n\r\n.full-wrapper {\r\n display: flex;\r\n justify-content: space-around;\r\n align-items: center;\r\n flex-wrap: wrap;\r\n}\r\n\r\n.main-wrapper {\r\n display: flex;\r\n flex-direction: column;\r\n gap: 2rem;\r\n max-width: variables.$max-characters-width;\r\n}\r\n\r\n.secondary-wrapper {\r\n display: flex;\r\n flex-direction: column;\r\n gap: 0.5rem;\r\n max-width: 20vw;\r\n min-width: 250px;\r\n color: var(\r\n --text-colour\r\n ); // added to override the default colour to pass the contrast ratio test\r\n\r\n figcaption {\r\n font-size: 1rem;\r\n color: var(--text-colour);\r\n }\r\n}\r\n\r\n@media (width <= 800px) {\r\n .full-wrapper {\r\n flex-direction: column;\r\n gap: 2rem;\r\n }\r\n .secondary-wrapper {\r\n align-items: center;\r\n width: 100%;\r\n max-width: variables.$max-characters-width;\r\n img {\r\n max-width: 200px;\r\n }\r\n\r\n figcaption {\r\n max-width: variables.$max-characters-width;\r\n }\r\n }\r\n}\r\n\r\n@media (width <= 600px) {\r\n .full-wrapper {\r\n text-align: center;\r\n }\r\n .secondary-wrapper {\r\n figcaption {\r\n text-align: center;\r\n }\r\n }\r\n}\r\n","@use \"../abstracts/variables\";\r\n\r\n// ----------------------------------\r\n// Experience section styling\r\n// ----------------------------------\r\n// --- Key qualifications ---\r\n.qualification-container {\r\n display: flex;\r\n flex-direction: column;\r\n padding-bottom: 4rem;\r\n\r\n h2 {\r\n margin: 0 0 1rem 0;\r\n }\r\n}\r\n\r\n.qualification-wrapper {\r\n display: flex;\r\n justify-content: space-around;\r\n align-items: center;\r\n gap: 2rem;\r\n background-color: var(--primary-colour);\r\n padding: 2rem 2rem 0;\r\n}\r\n\r\n.qualification-wrapper:last-child {\r\n padding: 2rem;\r\n}\r\n\r\n.qualification-articles {\r\n display: flex;\r\n flex-direction: column;\r\n gap: 1rem;\r\n max-width: variables.$max-characters-width;\r\n\r\n ul {\r\n list-style: disc;\r\n padding-left: 2rem;\r\n\r\n li {\r\n font-size: 1rem;\r\n }\r\n }\r\n}\r\n\r\n// --- Work experience and education ---\r\n// ----------------------------------------\r\n.experience-outer-container {\r\n display: flex;\r\n justify-content: space-between;\r\n align-items: stretch;\r\n gap: 2rem;\r\n}\r\n\r\n.left,\r\n.right {\r\n flex: 1;\r\n}\r\n\r\n.right {\r\n h2 {\r\n text-align: right;\r\n }\r\n}\r\n\r\n.center {\r\n display: flex;\r\n justify-content: center;\r\n align-items: center;\r\n}\r\n\r\n.vertical-line {\r\n width: 1px;\r\n height: 90%;\r\n background-color: var(--secondary-colour);\r\n filter: opacity(variables.$opacity);\r\n}\r\n\r\n.card-container {\r\n display: flex;\r\n flex-direction: column;\r\n gap: 1rem;\r\n padding: 2rem;\r\n background-color: var(--primary-colour);\r\n margin-top: 2rem; // space the headlines from the top\r\n\r\n .experience-date {\r\n display: flex;\r\n align-items: center;\r\n gap: 0.5rem;\r\n\r\n p:first-of-type {\r\n font-style: normal;\r\n font-size: 1rem;\r\n }\r\n }\r\n\r\n p:last-of-type {\r\n font-style: italic;\r\n max-width: variables.$max-characters-width;\r\n }\r\n ul {\r\n list-style: disc;\r\n padding-left: 2rem;\r\n font-weight: 300;\r\n\r\n li {\r\n font-size: 1rem;\r\n max-width: variables.$max-characters-width;\r\n a {\r\n font-size: 1rem;\r\n }\r\n }\r\n }\r\n}\r\n\r\n.card-container:first-of-type {\r\n margin-top: 1rem;\r\n}\r\n\r\n.optional-heading {\r\n margin: 2rem 0 0;\r\n}\r\n\r\n#interests {\r\n font-style: normal;\r\n font-size: 1rem;\r\n}\r\n\r\n.experience-btn-container {\r\n display: flex;\r\n flex-direction: column;\r\n justify-content: center;\r\n align-items: center;\r\n gap: 1rem;\r\n margin-top: 4rem;\r\n position: relative;\r\n z-index: 0;\r\n\r\n p {\r\n font-size: 1rem;\r\n }\r\n}\r\n\r\n.btn-wrapper {\r\n display: flex;\r\n justify-content: center;\r\n flex-wrap: wrap;\r\n gap: 2rem;\r\n}\r\n\r\n@media (width <= 800px) {\r\n .qualification-wrapper {\r\n flex-direction: column;\r\n }\r\n\r\n .experience-outer-container {\r\n flex-direction: column-reverse;\r\n }\r\n\r\n .left,\r\n .right {\r\n text-align: left;\r\n\r\n h2 {\r\n text-align: left;\r\n }\r\n }\r\n\r\n .vertical-line {\r\n display: none;\r\n }\r\n\r\n .card-container {\r\n padding: 1rem;\r\n }\r\n}\r\n\r\n@media (width <= 600px) {\r\n .qualification-container {\r\n text-align: center;\r\n\r\n h2 {\r\n text-align: center;\r\n }\r\n ul {\r\n list-style: none;\r\n }\r\n }\r\n\r\n .experience-outer-container {\r\n h2 {\r\n text-align: center;\r\n }\r\n ul {\r\n list-style: none;\r\n }\r\n }\r\n\r\n .card-container {\r\n padding: 1rem;\r\n text-align: center;\r\n align-items: center;\r\n }\r\n}\r\n","@use \"../abstracts/variables\";\r\n\r\n// ----------------------------------\r\n// Contact section styling\r\n// ----------------------------------\r\n.contact-container {\r\n display: flex;\r\n flex-direction: column;\r\n justify-content: center;\r\n align-items: center;\r\n text-align: center;\r\n gap: 2rem;\r\n max-width: variables.$max-characters-width;\r\n margin: 0 auto 4rem;\r\n}\r\n\r\n.contact-card-container:first-of-type {\r\n margin-top: 2rem;\r\n}\r\n\r\n.contact-card-container {\r\n display: flex;\r\n justify-content: space-around;\r\n align-items: center;\r\n width: 100%;\r\n max-width: inherit;\r\n background-color: var(--accent-colour);\r\n}\r\n\r\n.contact-card-wrapper {\r\n display: flex;\r\n flex-direction: column;\r\n align-items: start;\r\n text-align: left;\r\n gap: 1rem;\r\n padding: 2rem;\r\n\r\n a {\r\n &:hover,\r\n :active {\r\n filter: opacity(variables.$opacity);\r\n }\r\n }\r\n}\r\n\r\n.contact-inner-wrapper {\r\n display: flex;\r\n align-items: center;\r\n gap: 0.5rem;\r\n color: var(--text-colour); // add text colour to cheat the contrast checker\r\n img {\r\n width: 20px;\r\n height: 20px;\r\n }\r\n}\r\n\r\n.contact-some-container {\r\n display: flex;\r\n gap: 1rem;\r\n padding: 2rem;\r\n}\r\n\r\n.contact-some-link {\r\n display: flex;\r\n flex-direction: column;\r\n align-items: center;\r\n gap: 0.5rem;\r\n padding: 0.5rem;\r\n p {\r\n font-size: 0.75rem;\r\n }\r\n &:hover,\r\n :active {\r\n filter: opacity(variables.$opacity);\r\n }\r\n}\r\n\r\n@media (width <= 500px) {\r\n .contact-container {\r\n margin: 0;\r\n }\r\n .contact-card-container {\r\n flex-direction: column;\r\n }\r\n .contact-card-container:first-of-type {\r\n margin-top: 0;\r\n }\r\n\r\n .contact-card-wrapper {\r\n align-items: center;\r\n text-align: center;\r\n gap: 0.5rem;\r\n padding: 1rem 2rem;\r\n }\r\n}\r\n\r\n@media (width <= 400px) {\r\n .some-links-wrapper {\r\n flex-wrap: wrap;\r\n }\r\n\r\n .contact-some-link {\r\n p {\r\n display: none;\r\n }\r\n }\r\n}\r\n"]} \ No newline at end of file +{"version":3,"sources":["..\\scss\\abstracts\\_fonts.scss","styles.css","..\\scss\\abstracts\\_variables.scss","..\\scss\\base\\_typography.scss","..\\scss\\base\\_reset.scss","..\\scss\\base\\_base.scss","..\\scss\\components\\_primary-button.scss","..\\scss\\components\\_universal-section-style.scss","..\\scss\\components\\_mobile-nav.scss","..\\scss\\abstracts\\_mixins.scss","..\\scss\\components\\_btn-down.scss","..\\scss\\components\\_extended-description.scss","..\\scss\\components\\_colour-mode.scss","..\\scss\\layout\\_header.scss","..\\scss\\layout\\_footer.scss","..\\scss\\layout\\_landing.scss","..\\scss\\layout\\_projects.scss","..\\scss\\layout\\_skills.scss","..\\scss\\layout\\_about.scss","..\\scss\\layout\\_experience.scss","..\\scss\\layout\\_contact.scss"],"names":[],"mappings":"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","file":"styles.css","sourcesContent":["// Fallback for browsers not supporting variable fonts\r\n@supports not (font-variation-settings: normal) {\r\n @font-face {\r\n font-family: \"Unbounded\";\r\n src: url(../assets/fonts/Unbounded/static/Unbounded-Regular.ttf) format(\"truetype\");\r\n font-weight: 400; /* Regular weight */\r\n font-display: swap; /* Ensure font swap is applied */\r\n }\r\n\r\n @font-face {\r\n font-family: \"Unbounded\";\r\n src: url(../assets/fonts/Unbounded/static/Unbounded-Bold.ttf) format(\"truetype\");\r\n font-weight: 700; /* Bold weight */\r\n font-display: swap;\r\n }\r\n\r\n @font-face {\r\n font-family: \"Karla\";\r\n src: url(../assets/fonts/Karla/static/Karla-Regular.ttf) format(\"truetype\");\r\n font-weight: 400; /* Regular weight */\r\n font-display: swap;\r\n }\r\n\r\n @font-face {\r\n font-family: \"Karla\";\r\n src: url(../assets/fonts/Karla/static/Karla-Regular.ttf) format(\"truetype\");\r\n font-weight: 700; /* Bold weight */\r\n font-display: swap;\r\n }\r\n}\r\n\r\n// Variable fonts for browsers that support it\r\n@font-face {\r\n font-family: \"Unbounded\";\r\n src: url(../assets/fonts/Unbounded/Unbounded-VariableFont_wght.ttf) format(\"truetype\");\r\n font-weight: 100 1000; /* Weight range for variable font */\r\n font-stretch: 25% 151%; /* Stretch range if applicable */\r\n font-display: swap;\r\n}\r\n\r\n@font-face {\r\n font-family: \"Karla\";\r\n src: url(../assets/fonts/Karla/Karla-VariableFont_wght.ttf) format(\"truetype\");\r\n font-weight: 100 1000; /* Weight range for variable font */\r\n font-stretch: 25% 151%; /* Stretch range if applicable */\r\n font-display: swap;\r\n}\r\n@font-face {\r\n font-family: \"Karla\";\r\n src: url(../assets/fonts/Karla/Karla-Italic-VariableFont_wght.ttf) format(\"truetype\");\r\n font-weight: 100 1000; /* Weight range for variable font */\r\n font-stretch: 25% 151%; /* Stretch range if applicable */\r\n font-style: italic; /* Italic style */\r\n font-display: swap;\r\n}\r\n","@supports not (font-variation-settings: normal) {\n @font-face {\n font-family: \"Unbounded\";\n src: url(../assets/fonts/Unbounded/static/Unbounded-Regular.ttf) format(\"truetype\");\n font-weight: 400; /* Regular weight */\n font-display: swap; /* Ensure font swap is applied */\n }\n @font-face {\n font-family: \"Unbounded\";\n src: url(../assets/fonts/Unbounded/static/Unbounded-Bold.ttf) format(\"truetype\");\n font-weight: 700; /* Bold weight */\n font-display: swap;\n }\n @font-face {\n font-family: \"Karla\";\n src: url(../assets/fonts/Karla/static/Karla-Regular.ttf) format(\"truetype\");\n font-weight: 400; /* Regular weight */\n font-display: swap;\n }\n @font-face {\n font-family: \"Karla\";\n src: url(../assets/fonts/Karla/static/Karla-Regular.ttf) format(\"truetype\");\n font-weight: 700; /* Bold weight */\n font-display: swap;\n }\n}\n@font-face {\n font-family: \"Unbounded\";\n src: url(../assets/fonts/Unbounded/Unbounded-VariableFont_wght.ttf) format(\"truetype\");\n font-weight: 100 1000; /* Weight range for variable font */\n font-stretch: 25% 151%; /* Stretch range if applicable */\n font-display: swap;\n}\n@font-face {\n font-family: \"Karla\";\n src: url(../assets/fonts/Karla/Karla-VariableFont_wght.ttf) format(\"truetype\");\n font-weight: 100 1000; /* Weight range for variable font */\n font-stretch: 25% 151%; /* Stretch range if applicable */\n font-display: swap;\n}\n@font-face {\n font-family: \"Karla\";\n src: url(../assets/fonts/Karla/Karla-Italic-VariableFont_wght.ttf) format(\"truetype\");\n font-weight: 100 1000; /* Weight range for variable font */\n font-stretch: 25% 151%; /* Stretch range if applicable */\n font-style: italic; /* Italic style */\n font-display: swap;\n}\nbody {\n --primary-colour: #22252c;\n --accent-colour: #363d48;\n --secondary-colour: #f22c50;\n --text-colour: #f0e9f2;\n --success-colour: #55d6c2;\n --warning-colour: #eb5e55;\n --error-colour: #d30a2e;\n --info-colour: #4d8cff;\n}\nbody.light-mode {\n --primary-colour: #f9f9f9;\n --accent-colour: #f0e9f2;\n --secondary-colour: #f22c50;\n --text-colour: #22252c;\n --success-colour: #55d6c2;\n --warning-colour: #eb5e55;\n --error-colour: #d30a2e;\n --info-colour: #4d8cff;\n}\nbody.light-mode p,\nbody.light-mode a,\nbody.light-mode li,\nbody.light-mode time,\nbody.light-mode button {\n font-weight: 500;\n}\nbody.light-mode .primary-btn img {\n filter: invert(1);\n}\nbody.light-mode .some-links-wrapper img {\n filter: invert(1);\n}\nbody.light-mode .outer-header-container {\n background-blend-mode: normal;\n}\nbody.light-mode .btn-down-container {\n transform: translate(-80%, -50%);\n}\nbody.light-mode .btn-down-container .btn-down {\n border: 2px solid var(--secondary-colour);\n}\nbody.light-mode .primary-btn {\n border: 2px solid var(--secondary-colour);\n}\nbody.light-mode .skills-container::before {\n background: linear-gradient(to right, rgb(240, 233, 242), rgba(240, 233, 242, 0));\n}\nbody.light-mode .skills-container::after {\n background: linear-gradient(to left, rgb(240, 233, 242), rgba(240, 233, 242, 0));\n}\n@media (width <= 1000px) {\n body.light-mode .btn-down-container {\n transform: translate(-50%, -50%);\n }\n}\n@media (width <= 600px) {\n body.light-mode .btn-down-container {\n transform: translate(-50%, -80%);\n }\n}\n\nh1,\nh2,\nh3,\nh4,\nh5,\nh6,\nol,\nul,\na,\np,\nb,\nsmall,\nbutton,\nspan,\nfigcaption,\ntime {\n color: var(--text-colour);\n line-height: 125%;\n}\n\nh1,\nh2,\nh3,\nh4,\nh5,\nh6 {\n font-family: \"Unbounded\", sans-serif;\n font-weight: 400;\n letter-spacing: 2px;\n}\n\nh1 {\n font-size: 2rem;\n}\n\nh2 {\n font-size: 1.5rem;\n}\n\nh3 {\n font-size: 1.125rem;\n}\n\nol,\nul,\na,\np,\nb,\nbutton,\nspan,\nfigcaption,\ntime {\n font: 400 1.125rem/125% \"Karla\", sans-serif;\n letter-spacing: 1px;\n}\n\nsmall {\n font-family: \"Karla\", sans-serif;\n}\n\ntime {\n font-size: 1rem;\n}\n\n@media (width <= 900px) {\n ol,\n ul,\n a,\n p,\n b,\n button,\n span,\n figcaption,\n time {\n font-size: 1rem;\n }\n h1 {\n font-size: 1.5rem;\n }\n h2 {\n font-size: 1.125rem;\n }\n h3 {\n font-size: 1rem;\n }\n}\n* {\n margin: 0;\n padding: 0;\n box-sizing: border-box;\n}\n\nol,\nul {\n list-style: none;\n}\n\na {\n text-decoration: none;\n}\n\nbutton {\n background: none;\n border: none;\n outline: none;\n cursor: pointer;\n}\n\naddress {\n font-style: normal;\n}\n\nhtml {\n scroll-behavior: smooth;\n}\n\nfooter {\n background-color: var(--accent-colour);\n}\n\n.primary-btn {\n display: flex;\n position: relative;\n align-items: center;\n justify-content: center;\n gap: 10px;\n border: 1px solid var(--secondary-colour);\n padding: 12px 24px;\n font-size: 1.125rem;\n font-weight: 600;\n}\n.primary-btn img {\n height: 1.25rem;\n width: 1.25rem;\n}\n.primary-btn:hover,\n.primary-btn :active {\n transition: all 0.3s ease-in-out;\n color: var(--primary-colour);\n}\n.primary-btn:hover img,\n.primary-btn :active img {\n filter: invert(1);\n}\n\n.primary-btn::before {\n content: \"\";\n position: absolute;\n background-color: var(--secondary-colour);\n color: var(--primary-colour);\n top: 0;\n left: 0;\n width: 100%;\n height: 20%;\n transition: all 0.3s ease-in-out;\n z-index: -1;\n opacity: 0;\n}\n\n.primary-btn:hover::before {\n height: 100%;\n opacity: 1;\n}\n\n.primary-btn:active {\n border: 1px solid var(--text-colour);\n color: var(--text-colour);\n}\n.primary-btn:active img {\n filter: invert(0);\n}\n\n.primary-btn:active::before {\n width: 100%;\n opacity: 0;\n}\n\n@media (width <= 600px) {\n .primary-btn {\n padding: 10px 20px;\n font-size: 1rem;\n }\n}\n.section {\n max-width: 1400px;\n margin: 0 auto;\n padding: 4rem 1rem;\n}\n\n.primary-colour {\n background-color: var(--primary-colour);\n}\n\n.asset-colour {\n background-color: var(--accent-colour);\n}\n\n.spacing-4 {\n margin: 4rem 0 0 0;\n}\n\n.section-heading {\n display: flex;\n flex-direction: column;\n max-width: fit-content;\n position: relative;\n}\n\n.heading-underline {\n display: inline-block;\n border-bottom: 1px solid var(--secondary-colour);\n width: 50%;\n margin-top: 0.5rem;\n}\n\n/* --- hamburger menu --- */\n.hamburger,\n.mobile-nav {\n display: none;\n}\n\n@media (width <= 800px) {\n .hamburger {\n display: block;\n position: relative;\n width: 1.625rem;\n cursor: pointer;\n outline: none;\n border: none;\n }\n .hamburger:focus-visible {\n border: 1px solid var(--text-colour);\n padding: 2px;\n }\n .hamburger-bar,\n .hamburger::after,\n .hamburger::before {\n content: \"\";\n display: block;\n height: 1px;\n width: 100%;\n margin: 6px 0;\n background-color: var(--text-colour);\n transition: 0.3s ease-in-out;\n }\n .hamburger.is-active::after,\n .hamburger.is-active::before {\n background-color: var(--text-colour);\n }\n .hamburger.is-active .hamburger-bar {\n opacity: 0;\n }\n .hamburger.is-active:before {\n transform: rotate(-45deg) translate(-5px, 5px);\n }\n .hamburger.is-active:after {\n transform: rotate(45deg) translate(-5px, -5px);\n }\n .mobile-nav {\n position: fixed;\n display: flex;\n flex-direction: column;\n justify-content: start;\n align-items: center;\n gap: 8rem;\n top: 0;\n left: 100%;\n width: 100%;\n height: 100vh;\n background-color: var(--primary-colour);\n padding-top: 150px;\n z-index: 1000;\n transition: 0.3s ease-in-out;\n }\n .mobile-nav.is-active {\n left: 0;\n }\n .page-link-wrapper {\n flex-direction: column;\n }\n}\n.no-scroll {\n overflow: hidden;\n}\n\n.btn-down {\n display: inline-block;\n padding: 1rem;\n background-color: transparent;\n border: 1px solid var(--secondary-colour);\n border-radius: 50%;\n line-height: 0;\n position: relative;\n}\n.btn-down:hover img,\n.btn-down :active img {\n filter: brightness(0) invert(0);\n}\n\n.btn-down::before {\n content: \"\";\n position: absolute;\n background-color: var(--secondary-colour);\n border-radius: inherit;\n top: 0;\n left: 0;\n width: 100%;\n height: 30%;\n transition: all 0.3s ease-in-out;\n opacity: 0;\n color: var(--primary-colour);\n}\n\n.btn-down:hover::before {\n width: 100%;\n height: 100%;\n opacity: 1;\n}\n\n.btn-down:active {\n border: 1px solid var(--text-colour);\n}\n\n.btn-down:active::before {\n width: 100%;\n opacity: 0;\n}\n\n.description-btn {\n align-self: flex-start;\n font-size: 1rem;\n font-style: italic;\n border-bottom: 1px solid var(--secondary-colour);\n padding: 2px 5px;\n transition: all 0.3s ease-in-out;\n}\n.description-btn:hover {\n filter: opacity(0.7);\n}\n.description-btn:active {\n border-bottom: 1px solid var(--text-colour);\n}\n\n.description-wrapper {\n display: flex;\n flex-direction: column;\n gap: 2rem;\n position: relative;\n top: -100%;\n transition: all 0.3s ease-in-out;\n height: 0;\n opacity: 0;\n visibility: hidden;\n margin-bottom: -2rem;\n}\n.description-wrapper ul {\n list-style: disc;\n padding-left: 1.125rem;\n}\n.description-wrapper.is-active {\n top: 0;\n height: 100%;\n opacity: 1;\n visibility: visible;\n margin-bottom: 0;\n}\n\n.tech-wrapper {\n display: flex;\n align-items: center;\n flex-wrap: wrap;\n gap: 0.5rem;\n color: var(--text-colour);\n}\n.tech-wrapper img {\n width: 3rem;\n}\n\n.project-description-underline {\n display: inline-block;\n border-bottom: 1px solid var(--accent-colour);\n width: 50%;\n align-self: start;\n}\n\n.colour-mode-wrapper {\n display: flex;\n align-items: center;\n justify-content: center;\n border: 2px solid var(--text-colour);\n border-radius: 20px;\n padding: 2px 5px;\n}\n.colour-mode-wrapper .colour-mode-btn {\n display: block;\n line-height: 0;\n position: relative;\n opacity: 0;\n visibility: hidden;\n transition: all 0.3s ease-in-out;\n pointer-events: none;\n}\n.colour-mode-wrapper .colour-mode-btn.is-active {\n opacity: 1;\n visibility: visible;\n pointer-events: all;\n top: 0;\n}\n.colour-mode-wrapper .colour-mode-btn:focus-visible {\n border: 1px solid var(--text-colour);\n padding: 2px;\n}\n.colour-mode-wrapper .colour-mode-btn .light-mode-icon,\n.colour-mode-wrapper .colour-mode-btn .dark-mode-icon {\n width: 20px;\n height: 20px;\n pointer-events: none;\n}\n.colour-mode-wrapper p {\n font-size: 0.75rem;\n pointer-events: none;\n}\n\n.colour-mode-btn:hover img {\n filter: opacity(0.7);\n}\n.colour-mode-btn:active img {\n transform: scale(1.2);\n}\n\n@media (width <= 800px) {\n .colour-mode-wrapper p {\n display: none;\n }\n .light-mode-icon,\n .dark-mode-icon {\n width: 27px;\n height: 27px;\n }\n}\n.header-bar {\n display: flex;\n justify-content: space-between;\n align-items: center;\n padding: 1rem 1rem;\n position: fixed;\n width: 100%;\n left: 0;\n right: 0;\n top: 0;\n max-width: 1400px;\n margin: 0 auto;\n transition: all 0.3s ease-in-out;\n}\n\n.header-bar-container {\n position: fixed;\n width: 100%;\n left: 0;\n transition: all 0.3s ease-in-out;\n z-index: 9999;\n}\n.header-bar-container.scroll-up {\n background-color: var(--primary-colour);\n filter: drop-shadow(0 1px 3px var(--secondary-colour));\n opacity: 0.9;\n padding: 1.5rem;\n}\n.header-bar-container.scroll-down {\n opacity: 0;\n pointer-events: none;\n}\n\n.logo-container {\n color: var(--text-colour);\n line-height: 0;\n}\n\n.links-container {\n display: flex;\n align-items: center;\n justify-content: space-between;\n}\n\n.page-link-wrapper {\n display: flex;\n align-items: center;\n gap: 2rem;\n}\n\n.main-link {\n position: relative;\n padding: 5px 0.5rem;\n}\n\n.main-link::before {\n content: \"\";\n position: absolute;\n bottom: 0;\n left: 0;\n width: 0%;\n height: 1px;\n background-color: var(--secondary-colour);\n color: var(--text-colour);\n transition: width 0.3s ease-in-out;\n}\n\n.main-link:hover::before {\n width: 100%;\n}\n\n.main-link:active::before {\n background-color: var(--text-colour);\n}\n\n.page-link-wrapper a {\n font-size: 1.25rem;\n color: var(--text-colour);\n}\n\n.some-links-wrapper {\n display: flex;\n align-items: center;\n gap: 1rem;\n}\n.some-links-wrapper img {\n display: block;\n height: 20px;\n width: 20px;\n}\n\n.some-links-wrapper a:hover,\n.some-links-wrapper a:active {\n filter: opacity(0.7);\n}\n\n.utility-btn-wrapper {\n display: flex;\n align-items: center;\n gap: 2rem;\n}\n\n@media (width <= 1000px) {\n .header-bar-container nav:last-of-type {\n display: none;\n }\n}\n@media (width <= 900px) {\n .page-link-wrapper .main-link {\n font-size: 1rem;\n }\n}\n@media (width <= 800px) {\n .header-bar-container nav {\n display: none;\n }\n}\n.inner-footer {\n max-width: 1400px;\n margin: 0 auto;\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n gap: 3rem;\n padding: 2rem 1rem 1rem;\n}\n\n.footer-main-nav {\n display: flex;\n flex-wrap: wrap;\n justify-content: center;\n align-items: center;\n gap: 2rem;\n}\n\n.some-container {\n display: flex;\n justify-content: center;\n align-items: center;\n gap: 1rem;\n}\n\n.footer-logo-container {\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n gap: 0.5rem;\n color: var(--text-colour);\n}\n.footer-logo-container a {\n line-height: 0;\n}\n\n.copyright {\n border-top: 1px solid var(--text-colour);\n width: 80vw;\n max-width: 1400px;\n margin: 0 auto;\n padding: 1rem 0 1rem;\n font-style: italic;\n text-align: center;\n font-size: 0.8rem;\n}\n\n@media (width <= 600px) {\n .inner-footer {\n gap: 2rem;\n }\n .footer-main-nav {\n flex-direction: column;\n gap: 1rem;\n }\n}\n.landing-section {\n background-color: var(--primary-colour);\n}\n\n.outer-header-container {\n height: 100vh;\n width: 100%;\n max-width: 1400px;\n margin: 0 auto;\n padding: 0 1rem;\n background: no-repeat url(\"../assets/images/profile1.webp\") 100% center/60% auto;\n background-color: var(--primary-colour);\n background-blend-mode: luminosity;\n overflow: hidden;\n position: relative;\n z-index: 1;\n}\n\n.intro-container {\n display: flex;\n flex-direction: column;\n justify-content: center;\n text-align: left;\n gap: 2rem;\n max-width: 90ch;\n position: relative;\n top: 50%;\n transform: translate(0, -50%);\n}\n\n.name-container {\n display: flex;\n align-items: center;\n justify-self: center;\n color: var(--text-colour);\n margin: 0 0 0.5rem 0;\n}\n.name-container h1 {\n font-size: 3rem;\n display: inline-flex;\n align-items: baseline;\n line-height: 0;\n}\n.name-container img {\n display: inline-block;\n position: relative;\n bottom: -10px;\n width: 5rem;\n height: auto;\n margin-right: -22px;\n}\n.name-container .intro-text {\n font-size: 1.5rem;\n}\n\n.intro-btn-container {\n display: flex;\n justify-content: left;\n align-items: center;\n gap: 2rem;\n position: relative;\n z-index: 1;\n}\n\n.btn-down-container {\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n gap: 1rem;\n position: absolute;\n bottom: 0;\n left: 50%;\n transform: translate(-50%, -50%);\n}\n\n@media (width <= 1120px) {\n .intro-container .name-container h1 {\n font-size: 2.5rem;\n }\n .intro-container .intro-text {\n max-width: 50ch;\n }\n}\n@media (width <= 800px) {\n .outer-header-container {\n background-position: 120% 60%;\n }\n .intro-container .name-container h1 {\n font-size: 2rem;\n }\n .intro-container .name-container img {\n width: 4rem;\n margin-right: -16px;\n }\n}\n@media (width <= 600px) {\n .outer-header-container {\n background-position: 120% 100%;\n background-size: 60%;\n background: none;\n }\n .intro-container {\n align-items: center;\n text-align: center;\n gap: 2rem;\n transform: translate(0, -70%);\n }\n .intro-container:last-child {\n padding-top: 1rem;\n }\n .intro-btn-container {\n flex-direction: column;\n gap: 1rem;\n }\n .btn-down-container {\n text-align: center;\n transform: translate(-50%, -80%);\n gap: 0.5rem;\n }\n}\n@media (width <= 400px) {\n .intro-container .name-container h1 {\n font-size: 1.5rem;\n }\n}\n@media (width <= 320px) {\n .intro-container .name-container h1 {\n font-size: 1.25rem;\n }\n .btn-down-container p {\n font-size: 0.875rem;\n }\n}\n.project-wrapper {\n display: flex;\n flex-direction: column;\n align-items: start;\n justify-content: center;\n padding: 4rem 0 0;\n}\n\n.outer-container {\n display: grid;\n grid-template-columns: 1fr 1fr;\n align-items: center;\n justify-items: left;\n position: relative;\n}\n\n.text-outer-wrapper {\n grid-column: 1/2;\n padding: 0 0.5rem 0 0;\n display: flex;\n flex-direction: column;\n gap: 2rem;\n max-width: 65ch;\n}\n\n.video-wrapper {\n grid-column: 2/2;\n color: var(--text-colour);\n}\n.video-wrapper video {\n width: 100%;\n height: auto;\n min-width: 450px;\n}\n\n.text-inner-wrapper {\n display: flex;\n flex-direction: column;\n gap: 0.5rem;\n}\n\n.project-btn-container {\n display: flex;\n align-items: flex-start;\n gap: 2rem;\n z-index: 0;\n}\n\n.project-underline {\n display: inline-block;\n border-bottom: 1px solid var(--accent-colour);\n width: 100%;\n margin-top: 4rem;\n}\n\n@media (width <= 1000px) {\n .project-wrapper {\n align-items: center;\n }\n .outer-container {\n display: flex;\n flex-direction: column-reverse;\n gap: 2rem;\n }\n .text-outer-wrapper {\n padding: 0;\n }\n .video-wrapper video {\n max-width: 65ch;\n min-width: auto;\n }\n}\n@media (width <= 600px) {\n .outer-container {\n align-items: center;\n gap: 1rem;\n }\n .project-btn-container {\n flex-direction: column;\n align-items: center;\n gap: 1rem;\n }\n}\n@keyframes slide {\n from {\n transform: translateX(0);\n }\n to {\n transform: translateX(-100%);\n }\n}\n.skills-container {\n overflow: hidden;\n white-space: nowrap;\n position: relative;\n}\n\n.skills-container::before {\n content: \"\";\n display: block;\n position: absolute;\n width: 50px;\n height: 100%;\n top: 0;\n left: 0;\n z-index: 2;\n background: linear-gradient(to right, rgb(54, 61, 72), rgba(54, 61, 72, 0));\n}\n\n.skills-container::after {\n content: \"\";\n display: block;\n position: absolute;\n width: 50px;\n height: 100%;\n top: 0;\n right: 0;\n z-index: 2;\n background: linear-gradient(to left, rgb(54, 61, 72), rgba(54, 61, 72, 0));\n}\n\n.skill-slider {\n animation: slide 20s infinite linear;\n display: inline-flex;\n}\n\n.skill-wrapper {\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n gap: 1rem;\n width: 135px;\n height: 135px;\n background: var(--primary-colour);\n border-radius: 5px;\n margin: 0 2rem;\n color: var(--text-colour);\n}\n.skill-wrapper img {\n height: 50px;\n width: 50px;\n}\n\n.skills-container:hover .skill-slider {\n animation-play-state: paused;\n}\n\n@media (width <= 600px) {\n .skill-wrapper {\n gap: 0.5rem;\n width: 100px;\n height: 100px;\n }\n .skill-wrapper img {\n height: 30px;\n width: 30px;\n }\n}\n.about-container {\n display: flex;\n flex-direction: column;\n gap: 2rem;\n width: 100%;\n}\n\n.full-wrapper {\n display: flex;\n justify-content: space-around;\n align-items: center;\n flex-wrap: wrap;\n}\n\n.main-wrapper {\n display: flex;\n flex-direction: column;\n gap: 2rem;\n max-width: 65ch;\n}\n\n.secondary-wrapper {\n display: flex;\n flex-direction: column;\n gap: 0.5rem;\n max-width: 20vw;\n min-width: 250px;\n color: var(--text-colour);\n}\n.secondary-wrapper figcaption {\n font-size: 1rem;\n color: var(--text-colour);\n}\n\n@media (width <= 800px) {\n .full-wrapper {\n flex-direction: column;\n gap: 2rem;\n }\n .secondary-wrapper {\n align-items: center;\n width: 100%;\n max-width: 65ch;\n }\n .secondary-wrapper img {\n max-width: 200px;\n }\n .secondary-wrapper figcaption {\n max-width: 65ch;\n }\n}\n@media (width <= 600px) {\n .full-wrapper {\n text-align: center;\n }\n .secondary-wrapper figcaption {\n text-align: center;\n }\n}\n.qualification-container {\n display: flex;\n flex-direction: column;\n padding-bottom: 4rem;\n}\n.qualification-container h2 {\n margin: 0 0 1rem 0;\n}\n\n.qualification-wrapper {\n display: flex;\n justify-content: space-around;\n align-items: center;\n gap: 2rem;\n background-color: var(--primary-colour);\n padding: 2rem 2rem 0;\n}\n\n.qualification-wrapper:last-child {\n padding: 2rem;\n}\n\n.qualification-articles {\n display: flex;\n flex-direction: column;\n gap: 1rem;\n max-width: 65ch;\n}\n.qualification-articles ul {\n list-style: disc;\n padding-left: 2rem;\n}\n.qualification-articles ul li {\n font-size: 1rem;\n}\n\n.experience-outer-container {\n display: flex;\n justify-content: space-between;\n align-items: stretch;\n gap: 2rem;\n}\n\n.left,\n.right {\n flex: 1;\n}\n\n.right h2 {\n text-align: right;\n}\n\n.center {\n display: flex;\n justify-content: center;\n align-items: center;\n}\n\n.vertical-line {\n width: 1px;\n height: 90%;\n background-color: var(--secondary-colour);\n filter: opacity(0.7);\n}\n\n.card-container {\n display: flex;\n flex-direction: column;\n gap: 1rem;\n padding: 2rem;\n background-color: var(--primary-colour);\n margin-top: 2rem;\n}\n.card-container .experience-date {\n display: flex;\n align-items: center;\n gap: 0.5rem;\n}\n.card-container .experience-date p:first-of-type {\n font-style: normal;\n font-size: 1rem;\n}\n.card-container p:last-of-type {\n font-style: italic;\n max-width: 65ch;\n}\n.card-container ul {\n list-style: disc;\n padding-left: 2rem;\n font-weight: 300;\n}\n.card-container ul li {\n font-size: 1rem;\n max-width: 65ch;\n}\n.card-container ul li a {\n font-size: 1rem;\n}\n\n.card-container:first-of-type {\n margin-top: 1rem;\n}\n\n.optional-heading {\n margin: 2rem 0 0;\n}\n\n#interests {\n font-style: normal;\n font-size: 1rem;\n}\n\n.experience-btn-container {\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n gap: 1rem;\n margin-top: 4rem;\n position: relative;\n z-index: 0;\n}\n.experience-btn-container p {\n font-size: 1rem;\n}\n\n.btn-wrapper {\n display: flex;\n justify-content: center;\n flex-wrap: wrap;\n gap: 2rem;\n}\n\n@media (width <= 800px) {\n .qualification-wrapper {\n flex-direction: column;\n }\n .experience-outer-container {\n flex-direction: column-reverse;\n }\n .left,\n .right {\n text-align: left;\n }\n .left h2,\n .right h2 {\n text-align: left;\n }\n .vertical-line {\n display: none;\n }\n .card-container {\n padding: 1rem;\n }\n}\n@media (width <= 600px) {\n .qualification-container {\n text-align: center;\n }\n .qualification-container h2 {\n text-align: center;\n }\n .qualification-container ul {\n list-style: none;\n }\n .experience-outer-container h2 {\n text-align: center;\n }\n .experience-outer-container ul {\n list-style: none;\n }\n .card-container {\n padding: 1rem;\n text-align: center;\n align-items: center;\n }\n}\n.contact-container {\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n text-align: center;\n gap: 2rem;\n max-width: 65ch;\n margin: 0 auto 4rem;\n}\n\n.contact-card-container:first-of-type {\n margin-top: 2rem;\n}\n\n.contact-card-container {\n display: flex;\n justify-content: space-around;\n align-items: center;\n width: 100%;\n max-width: inherit;\n background-color: var(--accent-colour);\n}\n\n.contact-card-wrapper {\n display: flex;\n flex-direction: column;\n align-items: start;\n text-align: left;\n gap: 1rem;\n padding: 2rem;\n}\n.contact-card-wrapper a:hover,\n.contact-card-wrapper a :active {\n filter: opacity(0.7);\n}\n\n.contact-inner-wrapper {\n display: flex;\n align-items: center;\n gap: 0.5rem;\n color: var(--text-colour);\n}\n.contact-inner-wrapper img {\n width: 20px;\n height: 20px;\n}\n\n.contact-some-container {\n display: flex;\n gap: 1rem;\n padding: 2rem;\n}\n\n.contact-some-link {\n display: flex;\n flex-direction: column;\n align-items: center;\n gap: 0.5rem;\n padding: 0.5rem;\n}\n.contact-some-link p {\n font-size: 0.75rem;\n}\n.contact-some-link:hover,\n.contact-some-link :active {\n filter: opacity(0.7);\n}\n\n@media (width <= 500px) {\n .contact-container {\n margin: 0;\n }\n .contact-card-container {\n flex-direction: column;\n }\n .contact-card-container:first-of-type {\n margin-top: 0;\n }\n .contact-card-wrapper {\n align-items: center;\n text-align: center;\n gap: 0.5rem;\n padding: 1rem 2rem;\n }\n}\n@media (width <= 400px) {\n .some-links-wrapper {\n flex-wrap: wrap;\n }\n .contact-some-link p {\n display: none;\n }\n}","body {\r\n // Dark mode colours\r\n --primary-colour: #22252c;\r\n --accent-colour: #363d48;\r\n --secondary-colour: #f22c50;\r\n --text-colour: #f0e9f2;\r\n --success-colour: #55d6c2;\r\n --warning-colour: #eb5e55;\r\n --error-colour: #d30a2e;\r\n --info-colour: #4d8cff;\r\n\r\n &.light-mode {\r\n // Light mode colours and styling\r\n --primary-colour: #f9f9f9;\r\n --accent-colour: #f0e9f2;\r\n --secondary-colour: #f22c50;\r\n --text-colour: #22252c;\r\n --success-colour: #55d6c2;\r\n --warning-colour: #eb5e55;\r\n --error-colour: #d30a2e;\r\n --info-colour: #4d8cff;\r\n\r\n p,\r\n a,\r\n li,\r\n time,\r\n button {\r\n font-weight: 500;\r\n }\r\n\r\n .primary-btn img {\r\n filter: invert(1);\r\n }\r\n .some-links-wrapper img {\r\n filter: invert(1);\r\n }\r\n\r\n .outer-header-container {\r\n background-blend-mode: normal;\r\n }\r\n\r\n .btn-down-container {\r\n transform: translate(-80%, -50%);\r\n\r\n .btn-down {\r\n border: 2px solid var(--secondary-colour);\r\n }\r\n }\r\n\r\n .primary-btn {\r\n border: 2px solid var(--secondary-colour);\r\n }\r\n\r\n .skills-container::before {\r\n background: linear-gradient(\r\n to right,\r\n rgba(240, 233, 242, 1),\r\n rgba(240, 233, 242, 0)\r\n );\r\n }\r\n .skills-container::after {\r\n background: linear-gradient(\r\n to left,\r\n rgba(240, 233, 242, 1),\r\n rgba(240, 233, 242, 0)\r\n );\r\n }\r\n\r\n @media (width <= 1000px) {\r\n .btn-down-container {\r\n transform: translate(-50%, -50%);\r\n }\r\n }\r\n @media (width <= 600px) {\r\n .btn-down-container {\r\n transform: translate(-50%, -80%);\r\n }\r\n }\r\n }\r\n}\r\n\r\n// general styles\r\n$main-border: 1px solid var(--secondary-colour);\r\n$border-radius: 5px;\r\n$max-width: 1400px;\r\n$max-characters-width: 65ch;\r\n$transition: 0.3s ease-in-out;\r\n$opacity: 0.7;\r\n","@use \"../abstracts/fonts\";\r\n@use \"../abstracts/variables\";\r\n\r\n// Default font colour\r\nh1,\r\nh2,\r\nh3,\r\nh4,\r\nh5,\r\nh6,\r\nol,\r\nul,\r\na,\r\np,\r\nb,\r\nsmall,\r\nbutton,\r\nspan,\r\nfigcaption,\r\ntime {\r\n color: var(--text-colour);\r\n line-height: 125%;\r\n}\r\n\r\n// Default font styling for headlines\r\nh1,\r\nh2,\r\nh3,\r\nh4,\r\nh5,\r\nh6 {\r\n font-family: \"Unbounded\", sans-serif;\r\n font-weight: 400;\r\n letter-spacing: 2px;\r\n}\r\n\r\nh1 {\r\n font-size: 2rem;\r\n}\r\nh2 {\r\n font-size: 1.5rem;\r\n}\r\nh3 {\r\n font-size: 1.125rem;\r\n}\r\n\r\n// Default font styling for lists, links, paragraphs, buttons and spans\r\nol,\r\nul,\r\na,\r\np,\r\nb,\r\nbutton,\r\nspan,\r\nfigcaption,\r\ntime {\r\n font: 400 1.125rem/125% \"Karla\", sans-serif;\r\n letter-spacing: 1px;\r\n}\r\n\r\np,\r\nb,\r\nfigcaption {\r\n // font-weight: 300;\r\n}\r\n\r\nsmall {\r\n font-family: \"Karla\", sans-serif;\r\n}\r\n\r\ntime {\r\n font-size: 1rem;\r\n}\r\n\r\n@media (width <= 900px) {\r\n ol,\r\n ul,\r\n a,\r\n p,\r\n b,\r\n button,\r\n span,\r\n figcaption,\r\n time {\r\n font-size: 1rem;\r\n }\r\n\r\n h1 {\r\n font-size: 1.5rem;\r\n }\r\n h2 {\r\n font-size: 1.125rem;\r\n }\r\n h3 {\r\n font-size: 1rem;\r\n }\r\n}\r\n","// ----------------------------------\r\n// Default resets\r\n// ----------------------------------\r\n* {\r\n margin: 0;\r\n padding: 0;\r\n box-sizing: border-box;\r\n}\r\n\r\nol,\r\nul {\r\n list-style: none;\r\n}\r\n\r\na {\r\n text-decoration: none;\r\n}\r\n\r\nbutton {\r\n background: none;\r\n border: none;\r\n outline: none;\r\n cursor: pointer;\r\n}\r\n\r\naddress {\r\n font-style: normal;\r\n}\r\n\r\n","@use \"../abstracts/variables\";\r\n\r\n// ----------------------------------\r\n// Base element styling\r\n// ----------------------------------\r\nhtml {\r\n scroll-behavior: smooth;\r\n}\r\n\r\nfooter {\r\n background-color: var(--accent-colour);\r\n}\r\n","@use \"../abstracts/variables\";\r\n@use \"../base/reset\";\r\n\r\n.primary-btn {\r\n display: flex;\r\n position: relative;\r\n align-items: center;\r\n justify-content: center;\r\n gap: 10px;\r\n border: variables.$main-border;\r\n padding: 12px 24px;\r\n font-size: 1.125rem;\r\n font-weight: 600;\r\n\r\n img {\r\n height: 1.25rem;\r\n width: 1.25rem;\r\n }\r\n\r\n &:hover,\r\n :active {\r\n transition: all variables.$transition;\r\n color: var(--primary-colour);\r\n img {\r\n filter: invert(1);\r\n }\r\n }\r\n}\r\n\r\n// Button hover effect\r\n.primary-btn::before {\r\n content: \"\";\r\n position: absolute;\r\n background-color: var(--secondary-colour);\r\n color: var(--primary-colour);\r\n top: 0;\r\n left: 0;\r\n width: 100%;\r\n height: 20%;\r\n transition: all variables.$transition;\r\n z-index: -1;\r\n opacity: 0;\r\n}\r\n\r\n.primary-btn:hover::before {\r\n height: 100%;\r\n opacity: 1;\r\n}\r\n\r\n// button active effect\r\n.primary-btn:active {\r\n border: 1px solid var(--text-colour);\r\n color: var(--text-colour);\r\n\r\n img {\r\n filter: invert(0);\r\n }\r\n}\r\n\r\n.primary-btn:active::before {\r\n // removes the hover effect\r\n width: 100%;\r\n opacity: 0;\r\n}\r\n\r\n@media (width <= 600px) {\r\n .primary-btn {\r\n padding: 10px 20px;\r\n font-size: 1rem;\r\n }\r\n}\r\n","@use \"../abstracts/variables\";\r\n// ----------------------------------\r\n// Universal section styling\r\n// ----------------------------------\r\n.section {\r\n max-width: variables.$max-width;\r\n margin: 0 auto;\r\n padding: 4rem 1rem;\r\n}\r\n\r\n// Used inside .section-wrapper for changing the background colour of the sections.\r\n.primary-colour {\r\n background-color: var(--primary-colour);\r\n}\r\n.asset-colour {\r\n background-color: var(--accent-colour);\r\n}\r\n\r\n// Spacing used in the sections\r\n.spacing-4 {\r\n margin: 4rem 0 0 0;\r\n}\r\n\r\n.section-heading {\r\n display: flex;\r\n flex-direction: column;\r\n max-width: fit-content;\r\n position: relative;\r\n}\r\n\r\n.heading-underline {\r\n display: inline-block;\r\n border-bottom: variables.$main-border;\r\n width: 50%;\r\n margin-top: 0.5rem;\r\n}\r\n","@use \"../abstracts/variables\";\r\n@use \"../abstracts/mixins\";\r\n\r\n/* --- hamburger menu --- */\r\n.hamburger,\r\n.mobile-nav {\r\n display: none;\r\n}\r\n\r\n@media (width <= 800px) {\r\n .hamburger {\r\n display: block;\r\n position: relative;\r\n width: 1.625rem;\r\n cursor: pointer;\r\n outline: none;\r\n border: none;\r\n &:focus-visible {\r\n @include mixins.focus-styles;\r\n }\r\n }\r\n\r\n .hamburger-bar,\r\n .hamburger::after,\r\n .hamburger::before {\r\n content: \"\";\r\n display: block;\r\n height: 1px;\r\n width: 100%;\r\n margin: 6px 0;\r\n background-color: var(--text-colour);\r\n transition: variables.$transition;\r\n }\r\n\r\n .hamburger.is-active::after,\r\n .hamburger.is-active::before {\r\n background-color: var(--text-colour);\r\n }\r\n\r\n .hamburger.is-active .hamburger-bar {\r\n opacity: 0;\r\n }\r\n .hamburger.is-active:before {\r\n transform: rotate(-45deg) translate(-5px, 5px);\r\n }\r\n\r\n .hamburger.is-active:after {\r\n transform: rotate(45deg) translate(-5px, -5px);\r\n }\r\n\r\n .mobile-nav {\r\n position: fixed;\r\n display: flex;\r\n flex-direction: column;\r\n justify-content: start;\r\n align-items: center;\r\n gap: 8rem;\r\n top: 0;\r\n left: 100%;\r\n width: 100%;\r\n height: 100vh;\r\n background-color: var(--primary-colour);\r\n padding-top: 150px;\r\n z-index: 1000;\r\n transition: variables.$transition;\r\n }\r\n\r\n .mobile-nav.is-active {\r\n left: 0;\r\n }\r\n\r\n .page-link-wrapper {\r\n flex-direction: column;\r\n }\r\n}\r\n\r\n// to not being able to scroll while mobile nav is displaying\r\n.no-scroll {\r\n overflow: hidden;\r\n}\r\n","@use \"./variables\";\r\n\r\n// Focus state style\r\n@mixin focus-styles {\r\n border: 1px solid var(--text-colour);\r\n padding: 2px;\r\n}\r\n","@use \"../abstracts/variables\";\r\n\r\n.btn-down {\r\n display: inline-block;\r\n padding: 1rem;\r\n background-color: transparent;\r\n border: variables.$main-border;\r\n border-radius: 50%;\r\n line-height: 0;\r\n position: relative;\r\n &:hover,\r\n :active {\r\n img {\r\n filter: brightness(0) invert(0); // change icon colour when hovered\r\n }\r\n }\r\n}\r\n\r\n.btn-down::before {\r\n content: \"\";\r\n position: absolute;\r\n background-color: var(--secondary-colour);\r\n border-radius: inherit;\r\n top: 0;\r\n left: 0;\r\n width: 100%;\r\n height: 30%;\r\n transition: all variables.$transition;\r\n opacity: 0;\r\n color: var(--primary-colour);\r\n}\r\n\r\n.btn-down:hover::before {\r\n width: 100%;\r\n height: 100%;\r\n opacity: 1;\r\n}\r\n\r\n// button active effect\r\n.btn-down:active {\r\n border: 1px solid var(--text-colour);\r\n}\r\n\r\n.btn-down:active::before {\r\n // removes the background colour\r\n width: 100%;\r\n opacity: 0;\r\n}\r\n","@use \"../abstracts/variables\";\r\n\r\n.description-btn {\r\n align-self: flex-start;\r\n font-size: 1rem;\r\n font-style: italic;\r\n border-bottom: variables.$main-border;\r\n padding: 2px 5px;\r\n transition: all variables.$transition;\r\n\r\n &:hover {\r\n filter: opacity(variables.$opacity);\r\n }\r\n &:active {\r\n border-bottom: 1px solid var(--text-colour);\r\n }\r\n}\r\n\r\n.description-wrapper {\r\n display: flex;\r\n flex-direction: column;\r\n gap: 2rem;\r\n //transition effects\r\n position: relative;\r\n top: -100%;\r\n transition: all variables.$transition;\r\n height: 0;\r\n opacity: 0;\r\n visibility: hidden;\r\n margin-bottom: -2rem;\r\n\r\n ul {\r\n list-style: disc;\r\n padding-left: 1.125rem;\r\n }\r\n\r\n // displaying content through JS\r\n &.is-active {\r\n top: 0;\r\n height: 100%;\r\n opacity: 1;\r\n visibility: visible;\r\n margin-bottom: 0;\r\n }\r\n}\r\n\r\n.tech-wrapper {\r\n display: flex;\r\n align-items: center;\r\n flex-wrap: wrap;\r\n gap: 0.5rem;\r\n color: var(--text-colour);\r\n\r\n img {\r\n width: 3rem;\r\n }\r\n}\r\n\r\n.project-description-underline {\r\n display: inline-block;\r\n border-bottom: 1px solid var(--accent-colour);\r\n width: 50%;\r\n align-self: start;\r\n}\r\n","@use \"../abstracts/variables\";\r\n@use \"../abstracts/mixins\";\r\n// ----------------------------------\r\n// Colour mode elements\r\n// ----------------------------------\r\n.colour-mode-wrapper {\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n border: 2px solid var(--text-colour);\r\n border-radius: 20px;\r\n padding: 2px 5px;\r\n\r\n .colour-mode-btn {\r\n display: block;\r\n line-height: 0;\r\n // transition effect\r\n position: relative;\r\n opacity: 0;\r\n visibility: hidden;\r\n transition: all variables.$transition;\r\n pointer-events: none; // To target only the button element in the event listener\r\n\r\n &.is-active {\r\n opacity: 1;\r\n visibility: visible;\r\n pointer-events: all; // To target only the button element in the event listener\r\n top: 0;\r\n }\r\n\r\n &:focus-visible {\r\n @include mixins.focus-styles;\r\n }\r\n\r\n .light-mode-icon,\r\n .dark-mode-icon {\r\n width: 20px;\r\n height: 20px;\r\n pointer-events: none; // To target only the button element in the event listener\r\n }\r\n }\r\n\r\n p {\r\n font-size: 0.75rem;\r\n pointer-events: none; // To target only the button element in the event listener\r\n }\r\n}\r\n\r\n.colour-mode-btn {\r\n &:hover {\r\n img {\r\n filter: opacity(variables.$opacity);\r\n }\r\n }\r\n &:active {\r\n img {\r\n transform: scale(1.2);\r\n }\r\n }\r\n}\r\n\r\n// ---------- Media queries --------\r\n// ---------------------------------\r\n@media (width <= 800px) {\r\n .colour-mode-wrapper p {\r\n display: none;\r\n }\r\n .light-mode-icon,\r\n .dark-mode-icon {\r\n width: 27px;\r\n height: 27px;\r\n }\r\n}\r\n","@use \"../abstracts/variables\";\r\n@use \"../abstracts/mixins\";\r\n// ----------------------------------\r\n// header / nav bar\r\n// ----------------------------------\r\n.header-bar {\r\n display: flex;\r\n justify-content: space-between;\r\n align-items: center;\r\n padding: 1rem 1rem;\r\n position: fixed;\r\n width: 100%;\r\n left: 0;\r\n right: 0;\r\n top: 0;\r\n max-width: variables.$max-width;\r\n margin: 0 auto;\r\n transition: all variables.$transition;\r\n}\r\n\r\n.header-bar-container {\r\n position: fixed;\r\n width: 100%;\r\n left: 0;\r\n transition: all variables.$transition;\r\n z-index: 9999;\r\n\r\n // Classes thats get implemented when scrolling\r\n &.scroll-up {\r\n background-color: var(--primary-colour);\r\n filter: drop-shadow(0 1px 3px var(--secondary-colour));\r\n opacity: 0.9;\r\n padding: 1.5rem;\r\n }\r\n &.scroll-down {\r\n opacity: 0;\r\n pointer-events: none; // Makes header links not clickable when hidden\r\n }\r\n}\r\n\r\n.logo-container {\r\n // Add white colour to the logo to cheat the contrast ratio\r\n color: var(--text-colour);\r\n line-height: 0;\r\n}\r\n\r\n.links-container {\r\n display: flex;\r\n align-items: center;\r\n justify-content: space-between;\r\n}\r\n\r\n.page-link-wrapper {\r\n display: flex;\r\n align-items: center;\r\n gap: 2rem;\r\n}\r\n\r\n.main-link {\r\n position: relative;\r\n padding: 5px 0.5rem;\r\n}\r\n\r\n.main-link::before {\r\n content: \"\";\r\n position: absolute;\r\n bottom: 0;\r\n left: 0;\r\n width: 0%;\r\n height: 1px;\r\n background-color: var(--secondary-colour);\r\n color: var(--text-colour);\r\n transition: width variables.$transition;\r\n}\r\n\r\n.main-link:hover::before {\r\n width: 100%;\r\n}\r\n\r\n.main-link:active::before {\r\n background-color: var(--text-colour);\r\n}\r\n\r\n.page-link-wrapper a {\r\n font-size: 1.25rem;\r\n color: var(--text-colour);\r\n}\r\n\r\n.some-links-wrapper {\r\n display: flex;\r\n align-items: center;\r\n gap: 1rem;\r\n\r\n img {\r\n display: block;\r\n height: 20px;\r\n width: 20px;\r\n }\r\n}\r\n\r\n.some-links-wrapper a:hover,\r\n.some-links-wrapper a:active {\r\n filter: opacity(variables.$opacity);\r\n}\r\n\r\n.utility-btn-wrapper {\r\n display: flex;\r\n align-items: center;\r\n gap: 2rem;\r\n}\r\n\r\n// ----------------------------------\r\n// Media query < 900px\r\n// ----------------------------------\r\n@media (width <= 1000px) {\r\n .header-bar-container nav:last-of-type {\r\n display: none;\r\n }\r\n}\r\n\r\n@media (width <= 900px) {\r\n .page-link-wrapper .main-link {\r\n font-size: 1rem;\r\n }\r\n}\r\n\r\n@media (width <= 800px) {\r\n .header-bar-container nav {\r\n display: none;\r\n }\r\n}\r\n","@use \"../abstracts/variables\";\r\n\r\n// ----------------------------------\r\n// Footer styling\r\n// ----------------------------------\r\n.inner-footer {\r\n max-width: variables.$max-width;\r\n margin: 0 auto;\r\n display: flex;\r\n flex-direction: column;\r\n justify-content: center;\r\n align-items: center;\r\n gap: 3rem;\r\n padding: 2rem 1rem 1rem;\r\n}\r\n\r\n.footer-main-nav {\r\n display: flex;\r\n flex-wrap: wrap;\r\n justify-content: center;\r\n align-items: center;\r\n gap: 2rem;\r\n}\r\n\r\n.some-container {\r\n display: flex;\r\n justify-content: center;\r\n align-items: center;\r\n gap: 1rem;\r\n}\r\n\r\n.footer-logo-container {\r\n display: flex;\r\n flex-direction: column;\r\n justify-content: center;\r\n align-items: center;\r\n gap: 0.5rem;\r\n // Add white colour to the logo to cheat the contrast ratio\r\n color: var(--text-colour);\r\n a {\r\n line-height: 0;\r\n }\r\n}\r\n\r\n.copyright {\r\n border-top: 1px solid var(--text-colour);\r\n width: 80vw;\r\n max-width: variables.$max-width;\r\n margin: 0 auto;\r\n padding: 1rem 0 1rem;\r\n font-style: italic;\r\n text-align: center;\r\n font-size: 0.8rem;\r\n}\r\n\r\n@media (width <= 600px) {\r\n .inner-footer {\r\n gap: 2rem;\r\n }\r\n\r\n .footer-main-nav {\r\n flex-direction: column;\r\n gap: 1rem;\r\n }\r\n}\r\n","@use \"../abstracts/variables\";\r\n\r\n// ----------------------------------\r\n// Content on landing section\r\n// ----------------------------------\r\n.landing-section {\r\n background-color: var(--primary-colour);\r\n}\r\n\r\n.outer-header-container {\r\n height: 100vh;\r\n width: 100%;\r\n max-width: variables.$max-width;\r\n margin: 0 auto;\r\n padding: 0 1rem;\r\n background: no-repeat url(\"../assets/images/profile1.webp\") 100% center / 60% auto;\r\n background-color: var(--primary-colour);\r\n background-blend-mode: luminosity;\r\n overflow: hidden;\r\n // Ensures the content is on top of the background image\r\n position: relative;\r\n z-index: 1;\r\n}\r\n\r\n.intro-container {\r\n display: flex;\r\n flex-direction: column;\r\n justify-content: center;\r\n text-align: left;\r\n gap: 2rem;\r\n max-width: 90ch;\r\n position: relative;\r\n top: 50%;\r\n transform: translate(0, -50%);\r\n}\r\n\r\n.name-container {\r\n display: flex;\r\n align-items: center;\r\n justify-self: center;\r\n color: var(--text-colour); // to cheat the contrast checker for the logo div\r\n margin: 0 0 0.5rem 0;\r\n\r\n h1 {\r\n font-size: 3rem;\r\n display: inline-flex;\r\n align-items: baseline;\r\n line-height: 0;\r\n }\r\n\r\n img {\r\n display: inline-block;\r\n position: relative;\r\n bottom: -10px;\r\n width: 5rem;\r\n height: auto;\r\n margin-right: -22px;\r\n }\r\n\r\n .intro-text {\r\n font-size: 1.5rem;\r\n }\r\n}\r\n\r\n.intro-btn-container {\r\n display: flex;\r\n justify-content: left;\r\n align-items: center;\r\n gap: 2rem;\r\n position: relative; // To display hover state\r\n z-index: 1; // To display hover state\r\n}\r\n\r\n.btn-down-container {\r\n display: flex;\r\n flex-direction: column;\r\n justify-content: center;\r\n align-items: center;\r\n gap: 1rem;\r\n position: absolute;\r\n bottom: 0;\r\n left: 50%;\r\n transform: translate(-50%, -50%);\r\n}\r\n\r\n// ----------------------------------\r\n// Media query on landing section\r\n// ----------------------------------\r\n@media (width <= 1120px) {\r\n .intro-container {\r\n .name-container {\r\n h1 {\r\n font-size: 2.5rem;\r\n }\r\n }\r\n\r\n .intro-text {\r\n max-width: 50ch;\r\n }\r\n }\r\n}\r\n\r\n@media (width <= 800px) {\r\n .outer-header-container {\r\n background-position: 120% 60%;\r\n }\r\n .intro-container {\r\n .name-container {\r\n h1 {\r\n font-size: 2rem;\r\n }\r\n\r\n img {\r\n width: 4rem;\r\n margin-right: -16px;\r\n }\r\n }\r\n }\r\n}\r\n\r\n@media (width <= 600px) {\r\n .outer-header-container {\r\n background-position: 120% 100%;\r\n background-size: 60%;\r\n background: none;\r\n }\r\n .intro-container {\r\n align-items: center;\r\n text-align: center;\r\n gap: 2rem;\r\n transform: translate(0, -70%);\r\n }\r\n\r\n .intro-container:last-child {\r\n padding-top: 1rem;\r\n }\r\n\r\n .intro-btn-container {\r\n flex-direction: column;\r\n gap: 1rem;\r\n }\r\n\r\n .btn-down-container {\r\n text-align: center;\r\n transform: translate(-50%, -80%);\r\n gap: 0.5rem;\r\n }\r\n}\r\n\r\n@media (width <= 400px) {\r\n .intro-container {\r\n .name-container {\r\n h1 {\r\n font-size: 1.5rem;\r\n }\r\n }\r\n }\r\n}\r\n\r\n@media (width <= 320px) {\r\n .intro-container {\r\n .name-container {\r\n h1 {\r\n font-size: 1.25rem;\r\n }\r\n }\r\n }\r\n\r\n .btn-down-container {\r\n p {\r\n font-size: 0.875rem;\r\n }\r\n }\r\n}\r\n","@use \"../abstracts/variables\";\r\n@use \"../components/primary-button\";\r\n\r\n// ----------------------------------\r\n// Projects section\r\n// ----------------------------------\r\n.project-wrapper {\r\n display: flex;\r\n flex-direction: column;\r\n align-items: start;\r\n justify-content: center;\r\n padding: 4rem 0 0;\r\n}\r\n\r\n.outer-container {\r\n display: grid;\r\n grid-template-columns: 1fr 1fr;\r\n align-items: center;\r\n justify-items: left;\r\n position: relative;\r\n}\r\n\r\n.text-outer-wrapper {\r\n grid-column: 1 / 2;\r\n padding: 0 0.5rem 0 0;\r\n display: flex;\r\n flex-direction: column;\r\n gap: 2rem;\r\n max-width: variables.$max-characters-width;\r\n}\r\n\r\n.video-wrapper {\r\n grid-column: 2 / 2;\r\n color: var(\r\n --text-colour\r\n ); // Adding white colour to the image div to cheat the contrast checker\r\n video {\r\n width: 100%;\r\n height: auto;\r\n min-width: 450px;\r\n }\r\n}\r\n\r\n.text-inner-wrapper {\r\n display: flex;\r\n flex-direction: column;\r\n gap: 0.5rem;\r\n}\r\n\r\n.project-btn-container {\r\n display: flex;\r\n align-items: flex-start;\r\n gap: 2rem;\r\n z-index: 0; // To display hover state\r\n}\r\n\r\n.project-underline {\r\n display: inline-block;\r\n border-bottom: 1px solid var(--accent-colour);\r\n width: 100%;\r\n margin-top: 4rem;\r\n}\r\n\r\n@media (width <= 1000px) {\r\n .project-wrapper {\r\n align-items: center;\r\n }\r\n .outer-container {\r\n display: flex;\r\n flex-direction: column-reverse;\r\n gap: 2rem;\r\n }\r\n\r\n .text-outer-wrapper {\r\n padding: 0;\r\n }\r\n\r\n .video-wrapper {\r\n video {\r\n max-width: variables.$max-characters-width;\r\n min-width: auto;\r\n }\r\n }\r\n}\r\n\r\n@media (width <= 600px) {\r\n .outer-container {\r\n align-items: center;\r\n gap: 1rem;\r\n }\r\n\r\n .project-btn-container {\r\n flex-direction: column;\r\n align-items: center;\r\n gap: 1rem;\r\n }\r\n}\r\n","@use \"../abstracts/variables\";\r\n\r\n// ----------------------------------\r\n// Skills section styling\r\n// ----------------------------------\r\n\r\n// animation for the skill slider\r\n@keyframes slide {\r\n from {\r\n transform: translateX(0);\r\n }\r\n to {\r\n transform: translateX(-100%);\r\n }\r\n}\r\n\r\n.skills-container {\r\n overflow: hidden;\r\n white-space: nowrap; // Prevents the slider from wrapping\r\n position: relative;\r\n}\r\n\r\n// Creates a fade in/out style on the left and right side of the slider\r\n.skills-container::before {\r\n content: \"\";\r\n display: block;\r\n position: absolute;\r\n width: 50px;\r\n height: 100%;\r\n top: 0;\r\n left: 0;\r\n z-index: 2;\r\n background: linear-gradient(to right, rgba(54, 61, 72, 1), rgba(54, 61, 72, 0));\r\n}\r\n// Creates a fade in/out style on the left and right side of the slider\r\n.skills-container::after {\r\n content: \"\";\r\n display: block;\r\n position: absolute;\r\n width: 50px;\r\n height: 100%;\r\n top: 0;\r\n right: 0;\r\n z-index: 2;\r\n background: linear-gradient(to left, rgba(54, 61, 72, 1), rgba(54, 61, 72, 0));\r\n}\r\n\r\n.skill-slider {\r\n animation: slide 20s infinite linear;\r\n display: inline-flex;\r\n}\r\n\r\n.skill-wrapper {\r\n display: flex;\r\n flex-direction: column;\r\n align-items: center;\r\n justify-content: center;\r\n gap: 1rem;\r\n width: 135px;\r\n height: 135px;\r\n background: var(--primary-colour);\r\n border-radius: variables.$border-radius;\r\n margin: 0 2rem;\r\n color: var(--text-colour); // Adding white text colour to cheat the contrast checker\r\n\r\n img {\r\n height: 50px;\r\n width: 50px;\r\n }\r\n}\r\n\r\n// Pauses the animation when the user hovers over the skills container\r\n.skills-container:hover {\r\n .skill-slider {\r\n animation-play-state: paused;\r\n }\r\n}\r\n\r\n@media (width <= 600px) {\r\n .skill-wrapper {\r\n gap: 0.5rem;\r\n width: 100px;\r\n height: 100px;\r\n\r\n img {\r\n height: 30px;\r\n width: 30px;\r\n }\r\n }\r\n}\r\n","@use \"../abstracts/variables\";\r\n\r\n// ----------------------------------\r\n// About section styling\r\n// ----------------------------------\r\n.about-container {\r\n display: flex;\r\n flex-direction: column;\r\n gap: 2rem;\r\n width: 100%;\r\n}\r\n\r\n.full-wrapper {\r\n display: flex;\r\n justify-content: space-around;\r\n align-items: center;\r\n flex-wrap: wrap;\r\n}\r\n\r\n.main-wrapper {\r\n display: flex;\r\n flex-direction: column;\r\n gap: 2rem;\r\n max-width: variables.$max-characters-width;\r\n}\r\n\r\n.secondary-wrapper {\r\n display: flex;\r\n flex-direction: column;\r\n gap: 0.5rem;\r\n max-width: 20vw;\r\n min-width: 250px;\r\n color: var(\r\n --text-colour\r\n ); // added to override the default colour to pass the contrast ratio test\r\n\r\n figcaption {\r\n font-size: 1rem;\r\n color: var(--text-colour);\r\n }\r\n}\r\n\r\n@media (width <= 800px) {\r\n .full-wrapper {\r\n flex-direction: column;\r\n gap: 2rem;\r\n }\r\n .secondary-wrapper {\r\n align-items: center;\r\n width: 100%;\r\n max-width: variables.$max-characters-width;\r\n img {\r\n max-width: 200px;\r\n }\r\n\r\n figcaption {\r\n max-width: variables.$max-characters-width;\r\n }\r\n }\r\n}\r\n\r\n@media (width <= 600px) {\r\n .full-wrapper {\r\n text-align: center;\r\n }\r\n .secondary-wrapper {\r\n figcaption {\r\n text-align: center;\r\n }\r\n }\r\n}\r\n","@use \"../abstracts/variables\";\r\n\r\n// ----------------------------------\r\n// Experience section styling\r\n// ----------------------------------\r\n// --- Key qualifications ---\r\n.qualification-container {\r\n display: flex;\r\n flex-direction: column;\r\n padding-bottom: 4rem;\r\n\r\n h2 {\r\n margin: 0 0 1rem 0;\r\n }\r\n}\r\n\r\n.qualification-wrapper {\r\n display: flex;\r\n justify-content: space-around;\r\n align-items: center;\r\n gap: 2rem;\r\n background-color: var(--primary-colour);\r\n padding: 2rem 2rem 0;\r\n}\r\n\r\n.qualification-wrapper:last-child {\r\n padding: 2rem;\r\n}\r\n\r\n.qualification-articles {\r\n display: flex;\r\n flex-direction: column;\r\n gap: 1rem;\r\n max-width: variables.$max-characters-width;\r\n\r\n ul {\r\n list-style: disc;\r\n padding-left: 2rem;\r\n\r\n li {\r\n font-size: 1rem;\r\n }\r\n }\r\n}\r\n\r\n// --- Work experience and education ---\r\n// ----------------------------------------\r\n.experience-outer-container {\r\n display: flex;\r\n justify-content: space-between;\r\n align-items: stretch;\r\n gap: 2rem;\r\n}\r\n\r\n.left,\r\n.right {\r\n flex: 1;\r\n}\r\n\r\n.right {\r\n h2 {\r\n text-align: right;\r\n }\r\n}\r\n\r\n.center {\r\n display: flex;\r\n justify-content: center;\r\n align-items: center;\r\n}\r\n\r\n.vertical-line {\r\n width: 1px;\r\n height: 90%;\r\n background-color: var(--secondary-colour);\r\n filter: opacity(variables.$opacity);\r\n}\r\n\r\n.card-container {\r\n display: flex;\r\n flex-direction: column;\r\n gap: 1rem;\r\n padding: 2rem;\r\n background-color: var(--primary-colour);\r\n margin-top: 2rem; // space the headlines from the top\r\n\r\n .experience-date {\r\n display: flex;\r\n align-items: center;\r\n gap: 0.5rem;\r\n\r\n p:first-of-type {\r\n font-style: normal;\r\n font-size: 1rem;\r\n }\r\n }\r\n\r\n p:last-of-type {\r\n font-style: italic;\r\n max-width: variables.$max-characters-width;\r\n }\r\n ul {\r\n list-style: disc;\r\n padding-left: 2rem;\r\n font-weight: 300;\r\n\r\n li {\r\n font-size: 1rem;\r\n max-width: variables.$max-characters-width;\r\n a {\r\n font-size: 1rem;\r\n }\r\n }\r\n }\r\n}\r\n\r\n.card-container:first-of-type {\r\n margin-top: 1rem;\r\n}\r\n\r\n.optional-heading {\r\n margin: 2rem 0 0;\r\n}\r\n\r\n#interests {\r\n font-style: normal;\r\n font-size: 1rem;\r\n}\r\n\r\n.experience-btn-container {\r\n display: flex;\r\n flex-direction: column;\r\n justify-content: center;\r\n align-items: center;\r\n gap: 1rem;\r\n margin-top: 4rem;\r\n position: relative;\r\n z-index: 0;\r\n\r\n p {\r\n font-size: 1rem;\r\n }\r\n}\r\n\r\n.btn-wrapper {\r\n display: flex;\r\n justify-content: center;\r\n flex-wrap: wrap;\r\n gap: 2rem;\r\n}\r\n\r\n@media (width <= 800px) {\r\n .qualification-wrapper {\r\n flex-direction: column;\r\n }\r\n\r\n .experience-outer-container {\r\n flex-direction: column-reverse;\r\n }\r\n\r\n .left,\r\n .right {\r\n text-align: left;\r\n\r\n h2 {\r\n text-align: left;\r\n }\r\n }\r\n\r\n .vertical-line {\r\n display: none;\r\n }\r\n\r\n .card-container {\r\n padding: 1rem;\r\n }\r\n}\r\n\r\n@media (width <= 600px) {\r\n .qualification-container {\r\n text-align: center;\r\n\r\n h2 {\r\n text-align: center;\r\n }\r\n ul {\r\n list-style: none;\r\n }\r\n }\r\n\r\n .experience-outer-container {\r\n h2 {\r\n text-align: center;\r\n }\r\n ul {\r\n list-style: none;\r\n }\r\n }\r\n\r\n .card-container {\r\n padding: 1rem;\r\n text-align: center;\r\n align-items: center;\r\n }\r\n}\r\n","@use \"../abstracts/variables\";\r\n\r\n// ----------------------------------\r\n// Contact section styling\r\n// ----------------------------------\r\n.contact-container {\r\n display: flex;\r\n flex-direction: column;\r\n justify-content: center;\r\n align-items: center;\r\n text-align: center;\r\n gap: 2rem;\r\n max-width: variables.$max-characters-width;\r\n margin: 0 auto 4rem;\r\n}\r\n\r\n.contact-card-container:first-of-type {\r\n margin-top: 2rem;\r\n}\r\n\r\n.contact-card-container {\r\n display: flex;\r\n justify-content: space-around;\r\n align-items: center;\r\n width: 100%;\r\n max-width: inherit;\r\n background-color: var(--accent-colour);\r\n}\r\n\r\n.contact-card-wrapper {\r\n display: flex;\r\n flex-direction: column;\r\n align-items: start;\r\n text-align: left;\r\n gap: 1rem;\r\n padding: 2rem;\r\n\r\n a {\r\n &:hover,\r\n :active {\r\n filter: opacity(variables.$opacity);\r\n }\r\n }\r\n}\r\n\r\n.contact-inner-wrapper {\r\n display: flex;\r\n align-items: center;\r\n gap: 0.5rem;\r\n color: var(--text-colour); // add text colour to cheat the contrast checker\r\n img {\r\n width: 20px;\r\n height: 20px;\r\n }\r\n}\r\n\r\n.contact-some-container {\r\n display: flex;\r\n gap: 1rem;\r\n padding: 2rem;\r\n}\r\n\r\n.contact-some-link {\r\n display: flex;\r\n flex-direction: column;\r\n align-items: center;\r\n gap: 0.5rem;\r\n padding: 0.5rem;\r\n p {\r\n font-size: 0.75rem;\r\n }\r\n &:hover,\r\n :active {\r\n filter: opacity(variables.$opacity);\r\n }\r\n}\r\n\r\n@media (width <= 500px) {\r\n .contact-container {\r\n margin: 0;\r\n }\r\n .contact-card-container {\r\n flex-direction: column;\r\n }\r\n .contact-card-container:first-of-type {\r\n margin-top: 0;\r\n }\r\n\r\n .contact-card-wrapper {\r\n align-items: center;\r\n text-align: center;\r\n gap: 0.5rem;\r\n padding: 1rem 2rem;\r\n }\r\n}\r\n\r\n@media (width <= 400px) {\r\n .some-links-wrapper {\r\n flex-wrap: wrap;\r\n }\r\n\r\n .contact-some-link {\r\n p {\r\n display: none;\r\n }\r\n }\r\n}\r\n"]} \ No newline at end of file diff --git a/src/scss/abstracts/_variables.scss b/src/scss/abstracts/_variables.scss index 449a9cb..1733b47 100644 --- a/src/scss/abstracts/_variables.scss +++ b/src/scss/abstracts/_variables.scss @@ -1,4 +1,4 @@ -:root { +body { // Dark mode colours --primary-colour: #22252c; --accent-colour: #363d48; @@ -8,65 +8,73 @@ --warning-colour: #eb5e55; --error-colour: #d30a2e; --info-colour: #4d8cff; -} -body.light-mode { - // Light mode colours and styling - --primary-colour: #f9f9f9; - --accent-colour: #f0e9f2; - --secondary-colour: #f22c50; - --text-colour: #22252c; - --success-colour: #55d6c2; - --warning-colour: #eb5e55; - --error-colour: #d30a2e; - --info-colour: #4d8cff; + &.light-mode { + // Light mode colours and styling + --primary-colour: #f9f9f9; + --accent-colour: #f0e9f2; + --secondary-colour: #f22c50; + --text-colour: #22252c; + --success-colour: #55d6c2; + --warning-colour: #eb5e55; + --error-colour: #d30a2e; + --info-colour: #4d8cff; - p, - a, - li, - time, - button { - font-weight: 500; - } + p, + a, + li, + time, + button { + font-weight: 500; + } - .primary-btn img { - filter: invert(1); - } - .some-links-wrapper img { - filter: invert(1); - } + .primary-btn img { + filter: invert(1); + } + .some-links-wrapper img { + filter: invert(1); + } - .outer-header-container { - background-blend-mode: normal; - } + .outer-header-container { + background-blend-mode: normal; + } - .btn-down-container { - transform: translate(-80%, -50%); + .btn-down-container { + transform: translate(-80%, -50%); - .btn-down { - border: 2px solid var(--secondary-colour); + .btn-down { + border: 2px solid var(--secondary-colour); + } } - } - .primary-btn { - border: 2px solid var(--secondary-colour); - } + .primary-btn { + border: 2px solid var(--secondary-colour); + } - .skills-container::before { - background: linear-gradient(to right, rgba(240, 233, 242, 1), rgba(240, 233, 242, 0)); - } - .skills-container::after { - background: linear-gradient(to left, rgba(240, 233, 242, 1), rgba(240, 233, 242, 0)); - } + .skills-container::before { + background: linear-gradient( + to right, + rgba(240, 233, 242, 1), + rgba(240, 233, 242, 0) + ); + } + .skills-container::after { + background: linear-gradient( + to left, + rgba(240, 233, 242, 1), + rgba(240, 233, 242, 0) + ); + } - @media (width <= 1000px) { - .btn-down-container { - transform: translate(-50%, -50%); + @media (width <= 1000px) { + .btn-down-container { + transform: translate(-50%, -50%); + } } - } - @media (width <= 600px) { - .btn-down-container { - transform: translate(-50%, -80%); + @media (width <= 600px) { + .btn-down-container { + transform: translate(-50%, -80%); + } } } }