@import url(https://fonts.googleapis.com/css2?family=Montserrat:wght@400;600&display=swap);body{margin:0;font-family:Montserrat,sans-serif}main{background-color:#f9f9f9;height:80vh;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column}main img{width:150px;height:150px;margin-bottom:1em}main h1,main p{margin:0;text-align:center}@media (min-width:450px){main img{width:200px;height:200px;margin-bottom:1em}}.open{position:fixed;top:40px;right:40px;width:50px;height:50px;display:block;cursor:pointer;-webkit-transition:opacity .2s linear;-o-transition:opacity .2s linear;transition:opacity .2s linear}.open:hover{opacity:.8}.open span{display:block;float:left;clear:both;height:4px;width:40px;border-radius:40px;background-color:#000;position:absolute;right:3px;top:3px;overflow:hidden;-webkit-transition:all .4s ease;-o-transition:all .4s ease;transition:all .4s ease}.open span:nth-child(1){margin-top:10px;z-index:9}.open span:nth-child(2){margin-top:25px}.open span:nth-child(3){margin-top:40px}.sub-menu{-webkit-transition:all .8s cubic-bezier(.68,-.55,.265,1.55);-o-transition:all .8s cubic-bezier(.68,-.55,.265,1.55);transition:all .8s cubic-bezier(.68,-.55,.265,1.55);height:0;width:0;right:0;top:0;position:absolute;background-color:rgba(38,84,133,.54);border-radius:50%;z-index:18;overflow:hidden}.sub-menu li{display:block;float:right;clear:both;height:auto;margin-right:-160px;-webkit-transition:all .5s cubic-bezier(.68,-.55,.265,1.55);-o-transition:all .5s cubic-bezier(.68,-.55,.265,1.55);transition:all .5s cubic-bezier(.68,-.55,.265,1.55)}.sub-menu li:first-child{margin-top:180px}.sub-menu li:nth-child(1){-webkit-transition-delay:50ms;-o-transition-delay:50ms;transition-delay:50ms}.sub-menu li:nth-child(2){-webkit-transition-delay:.1s;-o-transition-delay:.1s;transition-delay:.1s}.sub-menu li:nth-child(3){-webkit-transition-delay:.15s;-o-transition-delay:.15s;transition-delay:.15s}.sub-menu li:nth-child(4){-webkit-transition-delay:.2s;-o-transition-delay:.2s;transition-delay:.2s}.sub-menu li:nth-child(5){-webkit-transition-delay:.25s;-o-transition-delay:.25s;transition-delay:.25s}.sub-menu li a{color:#fff;font-size:16px;width:100%;display:block;float:left;line-height:40px;font-size:1rem;text-decoration:none;text-transform:uppercase;font-weight:700}.oppenned .sub-menu{opacity:1;height:400px;width:400px}.oppenned span:nth-child(2){overflow:visible}.oppenned span:nth-child(1),.oppenned span:nth-child(3){z-index:100;-webkit-transform:rotate(45deg);-ms-transform:rotate(45deg);transform:rotate(45deg);background-color:#fff}.oppenned span:nth-child(1){-webkit-transform:rotate(45deg) translateY(12px) translateX(12px);-ms-transform:rotate(45deg) translateY(12px) translateX(12px);transform:rotate(45deg) translateY(12px) translateX(12px)}.oppenned span:nth-child(2){height:400px;width:400px;right:-160px;top:-160px;border-radius:50%;background-color:rgba(38,84,133,.54)}.oppenned span:nth-child(3){-webkit-transform:rotate(-45deg) translateY(-10px) translateX(10px);-ms-transform:rotate(-45deg) translateY(-10px) translateX(10px);transform:rotate(-45deg) translateY(-10px) translateX(10px)}.oppenned li{margin-right:168px}.button{display:block;float:left;clear:both;padding:20px 40px;background:#fff;border-radius:3px;border:2px solid #fff;overflow:hidden;position:relative}.button:after{-webkit-transition:-webkit-transform .3s ease;transition:-webkit-transform .3s ease;-o-transition:transform .3s ease;transition:transform .3s ease;transition:transform .3s ease,-webkit-transform .3s ease;content:"";position:absolute;height:200px;width:400px;-webkit-transform:rotate(45deg) translateX(-540px) translateY(-100px);-ms-transform:rotate(45deg) translateX(-540px) translateY(-100px);transform:rotate(45deg) translateX(-540px) translateY(-100px);background:#10a1ea;z-index:1}.button:before{-webkit-transition:-webkit-transform .5s cubic-bezier(.68,-.55,.265,1.55);transition:-webkit-transform .5s cubic-bezier(.68,-.55,.265,1.55);-o-transition:transform .5s cubic-bezier(.68,-.55,.265,1.55);transition:transform .5s cubic-bezier(.68,-.55,.265,1.55);transition:transform .5s cubic-bezier(.68,-.55,.265,1.55),-webkit-transform .5s cubic-bezier(.68,-.55,.265,1.55);content:attr(title);position:absolute;top:0;left:0;width:100%;height:100%;color:#fff;z-index:2;text-align:center;padding:20px 40px;-webkit-transform:translateY(200px);-ms-transform:translateY(200px);transform:translateY(200px)}.button:hover{text-decoration:none}.button:hover:after{-webkit-transform:translateX(-300px) translateY(-100px);-ms-transform:translateX(-300px) translateY(-100px);transform:translateX(-300px) translateY(-100px)}.button:hover:before{-webkit-transform:translateY(0);-ms-transform:translateY(0);transform:translateY(0)}.skills{margin:5em;border-bottom:1px solid #e9e9e9}.skills h1{font-size:2rem;margin-bottom:2em}.content{display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;padding-bottom:3em}.content h2,.skills h1{text-align:center;text-transform:uppercase}@media (min-width:450px){h1{font-size:2.5rem}}.first-content{background-color:#f9f9f9;padding:.5em;margin:2em;border-radius:5px;color:#000;text-align:center;width:500px;-webkit-box-shadow:0 2px 40px 0 rgba(0,0,0,.15);box-shadow:0 2px 40px 0 rgba(0,0,0,.15)}.first-content h2{margin-bottom:1em;padding:.5em;border-radius:5px}.lang{margin-top:2em}.tools{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:space-evenly;-ms-flex-pack:space-evenly;justify-content:space-evenly;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-ms-flex-wrap:wrap;flex-wrap:wrap;min-width:300px;padding-bottom:2em}.tools p{border:1px solid #000;padding:.5em 1em;border-radius:5px;margin:1em .5em 1em 0}.tools div{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column}.tools div span{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;margin:0 1em}legend{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;padding:0 10em}legend span{display:-webkit-box;display:-ms-flexbox;display:flex}label{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;margin-top:1em;font-weight:700}.average,.beginner,.experienced,.expert,.ninja{width:20px;height:20px;border-radius:50%;border:1px solid #000}.ninja{background-color:#90ee90}.expert{background-color:#ffcf76}.experienced{background-color:#9090ee}.average{background-color:#ee90bf}.beginner{background-color:#cda4f3}.uncolored{width:20px;height:20px;border:1px solid #000;border-radius:50%;background-color:#fff}.subtools{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.subtools h3{background-color:#e9e9e9;margin:1em;padding:.5em;border-radius:5px;text-align:center;-webkit-box-shadow:0 2px 5px 0 rgba(0,0,0,.15);box-shadow:0 2px 5px 0 rgba(0,0,0,.15)}@media (min-width:1060px){legend{-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;margin:0}legend span{display:-webkit-box;display:-ms-flexbox;display:flex;margin:0 .5em}label{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;margin-top:0;margin-left:1em}}.portfolio{margin:2em}.portfolio h1{font-size:2rem;text-align:center;text-transform:uppercase}.projects .first{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-align:center;-ms-flex-align:center;align-items:center;background-color:#f9f9f9;padding:2em 0;border-radius:5px;margin:4em 0;min-width:300px;-webkit-box-shadow:0 2px 40px 0 rgba(0,0,0,.15);box-shadow:0 2px 40px 0 rgba(0,0,0,.15)}.projects .first span{margin:2em;max-width:60%}.projects .first a{text-decoration:none;color:#17252a;font-weight:700}.projects img{width:200px;height:200px}@media (min-width:900px){.projects{margin:5em}.projects .first{-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;-webkit-box-align:center;-ms-flex-align:center;align-items:center;padding:2em}.projects img{width:300px;height:300px}}footer{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;-webkit-box-align:center;-ms-flex-align:center;align-items:center;border-top:1px solid #ddd;padding:1em}footer p{text-transform:uppercase;margin-left:2em;border-left:1px solid #17252a;padding-left:1em}.icons{margin-right:1em}.icons img{width:30px;height:30px;margin-right:1em}@media (min-width:450px){footer p{margin-left:6em}.icons{margin-right:5em}.icons img{margin-right:1em}}.resume{text-decoration:none;font-size:1.2rem;background-color:#ee90bf;padding:.8em;color:#fff;text-transform:uppercase;font-weight:700;position:absolute;top:40px;right:100px;cursor:pointer}.resume:hover{color:#666}.resume i{margin:0 .5em}#btn{display:none;position:fixed;bottom:20px;right:30px;z-index:99;font-size:3rem;color:#9090ee;cursor:pointer;padding:15px;border-radius:4px}#btn:hover{color:gray}