all.min.css

.section-header,section{scroll-margin-top:68px}@keyframes rotateZ{from{transform:rotateZ(0)}to{transform:rotateZ(360deg)}}@keyframes loading-icon-first{0%,100%{transform:translate(-50%,-50%) rotateZ(225deg)}50%{transform:translate(-50%,-50%) rotateZ(0)}}@keyframes loading-icon-last{0%,100%{transform:translate(-50%,-50%) rotateZ(0)}50%{transform:translate(-50%,-50%) rotateZ(225deg)}}@keyframes loading-text{0%,100%{transform:scale(1)}50%{transform:scale(1.3)}}@keyframes intro-scroll{from{transform:translate(-50%,0);opacity:1}to{transform:translate(-50%,24px);opacity:0}}@keyframes intro-line{0%{opacity:0;transform:translate(-50%,0) scaleY(1)}30%{opacity:1}100%{border-radius:50%;opacity:0;transform:translate(-50%,150%) scaleY(.4)}}*{padding:0;margin:0;box-sizing:border-box}:focus{outline:0}.loading{z-index:100;font:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;display:flex;align-items:center;justify-content:center;position:fixed;top:0;left:0;width:100vw;height:100vh;color:#eee;font-size:24px;opacity:1;visibility:visible;background:linear-gradient(45deg,#5684d1 0,#ff913e 50%,#effc46 100%);transition:opactiy,visibility,1s linear .5s}.loading-icon .icon{position:absolute;left:50%;right:50%;width:250px;height:250px;border:4px solid #eee;border-radius:4px;transform:translate(-50%,-50%);transform-origin:center}.loading-icon .icon:first-child{animation:loading-icon-first 4s ease infinite}.loading-icon .icon:last-child{animation:loading-icon-last 4s ease infinite}.loading-text{font-size:28px;font-family:Lobster;animation:loading-text 4s linear infinite}.section-header{padding-top:1rem;padding-bottom:1rem;text-align:center;position:relative}.section-header h2{font-family:Roboto;font-weight:800;font-size:21pt;color:#3C3D51}#menuToggleButton{display:none;border:none;background-color:transparent;font-size:24px;color:#f8f8f8;cursor:pointer}@media (max-width:480px){body .wrapper .nav,body .wrapper .skill-bars{padding:0 1rem!important}body nav,body nav .nav-right{background-color:rgba(58,58,79,.95)}body .wrapper .loading-icon .icon{width:180px;height:180px}body .wrapper .loading-text{font-size:22px}body .wrapper .intro-header h2{font-size:21px!important}body .wrapper .intro-small p{font-size:16px!important;line-height:150%}body .wrapper .intro-icons{justify-content:space-between!important}body .wrapper .intro-icons .icon{height:48px!important;width:48px!important;line-height:48px!important;font-size:28px!important;margin:2rem!important}body .wrapper .skills{display:block!important}body .wrapper .skill-techs{padding:1rem 1rem 0!important;margin:0!important;border-left:0!important}body .wrapper .skill-techs .skill-tech{font-size:12px!important}body .wrapper .portfolyo{margin:0 1rem!important}body .wrapper .portfolyo-card{flex-wrap:wrap!important}body .wrapper .portfolyo-card-img{margin:0 0 1rem!important}body .wrapper .galeri{justify-content:center!important;display:flex!important;flex-wrap:wrap;align-items:center!important;margin:0 1rem!important}body .wrapper .galeri-image{max-width:42vw!important;max-height:42vw!important}body .wrapper .galeri-image-footer{flex-direction:column;align-items:flex-start!important;padding:.4rem!important}body .wrapper .galeri-image-footer .image-header{font-size:14px}body .wrapper .galeri-image-footer .image-date{font-size:12px}body .wrapper .aboutme{column-count:1!important;padding:0 1rem 1rem!important}body .wrapper .aboutme>h3{margin-top:.5rem}body .wrapper .contact{width:100vw!important;padding:0 1rem!important}body .wrapper .contact .contact-informations .informations{flex-direction:column}body .wrapper .contact .contact-informations .informations .info{margin:.5rem 0!important}body .wrapper .contact .contact-form{padding:0!important;width:auto!important}body .wrapper .contact .contact-form .contact{margin-top:.5rem;padding:0 1rem!important}body #menuToggleButton{display:block}body nav{transition:background-color .5s ease}body nav .nav-right{position:fixed;left:0;right:0;top:68px;border-top:1px solid transparent;transform:translateY(calc((-100%) + (-68px)));transition:transform .5s ease;z-index:-1}body nav .nav-right ul{flex-direction:column}body nav .nav-right ul li{margin:.5rem}body nav .nav-right.active{transform-origin:top;transform:translateY(0);border-top:1px solid #663399}}html{scroll-behavior:smooth;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;height:100vh}html body .wrapper .nav{background-color:rgba(58,58,79,0);z-index:90;position:fixed;top:0;left:0;right:0;height:68px;padding:0 5rem;display:flex;align-items:center;justify-content:space-between;transition:background-color .4s linear}html body .wrapper .nav.sticky{background-color:rgba(58,58,79,.95);box-shadow:0 0 6px #3a3a4f}html body .wrapper .nav-left{display:flex;align-items:center;justify-content:flex-start}html body .wrapper .nav-left .avatar{width:52px;height:52px;border-radius:50%;overflow:hidden}html body .wrapper .nav-left .avatar img{width:100%;height:100%}html body .wrapper .nav-left .name{font-family:Lobster;font-size:24px;margin-left:.5rem}html body .wrapper .nav-left .name a{text-decoration:none;color:#f8f8f8}html body .wrapper .nav-right ul{display:flex;align-items:center;justify-content:flex-end;list-style-type:none}html body .wrapper .nav-right ul li a{text-decoration:none;font-family:Roboto;color:rgba(255,255,255,.6);padding:6px 12px;display:inline-block;transition:color .3s linear}html body .wrapper .nav-right ul li a.active,html body .wrapper .nav-right ul li a:hover{color:#fff}html body .wrapper .intro-header h2,html body .wrapper .intro-small p{color:#f8f8f8;border-radius:10px;transition:1s transform;font-family:Roboto}html body .wrapper .intro{background:url(images/intro.jpg) no-repeat fixed;background-size:cover;width:100%;height:100vh;text-align:center}html body .wrapper .intro-header h2{display:inline-block;font-size:36px;font-weight:400;margin:10rem 0 2rem;padding:12px;background-color:#111}html body .wrapper .intro-small p{display:inline-block;font-size:18px;margin:0 2rem;padding:12px;background-color:#111}html body .wrapper .intro-icons{display:flex;justify-content:center}html body .wrapper .intro-icons .icon{display:inline-block;margin:3rem;line-height:64px;width:64px;height:64px;font-size:2rem;border-radius:10%;text-decoration:none;color:#eee;background-color:#111;transition:all 1s ease}html body .wrapper .intro-icons .icon:hover{border-radius:50%;background-color:#02022f;filter:drop-shadow(0 0 4px #fff)}html body .wrapper .intro-icons .icon:hover .icon-facebook{color:#385494}html body .wrapper .intro-icons .icon:hover .icon-instagram{color:#C52D93}html body .wrapper .intro-icons .icon:hover .icon-twitter{color:#28A5DD}html body .wrapper .intro-icons .icon-facebook{color:#eee}html body .wrapper .intro-icons .icon-facebook:hover{color:#385494}html body .wrapper .intro-icons .icon-instagram{color:#eee}html body .wrapper .intro-icons .icon-instagram:hover{color:#C52D93}html body .wrapper .intro-icons .icon-twitter{color:#eee}html body .wrapper .intro-icons .icon-twitter:hover{color:#28A5DD}html body .wrapper .intro-animation{position:absolute;left:50%;bottom:4rem;width:32px;height:54px;color:#eee;border:3px solid #eee;border-radius:26px;transform:translateX(-50%)}html body .wrapper .intro-animation-line{display:block;position:absolute;left:50%;top:6px;transform:translate(-50%,0) scaleY(1);width:4px;height:14px;border-radius:10rem;background-color:#fff;animation:intro-line 1.5s ease infinite}html body .wrapper .intro-animation-icon{position:absolute;left:50%;top:6px;transform:translateX(-50%);animation:intro-scroll 1.5s ease infinite}html body .wrapper main.main .skills{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap}html body .wrapper main.main .skills .skill-bars{flex:1;padding:0 5rem}html body .wrapper main.main .skills .skill-bars .skill-bar{margin:2rem 0;position:relative;height:14px;width:100%;border-radius:9px;background-color:#ddd;transition:1s transform}html body .wrapper main.main .skills .skill-bars .skill-bar::after,html body .wrapper main.main .skills .skill-bars .skill-bar::before{position:absolute;top:-24px;color:#444}html body .wrapper main.main .skills .skill-bars .skill-bar::before{content:attr(data-progress);left:4px}html body .wrapper main.main .skills .skill-bars .skill-bar::after{content:attr(data-width) "%";right:4px}html body .wrapper main.main .skills .skill-bars .skill-bar .bar{height:100%;border-radius:9px;background-color:#ed3}html body .wrapper main.main .skills .skill-techs{flex:1;padding:0 5rem;display:grid;grid-template-columns:repeat(3,1fr);grid-gap:1rem;border-left:2px dashed #ddd}html body .wrapper main.main .skills .skill-techs .skill-tech{transition:1s transform;place-self:center;display:flex;align-items:center;justify-content:center;flex-direction:column;text-decoration:none}html body .wrapper main.main .skills .skill-techs .skill-tech>span{color:#444;font-size:18px;font-weight:500;font-family:Roboto,sans-serif;margin-top:.5rem;padding-top:.5rem;border-top:2px solid #ddd}html body .wrapper main.main .skills .skill-techs .skill-tech:first-child{color:#7952B3}html body .wrapper main.main .skills .skill-techs .skill-tech:nth-child(2){color:#61DAFB}html body .wrapper main.main .skills .skill-techs .skill-tech:nth-child(3){color:#DD0330}html body .wrapper main.main .skills .skill-techs .skill-tech:nth-child(4){color:#339AF0}html body .wrapper main.main .skills .skill-techs .skill-tech:nth-child(5){color:#CF4647}html body .wrapper main.main .skills .skill-techs .skill-tech:last-child{color:#24292E}html body .wrapper main.main .portfolyo{margin:0 5rem}html body .wrapper main.main .portfolyo-card{margin:1rem 0;display:flex;flex-wrap:wrap;align-items:flex-start;justify-content:space-between;min-height:250px}html body .wrapper main.main .portfolyo-card:nth-child(odd){flex-direction:row}html body .wrapper main.main .portfolyo-card:nth-child(odd) .portfolyo-card-img{margin-right:.5rem}html body .wrapper main.main .portfolyo-card:nth-child(even){flex-direction:row-reverse}html body .wrapper main.main .portfolyo-card:nth-child(even) .portfolyo-card-img{margin-left:.5rem}html body .wrapper main.main .portfolyo-card-img{max-width:380px;width:380px;height:250px;border:2px solid #d8d8d8;border-radius:4px}html body .wrapper main.main .portfolyo-card-img .screen{width:100%;height:calc(100% - 28px);background-size:cover;background-position:top;transition:background-position 6s ease}html body .wrapper main.main .portfolyo-card-img .screen:hover{background-position:bottom}html body .wrapper main.main .portfolyo-card-img .bar{border:2px solid #d8d8d8;width:100%;height:28px;display:flex;align-items:center;justify-content:flex-start;background-color:#ddd}html body .wrapper main.main .portfolyo-card-img .bar .green,html body .wrapper main.main .portfolyo-card-img .bar .red,html body .wrapper main.main .portfolyo-card-img .bar .yellow{width:14px;height:14px;margin:0 2px;border-radius:50%}html body .wrapper main.main .portfolyo-card-img .bar .red{background:#DF5662}html body .wrapper main.main .portfolyo-card-img .bar .yellow{background:#F5BE4E}html body .wrapper main.main .portfolyo-card-img .bar .green{background:#4FA742}html body .wrapper main.main .portfolyo-card-body{display:flex;align-items:flex-start;justify-content:flex-start;flex-direction:column;padding:1rem;flex:1;background-color:#f8f8f8;border-radius:4px;height:250px}html body .wrapper main.main .portfolyo-card-body .title{margin:0 0 4px}html body .wrapper main.main .portfolyo-card-body .title strong{color:#663399}html body .wrapper main.main .portfolyo-card-body .desc p{padding:.5rem 0;max-height:calc(250px - 8rem);overflow-y:auto;line-height:150%}html body .wrapper main.main .portfolyo-card-body .desc .btn{display:inline-block;text-decoration:none;font-family:Roboto;padding:4px 12px;margin:8px 0;background-color:#f8f8f8;color:#663399;border:2px dotted #663399;transition:.5s all ease}html body .wrapper main.main .portfolyo-card-body .desc .btn:hover{background-color:#663399;color:#f8f8f8;border-color:#f8f8f8}html body .wrapper main.main .portfolyo-card-body .footer{margin-top:auto;place-items:flex-end;display:inline-block}html body .wrapper main.main .portfolyo-card-body .footer em{color:rgba(102,51,103,.8)}html body .wrapper main.main .galeri{margin:0 5rem;padding:1rem 0!important;display:grid;grid-gap:16px;justify-content:center;grid-template-columns:repeat(4,minmax(200px,250px))}html body .wrapper main.main .galeri-image{border:1px solid rgba(102,51,153,.4);box-shadow:0 0 2px 0 rgba(102,51,153,.6);position:relative;display:block;width:100%;height:100%;overflow:hidden}html body .wrapper main.main .galeri-image-footer{display:flex;align-items:center;justify-content:space-between;position:absolute;left:0;bottom:0;right:0;padding:14px;font-size:16px;font-weight:400;font-family:Roboto;text-decoration:none;color:#eee;z-index:10;background-color:rgba(102,51,153,.8)}html body .wrapper main.main .galeri-image-footer .image-header{font-weight:500}html body .wrapper main.main .galeri-image-footer .image-date{font-style:italic}html body .wrapper main.main .galeri-image img{width:100%;height:100%;object-fit:cover;transition:.3s transform linear;z-index:1}html body .wrapper main.main .galeri-image img:hover{transform:scale(1.1)}html body .wrapper main.main #AboutMe{background-color:#663399}html body .wrapper main.main #AboutMe h2{color:#f8f8f8}html body .wrapper main.main .aboutme{padding:0 5rem 2rem;background-color:#663399;color:#f8f8f8;column-rule-style:dotted;column-count:2;column-gap:2rem}html body .wrapper main.main .aboutme h3{font-family:Lobster;font-weight:500;font-size:20px;padding-bottom:.5rem;border-bottom:2px solid #eee}html body .wrapper main.main .aboutme p{padding-top:.5rem;font-family:Lato;font-size:16px}html body .wrapper main.main .contact{width:60vw;margin:0 auto;padding:0 5rem;display:flex;align-items:center;justify-items:center;flex-direction:column}html body .wrapper main.main .contact .contact-form,html body .wrapper main.main .contact .contact-informations{width:100%}html body .wrapper main.main .contact .contact-form .header,html body .wrapper main.main .contact .contact-informations .header{font-family:Roboto;font-weight:500;font-size:22px;color:#333;text-align:center;text-decoration-line:underline;text-decoration-style:wavy;text-decoration-color:#663399}html body .wrapper main.main .contact .contact-informations .informations{display:flex;align-items:center;justify-content:space-between}html body .wrapper main.main .contact .contact-informations .informations .info{display:block;text-decoration:none;color:#f8f8f8;background-color:#663399;margin:1rem;padding:.5rem;box-shadow:0 0 2px #663399;transition:box-shadow .3s ease,transform .3s ease}html body .wrapper main.main .contact .contact-informations .informations .info>i{margin-right:4px}html body .wrapper main.main .contact .contact-informations .informations .info:hover{box-shadow:4px 4px 8px #663399;transform:scale(1.05);will-change:transform,box-shadow}html body .wrapper main.main .contact .contact-form{padding:0 5rem;width:100%}html body .wrapper main.main .contact .contact-form .contact{width:inherit;display:flex;align-items:flex-start;justify-content:space-between;flex-direction:column;padding:1rem}html body .wrapper main.main .contact .contact-form .contact button,html body .wrapper main.main .contact .contact-form .contact input,html body .wrapper main.main .contact .contact-form .contact textarea{font-family:Roboto;margin:0 0 1rem;width:100%;padding:.5rem;font-size:16px;border:2px solid #663399;background-color:#f8f8f8;box-shadow:0 0 4px rgba(102,51,153,.6) inset,0 0 4px rgba(221,221,221,.8)}html body .wrapper main.main .contact .contact-form .contact textarea{resize:vertical;min-height:250px}html body .wrapper main.main .contact .contact-form .contact .btn{background-color:#f8f8f8;color:#663399;cursor:pointer;transition:.3s background-color ease,color .3s ease}html body .wrapper main.main .contact .contact-form .contact .btn:hover{background-color:#663399;color:#f8f8f8}html body .wrapper footer{background-color:#663399;color:#fff;padding:1rem 0;text-align:center;line-height:200%}html body .wrapper footer>h6{font-weight:400;font-family:Lobster;font-size:21px}html body .wrapper footer>p{font-family:Roboto,sans-serif;font-size:18px}#AboutMe:target~nav.nav #navLinkAboutMe,#Contact:target~nav.nav #navLinkContact,#Galeri:target~nav.nav #navLinkGaleri,#Intro:target~main nav.nav #navLinkIntro,#Portfolyo:target~nav.nav #navLinkPortfolyo,#Skills:target~nav.nav #navLinkSkills{color:#fff}