html { scroll-behavior: smooth; } .background { width: 100%; background-color: #1D242D; position: absolute; z-index: -10; } .home-page { background: transparent; } .curser_trail { display: inline-block; } @media screen and (min-width: 800px) { .grid { display: flex; flex-wrap: wrap; width: 95%; height: 80%; position: absolute; z-index: 1; left: 5%; }} @media screen and (min-width: 800px) { .grid_item { height: 60px; width: 60px; background: #43FFDF; opacity: 0; transition: opacity 0.4s ease; transition: opacity 2s ease 0.4s, transform 0.8s ease; transform: scale(1); }} @media screen and (min-width: 800px) { .grid_item:hover { opacity: 1; transition: opacity 0.2s ease; transform: scale(1.04); }} .portfolio-nav { display: flex; flex-direction: row-reverse; align-items: center; line-height: 60px; text-decoration: none; font-size: 18px; color: #50B5D8; font-family: Avenir next medium, sans-serif; padding-right: 15px; background-color: #171D23; opacity: 90%; position: sticky; z-index: 100; top: 0; } .portfolio-nav-links:hover, .portfolio-nav-links-contact:hover { color: #43FFDF; } .portfolio-nav-links { padding-right: 35px; text-decoration-line: none; color: #50B5D8; } @media screen and (max-width: 800px) { .portfolio-nav-links-contact { text-decoration-line: none; color: #50B5D8; padding-right: 5px; }} @media screen and (min-width: 800px) { .portfolio-nav-links-contact { text-decoration-line: none; color: #50B5D8; padding-right: 15px; }} @media screen and (max-width: 800px) { .portfolio-nav { font-size: 15px; }} @media screen and (max-width: 800px) { .portfolio-nav-links { padding-right: 25px; }} #rectangle { background: #43FFDF; height: 2px; width: 100%; position: fixed; opacity: 75%; z-index: 100; } .container { background-color: #1D242D; z-index: -2; } .social_style_anna { display: flex; flex-direction: column; align-items: center; background-color: transparent; position: fixed; z-index: 100; bottom: 0px; list-style: none; margin: 0px; } @media screen and (max-width: 800px) { .social_style_anna { padding-inline-start: unset; padding-left: 23px; } } .social { padding-bottom: 25px; } .social:hover { stroke: #43FFDF; } .social_style_anna:after { content: ""; display: block; width: 1px; height: 90px; margin: 0px auto; background-color: #50B5D8; box-sizing: inherit; } h1:before { content: ''; font-family: 'La Belle Aurore',cursive; color: #26687F; font-size: 12px; margin-left: 5%; } .intro-screen:before { content: '

'; font-family: 'La Belle Aurore',cursive; color: #26687F; font-size: 12px; position: absolute; margin-top: 5%; } h1:after { content: '

'; font-family: 'La Belle Aurore',cursive; color: #26687F; font-size: 12px; position: absolute; margin-left: 45%; margin-top: -10%; } @media screen and (max-width: 800px) { h1:after { margin-left: 80%; margin-top: -35%; }} .en { background-color: #1D242D; } .intro-screen, .about-me-screen, .work-screen, .skills-screen, .contact-me-screen { margin-left: 15%; width: 80%; } .intro-screen { margin-bottom: 8%; } @media screen and (max-width: 800px){ .intro-screen { margin-bottom: 40%; }} @media screen and (max-width: 800px){ .about-me-screen, .work-screen, .skills-screen, .contact-me-screen { margin-left: 19%; width: 85%; }} .intro-screen-hi { font-size: 18px; color: #43FFDF; font-family: 'Courier New', Courier, monospace italics; margin:0; padding-top: 125px; width: fit-content; z-index: 2; } .intro-screen-anna { font-size: 78px; color: #50B5D8; font-family: Avenir next medium, sans-serif; margin:0; padding:0; width: fit-content } .intro-screen-webdev { font-size: 78px; color: #26687F; font-family: Avenir next medium, sans-serif; margin:0; padding:0; } @media screen and (max-width: 800px){ .intro-screen-anna, .intro-screen-webdev { font-size: 40px; }} .my-work-btn:before { content: ''; font-family: 'La Belle Aurore',cursive; color: #26687F; font-size: 12px; position: absolute; margin-top: 3%; margin-left: -10%; } @media screen and (max-width: 800px) { .my-work-btn:before { margin-top: -12%; margin-left: -7%; }} @media screen and (max-width: 800px) { .my-work-btn:after { margin-top: 12%; margin-left: -45%; }} .scroll { font-size: 18px; color: #43FFDF; font-family: 'Courier New', Courier, monospace italics; margin:0; padding-top: 5%; margin-left: 80%; } @media screen and (max-width: 800px) { .scroll { padding-top: 15%; margin-left: 45%; }} #rectangle_2 { background: #43FFDF; height: 300px; width: 1px; position: relative; top: 20px; margin-left: 81%; } @media screen and (max-width: 800px) { #rectangle_2 { top: 20px; margin-left: 50%; }} .skills-tools, .work-screen { margin-top: 25%; } .about-me:before { content: '

'; font-family: 'La Belle Aurore',cursive; color: #26687F; font-size: 12px; position: absolute; margin-top: -3rem; } .about-designer:after { content: '

'; font-family: 'La Belle Aurore',cursive; color: #26687F; font-size: 12px; margin-left: 2rem; } @media screen and (max-width: 800px) { .about-designer:after { margin-left: -3rem; position: absolute; margin-top: 4rem; } } .about-me, .work { font-size: 18px; color: #43FFDF; font-family: 'Courier New', Courier, monospace italics; margin:0; } .about-designer, .work-title { font-size: 78px; color: #50B5D8; font-family: Avenir next medium, sans-serif; margin: 0; padding-top: 15px; } .about-content { font-size: 18px; color: #26687F; font-family: avenier next, sans-serif; width: 80%; padding-top: 35px; padding-bottom: 15px; text-align: justify; float: left; } @media screen and (max-width: 800px) { .about-content { width: 100%; }} .doodle-about, .snake-about, .to-do-about, .covid-tracker-about { font-size: 18px; color: #26687F; font-family: avenier next, sans-serif; padding-top: 5px; padding-bottom: 15px; text-align: justify; } .about-content:before { content: '

'; font-family: 'La Belle Aurore',cursive; color: #26687F; font-size: 12px; position: absolute; margin-top: -2rem; } .about-content:after { content: '

'; font-family: 'La Belle Aurore',cursive; color: #26687F; font-size: 12px; position: absolute; margin-top: 2rem; margin-left: -24rem; } @media screen and (max-width: 800px) { .about-content:after { margin-left: -3rem; }} /* .work-screen { padding-top: 500px; } */ .about-me-img { border: 2px solid #43FFDF; padding: 20px 20px; border-radius: 4px; } @media screen and (min-width: 1300px) { .doodle, .to-do, .slitherin-snake, .nctsc, .about-me-flex, .covid-tracker { display: flex; margin-top: 50px; width: 80%; }} @media screen and (max-width: 1300px) { .doodle, .to-do, .slitherin-snake, .nctsc, .about-me-flex, .covid-tracker { display: flex; flex-direction: column; margin-top: 50px; width: 80%; }} .doodle-left, .to-do-left, .slitherin-snake-left, .nctsc-left .covid-tracker-left{ float:left; } @media screen and (min-width: 1300px) { .doodle-right, .to-do-right, .slitherin-snake-right, .nctsc-right, .covid-tracker-right { float: right; margin-left: 10%; }} @media screen and (min-width: 1300px) { .about-me-right { float: right; margin-top: 3%; }} @media screen and (max-width: 1300px) { .doodle-right, .to-do-right, .slitherin-snake-right, .nctsc-right, .about-me-right, .covid-tracker-right { float: right; margin-top: 5%; }} .clearfix:after { content:""; display: block; clear: both; } @media screen and (min-width: 1300px) { .project-languages-snake, .project-languages-nctsc, .project-languages-to-do, .project-languages-doodle, .project-languages-covid-tracker{ font-size: 15px; color: #43FFDF; font-family: 'Courier New', Courier, monospace italics; list-style: none; display: flex; padding-inline-start: unset; justify-content: center; margin: 5px; margin-left: 33px; }} @media screen and (max-width: 1300px) { .project-languages-snake, .project-languages-nctsc, .project-languages-to-do, .project-languages-doodle, .project-languages-covid-tracker{ font-size: 15px; color: #43FFDF; font-family: 'Courier New', Courier, monospace italics; list-style: none; display: flex; padding-inline-start: unset; }} .language { padding-right: 35px; } @media screen and (max-width: 800px){ .language { padding-right: 20px; }} .project-name { font-size: 24px; color: #50B5D8; font-family: Avenir next medium, sans-serif; margin: 0; padding-top: 15px; } .doodle-img, .snake-img, .to-do-img, .nctsc-img, .covid-tracker-img { border: 2px solid #43FFDF; padding: 20px 20px; border-radius: 4px; } @media screen and (max-width: 800px) { .doodle-img, .snake-img, .to-do-img, .nctsc-img, .covid-tracker-img, .about-me-img { border: 2px solid #43FFDF; padding: 20px 20px; border-radius: 4px; width: 80%; height: 80%; margin-top: 2%; }} /* .video { position: absolute; width: 650px; margin-left: -55rem; margin-top: -5rem; opacity: 0; display: none; } .covid-tracker-img:hover { opacity: 0; } .covid-video-btn:hover + .video { opacity: 1; display: block; } */ .doodle-github, .to-do-github, .nctsc-github, .covid-tracker-github{ background-color: transparent; border: 2px solid #43FFDF; color: #43FFDF; border-radius: 4px; transition-duration: 0.4s; width: 200px; font-size: 18px; text-align: center; text-decoration: none; padding: 10px 24px; } .skills-tools { font-size: 18px; color: #43FFDF; font-family: 'Courier New', Courier, monospace italics; } @media screen and (max-width: 800px){ .skills-tools { padding-top: 40%; }} .my-toolbox { font-size: 78px; color: #50B5D8; font-family: Avenir next medium, sans-serif; margin: 0; padding-top: 15px; } .container-icons, .container-icons-2 { text-align: center; display: flex; flex-direction: row; flex-wrap: wrap; padding-top: 50px; justify-content: center; } @media screen and (max-width: 800px){ .container-icons, .container-icons-2 { text-align: center; display: flex; flex-direction: row; flex-wrap: wrap; padding-top: 50px; } } .container-icons-2 { padding-bottom: 150px; } .box-icon { font-size: 18px; color: #B7DFEA; font-family: avenier next, sans-serif; margin-right: 100px; width: 5%; margin-bottom: 10px; } @media screen and (max-width: 800px) { .box-icon { font-size: 9px; color: #B7DFEA; font-family: avenier next, sans-serif; margin-right: 28px; width: 10%; margin-bottom: 10px; } } .layer_2 { flex-wrap: nowrap; } .skills-tools-tech, .learning { font-size: 18px; color: #26687F; font-family: avenier next, sans-serif; padding-top: 5px; padding-bottom: 15px; width: 80%; text-align: justify; } .resume-btn { background-color: transparent; border: 2px solid #43FFDF; color: #43FFDF; border-radius: 4px; transition-duration: 0.4s; width: 200px; font-size: 18px; text-align: center; text-decoration: none; padding: 10px 24px; } @media screen and (max-width: 800px){ .resume-btn { margin-left: -34px; }} .resume { text-align: center; } .fade-up { list-style: none; background-color: transparent; } .submit { list-style: none; } .input-field-name,.input-field-subject, .input-field { background-color: #303438; margin-bottom: 10px; color: white; border-color: transparent; } @media screen and (min-width: 1200px) { .contact-list { margin-left: 11% } } .contact-list { padding: 0; } .input-field-name { float: left; width: 34%; margin-right: 10px; height: 35px; } .input-field-email { width: 34.5%; background-color: #303438; height: 35px; margin-bottom: 10px; color: white; border-color: transparent; } .input-field-subject { width: 70%; height: 35px; } .input-field { width: 70%; height: 100px; } @media screen and (min-width: 800px) { .input-field-submit { margin-left: 54%; }} .input-field-sumbit { background-color: transparent; border: 2px solid #43FFDF; color: #43FFDF; margin-left: 0%; margin-top: 25px; border-radius: 4px; transition-duration: 0.4s; width: 200px; font-size: 18px; text-align: center; text-decoration: none; padding: 10px 24px; list-style: none; } .footer { color: #43FFDF; size: 10px; padding-top: 150px; padding-bottom: 20px;; margin: 0 0; margin-left: 37% } @media screen and (max-width: 800px) { .footer { margin-left: 7%; }} .skills-screen, .work-screen, .about-me-screen, .home-page, .contact-me-screen { background-color: #1D242D; } @media screen and (max-width: 800px){ .intro-screen-webdev, .my-toolbox, .work-title, .intro-screen-anna { font-size: 40px; }} @media screen and (max-width: 800px){ .about-designer { font-size: 35px; }} @media screen and (max-width: 800px){ .input-field-name { width: 270px; height: 35px; }} @media screen and (max-width: 800px){ .input-field-email { width: 270px; background-color: #303438; height: 35px; margin-bottom: 10px; color: white; border-color: transparent; }} @media screen and (max-width: 800px){ .input-field-subject { width: 270px; height: 35px; }} @media screen and (max-width: 800px){ .input-field { width: 270px; height: 200px; }}