@import"https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;700&display=swap";.header{height:10vh;width:100%;position:sticky;top:0;z-index:100;background-color:var(--bg-color);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);transition:all .5s ease}.nav{display:flex;justify-content:space-between;align-items:center}.nav-logo{font-size:2.4rem;font-weight:700}.nav-menu{display:flex;align-items:center;column-gap:1.5rem}.nav-items{position:relative;padding-bottom:3px;font-weight:500}.nav-items:hover{opacity:.9}.nav-items a{display:flex;align-items:center;column-gap:.2rem}.nav-items:after{content:"";position:absolute;bottom:0;width:100%;height:2px;opacity:0;background-color:red;transition:all .5s ease}.nav-items:hover:after{opacity:1}.nav-icons{font-size:1.2rem}.mobile-nav-icon{display:none}@media screen and (max-width: 846px){.mobile-nav-icon{display:block;margin-top:.5rem;font-size:2rem;cursor:pointer}.nav-menu{position:fixed;top:4rem;left:-100%;display:flex;flex-direction:column;align-items:start;height:100vh;width:80%;margin-top:-.2rem;background-color:var(--container-color);border-right:2px solid hsl(0,0%,0%,.1);transition:all .4s ease-in-out;z-index:100}.nav-items{width:100%;padding:1.5rem;border-bottom:2px solid hsl(0,0%,0%,.1)}.nav-items:hover{background-color:#0000001a}.nav-items:after{display:none}}.footer{background-color:var(--container-color);border-top:1px solid rgba(0,0,0,.1)}.footer-container{padding:2rem 0 6rem}.footer-title,.footer-line{color:var(--title-color)}.footer-title{text-align:center}.footer-title{text-align:center;margin-bottom:2rem}.footer-link{color:hsl(0,0,25%)}.footer-list{display:flex;justify-content:center;column-gap:1.5rem;margin-bottom:2rem}.footer-social{display:flex;justify-content:center;column-gap:1.25rem}.footer-social-link{background-color:var(--text-color);color:var(--container-color);font-size:1.5rem;padding:.4rem;border-radius:.5rem;display:inline-flex}.footer-social-link:hover{background-color:hsl(0,0,25%)}.footer-copy{display:block;margin-top:4.5rem;color:var(--title-color);text-align:center;font-size:.8rem}@media screen and (max-width: 992px){.footer-social-link{padding:.25rem;border-radius:.25rem;font-size:1rem}}.home-content{grid-template-columns:116px repeat(2,1fr);padding-top:5.5rem;column-gap:2rem;align-items:center}.home-social{display:grid;grid-template-columns:max-content;row-gap:1rem}.home-title{font-size:2.5rem}.home-subtitle{font-size:1.25rem}.home-img{background:url(/Rojen-WebPortfolio/assets/rj-rKAKVJ4K.jpg);background-repeat:no-repeat;background-position:center center;background-size:cover;border:4px solid hsl(0,0%,100%);order:1;justify-self:center;width:250px;height:250px;box-shadow:inset 0 0 0 9px rgb(255,255,255 / 30%);animation:profileAnimation 8s ease infinite .5s}.home-social-icon{font-size:1.5rem}.home-data{line-height:2.5rem}.home-description{color:#666}@keyframes profileAnimation{0%{border-radius:60% 40% 70% 30%/60% 30% 70% 40%}50%{border-radius:30% 70% 60% 40%/50% 60% 30%}to{border-radius:60% 40% 70% 30%/60% 30% 70% 40%}}@media screen and (max-width: 786px){.home-container{grid-template-columns:1fr}.home-content{grid-template-columns:1fr;text-align:center;padding-top:0;width:60%;margin:0 auto}.home-social{display:flex;margin:0 auto;column-gap:1rem}#cv{padding:.5rem 1rem}}.skills-container{grid-template-columns:repeat(2,350px);column-gap:3rem;justify-content:center}.skills-content{background-color:#fff;border:1px solid hsl(0,0%,70%,.8);padding:2rem 4rem;border-radius:1.25rem}.skills-title{font-size:1rem;font-weight:500;text-align:center;margin-bottom:1.5rem}.skills-box{display:grid;grid-template-columns:repeat(2,1fr);justify-content:center;gap:1.5rem 2.25rem}.skills-group{display:grid;align-items:flex-start;row-gap:1rem}.skills-data{display:flex;column-gap:.5rem}.badges{font-size:1rem;color:var(--text-color)}.skills-name{font-size:1rem;font-weight:500;line-height:18px}.skills-level{font-size:.8rem}@media screen and (max-width: 786px){.skills-container{display:grid;grid-template-columns:1fr;text-align:center}.skills-content{width:max-content;max-width:60%;margin:auto;min-height:250px}}.qualification-container{max-width:768px}.qualification-tabs{display:flex;justify-content:center;margin-bottom:2rem}.qualification-button{font-size:1.25rem;font-weight:500;color:#4d4d4d;margin:0 1rem;cursor:pointer;transition:all .5s ease}.qualification-button:hover{color:#000}.qualification-icon{font-size:1.8rem;margin-right:.25rem}.qualification-active{position:relative;color:#000;font-size:1.3rem}.qualification-active:before{content:"";position:absolute;bottom:0;left:0;height:2px;width:100%;background-color:#000}.qualification-section{display:grid;grid-template-columns:.5fr;justify-content:center}.qualification-content{display:none}.qualification-content-active{display:block}.qualification-data{display:grid;grid-template-columns:1fr max-content 1fr;column-gap:1.5rem;text-align:left}.qualification-title{font-size:1rem;font-weight:500}.qualification-subtitle{display:inline-block;font-size:.8rem;margin-bottom:.5rem}.qualification-calendar{font-size:.8rem}.qualification-rounder{display:inline-block;width:13px;height:13px;background-color:#4d4d4d;border-radius:50%}.qualification-line{display:block;width:1px;height:100%;background-color:#4d4d4d;transform:translate(6px,-7px);padding:.5rem 0}@media screen and (max-width: 786px){.qualification-section{align-items:center;gap:2rem}.qualification-data{grid-template-columns:1fr;text-align:left;margin-bottom:2rem}.qualification-line,.qualification-rounder,.qualification-empty,.qualification-divider{display:none;background-color:#00f}}.project-container{max-width:768px;display:grid;grid-template-columns:repeat(3,1fr);column-gap:1.5rem}.project-data{position:relative;display:flex;flex-direction:column;max-height:300px;overflow:hidden;background-color:#fff;border:1px solid hsl(0,0%,70%);border-radius:10px;box-shadow:0 0 20px #ccc,0 0 10px #b3b3b3}.project-img{flex:1;overflow:hidden}.project-img img{width:100%;height:100%;aspect-ratio:16/9;object-fit:cover;background-repeat:no-repeat}.project-btns{display:flex;justify-content:space-around}.project-button{flex:1;font-weight:500;font-size:1.1rem;padding:10px 0;text-align:center}.project-hover{position:absolute;top:2px;right:2px;border-radius:.5rem;padding:2px 5px;background-color:#cccc;opacity:0;transition:opacity .4s ease;font-size:.8rem}.project-data:hover .project-hover{opacity:1}hover .project-button:hover{background-color:#d9d9d9;cursor:pointer}.project-button:nth-child(1){border-right:1px solid hsl(0,0%,70%)}@media screen and (max-width: 786px){.project-container{text-align:center;grid-template-columns:1fr}.project-data{margin:0 auto;min-height:250px;width:50%;margin-bottom:1rem}.project-button{font-size:.8rem;width:max-content}}@media screen and (max-width: 586px){.project-img img{width:100%;height:100%;aspect-ratio:1/1}}.contact-container{grid-template-columns:repeat(2,max-content);justify-content:center;column-gap:6rem;padding-bottom:3rem}.contact-title{text-align:center;font-size:1.2rem;font-weight:500;margin-bottom:1.5rem}.contact-info{display:grid;row-gap:1rem;grid-template-columns:350px;overflow:hidden;padding-top:1rem}.contact-card{background-color:var(--bg-color);border:1px solid rgba(0,0,0,.2);padding:1rem;border-radius:.75rem;text-align:center}.contact-card-title,.contact-card-data{font-size:1rem}.contact-card-title{font-weight:700}.contact-card-data{display:block;margin-bottom:.5rem}.contact-button{color:var(--text-color);font-size:.8rem;display:inline-flex;align-items:center;justify-content:center;column-gap:.25rem}.contact-form{width:420px}.contact-form-div{position:relative;margin-bottom:2rem;height:4rem}.contact-form-input{position:absolute;top:0;left:0;width:100%;height:100%;border:2px solid rgba(0,0,0,.3);background:none;color:var(--text-color);outline:none;border-radius:.75rem;padding:1.5rem}.contact-form-tag{position:absolute;top:-.9rem;left:1.25rem;font-size:1rem;padding:.25rem;background-color:var(--bg-color);z-index:10}.contact-form-area{height:11rem}.contact-form-area textarea{resize:none}.contact-form button{background-color:var(--text-color);color:var(--bg-color);font-size:1rem;font-weight:500;padding:15px 25px}@media screen and (max-width: 992px){.contact-container{column-gap:3rem}}@media screen and (max-width: 768px){.contact-container{grid-template-columns:1fr}.contact-info{justify-content:center}.contact-form{margin:0 auto}}@media screen and (max-width: 576px){.contact-info{grid-template-columns:1fr}.contact-form{width:100%}}.scrollup{opacity:.8;position:fixed;right:2.5rem;bottom:-20%;background-color:var(--text-color);color:#fff;padding:.3rem .5rem;border-radius:.4rem;z-index:1000;transition:.4s}.scrollup:active{transform:translateY(-5px)}.show-scroll{bottom:3rem}:root{--font-family: Poppins, Avenir, Helvetica, Arial, sans-serif;--text-color: hsl(0, 0%, 20%);--bg-color: hsl(0, 0%, 92%);--container-color: hsl(0, 0%, 98%);--block-bg-color: hsl(0, 0, 42)}html{scroll-behavior:smooth}*{margin:0;padding:0;box-sizing:border-box}body{font-family:var(--font-family);background-color:var(--bg-color);color:var(--text-color)}ul{list-style:none}a{text-decoration:none;color:inherit}button,input,textarea{display:inline-block;border:none;outline:none;padding:1.25rem 2rem;font-family:monospace;font-size:1rem;font-weight:500;border-radius:1rem;box-shadow:0 2px 6px #b3b3b3,0 2px 2px #666}.button:active{box-shadow:0 2px 1px #666;transform:translateY(1px)}.button{margin-top:2rem;display:inline-block;border:none;outline:none;padding:.5rem 1rem;font-size:1.25rem;font-weight:500;border-radius:1rem;background-color:#333;color:#fff;box-shadow:0 2px 6px #b3b3b3,0 2px 2px #666;animation:infiniteMotion 2s infinite linear}.button:hover{background-color:#666}.container{max-width:968px;margin:0 auto}.grid{display:grid;gap:1.5rem}.section{padding:6rem 0 2rem}.section-title{font-size:2rem;color:var(--text-color)}.section-subtitle{display:block;font-size:var(--small-font-size);margin-bottom:4rem}.section-title,.section-subtitle{text-align:center}@media screen and (max-width: 992px){.container{margin-left:1.5rem;margin-right:1.5rem}.button{padding:1rem 1.75rem}.button__icon{width:22px;height:22px}}@keyframes infiniteMotion{0%{transform:translateY(1px)}50%{transform:translateY(10px)}to{transform:translateY(1px)}}