body,html{margin:0;padding:0}ol,ul{list-style:none;margin:0;padding:0}*,:after,:before{box-sizing:border-box;font:inherit}:active,:focus,a:active,a:focus{outline:none}a,a:visited{text-decoration:none;cursor:pointer;color:inherit}a:hover{text-decoration:none}input,select{-webkit-appearance:none;-moz-appearance:none;appearance:none}input::-ms-clear{display:none}input::-webkit-inner-spin-button,input::-webkit-outer-spin-button{-webkit-appearance:none}input[type=number]{-moz-appearance:textfield}h1,h2,h3,h4,h5,h6,p{margin:0}body,html{background-color:#383838;font-family:"Bebas Neue",cursive;font-size:16px;overflow-x:hidden;color:white}.font{font-family:"Leckerli One",cursive;color:#aa55ff;font-size:2em}.flex{display:flex;justify-content:center;align-items:center}.body-container{display:flex}.navbar{background:url(../img/bg3.png);flex-direction:column;justify-content:space-between;width:60px;height:100vh;min-height:500px;padding:10px 0 20px;z-index:10;position:relative}.navbar-btn{display:none;transition:0.5s}.navbar-btn:hover{transition:0.5s}.navbar-btn:hover svg path{fill:#aa55ff}.navbar-btn:hover svg circle{fill:#aa55ff}.navbar_logo img{width:45px;transition:0.5s}.navbar_logo img:hover{transform:rotate(-15deg)}.navbar_menu{width:100%}.navbar_link{position:relative;z-index:12;margin-bottom:25px}.navbar_link a{width:100%}.navbar_link a svg{transition:0.5s}.navbar_link:after{content:"";color:#aa55ff;position:absolute;font-size:16px;letter-spacing:1px;top:50%;left:50%;transform:translate(-50%,-50%);opacity:0;transition:0.5s;z-index:11;pointer-events:none}.navbar_link:hover svg{transition:0.5s;opacity:0}.navbar_link:hover:after{opacity:1}.navbar_link:first-child:after{content:"HOME"}.navbar_link:nth-child(2):after{content:"ABOUT"}.navbar_link:nth-child(3):after{content:"SKILLS"}.navbar_link:nth-child(4):after{content:"WORKS"}.navbar .active .home-path{stroke:#aa55ff}.navbar .active .person-path{stroke:#aa55ff}.navbar .active .skills-path{fill:#aa55ff}.navbar .active .portfolio-path{fill:#aa55ff}.navbar_social{width:100%}.navbar_social li{margin-bottom:10px}.navbar_social li a{width:100%}.navbar_social li path{transition:0.5s}.navbar_social li:hover path{transition:0.5s;fill:#aa55ff}.main{width:calc(100vw - 60px);height:100vh}.swiper-container{height:calc(100% - 60px);margin-left:30px!important;margin-top:30px}.swiper-slide{background:url(../img/bg3.png)}.swiper-pagination{visibility:hidden}.slide-container{display:flex;width:100%;height:100%}.slide-title{font-size:60px;letter-spacing:7px;color:#aa55ff;line-height:1;cursor:default}.slide-title span{transition:color 2s}.slide-title span:hover{color:#aa55ff;transition:color 0.3s}.slide-home{text-shadow:0 0 10px #000;letter-spacing:1px}.slide-home-swipe{position:relative;left:-10px;flex-direction:column}.slide-home-swipe .move{position:relative;top:-16px;-webkit-animation:moveable 1s linear infinite alternate;animation:moveable 1s linear infinite alternate}.slide-home-nav{position:absolute;top:45%;left:-25px;transform:translateY(-50%) rotate(-90deg);opacity:0.3;letter-spacing:1px}.slide-home-text{text-align:left;color:white;font-size:44px;align-self:center;margin-left:50px;letter-spacing:1px;line-height:1.3;position:relative;top:-33px;min-width:350px}.slide-home-avatar{flex-grow:1;display:flex;justify-content:center;align-items:center}.slide-home-avatar-wrapper{max-width:512px;max-height:512px;-webkit-animation:rotate 10s 3s linear infinite;animation:rotate 10s 3s linear infinite}.slide-home-avatar-wrapper img{width:100%}.slide-home-avatar-inner{position:relative;margin-right:50px}.slide-home-tonenorm{position:absolute;width:50%;right:-10%;top:-10%;transform-origin:76.09% 20.69%;transform:rotate(-46deg);-webkit-animation:tonenorm 1s 2s forwards;animation:tonenorm 1s 2s forwards}.slide-portfolio{display:grid;grid-template-rows:repeat(3,1fr);grid-template-columns:repeat(3,1fr)}.slide-portfolio-link{position:absolute;width:75px;height:75px;top:50%;left:50%;transform:translate(-50%,-50%);border-radius:50%;font-size:12px;background:#aa55ff;color:white;text-align:center;font-family:monospace;line-height:150%;opacity:0;transition:0.3s}.slide-portfolio-link:hover{color:#000}.slide-portfolio-overlay{position:absolute;background:rgba(0,0,0,0.6);width:100%;height:100%;top:0;left:0;transition:0.3s}.slide-portfolio-item{position:relative;overflow:hidden}.slide-portfolio-item img{height:100%;position:relative;left:50%;transform:translateX(-50%)}.slide-portfolio-item:hover .slide-portfolio-link{opacity:1;transition:0.3s}.slide-portfolio-item:hover .slide-portfolio-overlay{opacity:0;transition:0.3s}.slide-skills{padding:20px;text-shadow:0 0 10px #000}.slide-skills span:hover{color:#fff}.slide-skills .slide-title:first-child{position:absolute;top:20px;left:20px}.slide-skills .slide-title:nth-child(2){position:absolute;bottom:20px;right:20px}.slide-skills-images{width:100%;height:100%}.slide-skills-images-hidden{display:none}.slide-skills-images svg{max-width:100px;margin:5px}.slide-skills-images svg circle,.slide-skills-images svg ellipse,.slide-skills-images svg path{transition:all 0.5s}.slide-skills-images svg:hover circle,.slide-skills-images svg:hover ellipse,.slide-skills-images svg:hover path{transition:0.5s;fill:#aa55ff}.slide-skills-images div:first-child{display:flex;max-width:250px;flex-wrap:wrap;justify-content:center;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);z-index:2}.slide-skills-images div:nth-child(2){position:absolute;top:50%;left:50%;width:100px;height:100px;-webkit-animation:circleSVG 50s linear infinite;animation:circleSVG 50s linear infinite;transform-origin:0% 0%}.slide-skills-images div:nth-child(2) svg{position:absolute;-webkit-animation:circleSVG2 50s linear infinite;animation:circleSVG2 50s linear infinite}.slide-skills-info{font-size:18px;color:aqua;letter-spacing:5px;cursor:default;text-shadow:0 0 10px #fff}.slide-skills-info p{position:absolute;transition:0.5s}.slide-skills-info p:after{position:absolute;content:"";width:100%;height:2px;left:0;bottom:-10px;background:aqua}.slide-skills-info p:hover{transition:0.5s;color:#aa55ff;text-shadow:none}.slide-skills-info p:hover:after{transition:0.5s;width:0;left:50%}.slide-skills-info p:first-child{top:30%;transform:rotate(-15deg);-webkit-animation:bounce 1s linear infinite alternate;animation:bounce 1s linear infinite alternate}.slide-skills-info p:nth-child(2){top:15%;right:40px;transform:rotate(15deg);-webkit-animation:bounce 1s linear infinite alternate;animation:bounce 1s linear infinite alternate}.slide-skills-info p:nth-child(3){bottom:20%;transform:rotate(15deg);-webkit-animation:bounce2 1s linear infinite alternate;animation:bounce2 1s linear infinite alternate}.slide-skills-info p:nth-child(4){bottom:40%;right:50px;transform:rotate(-15deg);-webkit-animation:bounce2 1s linear infinite alternate;animation:bounce2 1s linear infinite alternate}.slide-about{font-size:24px;opacity:0.5}@-webkit-keyframes rotate{0%{transform:rotate(0deg)}to{transform:rotate(360deg)}}@keyframes rotate{0%{transform:rotate(0deg)}to{transform:rotate(360deg)}}@-webkit-keyframes tonenorm{0%{transform:rotate(-46deg)}to{transform:rotate(-20deg)}}@keyframes tonenorm{0%{transform:rotate(-46deg)}to{transform:rotate(-20deg)}}@-webkit-keyframes circleSVG{0%{transform:rotate(0deg) translate(-50%,-50%)}to{transform:rotate(-360deg) translate(-50%,-50%)}}@keyframes circleSVG{0%{transform:rotate(0deg) translate(-50%,-50%)}to{transform:rotate(-360deg) translate(-50%,-50%)}}@-webkit-keyframes circleSVG2{0%{transform:rotate(0deg)}to{transform:rotate(360deg)}}@keyframes circleSVG2{0%{transform:rotate(0deg)}to{transform:rotate(360deg)}}@-webkit-keyframes bounce{0%{transform:rotate(-15deg)}to{transform:rotate(-10deg)}}@keyframes bounce{0%{transform:rotate(-15deg)}to{transform:rotate(-10deg)}}@-webkit-keyframes bounce2{0%{transform:rotate(15deg)}to{transform:rotate(10deg)}}@keyframes bounce2{0%{transform:rotate(15deg)}to{transform:rotate(10deg)}}@-webkit-keyframes moveable{0%{left:-4px}to{left:5px}}@keyframes moveable{0%{left:-4px}to{left:5px}}@media screen and (min-width:1580px){.slide-portfolio{grid-template-columns:repeat(4,1fr)}}@media screen and (min-width:1366px) and (max-height:750px){.slide-portfolio-item img{height:auto;width:100%}}@media screen and (max-width:768px){.body-container{flex-direction:column}.main{width:100%;height:calc(100vh - 60px)}.navbar{flex-direction:row;justify-content:space-between!important;width:100vw;height:60px;min-height:60px;padding:0 30px 0 20px}.navbar_menu{display:flex;flex-direction:row;justify-content:center;position:absolute;width:auto;left:50%;transform:translateX(-50%)}.navbar_menu li{margin-bottom:0;margin-right:20px}.navbar_menu li:last-child{margin-right:0}.navbar_social{width:auto;display:flex;flex-direction:row}.navbar_social li{margin-bottom:0;margin-left:10px}.swiper-container{width:100%;height:100%;margin-right:auto!important;margin-left:auto!important;margin-top:0}.slide-home{flex-direction:column;padding-top:60px}.slide-home-nav{top:0;left:50%;transform:rotate(0deg) translateX(-50%)}.slide-home-text{align-self:flex-start}.slide-home-swipe{margin-top:10px}.slide-home-avatar-wrapper{max-width:256px;max-height:256px}.slide-portfolio{height:auto;grid-template-rows:auto;grid-template-columns:repeat(2,1fr)}.slide-portfolio-item-scrollable{overflow-y:scroll;scrollbar-width:none}.slide-portfolio-item-scrollable::-webkit-scrollbar{width:0}.slide-portfolio-item img{width:100%;height:auto;top:50%;transform:translate(-50%,-50%)}.slide-skills{overflow-y:scroll;scrollbar-width:none;flex-direction:column}.slide-skills::-webkit-scrollbar{width:0}}@media screen and (max-width:575px){.slide-portfolio{grid-template-columns:repeat(1,1fr)}.slide-skills{flex-direction:column}.slide-skills-images-hidden{display:block}.slide-skills-images div:first-child{margin-top:20px;max-width:100%;position:relative;top:0;left:0;transform:translate(0,0)}.slide-skills-images div:first-child svg{width:100px;height:100px;position:relative}.slide-skills-images div:nth-child(2){display:none}.slide-skills .slide-title:first-child,.slide-skills .slide-title:nth-child(2){position:relative;top:0;left:0;display:inline}.slide-skills-info p{position:relative;transform:none!important;-webkit-animation:none!important;animation:none!important;top:0!important;left:0!important;margin-top:20px}}@media screen and (max-width:478px){.navbar{padding:0 10px}.navbar-btn{display:block;position:absolute;width:20px;background-color:transparent;left:90%;top:50%;transform:translateY(-50%);cursor:pointer}.navbar_menu svg{width:25px}.navbar_social{flex-direction:column;position:absolute;top:60px;right:-100px;width:60px;padding:10px 0;background-color:#272727;transition:0.5s}.navbar_social-active{right:0}.navbar_social li{margin-left:0;margin-bottom:10px}.navbar_social li a svg{width:25px;height:25px}.navbar .social-active{transition:0.5s;top:60px}.slide-home-text{font-size:36px;margin-left:10px}.slide-home-swipe{bottom:50px;left:0;align-items:flex-end}}