@import url(https://fonts.googleapis.com/css?family=Cabin|Herr+Von+Muellerhoff|Source+Sans+Pro:400,900&display=swap);*,:after,:before{margin:0;padding:0;box-sizing:border-box}:root{--main-font:"Source Sans Pro",sans-serif;--secondary-font:"Herr Von Muellerhoff",cursive;--body-font:"Cabin",sans-serif;--main-font-color-dark:#020f25;--secondary-font-color:#c59d5f;--body-font-color:#fbfbfb;--main-font-color-white:#fff}html{font-family:var(--body-font);font-size:10px;color:var(--body-font-color);scroll-behavior:smooth}body{overflow-x:hidden;background-color:var(--main-font-color-white);line-height:3rem}section{overflow:hidden}img{width:100%;max-width:100%}a{text-decoration:none}p{font-size:1.6rem;color:var(--main-font-color-dark)}li{list-style:none}.app_container{width:100%;max-width:1400px;margin-left:auto;margin-right:auto;padding:0 2.3rem;background-color:var(--main-font-color-white)}.logo{width:50px;height:50px;position:relative;left:75px;transition-timing-function:ease;transition-property:transform;cursor:pointer}.logo,.logo:hover{transition-delay:0s;transition-duration:.2s}.logo:hover{transform:rotate(-10deg);transform-origin:center;transition-timing-function:ease}.container{width:100%;max-width:1400px;margin:0;padding:0 2.3rem;background-color:var(--main-font-color-white)}.nav-list-container{visibility:visible}.nav{height:7.2rem;display:flex;align-items:center;justify-content:center}.bout5{top:300px;left:100px}.bout2,.bout5{width:40px;height:40px;position:relative;overflow:hidden}.bout2{display:none}.bout2 .span{width:6px;height:6px}.bout2 .span,.bout2 .span:before{display:block;background:#313d53;border-radius:100%;transition:transform .2s}.bout2 .span:before{content:"";width:100%;height:100%;position:relative;transform:translateY(3px);transform:translateY(-9px)}.bout2 .s1{transform:translate(10px,20px)}.bout2 .s2{transform:translate(21px,14px)}.nav-list{display:flex;font-size:1.5rem;margin-left:150px;font-weight:400}.nav-item{margin-left:15px;margin-right:15px;border-bottom:2px solid transparent;padding-top:5px;padding-bottom:5px}.nav-item:hover{border-bottom:2px solid rgba(0,0,0,.3)}.nav-item a{color:var(--main-font-color-dark)}.social-media-container{position:relative;right:2.5rem;margin-left:15px;margin-right:15px;padding-top:5px;padding-bottom:5px}.social-media{display:flex}.hero{height:95vh;padding-top:0;padding-left:20%;padding-right:5%;padding-bottom:10%;background-color:var(--main-font-color-white);max-height:800px}.hero-container{width:100%;height:100%;background:#fff;border:1px solid rgba(2,15,37,.15);box-sizing:border-box;border-radius:5px;display:flex;align-items:center;padding-right:9rem}.image-hero-container{flex:1;border-radius:5px;margin-left:20%;opacity:0;animation:heroImage .3s .3s forwards}.title-top{opacity:0;animation:titleTop .5s .5s forwards}.title-bottom{opacity:0;animation:titleBottom .5s .5s forwards}.text-hero-container{flex:1;background:#fff;color:#020f25;text-align:left;margin-left:-5%;margin-top:10rem;margin-bottom:10rem;padding-bottom:3rem}.text-one{margin-top:50px;opacity:0;animation:heroText .5s 1s forwards}.text-one p{font-size:2rem}.line{width:100%;max-width:8.4rem;height:.25rem;background-color:var(--main-font-color-dark);position:relative;opacity:0;animation:lineLeft .3s .2s forwards}.midle-container-hero{margin-right:auto;width:20em}.footer-start{width:40px;height:40px;margin-left:1rem;margin-right:1rem;margin-bottom:0;margin-top:2.2rem;opacity:0;animation:star .3s 1.2s forwards}.text-two{margin-top:3rem;margin-bottom:5rem}.text-two h1{color:var(--main-font-color-dark);font-size:4.3rem;font-family:var(--main-font);text-transform:uppercase;font-weight:900;letter-spacing:.05em;margin-right:-.5rem}.text-three p{font-size:2rem;opacity:0;animation:heroText .5s 1.3s forwards}.rotated-image{position:relative;max-width:500px;max-height:500px;width:100%;height:100%;box-sizing:border-box;border-radius:5px;transform-origin:center}.about{background:var(--body-font-color);padding-bottom:5rem}.about-me{margin-bottom:2rem}.about-container{display:flex;justify-content:center;flex-wrap:wrap}.about-title{text-align:center;padding-bottom:3rem;padding-top:3rem}.about-title p{font-size:2rem}.about-text{flex:0 0 50%;max-width:500px;text-align:justify;line-height:3rem}.about-image{min-width:400px;padding-left:2rem;padding-right:2rem;flex:0 0 50%}.project{text-align:center;color:var(--main-font-color-dark);padding:5%;padding-top:10%;padding-bottom:5rem;height:auto;width:100%;background-color:#fff}.project-title{font-size:2rem;font-weight:lighter}.project-nav{display:inline-flex;padding:5%}.project-nav-item{display:inline-flex;margin-left:1rem;margin-right:1rem;cursor:pointer;align-items:center;background-color:#fbfbfb;padding:1rem;border-radius:9px;padding-right:3rem}.projects-image{width:200%}.project-nav-item:hover{transform:translate(-.2rem,-.2rem);transition:transform .2s}.project-nav-item-icon{width:4rem;background-color:#fff;border-radius:50%;height:4rem;padding:1rem}.project-nav-item-name{margin-left:1rem}.project-item{max-width:100rem;background-color:#fbfbfb;padding:3rem;border-radius:.7rem;display:inline-flex;align-items:center;margin-bottom:2rem;margin-top:2rem;border:1px solid #ebebeb}.project-description{text-align:center;padding-left:3rem;padding:5%}.project-description-text{text-align:justify}.project-links{display:inline-flex;flex-wrap:wrap}.description-text{margin-top:2rem;margin-bottom:4rem;border-radius:.8rem;text-align:left}.description-tech{padding-bottom:2rem;padding-top:2rem;font-size:1.6rem;margin-left:4%}.description-tech-title{padding-top:2rem}.btn-bg{background-color:var(--main-font-color-dark);color:var(--body-font-color);padding:1rem;font-size:1.6rem;border:1px solid var(--main-font-color-dark);border-radius:.5rem}.btn-bg:hover{transform:translate(-.2rem,-.2rem);transition:transform .2s}.btn{margin-right:3rem;cursor:pointer}.btn-light{color:var(--main-font-color-dark);padding:1rem;font-size:1.6rem;border:1px solid var(--main-font-color-dark);border-radius:.5rem}.btn-light:hover{transform:translate(-.2rem,-.2rem);transition:transform .2s}.skill-icon{width:50px;height:50px;background:#dddbdd;padding:1rem;border-radius:100%;margin-bottom:30px;display:block;margin-left:auto;margin-right:auto}.skill-item{margin-top:1rem;margin-bottom:2rem;margin-left:1rem;margin-right:1rem}.skill{width:300px;height:250px;padding:4rem;border:1px solid rgba(2,15,37,.11);box-sizing:border-box;border-radius:.5rem}.skill:hover{transform:translate(3px,-3px);transition:transform .2s}.project-container{display:flex;justify-content:center;flex-flow:wrap;padding-bottom:3px;padding-left:2rem;padding-right:2rem}.middle-star{display:flex;align-items:center}.line-footer{width:100%;max-width:8.4rem;height:.25rem;background-color:var(--main-font-color-dark);position:relative;opacity:0}.middle-footer-start{width:40px;height:40px;margin-left:1rem;margin-right:1rem;margin-bottom:0;margin-top:2.2rem;opacity:0}.thanks,.thanks2{color:#212;font-size:2rem;font-weight:400;text-align:center;opacity:0}.midle{flex:1}.midle-container{margin-left:auto;margin-right:auto;width:20em}.input-form{display:flex;flex-direction:column;align-items:center;padding-bottom:2rem}.input{text-align:center;color:var(--main-font-color-dark);padding:1rem;margin-bottom:2rem;border:1px solid #c1bfbf;border-radius:.5rem}.message{height:10rem}.footer-content{padding:1rem;display:flex;align-items:center;box-sizing:border-box;border-radius:5px;background-color:var(--main-font-color-white)}.send-button{background-color:var(--main-font-color-dark);color:var(--main-font-color-white);padding:1rem 2rem 1rem 2rem;border:1px solid var(--main-font-color-dark);border-radius:.3rem;cursor:pointer}.form-container{flex:1;text-align:center;padding-bottom:2rem}p.message-sent{color:green;padding-bottom:2rem}p.message-not-sent{color:red;padding-bottom:2rem}.footer-image{flex:1}.footer-image-content{background-color:#020f25;line-height:3rem;font-size:1.5rem;padding:5rem;text-align:center;border-radius:5px}.footer-container{padding:2rem;padding-left:7rem}.rotated-image-footer{position:relative;max-width:503px;max-height:503px;width:100%;height:100%;transform-origin:center}footer{background-color:var(--body-font-color);padding:1rem;padding-bottom:7rem;padding-top:5rem}.overflow-hidden{overflow:hidden}.overflowY-scroll{overflow-y:scroll}.overflowY-hidden{overflow-y:hidden}.display-none{display:none}.display-block{display:block}.cliked_menu2{z-index:999!important}.cliked_menu2 .span{transition:transform .2s}.cliked_menu2 .span:before{transition:transform .2s;transform:translate(10px,-9px)}.show-footer-line{animation:footerLine .3s .3s forwards}.show-thanks{animation:thanks .3s .6s forwards}.show-thanks2{animation:thanks2 .3s .6s forwards}.show-footer-star{animation:footerStar .3s 1s forwards}@keyframes titleTop{0%{opacity:0;transform:translateY(3.6rem)}to{opacity:1;transform:translateY(0)}}@keyframes titleBottom{0%{opacity:0;transform:translateY(-3.6rem)}to{opacity:1;transform:translateY(0)}}@keyframes lineLeft{0%{opacity:0;width:0}to{opacity:1;width:100%}}@keyframes heroText{0%{opacity:0}to{opacity:1}}@keyframes star{0%{opacity:0}to{opacity:1}}@keyframes heroImage{0%{opacity:0;transform:scale(.6)}to{opacity:1;transform:scale(1)}}@keyframes footerLine{0%{opacity:0;width:0}to{opacity:1;width:100%}}@keyframes thanks{0%{opacity:0;transform:translateY(4rem)}to{opacity:1;transform:translateY(0)}}@keyframes thanks2{0%{opacity:0;transform:translateY(-4rem)}to{opacity:1;transform:translateY(0)}}@keyframes footerStar{0%{opacity:0}to{opacity:1}}@media(max-width:1303px){.logo{top:15px}.text-two h1{line-height:4rem}}@media(max-width:993px){.hero-container{flex-direction:column;padding-right:0;padding-left:1%;padding-right:1%}.text-hero-container{flex:1;background:#fff;margin-left:-30%;margin-top:2rem;margin-bottom:2rem;width:90%;padding-right:0}.text-two{margin-top:2rem;margin-bottom:3rem}.text-two h1{font-size:3rem;line-height:3rem}.midle-container{margin-left:0}.footer-start{width:30px;height:30px;margin-top:1.5rem}.text-three{width:60%}.image-hero-container{margin-top:-10%;margin-left:20%}.rotated-image-footer{max-width:303px;max-height:303px}}@media(max-width:983px){body{background-color:var(--main-font-color-white)}.text-two h1{font-size:3rem;line-height:3rem}.text-three{width:100%}.image-hero-container{margin-top:0;margin-left:0}.close-menu{height:100%;width:100%;background-color:hsla(0,0%,100%,.9);top:0;z-index:999!important}.close-menu,.nav-list{position:absolute;left:0}.nav-list{display:flex;font-size:1.5rem;font-weight:400;flex-direction:column;background-color:var(--main-font-color-dark);z-index:999;top:30%;padding-left:30%;margin-left:30%;border-radius:10px;padding-left:10%;padding-right:10%;padding-top:10%;padding-bottom:10%}.projects-image{width:100%}.nav-item a{color:#fff}.nav-item{padding-top:1rem;padding-bottom:1rem}.bout2{display:block;margin-left:78%}.logo{left:20%}.footer-content{flex-direction:column}.footer-image{margin-bottom:4rem;margin-top:-4rem}.hero{height:auto}.about-text{padding-right:3rem;padding-left:3rem;flex:0 0 100%;margin-top:0}.about-image{width:100%;margin-left:0;padding-left:0;padding-right:0;padding-top:0;margin-top:40px}.project-item{display:inline-block;padding:3%}.social-media-container{position:relative;background-color:var(--body-font-color);width:100%;margin-left:15%}}@media(max-width:510px){body{background-color:var(--main-font-color-dark)}.text-three{width:100%}.image-hero-container{margin-top:0;margin-left:0}.close-menu{height:100%;width:100%;background-color:hsla(0,0%,100%,.9);top:0;z-index:999!important}.close-menu,.nav-list{position:absolute;left:0}.nav-list{display:flex;font-size:1.5rem;font-weight:400;flex-direction:column;background-color:var(--main-font-color-dark);z-index:999;top:30%;padding-left:30%;margin-left:30%;border-radius:10px;padding-left:10%;padding-right:10%;padding-top:10%;padding-bottom:10%}.nav-item a{color:#fff}.nav-item{padding-top:1rem;padding-bottom:1rem}.bout2{display:block;margin-left:78%}.logo{left:20%}.footer-container{padding:1%;padding-left:0}.footer-image-content{padding:10%}}@media(max-width:350px){.about-image{min-width:50px}.project-links{display:block;flex-wrap:wrap}.btn{margin-bottom:2rem}.project-nav{display:inline-block}.project-nav-item{margin-top:2rem}}