:root{--rcv: #c20201;--cbd: #78bd3d;--argyle: #0471b7;--crb: #98e9f5;--management: #dc65f3;--portfolio: rgb(103, 58, 183);--awt:#f78da7;--iot:linear-gradient(-45deg, #d3d3d3, #5b5bff, #ff3ec5b4, #23d5ab);--secondary:#fff8f8;--text:black;--text-inverse:white;--hover:rgb(80, 47, 136);--btn:white;--card-btn:white;--accent: var(--portfolio)}[data-theme="dark"]{--portfolio: rgb(42, 44, 44);--secondary:#474747;--text:white;--text-inverse:white;--hover:rgb(18, 19, 19);--btn:white;--card-btn:white}[data-theme="pink"]{--portfolio: #f3d4d4;--secondary:#fff1f1;--hover:#bea3a3;--text-inverse:rgb(0, 0, 0);--btn:black;--card-btn:white;--accent:#ff8181}html{scroll-behavior:smooth;font-family:'lato', 'sans-serif';box-sizing:border-box}*,*::before,*::after{box-sizing:inherit}*{padding:0;margin:0}a{text-decoration:none}h1{font-size:clamp(3rem, 8vw, 9rem)}h2{font-size:clamp(3.2rem, 13vw, 6rem);font-weight:400}h3{font-size:clamp(1.4rem, 12vw, 5rem)}h4{font-size:clamp(1.3rem, 11vw, 4rem)}h5{font-size:clamp(1.25rem, 10vw, 3rem)}h6{font-size:clamp(1.2rem, 9vw, 2rem)}p{font-size:clamp(1.15rem, 2vw, 1.5rem)}:is(a,button,input,textarea,summary):focus{box-shadow:0 0 0 2px #007fd4;outline:0}::-webkit-scrollbar{width:10px}::-webkit-scrollbar-track{background-color:#333333}::-webkit-scrollbar-thumb{background:#434343}#main-content,#about,#projects .container-wrapper{background-color:var(--portfolio);color:var(--text)}#intro{color:var(--text);clip-path:ellipse(134% 100% at 41.05% 0%)}#intro,#tech-stack,#projects,#contact{background-color:var(--secondary);color:var(--text)}#about,#projects,#projects .container-wrapper{color:var(--text-inverse)}#tech-stack{clip-path:ellipse(197% 94% at 50% 94%)}@media (min-width: 1024px){#tech-stack{padding:11.5rem 0}}#projects{padding-top:3rem}#projects .container-wrapper{clip-path:ellipse(197% 94% at 50% 94%)}@media (min-width: 1024px){#projects .container-wrapper{padding:3rem 0}}.header{position:fixed;top:0;z-index:1;width:100%;display:grid}#social-media{position:fixed;bottom:0;z-index:1}#social-media .icons{background-color:var(--secondary);border-radius:5px}#intro .hero{align-items:center;min-height:calc(90vh - 60px)}#intro .hero .img{width:82%;filter:drop-shadow(19px 4px 6px black)}#intro .hero-title,#intro .hero-subtitle{font-weight:300}#intro .hero p{text-align:center;font-size:clamp(1.2rem, 7vw, 2rem);padding-top:1rem;padding-bottom:0.4rem}@media (min-width: 1024px){#intro .hero{grid-template-columns:repeat(2, 1fr);grid-template-rows:1fr 300px;grid-template-areas:"content img" "explore explore";justify-items:center;align-items:center}#intro .hero-content{grid-area:content;display:flex;flex-direction:column;align-items:center;padding-top:1rem}#intro .hero .img{grid-area:img;width:60%}#intro .hero .explore-wrapper{grid-area:explore}}#about .container{min-height:70vh;display:grid;align-items:start;grid-template-areas:"heading" "content" "img" "explore"}@media (min-width: 1024px){#about .container{grid-template-areas:"heading img" "content img" "explore explore"}}#about .container-title{grid-area:heading;align-self:end;text-align:start;margin-bottom:2rem}#about .container-content{grid-area:content}@media (min-width: 1024px){#about .container-content{padding-right:2rem}}#about .container .img{grid-area:img;justify-self:center;align-self:center;max-width:30rem;border-radius:5px;filter:drop-shadow(2px 4px 6px black)}#about .container .explore{grid-area:explore}#contact .container-title{margin:0}#contact .container p{padding:0.4rem;font-size:clamp(1.2rem, 5vw, 1.8rem)}#contact .container .icons{padding-top:2rem}#contact .container .icons i{font-size:3rem}#tech-stack .hero{background-color:inherit}#tech-stack .hero .sticky{position:sticky;top:48px;background-color:inherit}#tech-stack .hero-title{font-size:clamp(3.2rem, 13vw, 10rem)}@media (min-width: 1024px){#tech-stack .hero{grid-template-columns:1fr 1fr;padding:10rem 0;justify-items:center;height:100%}#tech-stack .hero-title{position:sticky;top:30%;padding-bottom:0;line-height:113px}}.footer{background-color:var(--secondary);color:var(--text);display:flex;flex-direction:column;padding-bottom:4rem;align-items:center}.skip-nav{font-size:clamp(1rem, 5vw, 1.2rem);position:absolute;transform:translateY(-120%);padding:0.7em;background-color:white;color:black;transition:300ms transform}.skip-nav:focus{transform:translateY(0)}nav{display:grid;grid-template-columns:repeat(2, 1fr);grid-template-areas:"logo button" "menu-wrapper menu-wrapper"}nav .logo-wrapper{background-color:transparent;padding:15px;grid-area:logo;z-index:1}nav .button-wrapper{background-color:transparent;display:flex;justify-content:flex-end;padding:15px;grid-area:button;z-index:1}nav .button-wrapper .toggle i{padding-right:5px}nav a,nav .toggle{font-size:clamp(1.2rem, 5vw, 1.5rem);color:var(--text);cursor:pointer;background-color:inherit;border:0;transition:color 300ms}nav .menu-wrapper{display:none;grid-area:menu-wrapper;transition:300ms visibility, 300ms opacity, background-color 300ms;background-color:var(--secondary);opacity:0;visibility:hidden;position:fixed;height:100vh;width:100%}nav .menu-wrapper.hidden{display:flex}nav .menu-wrapper.show{visibility:visible;opacity:1}nav .menu-wrapper .menu-aside{flex-basis:0%;cursor:pointer}@media (min-width: 1024px){nav .menu-wrapper .menu-aside{flex-basis:50%}}nav .menu-wrapper .menu{display:flex;height:100vh;color:var(--text);flex-direction:column;align-items:center;padding:10rem 1rem 1rem 1rem;background-color:var(--secondary);filter:brightness(1.1);flex-basis:100%;gap:2rem;transition:background-color 300ms}nav .menu-wrapper .menu menu{display:flex;flex-direction:column;gap:5px;align-items:center}nav .menu-wrapper .menu menu a{padding:10px;position:relative}nav .menu-wrapper .menu menu a::after{content:'';position:absolute;height:2px;width:100%;left:10px;bottom:0;transition:300ms background-color}nav .menu-wrapper .menu menu a:hover::after,nav .menu-wrapper .menu menu a:focus::after{background-color:var(--portfolio)}@media (min-width: 1024px){nav .menu-wrapper .menu menu{align-items:flex-start}}nav .menu-wrapper .menu .theme-wrapper{width:100%;border-top:1px solid #dddddd;display:flex;justify-content:center;gap:1rem;padding-top:10px;flex:1;align-items:flex-end}nav .menu-wrapper .menu .theme-wrapper .theme-btn{border:1px white solid;border-radius:50%;padding:10px;cursor:pointer}nav .menu-wrapper .menu .theme-wrapper .theme-btn[data-colour='pink']{background-color:#f5d6d6}nav .menu-wrapper .menu .theme-wrapper .theme-btn[data-colour='purple']{background-color:#673ab7}nav .menu-wrapper .menu .theme-wrapper .theme-btn[data-colour='dark']{background-color:#2A2C2C}@media (min-width: 1024px){nav .menu-wrapper .menu{align-items:flex-start;padding:20rem 1rem 1rem 5rem;flex-basis:50%}}menu-wrapper.show{opacity:1}menu-wrapper .menu-aside{display:none}@media (min-width: 1024px){menu-wrapper .menu-aside{display:block;height:100%;width:50%}}menu-wrapper .menu{color:var(--text);display:flex;flex-direction:column;align-items:center;padding:10rem 1rem;height:100%;width:100%;transition:300ms;background-color:var(--secondary);filter:brightness(1.1)}menu-wrapper .menu-title{text-align:center;padding-bottom:0.2rem}menu-wrapper .menu .secondary-nav .nav-link{padding:10px}menu-wrapper .menu .secondary-nav .nav-link:hover,menu-wrapper .menu .secondary-nav .nav-link:focus{color:#7e7e7e}@media (min-width: 1024px){menu-wrapper .menu .secondary-nav{align-items:flex-start}}menu-wrapper .menu .icons{margin:1rem 0;padding-left:4rem}menu-wrapper .menu .icons a .icon{font-size:clamp(2rem, 5vw, 2.2rem)}menu-wrapper .menu .theme-wrapper{width:100%;border-top:1px solid #dddddd;display:flex;justify-content:center;gap:1rem;padding-top:10px}menu-wrapper .menu .theme-wrapper .theme-btn{border:1px white solid;border-radius:50%;padding:10px;cursor:pointer}menu-wrapper .menu .theme-wrapper .theme-btn[data-colour='pink']{background-color:#f5d6d6}menu-wrapper .menu .theme-wrapper .theme-btn[data-colour='purple']{background-color:#673ab7}menu-wrapper .menu .theme-wrapper .theme-btn[data-colour='dark']{background-color:#2A2C2C}@media (min-width: 1024px){menu-wrapper .menu{flex:50%;align-items:flex-start;padding:1rem;justify-content:center}menu-wrapper .menu-title,menu-wrapper .menu .nav{text-align:left;padding-left:4rem}}.buttons{margin:0.8rem;display:flex;flex-direction:row;justify-content:center}.button{display:block;padding:10px;background:var(--portfolio);color:var(--btn);border-radius:5px;transition:0.5s;margin:5px;border:0;cursor:pointer;font-size:clamp(1.15rem, 5vw, 1.3rem);width:fit-content}.button:hover,.button:focus{background-color:var(--hover)}.icons{display:flex}.icons a{padding:10px;color:var(--text)}.icons a:hover .icon,.icons a:focus .icon{transition:0.5s;color:var(--hover)}.icons a i{font-size:clamp(2rem, 5vw, 2.2rem)}.explore-wrapper{flex:1;display:flex;align-items:flex-end;justify-content:center;width:100%}.explore-wrapper .explore{display:flex;flex-direction:column;align-items:center;font-size:clamp(1rem, 6vw, 2rem);transition:0.3s;justify-content:flex-end;color:var(--text);margin:3.2rem;opacity:0.6}.explore-wrapper .explore:hover,.explore-wrapper .explore:focus{transform:scale(1.1)}.explore-wrapper .explore:hover i,.explore-wrapper .explore:focus i{animation:bounce 2s infinite}@keyframes bounce{0%,20%,100%{transform:translateY(0)}40%{transform:translateY(2px)}60%{transform:translateY(4px)}}.img{width:100%}.tech-holder{display:flex;flex-direction:column;justify-content:space-evenly;align-items:center;gap:7rem;margin-top:3rem}@media (min-width: 1024px){.tech-holder{gap:20rem;margin:0}}.tech-wrapper{display:flex;flex-direction:column;border-radius:100%;align-items:center;justify-content:center;color:var(--accent)}.tech-wrapper i{font-size:clamp(200px, 16vw, 400px);color:var(--accent)}@media only screen{.tech-wrapper.js h3,.tech-wrapper.php h3{display:none}}.copyright{display:flex;align-items:center}.copyright *{padding:1px;font-size:clamp(1rem, 5vw, 1.15rem)}.cards{display:flex;flex-direction:row;flex-wrap:wrap;width:100%;justify-content:center;gap:1rem}.card{min-height:300px;width:300px;box-shadow:1px 1px 6px 1px black;color:white;position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;transition:background-color 500ms, transform 500ms;margin:1rem;text-align:center;border:3px solid transparent}.card::before{width:100%;height:100%;content:'';position:absolute;border-radius:5px;background-position:center;background-size:110%;background-repeat:no-repeat;top:0;left:0}.card>*{opacity:0}.card p{padding:0 20px;margin:0.7rem 0;font-size:clamp(1rem, 3vw, 1.1rem)}.card .button{font-size:1rem;padding:8px;background-color:transparent;color:var(--card-btn)}.card:hover,.card:focus-within{transform:scale(1.15);background-color:black}.card:hover>*,.card:focus-within>*{opacity:1;z-index:0}.card:hover::before,.card:focus-within::before{filter:blur(5px) brightness(0.2)}.rcv{background-color:black}.rcv::before{background-image:url(../assets/images/RedCrowVape.webp)}.rcv .button{border:1px solid var(--rcv)}.rcv .button:hover,.rcv .button:focus{background-color:var(--rcv)}.rcv:hover,.rcv:focus-within{border:3px solid var(--rcv)}.cbd{background-color:var(--cbd)}.cbd::before{background-image:url(../assets/images/CbdEarth.webp)}.cbd .button{border:1px solid var(--cbd)}.cbd .button:hover,.cbd .button:focus{background-color:var(--cbd);color:black}.cbd:hover,.cbd:focus-within{border:3px solid var(--cbd)}.argyle,.crb{background-color:white}.argyle::before{background-image:url(../assets/images/Aequus.webp);background-size:auto}.argyle .button{border:1px solid var(--argyle)}.argyle .button:hover,.argyle .button:focus{background-color:var(--argyle)}.argyle:hover,.argyle:focus-within{border:3px solid var(--argyle)}.management{background-color:var(--management)}.management::before{background-image:url(../assets/images/management.webp)}.management .button{border:1px solid var(--management)}.management .button:hover,.management .button:focus{background-color:var(--management);color:black}.management:hover,.management:focus-within{border:3px solid var(--management)}.crb::before{display:flex;content:"CRB1";color:var(--crb);font-size:4rem;align-items:center;justify-content:center}.crb .button{border:1px solid var(--crb)}.crb .button:hover,.crb .button:focus{background-color:var(--crb);color:black}.crb:hover,.crb:focus-within{border:3px solid var(--crb)}.portfolio{background-color:var(--portfolio)}.portfolio::before{background-image:url(../assets/images/logo.webp);background-size:auto}.portfolio .button{border:1px solid var(--portfolio)}.portfolio .button:hover,.portfolio .button:focus{background-color:var(--portfolio);color:var(--card-btn)}.portfolio:hover,.portfolio:focus-within{border:3px solid var(--portfolio)}.iot{background-image:var(--iot);background-size:200%;border:0}.iot::before{display:flex;content:"IOT";color:white;font-size:4rem;align-items:center;justify-content:center}.iot .button{border:1px solid white}.iot .button:hover,.iot .button:focus{background:var(--iot);background-size:200%;color:black;border-color:unset}.iot:hover,.iot:focus-within{background:black}.awt{background-color:var(--awt)}.awt::before{background-image:url(../assets/images/awt.webp)}.awt .button{border:1px solid var(--awt)}.awt .button:hover,.awt .button:focus{background-color:var(--awt);color:black}.awt:hover,.awt:focus-within{border:3px solid var(--awt)}.container,.hero{display:flex;flex-direction:column}.container-title,.container-subtitle,.hero-title,.hero-subtitle{text-align:center;padding-bottom:0.2rem}.hero{padding-top:3.35rem}.hero-content{padding-top:2rem}@media (min-width: 1024px){.hero{display:grid;padding-top:0}.hero-content{padding:0}}.container{margin:auto;padding:3.8rem 1rem;max-width:1400px;align-items:center}.container-title{margin-bottom:0.4rem}.container-content p{line-height:1.5;margin-bottom:1rem}
