:root{--colour-primary: #004d4d;--colour-secondary: #4d4d00;--colour-txt-light: white;--light-bg: rgba(0, 0, 0, .1);--dark-bg: rgba(0, 0, 0, .25);--hover-bg: rgba(0, 0, 0, .5);--colour-gradient: -145deg, var(--colour-secondary), var(--colour-primary), var(--colour-secondary), var(--colour-primary)}@keyframes gradient{0%,to{background-position:0% 50%}50%{background-position:100% 0%}}*{margin:0;padding:0;box-sizing:border-box;color:var(--colour-txt-light);list-style:none;text-decoration:none;text-shadow:2px 2px var(--colour-primary);font-family:Bebas Neue,system-ui,sans-serif}html{background:#000}body{width:100vw;height:100dvh;background:linear-gradient(var(--colour-gradient));background-size:400% 400%;animation:gradient 10s ease infinite;overflow:hidden}main{height:100%;width:100%;display:flex;flex-direction:column}#header-nav{position:fixed}#sections{height:100%}#first-output,#first-output-div{width:100%}#skills-div{text-align:center;display:flex;flex-direction:column}.image-out{display:flex;flex-direction:row;justify-content:space-evenly}#resume-page,#project-page{width:100%;height:100%;display:flex;flex-direction:column;align-items:center;gap:1rem}#resume-section,#project-section{width:95%;height:80%;display:flex;justify-content:center;align-items:center;margin:2vh}#first-nav,#second-nav{display:flex;justify-content:space-evenly;align-content:center}#second-nav{flex-direction:column}#first-nav a,#second-nav a,#link-buttons a,#email-button{width:100%;background:var(--dark-bg);text-align:center;display:inline-block}.email-submit{background:var(--dark-bg)}#back-to-grid,#github-button{background:var(--dark-bg);border:2px solid var(--colour-primary);border-radius:8px;padding:.75rem 1.5rem;font-size:1rem;font-weight:600;cursor:pointer;transition:all .2s ease;margin-bottom:1.5rem;align-self:flex-start}#back-to-grid:hover,#github-button:hover{transform:scale(1.05);background:var(--hover-bg)!important}input,textarea{border:2px solid var(--colour-primary);background:var(--light-bg)}.email-input,textarea{color:var(--colour-txt-light);background:var(--light-bg);width:100%}textarea{text-align:left}#first-output,#second-output,#first-output-div input,#first-output-div textarea,#skills-div,.email-submit{font-family:Arial,Helvetica,sans-serif}#header-nav img,#first-output-div img,#second-output-div img{background:var(--light-bg)}.project-card img,#project-preview{width:100%;object-fit:cover;border-radius:8px;-webkit-user-drag:none;-webkit-user-select:none;user-select:none}.project-card img{max-height:240px;margin-bottom:.75rem}#project-preview{max-height:250px;margin-bottom:1rem}.tech{border:4px solid var(--colour-primary);border-radius:15px;background:var(--dark-bg)}#resume-display,#projects-grid,#project-details{width:100%;height:100%;border:2px solid var(--colour-primary);border-radius:8px;background:var(--light-bg)}#projects-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));grid-auto-rows:max-content;gap:1.5rem;overflow-y:auto;overflow-x:hidden}#projects-grid,#project-details{flex:1;transition:opacity .3s ease;opacity:1;padding:1.5rem}#project-details{overflow-y:auto;background:var(--light-bg);border-radius:10px;display:flex;flex-direction:column}#project-details h3{font-size:2.5rem;margin:0 0 1.5rem;font-weight:700;letter-spacing:1px}#project-details p{font-size:1.1rem;line-height:1.6;margin:1.5rem 0}#project-buttons{display:flex;gap:1rem}.project-card{background:var(--dark-bg);padding:1.5rem;border-radius:10px;text-align:center;font-size:1.4rem;cursor:pointer;transition:transform .2s ease;pointer-events:auto;min-height:320px;display:flex;flex-direction:column;justify-content:space-between}.project-card:hover{transform:scale(1.05);background:var(--hover-bg)!important}.project-card h4{margin:0;font-size:1.3rem;font-weight:700}.project-tech{display:flex;gap:.75rem;margin:1rem 0;flex-wrap:wrap}.tech-icon{width:80px;height:80px;object-fit:contain;background:var(--light-bg);padding:.5rem;border-radius:8px;transition:transform .2s ease}.tech-icon:hover{transform:scale(1.1)}#second-output-div a,#first-output-div a{text-align:center}#first-output-div p{text-align:left!important}#first-output-div a p{text-align:center!important}.hidden{display:none;pointer-events:none}.fade-out{opacity:0!important;pointer-events:none}.hover-colour:hover{background:var(--hover-bg)!important;z-index:1;cursor:pointer}@media(max-width:480px){header{width:90vw;margin:5vh auto 0}header h1{font-size:9.5vw;line-height:9.5vw;letter-spacing:3px}header p,#first-output-div a p,#second-output-div a p{font-size:3vw;line-height:5vw}header p a{background:var(--dark-bg);border:2px solid var(--colour-primary);border-radius:5px;padding:2.5px}#header-nav{top:5vh;right:5%}#first-nav,#second-nav{column-gap:5px}#second-nav{margin:2vh 0 0}#first-nav a,#second-nav a,#link-buttons a,#email-button{font-size:4vw;line-height:4vw;border:2px solid var(--colour-primary);border-radius:5px;padding:1.5vw}#header-nav img,#second-output-div img,#first-output-div img{width:12.5vw;height:12.5vw;padding:2px;border:2px solid var(--colour-primary);border-radius:5px}#email-icon{display:none}#sections{width:90vw;display:flex;flex-direction:column;justify-content:space-evenly;margin:0 auto 5vh}#first-section,#second-section{display:flex}#first-section{flex-direction:column;height:55%}#second-section{flex-direction:column-reverse}#contact-section{display:flex;flex-direction:column}#first-output,#second-output,#first-output-div input,#first-output-div textarea,#skills-div{font-size:2.75vmin;line-height:3.75vmin}#first-output-div,#second-output-div{margin:2vh 0 0}#first-output-div a,#first-output-div a img,#second-output-div a,#second-output-div a img{border-radius:10px}#second-output-div,#first-output-div{display:flex;justify-content:space-evenly}input,textarea,.email-submit{width:100%;padding:4px}textarea{height:8vh}.email-input{margin:1vh 0}#link-buttons a{margin-top:1vh;margin-left:auto;margin-right:auto}.tech{width:15vw!important;height:20vw!important;padding:10px}.image-out,#skills-div{gap:5vw}}@media(max-height:430px)and (max-width:789px){#email-icon{display:inline-block!important}#first-nav a,#second-nav a,#link-buttons a,#email-button{font-size:2.5vmin;line-height:3.5vmin;border:2px solid var(--colour-primary);border-radius:10px;padding:1vmin}#sections{flex-direction:row!important}#second-section{flex-direction:column!important}#first-section,#second-section{width:42vw!important}#first-output,#second-output,#first-output-div input,#first-output-div textarea,#skills-div{font-size:2.5vmin!important;line-height:2.5vmin!important}}@media(max-height:430px)and (max-width:972px){header{width:85vw}header h1{font-size:7.5vw;line-height:6.5vw;letter-spacing:3px}header p,#first-output-div a p,#second-output-div a p{font-size:2.5vw;line-height:4vw}header p a{border-radius:5px;padding:2.5px;background:var(--dark-bg);border:2px solid var(--colour-primary)}#header-nav{right:7%}#first-nav a,#second-nav a,#link-buttons a,#email-button{font-size:3.5vmin;line-height:3.5vmin;border:2px solid var(--colour-primary);border-radius:10px;padding:1vmin}#email-icon{display:inline-block!important}#header-nav img,#second-output-div img,#first-output-div img{padding:2px;width:8vw;height:8vw;border:4px solid var(--colour-primary);border-radius:5px}#sections{width:85vw;flex-direction:row!important}#first-section,#second-section{width:42vw!important}#second-section{flex-direction:column!important}#first-output,#second-output,#first-output-div input,#first-output-div textarea,#skills-div{font-size:2.25vmin!important;line-height:2.25vmin!important}.tech{width:5vw!important;height:6vw!important}.image-out,#skills-div{gap:1vw}}@media(min-width:481px)and (max-width:789px){header{width:90vw;margin:5vh auto 0}header h1{font-size:9.5vmin;line-height:9.5vmin;letter-spacing:3px}header p,#first-output-div a p,#second-output-div a p{font-size:3vmin;line-height:5vmin}header p a{border-radius:5px;padding:2.5px;background:var(--dark-bg);border:2px solid var(--colour-primary)}#header-nav{top:5vh;right:5%}#first-nav,#second-nav{margin:2vh 0 0;column-gap:5px}#first-nav a,#second-nav a,#link-buttons a,#email-button{font-size:3.5vmin;line-height:3.5vmin;border:4px solid var(--colour-primary);border-radius:10px;padding:1.5vmin}#header-nav img,#second-output-div img,#first-output-div img{padding:2px;width:10vmin;height:10vmin;border:4px solid var(--colour-primary);border-radius:5px}#email-icon{display:none}#sections{width:90vw;display:flex;flex-direction:column;justify-content:space-evenly;margin:0 auto 5vh}#first-section,#second-section{display:flex;flex-direction:column;width:90vw}#first-section{height:67%}#second-section{flex-direction:column-reverse}#first-output,#second-output,#first-output-div input,#first-output-div textarea,#skills-div{font-size:3vmin;line-height:3vmin}#first-output-div,#second-output-div{margin:2vh 0 0}#first-output-div a,#first-output-div a img,#second-output-div a,#second-output-div a img{border-radius:10px}#second-output-div,#first-output-div{display:flex;justify-content:space-evenly}input,textarea,.email-submit{width:100%;padding:6px}textarea{height:6vh}.email-input{margin:1vh 0}#link-buttons a{margin-top:1vh;margin-left:auto;margin-right:auto}.tech{width:15vmin!important;height:20vmin!important;padding:10px}.image-out,#skills-div{gap:3vmin}}@media(min-width:790px)and (max-width:972px){header{width:90vw;margin:5vh auto 0}header h1{font-size:9.5vw;line-height:9.5vw;letter-spacing:3px}header p,#first-output-div a p,#second-output-div a p{font-size:3vw;line-height:5vw}header p a{border-radius:5px;padding:2.5px;background:var(--dark-bg);border:2px solid var(--colour-primary)}#header-nav{top:5vh;right:5%}#first-nav,#second-nav{margin:2vh 0 0;column-gap:5px}#first-nav a,#second-nav a,#link-buttons a,#email-button{font-size:3.5vw;line-height:3.5vw;border:4px solid var(--colour-primary);border-radius:10px;padding:1.5vw}#header-nav img,#second-output-div img,#first-output-div img{padding:2px;width:10vw;height:10vw;border:4px solid var(--colour-primary);border-radius:5px}#email-icon{display:none}#sections{width:90vw;display:flex;flex-direction:column;justify-content:space-evenly;margin:0 auto 5vh}#first-section,#second-section{display:flex;flex-direction:column;width:90vw}#first-section{height:67%}#second-section{flex-direction:column-reverse}#first-output,#second-output,#first-output-div input,#first-output-div textarea,#skills-div{font-size:3vw;line-height:3vw}#first-output-div,#second-output-div{margin:2vh 0 0}#first-output-div a,#first-output-div a img,#second-output-div a,#second-output-div a img{border-radius:10px}#second-output-div,#first-output-div{display:flex;justify-content:space-evenly}input,textarea,.email-submit{width:100%;padding:6px}textarea{height:6vh}.email-input{margin:1vh 0}#link-buttons a{margin-top:1vh;margin-left:auto;margin-right:auto}.tech{width:15vw!important;height:20vw!important;padding:10px}.image-out,#skills-div{gap:3vw}}@media(min-width:973px){#resume-page,#project-page{display:flex;flex-direction:row;align-items:flex-start;justify-content:space-evenly;padding:0 2.5vw}#resume-header,#project-header{width:25vw;margin:10vh 0 0 10vh}#resume-section,#project-section{width:55vw;height:90vh;margin-top:4vh}}@media(min-width:973px)and (max-width:1024px){header{width:80vw;margin:10vh auto 0}header h1{font-size:7.5vw;line-height:7.5vw;letter-spacing:3px}header p,#first-output-div a p,#second-output-div a p{font-size:2.25vw;line-height:2.25vw}header p a{border-radius:5px;padding:0 5px}#header-nav{top:10vh;right:10%}#first-nav,#second-nav{margin-top:8vh;column-gap:2px}#first-nav a,#second-nav a,#link-buttons a,#email-button{font-size:2.5vw;line-height:2.5vw;border:4px solid var(--colour-primary);border-radius:10px;padding:1.5vw}#header-nav img{margin-left:10px}#header-nav img,#first-output-div img,#second-output-div img{padding:5px;width:8vw;height:8vw;border:4px solid var(--colour-primary);border-radius:20px}#sections{height:100%;width:80vw;display:flex;justify-content:space-between;margin:auto}#first-section,#second-section,#contact-section{width:38vw}#first-output,#second-output,#first-output-div input,#first-output-div text-area,#skills-div{font-size:1.8vmin;line-height:2.2vmin}#first-output-div,#second-output-div{margin-top:4vh}#first-output-div a,#first-output-div a img,#second-output-div a,#second-output-div a img{border-radius:25px}#second-output-div,#first-output-div{display:flex;justify-content:space-evenly}input,textarea,.email-submit{width:100%;padding:10px}textarea{height:10vh}.email-input{margin:1vh 0}#link-buttons a{margin-top:1vh}.tech{width:8vw!important;height:10vw!important;padding:10px}.image-out,#skills-div{gap:1.8vw}}@media(min-width:1025px)and (max-width:1200px){header{width:80vw;margin:10vh auto 0}header h1{font-size:6.75vw;line-height:6.75vw;letter-spacing:3px}header p,#first-output-div a p,#second-output-div a p{font-size:1.8vw;line-height:1.8vw}header p a{border-radius:5px;padding:0 5px}#header-nav{top:10vh;right:10%}#header-nav img{margin-left:10px}#header-nav img,#first-output-div img,#second-output-div img{padding:5px;width:5vw;height:5vw;border:4px solid var(--colour-primary);border-radius:20px}#sections{height:100%;width:80vw;display:flex;justify-content:space-between;margin:auto}#first-section,#second-section{width:35vw}#first-nav,#second-nav{margin-top:10vh;column-gap:10px}#first-nav a,#second-nav a,#link-buttons a,#email-button{font-size:1.5vw;line-height:2.5vw;border:4px solid var(--colour-primary);border-radius:10px;padding:0 2.5vw}#first-output,#second-output,#first-output-div input,#first-output-div textarea,#skills-div{font-size:1vw;line-height:1.2vw}#first-output-div,#second-output-div{margin-top:4vh}#first-output-div a,#first-output-div a img,#second-output-div a,#second-output-div a img{border-radius:15px}#second-output-div,#first-output-div{display:flex;justify-content:space-evenly}input,textarea,.email-submit{width:100%;padding:10px}textarea{height:10vh}.email-input{margin:1vh 0}#link-buttons a{margin-top:1vh}.tech{width:8vw!important;height:10vw!important;padding:10px}.image-out,#skills-div{gap:1.8vw}}@media(min-width:1201px){header{width:80vw;margin:10vh auto 0}header h1{font-size:6.75vw;line-height:6.75vw;letter-spacing:3px}header p,#first-output-div a p,#second-output-div a p{font-size:1.8vw;line-height:1.8vw}header p a{border-radius:5px;padding:0 5px}#header-nav{top:10vh;right:10%}#first-nav,#second-nav{margin-top:10vh;column-gap:10px}#first-nav a,#second-nav a,#link-buttons a,#email-button{font-size:1.5vw;line-height:2.5vw;border:4px solid var(--colour-primary);border-radius:15px;padding:0 2.5vw}#header-nav img{margin-left:10px}#header-nav img,#first-output-div img,#second-output-div img{padding:5px;width:5vw;height:5vw;border:4px solid var(--colour-primary);border-radius:20px}#sections{height:100%;width:80vw;display:flex;justify-content:space-between;margin:auto}#first-section,#second-section{width:35vw}#first-output,#second-output,#first-output-div input,#first-output-div textarea,#skills-div{font-size:1vw;line-height:1.2vw}#first-output-div,#second-output-div{margin-top:4vh}#first-output-div a,#first-output-div a img,#second-output-div a,#second-output-div a img{border-radius:20px}#second-output-div,#first-output-div{display:flex;justify-content:space-evenly}input,textarea,.email-submit{width:100%;padding:10px}textarea{height:10vh}.email-input{margin:.5vh 0}#link-buttons a{margin-top:1vh}.tech{width:6vw!important;height:8vw!important;padding:10px}.imageOut,#skills-div{gap:1.8vw}}@font-face{font-family:Bebas Neue;src:url(../fonts/bebas-neue-v16-latin-regular.woff2) format("woff2");font-weight:400;font-style:normal;font-display:swap}