:root{--color-primary-blue:#004aad;--color-primary-blue-2:#013881;--color-grey-10:#f5f5f5;--color-grey-20:#e4e4e4}body{margin:0;font-family:Roboto,Segoe UI,sans-serif}#contact,#skills,#projects{scroll-margin-top:80px}.center-content{max-width:1200px;margin:0 auto;padding:0 40px}.center-content-wide{max-width:1500px;margin:0 auto;padding:0 20px}.text-content{font-size:1.25rem}h1{font-size:3rem;font-weight:400}h2{font-size:2rem;font-weight:400}h3{font-size:1.75rem;font-weight:400}a{color:var(--color-primary-blue);text-decoration:none;transition-duration:.2s}a:hover{text-decoration:underline}button.outlined{border:2px solid var(--color-primary-blue);cursor:pointer;background-color:#0000;border-radius:100px;padding:10px 30px;font-size:1rem;transition-duration:.2s}button.outlined:hover{background-color:var(--color-primary-blue);color:#fff}.skills-container{flex-wrap:wrap;gap:30px;display:flex}.screenshot-group{flex-wrap:wrap;justify-content:start;align-items:flex-end;gap:40px;margin-top:50px;display:flex}.margin-all-10{margin:10px}.margin-left-10{margin-left:10px}.margin-top-10{margin-top:10px}.margin-all-20{margin:20px}.margin-left-20{margin-left:20px}.margin-top-20{margin-top:20px}.margin-all-30{margin:30px}.margin-left-30{margin-left:30px}.margin-top-30{margin-top:30px}.margin-all-40{margin:40px}.margin-left-40{margin-left:40px}.margin-top-40{margin-top:40px}.margin-all-50{margin:50px}.margin-left-50{margin-left:50px}.margin-top-50{margin-top:50px}.margin-all-60{margin:60px}.margin-left-60{margin-left:60px}.margin-top-60{margin-top:60px}.margin-all-70{margin:70px}.margin-left-70{margin-left:70px}.margin-top-70{margin-top:70px}.margin-all-80{margin:80px}.margin-left-80{margin-left:80px}.margin-top-80{margin-top:80px}.margin-all-90{margin:90px}.margin-left-90{margin-left:90px}.margin-top-90{margin-top:90px}.margin-all-100{margin:100px}.margin-left-100{margin-left:100px}.margin-top-100{margin-top:100px}.bottom-space{margin-bottom:100px}header{background-color:var(--color-primary-blue);color:#fff;z-index:100;flex-wrap:wrap;justify-content:start;align-items:center;height:50px;padding:0 20px;display:flex;position:sticky;top:0}header .name{font-size:1.25rem}header nav a{color:#fff;cursor:pointer;border-radius:10px;margin:0 5px;padding:5px 10px;text-decoration:none;transition-property:background-color;transition-duration:.2s}header nav a:hover{background-color:var(--color-primary-blue-2);text-decoration:none}.greeting-container{justify-content:center;display:flex}.greeting-container .greeting .fullname{border:4px solid var(--color-primary-blue);border-radius:100px;padding:20px 40px;font-size:3rem;transition-duration:.2s;display:inline-block}.greeting-container .greeting .fullname:hover{rotate:-4deg;scale:1.1}.greeting-container .greeting .description{background-color:var(--color-grey-10);border:2px solid var(--color-grey-20);border-radius:50px;margin-top:20px;margin-left:100px;padding:10px 20px;font-size:1.2rem;transition-duration:.2s;display:inline-block}.greeting-container .greeting .description:hover{translate:10px}.skill-card{background-color:var(--color-grey-10);border:2px solid var(--color-grey-20);border-radius:30px;align-items:center;gap:10px;padding:10px 20px;display:inline-flex}.skill-card img{width:50px;height:50px}.skill-card{transition-duration:.2s}.skill-card:hover{rotate:-10deg;scale:1.2}.project-card{border-radius:10px;flex-wrap:wrap;justify-content:left;align-items:start;gap:40px;display:flex}.project-card .project-icon{max-width:500px;display:block}.project-card .project-icon img{border-radius:10px;width:100%;box-shadow:0 0 8px #505050}.project-card .project-info{flex:1;min-width:300px}.project-card p.title{margin-bottom:0;font-size:2rem}.project-card .tags{flex-wrap:wrap;gap:10px;display:inline-flex}.project-card .tags span{background-color:var(--color-grey-20);border-radius:20px;padding:5px 10px}a.icon-link{color:var(--color-primary-blue);border:2px solid #0000;border-radius:10px;align-items:center;gap:10px;padding:10px;text-decoration:none;transition-duration:.2s;display:inline-flex}a.icon-link svg{color:#000}a.icon-link:hover{border:2px solid var(--color-primary-blue);text-decoration:underline}a.icon-link:hover svg{color:var(--color-primary-blue)}.screenshot{display:inline-block}.screenshot p{text-align:center;width:0;min-width:100%;font-size:1.5rem}.screenshot img{box-shadow:0 0 8px #505050}.screenshot img.landscape{max-width:100%}.screenshot img.portrait{max-height:640px}.screenshot video.landscape{max-width:100%}.screenshot video.portrait{max-height:640px}