:root{--primary-bg-colour:#f7ecec;--primary-colour:#799ed4;--primary-colour-shadow:#7199d3;--secondary-colour:#333232;--secondary-colour-shadow:#696969;--third-colour:#ffa928;--forth-colour:#e08f8f}body{font-family:Ultra,serif;color:var(--secondary-colour);background-color:var(--primary-bg-colour);margin:0;overflow-x:hidden}a{text-decoration:none;color:var(--primary-bg-colour)}h1,h2,h3,p{margin:0;font-weight:400}#about,#contact,#experience,#intro,#skills{scroll-margin-top:200px}.page-max-width{position:relative;width:1200px;margin:0 auto}.horizontal-line{background-color:var(--secondary-colour);height:10px;width:100vw}.section-header{padding-top:5px;padding-bottom:5px;padding-left:10px;padding-right:25px;border:10px solid var(--secondary-colour);box-shadow:13px 14px 0 rgba(51,50,50,.25);border-radius:36px;display:flex;font-size:80px}.section-icon{height:100px;width:100px}.section-margin{margin-top:300px;margin-bottom:300px}.nav-bar-container{z-index:1000;top:0;justify-content:center;position:sticky;width:100vw;display:flex}.nav-bar{height:80px;width:800px;background:#333232;border-bottom-right-radius:30px;border-bottom-left-radius:30px;display:inline-flex;padding-bottom:1rem;padding-left:3rem;padding-right:3rem}.nav-page-links{display:flex;gap:35px;font-size:22px;margin-top:30px}.nav-page-link{transition:all .4s ease}.nav-page-link:hover{transform:scale(1.05)}.nav-page-link .current-section-bar{transition:all .4s ease;background-color:var(--third-colour);height:7px;margin-top:5px;border-radius:15px;transform:scaleX(0);transform-origin:center}.nav-page-link.active .current-section-bar{transform:scaleX(1)}.home-button{margin-left:auto;margin-right:0;background:var(--primary-colour);transition:all .4s ease;display:flex;border-bottom-left-radius:30px;border-bottom-right-radius:30px;width:120px;height:70px;transform:translateY(-5px);border-right:10px solid var(--primary-colour-shadow);border-bottom:10px solid var(--primary-colour-shadow);border-left:10px solid var(--primary-colour-shadow)}.home-button:hover{transform:translateY(0)}.home-button-text{margin-left:3rem;position:relative;transform:translateX(-34%) translateY(46%);font-size:25px;color:var(--secondary-colour)}.intro-section{margin-top:100px;display:flex;flex-wrap:wrap;justify-content:center;column-gap:120px;row-gap:30px;padding-left:20px;padding-right:20px}.connecting-lines{position:relative}.intro-text-box{display:inline-block;width:400px;height:280px;background:var(--primary-colour);padding-top:60px;padding-bottom:60px;border:11px solid var(--secondary-colour);box-shadow:6px 4px 0 var(--secondary-colour-shadow);border-radius:120px;text-align:center;font-size:50px;z-index:-2}.intro-drew-box{height:100px;width:350px;margin:0 auto;margin-top:20px;background:var(--forth-colour);border:5px solid var(--secondary-colour);border-radius:57px;font-size:38px;line-height:95px}.face-shot-circle{display:inline-block;width:400px;height:400px;background:#799ed4;border:11px solid #333232;border-radius:50%;box-shadow:5px 5px 0 #696969;display:flex;align-items:center;justify-content:center}.drew-face{width:380px;height:380px}.about-section{height:600px;background-color:var(--third-colour);border-top:10px solid var(--secondary-colour);border-bottom:10px solid var(--secondary-colour)}.about-header{position:absolute;transform:translateX(-50%) translateY(-55%);left:76%;background:var(--primary-colour)}.about-interests{position:absolute;transform:translateX(760px) translateY(85px);display:flex;flex-direction:column;gap:16px}.about-interest{border:10px solid var(--secondary-colour);border-radius:36px;text-align:center;font-size:22px;padding:10px;background-color:var(--primary-bg-colour);box-shadow:10px 10px 0 rgba(51,50,50,.12)}.about-paragraphs{position:relative;transform:translateX(30px) translateY(50px);width:550px;padding:20px;background:var(--primary-colour);border:20px solid var(--secondary-colour);box-shadow:11px 12px 0 rgba(51,50,50,.4);border-radius:54px;font-size:21px;font-family:"Red Hat Display",sans-serif;font-weight:800}.experience-header{position:absolute;transform:translateX(-50%) translateY(-55%);left:32%;background:var(--third-colour)}.experience-entries{display:flex;flex-direction:column;gap:50px;padding-top:150px;padding-left:80px;padding-right:80px}.experience-entry{display:flex;flex-wrap:wrap;column-gap:120px;row-gap:40px;text-align:center;justify-content:center}.experience-title{width:360px;padding:20px;background:var(--primary-colour);border:16px solid var(--secondary-colour);box-shadow:13px 14px 0 rgba(51,50,50,.25);border-radius:36px;display:flex;align-items:center;justify-content:center;font-size:32px}.experience-description{width:420px;padding:20px;background:var(--forth-colour);border:14px solid var(--secondary-colour);box-shadow:13px 14px 0 rgba(51,50,50,.25);border-radius:38px;display:flex;align-items:center;justify-content:center;font-family:"Red Hat Display",sans-serif;font-size:18px;font-weight:900}.skills-section{top:calc(100% + 100em);margin-bottom:200px}.skills-header{position:absolute;transform:translateX(-50%) translateY(-55%);left:50%;background:var(--forth-colour)}.skills-list{padding-top:200px;padding-left:30px;padding-right:30px;display:flex;flex-grow:1;flex-wrap:wrap;justify-content:center;margin:0 auto;gap:20px;row-gap:30px}.skill-item{background:var(--third-colour);border:16px solid var(--secondary-colour);box-shadow:13px 14px 0 rgba(51,50,50,.25);border-radius:36px;padding:15px;font-size:25px;display:flex;align-items:center}.contact-section{margin-top:150px;margin-bottom:150px}.contact-header{position:absolute;transform:translateX(-50%) translateY(-170%);left:50%;background:var(--primary-colour)}.contact-text{white-space:nowrap}.connecting-lines{transform:translateX(-25px)}.vertical-line{width:70px;background-color:var(--secondary-colour)}.across-line{height:70px;background-color:var(--secondary-colour)}.across-line-thin{height:40px;background-color:var(--secondary-colour)}.first-line-down{position:absolute;transform:translateX(310px) translateY(611px);height:90px;z-index:-2}.first-line-across{position:absolute;transform:translateX(310px) translateY(700px);border-bottom-left-radius:30px;border-top-right-radius:30px;width:660px}.second-line-down{position:absolute;transform:translateX(900px) translateY(769px);height:852px}.second-line-across{position:absolute;transform:translateX(290px) translateY(1620px);border-top-left-radius:30px;border-bottom-right-radius:30px;width:680px}.third-line-down{position:absolute;transform:translateX(290px) translateY(1689px);height:1182px}.third-line-across{position:absolute;transform:translateX(290px) translateY(2870px);border-bottom-left-radius:30px;border-top-right-radius:30px;width:370px}.fourth-line-down{position:absolute;transform:translateX(590px) translateY(2939px);height:105px}.experience-line-one{position:absolute;transform:translateX(520px) translateY(2055px);width:140px}.experience-line-two{position:absolute;transform:translateX(520px) translateY(2250px);width:140px}.experience-line-three{position:absolute;transform:translateX(520px) translateY(2450px);width:140px}.experience-line-four{position:absolute;transform:translateX(520px) translateY(2650px);width:140px}.contact-form-box{border-radius:36px;margin-top:150px;margin-left:auto;margin-right:auto;width:700px;background-color:var(--third-colour);border:16px solid var(--secondary-colour);box-shadow:6px 4px 0 var(--secondary-colour-shadow);padding-left:30px;padding-right:30px;padding-top:20px;padding-bottom:20px}.contact-name-email-container{display:flex;flex-wrap:wrap;margin-bottom:8px}.contact-name-container{width:45%}.contact-name-text{padding-left:5px;margin-bottom:3px;font-size:20px}.contact-name-input{width:100%;font-size:20px;border-radius:8px;border:4px solid var(--secondary-colour)}.contact-email-container{width:47%;margin-left:auto;padding-right:7px}.contact-email-text{padding-left:5px;margin-bottom:3px;font-size:20px}.contact-email-input{width:100%;font-size:20px;border-radius:8px;border:4px solid var(--secondary-colour)}.contact-message-container{padding-right:7px;margin-bottom:15px}.contact-message-text{padding-left:5px;margin-bottom:3px;font-size:20px}.contact-message-input{width:100%;height:5em;font-size:20px;border-radius:8px;border:4px solid var(--secondary-colour);resize:none}.contact-submit{display:block;width:400px;margin:0 auto;background-color:var(--secondary-colour);border:4px solid var(--secondary-colour);border-radius:30px;transition:transform .4s ease;color:var(--primary-bg-colour);font-size:60px;text-align:center;font-family:Ultra,serif;cursor:pointer}.contact-submit:hover{transform:scale(1.03)}.top-of-page-button{display:none}@media (max-width:1200px){.page-max-width{width:100vw}.connecting-lines{display:none}.section-margin{margin-top:200px;margin-bottom:200px}.intro-section{margin-top:120px}.about-section{height:auto}.about-header{left:50%}.experience-header{left:50%}.about-interests{position:static;transform:none;flex-direction:row;padding-top:100px;padding-left:30px;padding-right:30px;display:flex;flex-grow:1;flex-wrap:wrap;justify-content:center;margin:0 auto;gap:20px;row-gap:30px}.about-paragraphs{position:static;transform:none;margin-top:60px;margin-bottom:70px;margin-left:auto;margin-right:auto;width:60%}.experience-entries{padding-top:100px;padding-left:20px;padding-right:20px;gap:40px}.experience-entry{column-gap:30px}.experience-title{width:250px}.experience-description{width:500px}.contact-form-box{margin-top:100px;width:58.3vw}.contact-header{transform:translateX(-50%) translateY(-130%)}.contact-section{margin-bottom:100px}.skills-list{padding-top:140px;padding-bottom:50px}}@media (max-width:1003px){.intro-section{margin-top:50px;margin-bottom:50px}.section-margin{margin-top:100px;margin-bottom:100px}.skills-list{padding-top:140px}}@media (max-width:930px){.nav-bar-container{display:none}.intro-section{margin-top:50px}.top-of-page-button{display:flex;width:300px;margin:0 auto;justify-content:center}.home-button-text{font-size:50px;text-align:center;transform:none;margin-left:0}}@media (max-width:750px){.section-header{font-size:50px;padding-right:15px}.section-icon{height:62px;width:62px}.contact-name-email-container{flex-direction:column;row-gap:10px;padding-right:5px}.contact-name-container{width:100%}.contact-email-container{width:100%}.contact-submit{font-size:40px;width:auto;padding-left:10px;padding-right:10px;padding-top:5px;padding-bottom:5px}.contact-header{transform:translateX(-50%) translateY(-160%)}}@media (max-width:499px){.section-header{font-size:25px;padding-left:10px;padding-right:10px}.section-icon{height:33px;width:33px}.home-button-text{font-size:30px}.top-of-page-button{width:150px;align-items:center}.intro-text-box{width:250px;height:200px;padding-top:30px;padding-bottom:20px;border:7px solid var(--secondary-colour);box-shadow:4px 3px 0 var(--secondary-colour-shadow);border-radius:80px;font-size:30px}.intro-drew-box{height:60px;width:220px;background:var(--forth-colour);border:5px solid var(--secondary-colour);border-radius:57px;font-size:20px;line-height:58px}.face-shot-circle{display:inline-block;width:250px;height:250px;background:#799ed4;border:11px solid #333232;border-radius:50%;box-shadow:5px 5px 0 #696969;display:flex;align-items:center;justify-content:center}.drew-face{width:230px;height:230px}.about-interest{font-size:16px}.about-paragraphs{font-size:16px;border:10px solid var(--secondary-colour);box-shadow:5px 5px 0 rgba(51,50,50,.4);padding:15px;text-align:center}.experience-title{padding:10px;border:10px solid var(--secondary-colour);box-shadow:8px 8px 0 rgba(51,50,50,.25);font-size:20px}.experience-description{padding:10px;border:10px solid var(--secondary-colour);box-shadow:8px 8px 0 rgba(51,50,50,.25);font-size:16px}.skill-item{background:var(--third-colour);border:10px solid var(--secondary-colour);box-shadow:8px 8px 0 rgba(51,50,50,.25);border-radius:36px;padding:10px;font-size:18px;text-align:center;width:auto}.contact-header{transform:translateX(-50%) translateY(-200%)}.contact-name-text{font-size:15px}.contact-email-text{font-size:15px}.contact-message-text{font-size:15px}.contact-submit{font-size:30px}}.visually-hidden{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}