*{margin:0}.header-container{display:flex;align-items:center;justify-content:center;height:100vh;width:100%;background-color:#222831;-webkit-animation-iteration-count:infinite;animation-iteration-count:infinite}@-webkit-keyframes shake{0%{background-size:100%}50%{background-size:105%}to{background-size:100%}}@keyframes shake{0%{background-size:100%}50%{background-size:105%}to{background-size:100%}}.header{display:flex;flex-direction:column;width:70%;opacity:1}#header-hello-name{overflow:hidden;white-space:nowrap;cursor:pointer;color:#eee;font-size:30px;font-family:Arial,Helvetica,sans-serif;font-weight:100;-webkit-animation:typing 3s steps(50),blink-caret .75s step-end infinite;animation:typing 3s steps(50),blink-caret .75s step-end infinite}#header-highlight-name{transition:.1s;color:#ffd369;text-decoration:none}#header-my-job{border-right:4px solid #ffd369;-webkit-animation:typing 1.5s steps(50),blink-caret .5s step-end infinite;animation:typing 1.5s steps(50),blink-caret .5s step-end infinite}#header-give-call,#header-my-job{overflow:hidden;white-space:nowrap;color:#eee;font-size:50px;font-family:Arial,Helvetica,sans-serif;font-weight:100}@-webkit-keyframes typing{0%{width:0}to{width:100%}}@keyframes typing{0%{width:0}to{width:100%}}@-webkit-keyframes blink-caret{0%,to{border-color:transparent}50%{border-color:#ffd369}}@keyframes blink-caret{0%,to{border-color:transparent}50%{border-color:#ffd369}}.start-tour-button{-webkit-tap-highlight-color:transparent;overflow:hidden;white-space:nowrap;opacity:0;margin-top:40px;transform:rotate(0deg);transition:transform .5s;cursor:pointer;color:#f1f1f1;background-color:#222831;font-size:17px;border-radius:20px;border-style:solid;border-width:2px;border-color:#ffd369;display:flex;justify-content:center;align-items:center;width:190px;height:45px;font-family:Arial,Helvetica,sans-serif;-webkit-animation-name:fadeInOpacity,buttonWidth;animation-name:fadeInOpacity,buttonWidth;-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in;-webkit-animation-duration:.3s;animation-duration:.3s;-webkit-animation-delay:2s;animation-delay:2s;-webkit-animation-fill-mode:forwards;animation-fill-mode:forwards}#arrow-icon{margin-left:10px}.start-tour-button:hover{transition:all .5s;color:#222831;background-color:#ffd369;border-color:#f1f1f1;width:200px;font-weight:700}.start-tour-button:hover #arrow-icon{transition:transform .5s;margin-left:5px;transform:rotate(90deg)}@-webkit-keyframes fadeInOpacity{0%{opacity:0}to{opacity:1}}@keyframes fadeInOpacity{0%{opacity:0}to{opacity:1}}@-webkit-keyframes buttonWidth{0%{width:0}to{width:200px}}@keyframes buttonWidth{0%{width:0}to{width:200px}}.introduction-container{display:flex;justify-content:center;width:100%;background-color:#eee}.introduction{align-items:center;margin-top:80px;margin-bottom:150px;width:50%;display:flex;flex-direction:column}.introduction img{-webkit-tap-highlight-color:transparent;cursor:pointer;transition:all 1s;width:270px;margin-bottom:20px;margin-top:20px;z-index:1}#profile-image{width:300px;filter:grayscale(100%);background-color:#e4e4e4;border-radius:100%}#profile-image:hover{filter:grayscale(0);background-color:#eee;border-radius:30%;width:320px}#introduction-title{color:#393e46;font-size:35px;font-family:Arial,Helvetica,sans-serif;margin-top:20px;font-weight:500;letter-spacing:0;font-weight:700}#introduction-content{margin-top:30px}#introduction-content,#introduction-content-2{color:#35393f;font-size:17px;font-family:Arial,Helvetica,sans-serif;line-height:30px;letter-spacing:2px;font-weight:200}#introduction-content-2{margin-top:20px}.skills-container{background-color:#4a5058;display:flex}.skills{width:70%;display:flex;flex-direction:column}#skills-title{font-size:30px}#skills-title,#skills-title-2{color:#eee;font-family:Arial,Helvetica,sans-serif;margin-top:20px;font-weight:300;letter-spacing:0;font-weight:700}#skills-title-2{font-size:20px}#skills-content{color:#eee;font-size:18px;font-family:Arial,Helvetica,sans-serif;margin-top:20px;line-height:30px}.skills div span{transition:all .5s;font-size:80px;display:inline-block;height:150px;width:25%;color:#a8a8a8}.skills div span div{display:flex;justify-content:center;align-items:center;flex-direction:column;height:100%}.skills-name{transition:all .3s;opacity:0;font-family:Arial,Helvetica,sans-serif;font-size:17px;margin-top:5px;font-weight:600}#ico-js:hover{font-size:85px;color:#f0db4f}#ico-js:hover .skills-name{opacity:1}#ico-html:hover{font-size:85px;color:#e34c26}#ico-html:hover .skills-name{opacity:1}#ico-css:hover{font-size:85px;color:#264de4}#ico-css:hover .skills-name{opacity:1}#ico-react:hover{font-size:85px;color:#61dbfb}#ico-react:hover .skills-name{opacity:1}#ico-node:hover{font-size:85px;color:#3c873a}#ico-node:hover .skills-name{opacity:1}#ico-react-native:hover{font-size:85px;color:#61dbfb}#ico-react-native:hover .skills-name{opacity:1}#ico-android:hover{font-size:85px;color:#32de84}#ico-android:hover .skills-name{opacity:1}#ico-git:hover{font-size:85px;color:#f1502f}#ico-git:hover .skills-name{opacity:1}#ico-vue:hover{font-size:85px;color:#42b883}#ico-vue:hover .skills-name{opacity:1}.portfolio-container{background-color:#eee;display:flex;height:100vh}::-webkit-scrollbar{display:none;width:10px}::-webkit-scrollbar-track{background:rgba(1,1,1,.1);opacity:0}::-webkit-scrollbar-thumb{background:#282f3a}Handle on hover ::-webkit-scrollbar-thumb:hover{background:#303846}.black-border{height:20px;width:100%;background-color:#393e46}.top-nav-bar-container{transition:height .5s;height:10px;box-shadow:0 -1px 13px -1px rgba(0,0,0,.18)}.bottom-nav-bar-container,.top-nav-bar-container{-webkit-tap-highlight-color:transparent;z-index:2;width:100%;background-color:#ffd369;position:fixed;display:flex;flex-direction:row}.bottom-nav-bar-container{overflow:hidden;transition:height .3s;bottom:0;visibility:hidden;height:45px;margin-right:20px;justify-content:center;align-items:center}.bottom-nav-bar-container span{background-color:#ffd369;display:flex;justify-content:center;align-items:center;width:90%;border-radius:30px;padding-left:5px;padding-right:5px}.bottom-nav-bar-container span div{width:33%;font-size:25px}.top-nav-bar-menu{font-size:17px;outline:none;transition:all .4s;cursor:pointer;display:flex;justify-content:center;align-items:center;padding-right:50px;padding-left:50px;font-family:Arial,Helvetica,sans-serif;font-weight:600;color:#222831;letter-spacing:3px}.top-nav-bar-menu:hover{transition:all .4s;background-color:#2b2b2b;color:#fff;letter-spacing:5px}.footer{-webkit-tap-highlight-color:transparent;background-color:#222831;display:flex;flex-direction:column;justify-content:center;align-items:center;color:#fff;font-family:Arial,Helvetica,sans-serif;letter-spacing:3px;font-size:13px;padding-top:50px;padding-bottom:50px}.footer span{display:flex;flex-direction:row}.footer span a{transition:all .2s;color:#fff;font-size:30px;margin-top:20px;margin-right:10px;margin-left:10px}.footer span a:hover{transition:all .2s;color:#e9ab1b;font-size:35px}@media only screen and (min-width:1000px){.introduction-container,.skills-container{align-items:center;padding-top:20px}.skills-container{height:100vh;justify-content:center}}@media only screen and (max-width:1000px){.header{width:80%}#header-hello-name{font-size:18px}#header-give-call,#header-my-job{white-space:normal;font-size:21px}.start-tour-button{overflow:hidden;white-space:nowrap;font-size:16px;border-radius:100px;height:50px}.top-nav-bar-menu{padding-right:20px;padding-left:20px;height:100%}.top-nav-bar-container{visibility:hidden;justify-content:center;align-items:center}.bottom-nav-bar-container{visibility:visible}.top-nav-bar-menu:hover{background-color:#ffd369;border-radius:50px;color:#fff}.introduction{margin-top:20px;width:80%}.introduction img{align-self:center;width:190px}.introduction span{display:flex;justify-content:center;align-items:center}.introduction span a{transition:all .2s;color:#2b2b2b;font-size:35px;margin-right:15px;margin-left:15px}#profile-image{width:250px}#profile-image:hover{width:260px}#introduction-title{font-size:30px;text-align:center}#introduction-content,#introduction-content-2{font-size:15px;font-weight:400}.skills{width:100%}.skills div span{transition:all .5s;font-size:50px;display:inline-block;height:150px;width:50%;color:#a8a8a8}.footer{margin-bottom:40px}.top-nav-bar-menu:hover{transition:all .4s;background-color:none;color:#2b2b2b;letter-spacing:5px}}