.header-title,.section{height:100vh;overflow:hidden}.header-title{position:relative;background-color:#29a6dc}.header-title .svg-title-wrapper{position:absolute;left:15%;top:50%;transform:translateY(-50%);min-width:250px;max-width:600px;margin-right:15%;display:flex;flex-direction:column;justify-content:flex-start;align-items:flex-start}@media(max-width: 800px){.header-title .svg-title-wrapper{left:8%}}.header-title .svg-name{width:50%;min-width:200px}.header-title .svg-name-wrapper{display:flex;flex-wrap:wrap;justify-content:flex-start;align-items:flex-end;align-content:space-between;margin-bottom:20px;width:100%}.header-title .svg-surname{width:50%;min-width:200px;margin-left:-15px}@media(max-width: 530px){.header-title .svg-surname{margin-left:0;margin-top:-20px}}.header-title .clouds{position:absolute;top:0;left:0;bottom:0;right:0;perspective:2000px;perspective-origin:center}.header-title svg.flying.cloud{position:absolute;user-select:none;-webkit-user-drag:none;transform:scale(1.1) translate(10px, 10px)}@media only screen and (max-width: 1024px){.header-title svg.flying.cloud{display:none}}.header-title svg.flying.cloud:nth-of-type(1){top:70%;left:50%;width:18%}.header-title svg.flying.cloud:nth-of-type(2){top:10%;left:10%;width:13%}.header-title svg.flying.cloud:nth-of-type(3){top:50%;left:80%;width:11%}.header-title svg.flying.cloud:nth-of-type(4){top:10%;left:62%;width:8%}.header-title svg.flying.cloud:nth-of-type(5){top:70%;left:20%;width:5%}.header-title .profession{animation:draw 8.5s 8.5s linear both,fill 1s 12s ease both;width:50%;max-width:281px;min-width:240px}.header-title .sun{position:absolute;top:70px;right:0;transform:translate(50%, -50%) rotateZ(0deg);width:15vw;height:15vw;border-radius:50%;border:solid #f7cc42 2px;border-left-color:#29a6dc;border-bottom-color:#29a6dc}@media only screen and (max-width: 1024px){.header-title .sun{display:none}}.header-title .sun::before{content:"";position:absolute;top:50%;left:50%;transform:translate(-50%, -50%);border-radius:50%;width:15vw;height:15vw;box-shadow:0 0 0 0 #f7cc42;transform:translate(-50%, -50%) scale(1);animation:pulse 3s infinite ease-out paused}.header-title .sun.pulsing::before{animation-play-state:running}.top-bar{position:fixed;top:0;left:0;width:100%;height:70px;background-color:#fff;box-shadow:0 0 10px rgba(0,0,0,.1);text-transform:uppercase;overflow:hidden;z-index:100}@media only screen and (max-width: 1023px){.top-bar{height:60px}}@media only screen and (orientation: landscape)and (max-width: 1023px){.top-bar{height:50px}}.top-bar .bar-container{position:relative;width:100%;height:100%;margin:0 auto}.top-bar .bar-container .author{position:absolute;left:15%;top:50%;transform:translateY(-50%)}@media only screen and (max-width: 1023px){.top-bar .bar-container .author{top:30px}}@media only screen and (orientation: landscape)and (max-width: 1000px){.top-bar .bar-container .author{top:25px}}.top-bar .bar-container .scroll{font-size:2.4rem;padding:10px;font-weight:bold;color:#333}@media only screen and (max-width: 530px){.top-bar .bar-container .scroll{font-size:2.2rem}}@media only screen and (max-width: 360px){.top-bar .bar-container .scroll{font-size:1.9rem}}@media only screen and (orientation: landscape)and (max-width: 1000px){.top-bar .bar-container .scroll{font-size:2rem}}@media only screen and (max-width: 900px){.top-bar .bar-container .scroll.bar-name{color:#1592c8}}.top-bar .bar-container .scroll:hover{color:#1592c8}.top-bar .bar-container .menu{position:absolute;left:60%;top:50%;transform:translateY(-50%);height:100%;width:25%}@media only screen and (max-width: 1440px){.top-bar .bar-container .menu{width:33%}}@media only screen and (max-width: 1100px){.top-bar .bar-container .menu{left:auto;right:5%;width:40%}}@media only screen and (max-width: 900px){.top-bar .bar-container .menu{display:none}}.top-bar .bar-container .menu .menu-container{display:flex;align-items:center;justify-content:space-between;height:100%;list-style:none}.top-bar .bar-container .menu-mobile{display:none;position:absolute;top:50%;left:50%;transform:translate(-50%, -50%)}.top-bar .bar-container .menu-mobile .menu-item-mobile{opacity:0}.top-bar .bar-container .btn-menu{display:none;flex-direction:column;justify-content:space-between;position:absolute;right:5%;top:35px;transform:translateY(-50%);height:20px;box-sizing:content-box;padding:20px;border:none;background-color:transparent;cursor:pointer;outline:none}@media only screen and (max-width: 900px){.top-bar .bar-container .btn-menu{display:flex;top:30px}}@media only screen and (orientation: landscape)and (max-width: 1000px){.top-bar .bar-container .btn-menu{top:25px}}.top-bar .bar-container .btn-menu .menu-bar{width:30px;height:4px;border-radius:5px;background-color:#333}@media only screen and (max-width: 530px){.top-bar .bar-container .btn-menu .menu-bar{width:25px}}@media only screen and (orientation: landscape)and (max-width: 1000px){.top-bar .bar-container .btn-menu .menu-bar{width:25px}}.top-bar.expand{height:40vh}@media only screen and (orientation: landscape)and (max-width: 900px){.top-bar.expand{height:60vh}}@media only screen and (orientation: landscape)and (max-height: 360px){.top-bar.expand{height:70vh}}.top-bar.expand .bar-container .menu-mobile{display:block}@media only screen and (max-width: 400px){.top-bar.expand .bar-container .menu-mobile{margin-top:20px}}@media only screen and (max-width: 400px){.top-bar.expand .bar-container .menu-mobile{margin-top:24px}}@media only screen and (orientation: landscape)and (max-height: 414px){.top-bar.expand .bar-container .menu-mobile{margin-top:20px}}.top-bar.expand .bar-container .menu-mobile .menu-container-mobile{display:flex;flex-direction:column;justify-content:space-between;align-items:center}.top-bar.expand .bar-container .menu-mobile .menu-container-mobile .menu-item-mobile{animation:smooth-show .3s .3s forwards}.top-bar.expand .bar-container .btn-menu{justify-content:center}.top-bar.expand .bar-container .btn-menu .menu-bar.top{transform:translateY(100%) rotate(45deg)}.top-bar.expand .bar-container .btn-menu .menu-bar.middle{opacity:0}.top-bar.expand .bar-container .btn-menu .menu-bar.bottom{transform:translateY(-100%) rotate(-45deg)}@keyframes smooth-show{from{opacity:0}to{opacity:1}}.top-bar,.author,.btn-menu,.menu-bar{transition:all .3s}@keyframes pulse{0%{transform:translate(-50%, -50%) scale(0.95);box-shadow:0 0 0 0 rgba(247,204,66,.7)}100%{transform:translate(-50%, -50%) scale(1);box-shadow:0 0 30px 100px rgba(247,204,66,0)}}.about-section{position:relative;background-color:#eee}.about-section .container{position:absolute;top:50%;left:15%;right:15%;display:flex;flex-direction:column;align-items:center;transform:translateY(-50%);pointer-events:none}@media only screen and (max-width: 1500px){.about-section .container{left:10%;right:10%}}@media only screen and (max-width: 1024px){.about-section .container{left:5%;right:5%}}.about-section .about-subtitle{margin-bottom:70px}@media only screen and (max-width: 1000px){.about-section .about-subtitle{margin-bottom:50px}}@media only screen and (max-width: 640px){.about-section .about-subtitle{margin-bottom:40px}}@media only screen and (orientation: landscape)and (max-width: 1023px){.about-section .about-subtitle{margin-bottom:30px}}@media only screen and (orientation: landscape)and (max-width: 700px){.about-section .about-subtitle{margin-bottom:20px}}@media only screen and (orientation: landscape)and (max-width: 650px){.about-section .about-subtitle{margin-bottom:10px}}.about-section .about-me{font-family:"Saira",sans-serif;font-size:2.8rem;line-height:1.8;text-align:justify}@media only screen and (max-width: 1600px){.about-section .about-me{font-size:2.5rem}}@media only screen and (max-width: 1024px){.about-section .about-me{font-size:2rem}}@media only screen and (max-width: 650px){.about-section .about-me{font-size:1.6rem;line-height:2}}@media only screen and (max-width: 330px){.about-section .about-me{font-size:1.4rem;line-height:2}}@media only screen and (orientation: landscape)and (max-width: 1023px){.about-section .about-me{font-size:1.6rem}}@media only screen and (orientation: landscape)and (max-width: 650px){.about-section .about-me{font-size:1.4rem}}.projects-section{display:flex;flex-direction:column;justify-content:center;align-items:center;height:auto;min-height:100vh;background-color:#333}.projects-section .container{min-height:100%;width:90%}.projects-section .container .project-subtitle{color:#fff;margin:100px 0 50px}@media only screen and (max-width: 1200px){.projects-section .container .project-subtitle{margin:0 0 30px}}@media only screen and (max-width: 800px){.projects-section .container .project-subtitle{margin-top:70px}}@media only screen and (orientation: landscape)and (max-width: 1200px){.projects-section .container .project-subtitle{margin-top:70px}}.projects-section .container .project{display:flex;justify-content:center;align-items:center;margin-bottom:70px}@media only screen and (max-width: 1200px){.projects-section .container .project{margin-bottom:50px}}.projects-section .container .project .img-container{display:flex;justify-content:center;align-items:center;position:relative;border-radius:10px;width:370px;height:370px;margin-right:100px}@media only screen and (max-width: 1200px){.projects-section .container .project .img-container{margin-right:50px}}.projects-section .container .project .img-container::before{content:"";position:absolute;top:50%;left:100%;transform:translate(100px, -50%);width:101px;height:5px;background-color:#29a6dc;transition:transform .3s}.projects-section .container .project .img-container:hover::before{transform:translate(0, -50%)}@media only screen and (max-width: 1023px){.projects-section .container .project .img-container{display:none}}.projects-section .container .project-img{max-height:100%;width:auto;border-radius:10px}.projects-section .container .project .description-container{display:flex;flex-direction:column;justify-content:space-between;background-color:#29a6dc;border-radius:10px;width:50%;min-height:370px;height:370px;z-index:2}@media only screen and (max-width: 1440px){.projects-section .container .project .description-container{width:60%}}@media only screen and (max-width: 1023px){.projects-section .container .project .description-container{width:100%;height:auto}}.projects-section .container .project .description-container .project-description{box-sizing:border-box;padding:20px 40px;color:#fff;overflow:hidden}.projects-section .container .project .description-container .project-description.project-name{height:25%;font-size:3.5rem;font-weight:bold;text-align:center;text-transform:uppercase;letter-spacing:2px}@media only screen and (max-width: 1360px){.projects-section .container .project .description-container .project-description.project-name{font-size:3.2rem;padding-bottom:0}}@media only screen and (max-width: 1024px){.projects-section .container .project .description-container .project-description.project-name{font-size:3rem}}@media only screen and (max-width: 650px){.projects-section .container .project .description-container .project-description.project-name{font-size:2.6rem}}@media only screen and (max-width: 350px){.projects-section .container .project .description-container .project-description.project-name{font-size:2.4rem}}.projects-section .container .project .description-container .project-description.description{max-height:50%;line-height:1.5;font-size:2.3rem;text-align:justify}@media only screen and (max-width: 1630px){.projects-section .container .project .description-container .project-description.description{font-size:2.1rem}}@media only screen and (max-width: 1360px){.projects-section .container .project .description-container .project-description.description{font-size:2rem}}@media only screen and (max-width: 1220px){.projects-section .container .project .description-container .project-description.description{font-size:1.8rem}}@media only screen and (max-width: 1023px){.projects-section .container .project .description-container .project-description.description{padding-left:15px;padding-right:15px}}.projects-section .container .project .description-container .project-description.visit{display:flex;align-items:center;justify-content:center;height:25%;font-size:4rem}.projects-section .container .project .description-container .project-description.visit .visit-site{margin:0 50px;color:#fff}.projects-section .container .project .description-container .project-description.visit .visit-site:hover{color:#333}.projects-section .container .project:nth-of-type(even) .img-container::before{background-color:#eee}.projects-section .container .project:nth-of-type(even) .description-container{background-color:#eee}.projects-section .container .project:nth-of-type(even) .description-container .project-description{color:#000}.projects-section .container .project:nth-of-type(even) .description-container .project-description .visit-site{color:#000}.projects-section .container .project:nth-of-type(even) .description-container .project-description .visit-site:hover{color:#1592c8}.contact-section{position:relative;height:95vh;background-color:#eee}.contact-section .container{position:absolute;top:50%;left:50%;width:40%;transform:translate(-50%, -50%)}@media only screen and (max-width: 1440px){.contact-section .container{width:50%}}@media only screen and (max-width: 650px){.contact-section .container{width:70%}}.contact-section .container .media{display:flex;flex-direction:column;justify-content:space-around;min-height:30vh;margin-top:3vh;text-align:center}@media only screen and (orientation: portrait)and (max-width: 1023px){.contact-section .container .media{justify-content:center;text-align:left;margin-top:40px}}.contact-section .container .media .media-item{font-size:3rem}@media only screen and (max-width: 1440px){.contact-section .container .media .media-item{font-size:2.8rem}}@media only screen and (max-width: 1023px){.contact-section .container .media .media-item{font-size:2.4rem}}@media only screen and (max-width: 650px){.contact-section .container .media .media-item{font-size:2.2rem}}@media only screen and (max-width: 330px){.contact-section .container .media .media-item{font-size:2rem}}@media only screen and (orientation: landscape)and (max-height: 767px){.contact-section .container .media .media-item{font-size:2.4rem}}@media only screen and (orientation: landscape)and (max-height: 414px){.contact-section .container .media .media-item{font-size:2rem}}.contact-section .container .media .media-item a{color:#000}.contact-section .container .media .media-item a .fas,.contact-section .container .media .media-item a .fab{margin-right:5px}.contact-section .container .media .media-item a:hover{color:#1592c8}.contact-section .container .media .media-item .social-media{display:flex;justify-content:space-between}@media only screen and (orientation: portrait)and (max-width: 1023px){.contact-section .container .media .media-item .social-media{flex-direction:column;align-items:flex-start}}.contact-section .container .media .li-item{margin-top:25px}@media only screen and (orientation: portrait)and (max-width: 1023px){.contact-section .container .media .social{margin-top:0}}footer{height:5vh;background-color:#29a6dc}footer p{font-size:20px;line-height:5vh;text-align:center;color:#fff}@media(orientation: portrait){footer p{font-size:2.4vh}}@media only screen and (orientation: landscape)and (max-height: 812px){footer p{font-size:3.3vh}}@media only screen and (orientation: landscape)and (max-height: 700px){footer p{font-size:4vh}}.playground{position:absolute;top:0;left:0}canvas{position:absolute;top:0;left:0}::selection{background-color:rgba(0,0,0,.5);color:#fff}*{margin:0;padding:0}html{font-size:10px}body{font-family:"Saira Condensed",sans-serif;margin:0 auto}input,textarea,button,select,a{-webkit-tap-highlight-color:rgba(0,0,0,0)}a{display:block;text-decoration:none;transition:all .2s}ul{list-style:none}.subtitle{font-size:8rem;text-align:center;text-transform:uppercase}@media only screen and (max-width: 1440px){.subtitle{font-size:7rem}}@media only screen and (max-width: 1024px){.subtitle{font-size:6rem}}@media only screen and (max-width: 650px){.subtitle{font-size:4rem}}@media only screen and (max-width: 330px){.subtitle{font-size:3.4rem}}@media only screen and (orientation: landscape)and (max-width: 1023px){.subtitle{font-size:4.5rem}}@media only screen and (orientation: landscape)and (max-width: 731px){.subtitle{font-size:4rem}}.spacing{letter-spacing:2px}