*{font-family:Poppins;color:#070f2b;background-color:#e8edff}body,html{margin:0;padding:0}.dark *{color:#e8edff;background-color:#070f2b}.App{display:grid;grid-template-columns:auto 40px 120px 30px 250px auto;grid-template-rows:50px 100px 50px 140px 70px 280px 30px 330px 30px 220px 30px 350px 100px 80px}.photo{grid-area:2 / 3 / 4 / 4}.formalPhoto{width:150px;height:150px;border-radius:20px}.logo{height:14px;width:14px}.nameContainer{display:flex;flex-direction:column;justify-content:center;align-items:left;grid-area:2 / 5 / 2 / 6;padding-left:20px}.nameTitleContainer{display:flex;flex-direction:row;place-items:center;gap:10px}.nameTitle{font-size:24px;font-weight:bolder;display:flex;align-items:center;font-weight:700;flex-direction:column}.location{font-size:12px;margin-top:-8%;display:flex;align-items:center;gap:5px}.role{font-size:12px;margin-top:-2%}.moonIcon{height:15px;width:15px}.emailContainer{display:flex;grid-area:3 / 5 / 4 / 6;place-items:center;padding-left:20px}.emailButton{width:180px;height:25px;font-size:10px;color:#e8edff;background-color:#00104a;border-style:none;border-radius:20px;cursor:pointer}.dark .emailButton{background-color:#e8edff;color:#00104a}.emailButton:hover{opacity:.8}.introContainer{display:flex;flex-direction:column;align-items:left;grid-area:4 / 3 / 5 / 6;font-size:12px}.contactsContainer{display:flex;flex-direction:row;place-items:center;justify-content:center;align-items:top;grid-area:5 / 3 / 6 / 6;gap:100px}.experienceContainer{display:flex;flex-direction:column;justify-content:center;align-items:left;grid-area:6 / 3 / 7 / 6;padding-left:50px;padding-top:10px;box-shadow:10px 10px 20px #c5c9d9,-10px -10px 20px #fff;border-radius:30px;width:350px;height:270px;line-height:20px;gap:1px}.experienceContainer:hover{box-shadow:inset 10px 10px 10px #c5c9d9,inset -10px -10px 10px #fff;cursor:pointer}.dark .experienceContainer{box-shadow:20px 20px 60px #000,-20px -20px 60px #0d1a48}.dark .experienceContainer:hover{box-shadow:inset 10px 10px 10px #070d24,inset -10px -10px 10px #0b1438;cursor:pointer}.experienceTitle{font-size:12px;font-weight:bolder}.jobTitle{font-size:10px;width:250px}.techStackContainer{justify-content:center;align-items:left;grid-area:8 / 3 / 9 / 6;padding-left:50px;padding-top:30px;box-shadow:20px 20px 20px #c5c9d9,-20px -20px 20px #fff;border-radius:30px;width:350px;height:300px;line-height:20px;gap:2px}.techStackContainer:hover{box-shadow:inset 10px 10px 10px #c5c9d9,inset -10px -10px 10px #fff;cursor:pointer}.techStackContainer:hover .techEndButton{border-color:#2192ff}.dark .techStackContainer{box-shadow:20px 20px 60px #000,-20px -20px 60px #0d1a48}.dark .techStackContainer:hover{box-shadow:inset 10px 10px 10px #070d24,inset -10px -10px 10px #0b1438;cursor:pointer}.dark .techStackContainer:hover .techEndButton{border-color:#6ec207}.techStackHeader{display:flex;flex-wrap:wrap;align-items:center;gap:10px;font-size:12px;font-weight:700;line-height:0;width:250px}.techEndTitle{font-size:10px;font-weight:bolder;width:250px}.techEndContainer{display:flex;flex-direction:row;align-items:center;gap:3px;font-size:10px;width:250px}.techLogo{height:14px;width:14px}.techLogoContainer{display:flex;flex-direction:column;align-items:center;gap:1px}.techEndButton{border-radius:10px;border-style:solid;border-width:1px;border-color:#070f2b33;font-size:10px}.dark .techEndButton{border-color:#e8edff}.lifeOutsideContainer{justify-content:center;align-items:left;grid-area:10 / 3 / 11 / 6;padding-left:50px;padding-top:30px;padding-right:50px;box-shadow:10px 10px 20px #c5c9d9,-10px -10px 20px #fff;border-radius:30px;width:300px;height:190px;line-height:20px;gap:10px}.lifeOutsideContainer:hover{box-shadow:inset 10px 10px 10px #c5c9d9,inset -10px -10px 10px #fff;cursor:pointer}.dark .lifeOutsideContainer{box-shadow:20px 20px 60px #000,-20px -20px 60px #0d1a48}.dark .lifeOutsideContainer:hover{box-shadow:inset 10px 10px 10px #070d24,inset -10px -10px 10px #0b1438;cursor:pointer}.lifeOutsideText{font-size:10px}.projectsContainer{justify-content:center;align-items:left;grid-area:12 / 3 / 13 / 6;padding-left:50px;padding-top:30px;box-shadow:10px 10px 20px #c5c9d9,-10px -10px 20px #fff;border-radius:30px;width:350px;height:320px;line-height:20px;gap:10px}.projectsContainer:hover{box-shadow:inset 10px 10px 10px #c5c9d9,inset -10px -10px 10px #fff;cursor:pointer}.dark .projectsContainer{box-shadow:20px 20px 60px #000,-20px -20px 60px #0d1a48}.dark .projectsContainer:hover{box-shadow:inset 10px 10px 10px #070d24,inset -10px -10px 10px #0b1438;cursor:pointer}.linkText{font-size:10px;padding-left:30px;margin-top:-2%;width:300px}.techLinkContainer{display:flex;flex-direction:row;align-items:center;gap:10px;font-size:10px;font-weight:700;width:300px}.logoLink{height:12px;width:12px}.footerContainer{display:flex;flex-direction:column;justify-content:center;align-items:center;grid-area:14 / 3 / 15 / 6;font-size:10px;text-align:center}.footerLine{width:100%;margin-bottom:10px;border:none;border-top:1px solid #ccc}@media only screen and (max-width: 768px){.App{display:grid;grid-template-columns:auto 20px 100px 30px 200px auto;grid-template-rows:50px 70px 50px 165px 70px 280px 30px 310px 30px 205px 30px 375px 60px 80px}.photo{grid-area:2 / 3 / 4 / 4;position:static}.formalPhoto{width:100px;height:100px;border-radius:15px;padding:0;margin:0}.nameContainer{display:grid;flex-direction:column;align-items:left;justify-content:left;grid-area:2 / 5 / 3 / 6;position:static;padding-left:0}.nameTitle{font-size:24px;font-weight:bolder;display:grid;font-weight:700;padding:0;margin:0}.location{font-size:12px;margin-top:-2%;display:flex;align-items:center;gap:4px}.role{font-size:12px;margin-top:-8%}.logo{height:15px;width:15px}.emailContainer{display:flex;flex-direction:center;grid-area:3 / 5 / 4 / 6;place-items:center;position:static;padding-left:0}.emailButton{width:150px;height:25px;font-size:10px;color:#e8edff;background-color:#00104a;border-style:none;border-radius:15px;cursor:pointer}.emailButton:hover{opacity:.8}.introContainer{flex-direction:column;align-items:left;grid-area:4 / 3 / 5 / 6;position:static;font-size:12px}.contactsContainer{display:flex;flex-direction:row;justify-content:center;align-items:center;grid-area:5 / 3 / 6 / 6;gap:70px;position:static}.experienceContainer{grid-area:6 / 3 / 7 / 6;padding-left:25px;padding-right:25px;width:280px;height:270px;line-height:18px}.experienceTitle{font-size:12px}.jobTitle{font-size:10px;padding-left:5px}.techStackContainer{grid-area:8 / 3 / 9 / 6;padding-left:25px;padding-right:25px;width:280px;height:280px;line-height:18px}.techEndContainer{flex-wrap:wrap;gap:2px;font-size:12px}.techLogo{height:18px;width:18px}.lifeOutsideContainer{grid-area:10 / 3 / 11 / 6;padding-left:25px;padding-right:25px;width:280px;height:175px;line-height:18px}.lifeOutsideText{font-size:10px}.projectsContainer{grid-area:12 / 3 / 13 / 6;padding-left:25px;padding-right:25px;width:280px;height:330px;line-height:18px}.linkText{font-size:12px;padding-left:25px;width:250px}.techLinkContainer{padding-left:5px;width:250px}.footerContainer{grid-area:14 / 3 / 15 / 6;font-size:10px;text-align:center}.footerLine{width:100%;margin-bottom:10px;border:none;border-top:1px solid #ccc}}@media only screen and (max-width: 320px){.App{display:grid;grid-template-columns:auto 10px 100px 20px 150px auto;grid-template-rows:50px 70px 50px 200px 80px 295px 30px 340px 30px 230px 30px 430px 50px 40px}*{letter-spacing:-.5px}.nameTitle{font-size:20px}.nameContainer{padding-left:0}.emailButton{width:140px}.emailContainer{padding-left:0}.introContainer{grid-area:4 / 3 / 7 / 6}.contactsContainer{grid-area:5 / 3 / 6 / 6;gap:50px}.experienceContainer{width:220px;height:285px}.jobTitle,.techStackHeader{width:200px}.techStackContainer{width:220px;height:310px}.techEndContainer,.techEndTitle{width:200px}.lifeOutsideContainer{width:220px;height:200px}.projectsContainer{width:220px;height:400px}.techLinkContainer{width:200px}.linkText{width:180px}}