*{padding:0;margin:0}ul{list-style:none}h2{font-size:25px;font-weight:500}a{text-decoration:none}body{font-family:Comfortaa,sans-serif}body nav{position:sticky;top:0}body main{width:100%;max-width:1400px;margin:0 auto}body main .skillsAndTools{height:750px;padding-top:100px;width:100%;display:flex;flex-direction:column;align-items:center;justify-content:space-between}@media screen and (min-width: 700px){h2{font-size:32px}body main .skillsAndTools{flex-direction:row;height:450px;width:90%;margin:0 auto;padding-top:15vh;align-items:end}}.navBar .link .bigScreenNav{display:none}.navBar{height:50px;width:100%;background-color:#fadbb0;display:flex;justify-content:space-between;align-items:center;border-bottom:solid 2px #D8D8D8;transform:translateY(-100%);transition:transform .6s ease-out}.navActive{transform:translateY(0)}.navActive .logo{border-radius:25px;color:#000;margin-left:20px}.navActive .logo .name{font-size:40px;margin:5px 0 0 8px}.navActive .logo .name .partOne{font-family:Josefin Sans,sans-serif}.navActive .logo .name .partTwo{font-size:40px}.navActive .logo .name .partThree{font-family:Handjet,sans-serif}.navActive .link .bigScreenNav{justify-content:flex-end}.navActive .link .bigScreenNav li{font-weight:500;margin:0 5px 0 0;cursor:pointer;border-radius:50px;font-size:18px}.navActive .link .bigScreenNav li a{color:#000;padding:10px;border-radius:5px}.navActive .link .bigScreenNav li a:hover{color:#fff;background-color:#424242}.navActive .link i{font-size:25px;margin-right:20px;cursor:pointer;padding:10px}.navActive .link .dropdownMenu{position:absolute;top:55px;right:13px;border-radius:10px;border:solid 2px #A4A4A4;background-color:#fff}.navActive .link .dropdownMenu:before{content:"";position:absolute;top:-10px;right:17px;width:15px;height:15px;background-color:#fff;transform:rotate(45deg);border-left:solid 2px #A4A4A4;border-top:solid 2px #A4A4A4}.navActive .link .dropdownMenu .smallScreenNav{display:flex;flex-direction:column}.navActive .link .dropdownMenu .smallScreenNav a{color:#000;display:block;padding:5px;margin:10px}@media screen and (min-width: 700px){.navBar{height:60px}.navBar .logo{margin-left:20px}.navBar .logo .name{font-size:45px}.navBar .link i{display:none}.navBar .link .bigScreenNav{display:flex}.navBar .link .bigScreenNav li a{color:#000}}.about{display:flex;flex-direction:column;width:80%;max-width:1400px;margin:0 auto;padding-top:50px;align-items:center;justify-content:center}.about img{width:100%;max-width:300px;border-radius:50px;box-shadow:10px 15px 40px gray;transform:translate(-50%);opacity:0;transition:transform .6s ease-out,opacity .8s ease-out;z-index:-1}.about .imgActive{transform:translate(0);opacity:1}.about p{max-width:280px;font-size:20px;margin:40px 0 0 10px;transform:translateY(50%);opacity:0;transition:transform .8s ease-out,opacity .8s ease-out;z-index:-1}.about .textActive{transform:translateY(0);opacity:1}@media screen and (min-width: 700px){.about{flex-direction:row;padding-top:15vh}.about p{font-size:25px;margin:0 0 0 40px;max-width:none}}.skills{display:flex;flex-direction:column;margin:auto;width:80%;max-width:600px;height:100%;max-height:350px;align-items:center}.skills .skillsTitle{color:#fe9a2e}.skills .skillsBar{width:100%;height:100%;display:flex;margin-top:30px;justify-content:space-around;align-items:center;background-color:#f6e3ce;border-radius:10px}.skills .skillsBar .skill{width:37px;height:95%;display:flex;flex-direction:column;justify-content:flex-end;font-weight:500}.skills .skillsBar .skill .bar{width:100%;height:80%;display:flex;align-items:flex-end;border-radius:10px;transition:height 1.5s ease}.skills .skillsBar .skill .bar .level{width:100%;border-radius:10px 10px 0 0}.skills .skillsBar .skill .bar .level p{color:#fff;font-size:15px}.skills .skillsBar .skill .logo{width:33px;height:35px;display:flex;justify-content:center;align-items:center;font-size:25px;border-radius:0 0 10px 10px;border:2px solid}.skills .skillsBar .skill p{display:flex;justify-content:center;align-items:center;height:35px}@media screen and (min-width: 700px){.skills{width:50%;max-height:450px}.skills .skillsBar .skill{width:50px}.skills .skillsBar .skill .bar{height:0%}.skills .skillsBar .skill .skillsActive{height:80%}.skills .skillsBar .skill .logo{width:46px}}.tools{display:flex;align-items:center;flex-direction:column;width:80%;margin:0 auto}.tools .toolsTitle{color:#fe2e2e}.tools ul{display:flex;justify-content:center;flex-flow:row wrap;margin-top:30px;padding:10px 0;border-radius:15px;background-color:#f78181}.tools ul li{font-size:15px;flex-wrap:nowrap;padding:10px;margin:4px;border-radius:25px;background-color:#fff;border:solid 3px #D8D8D8;opacity:1}@media screen and (min-width: 700px){.tools{width:40%}.tools ul{padding:15px 0}.tools ul li{font-size:20px;opacity:0}.tools ul .tile{animation:.9s fade-in;opacity:1}.tools ul li:nth-child(1){animation-delay:1.08s;transition-delay:1.98s}.tools ul li:nth-child(2){animation-delay:1.16s;transition-delay:2.06s}.tools ul li:nth-child(3){animation-delay:1.24s;transition-delay:2.14s}.tools ul li:nth-child(4){animation-delay:1.32s;transition-delay:2.22s}.tools ul li:nth-child(5){animation-delay:1.4s;transition-delay:2.3s}.tools ul li:nth-child(6){animation-delay:1.48s;transition-delay:2.38s}.tools ul li:nth-child(7){animation-delay:1.56s;transition-delay:2.46s}.tools ul li:nth-child(8){animation-delay:1.64s;transition-delay:2.54s}.tools ul li:nth-child(9){animation-delay:1.72s;transition-delay:2.62s}.tools ul li:nth-child(10){animation-delay:1.8s;transition-delay:2.7s}.tools ul li:nth-child(11){animation-delay:1.88s;transition-delay:2.78s}.tools ul li:nth-child(12){animation-delay:1.96s;transition-delay:2.86s}@keyframes fade-in{0%{opacity:0;transform:scale(0)}to{opacity:1;transform:scale(1)}}}.projectsDiv{display:flex;flex-direction:column;width:90%;margin:0 auto;padding-top:40px;align-items:center}.projectsDiv .projectsTitle{color:#2e9afe;padding:10px}.projectsDiv .projectsList{display:flex;flex-flow:wrap;justify-content:space-between;width:100%}.projectsDiv .projectsList .projectCard{display:flex;flex-direction:column;width:100%;border:solid 5px #F2F2F2;margin:15px 0 10px;border-radius:10px;box-shadow:5px 10px 20px #bdbdbd;cursor:pointer;background-color:#fff}.projectsDiv .projectsList .projectCard img{width:100%;object-fit:cover;border-radius:10px 10px 0 0}.projectsDiv .projectsList .projectCard .projectInfo{margin:15px 15px 5px;font-size:15px;color:#000}.projectsDiv .projectsList .projectCard .projectInfo p{margin-top:5px;font-size:14px}.projectsDiv .projectsList .modalBackground{width:100%;height:100%;top:0;left:0;right:0;bottom:0;position:fixed;background:rgba(0,0,0,.2);display:flex;justify-content:center;align-items:center;cursor:pointer}.projectsDiv .projectsList .modalBackground .modal{display:flex;flex-direction:column;justify-content:end;width:80%;height:80vh;background:white top/cover no-repeat;border-radius:15px;border:solid white;border-width:20px 20px 40px 20px;cursor:auto}.projectsDiv .projectsList .modalBackground .modal .fa-xmark{display:flex;align-items:center;justify-content:center;position:absolute;top:8%;right:9%;background-color:#000;color:#fff;font-size:45px;width:50px;height:50px;border-radius:10px;cursor:pointer}.projectsDiv .projectsList .modalBackground .modal .modalInfo{display:flex;flex-direction:column;padding:10px;background-color:#fadbb0;border-radius:20px;position:relative;top:20px}.projectsDiv .projectsList .modalBackground .modal .modalInfo .modalTitle{font-size:20px;font-weight:700}.projectsDiv .projectsList .modalBackground .modal .modalInfo .modalDescription{font-size:18px;margin-top:10px}.projectsDiv .projectsList .modalBackground .modal .modalInfo .links{display:flex;flex-direction:column;align-items:center}.projectsDiv .projectsList .modalBackground .modal .modalInfo .links a{display:flex;justify-content:center;padding:8px;border-radius:20px;font-size:14px;color:#fff}.projectsDiv .projectsList .modalBackground .modal .modalInfo .links a i{margin-left:10px}.projectsDiv .projectsList .modalBackground .modal .modalInfo .links .pageLink{background-color:#fa5858;margin-top:15px}.projectsDiv .projectsList .modalBackground .modal .modalInfo .links .codeLink{background-color:#5882fa;margin-top:10px}@media screen and (min-width: 700px){.projectsDiv{padding-top:120px}.projectsDiv .projectsList .projectCard{width:45%;margin:30px 0 20px}.projectsDiv .projectsList .projectCard .projectInfo{font-size:20px}.projectsDiv .projectsList .projectCard .projectInfo p{margin-top:5px;font-size:18px}.projectsDiv .projectsList .modalBackground .modal{width:70%}.projectsDiv .projectsList .modalBackground .modal .fa-xmark{right:15%;width:60px;height:60px}.projectsDiv .projectsList .modalBackground .modal .modalInfo{padding:20px}.projectsDiv .projectsList .modalBackground .modal .modalInfo .modalTitle{font-size:25px}.projectsDiv .projectsList .modalBackground .modal .modalInfo .modalDescription{font-size:22px;margin-top:3%}.projectsDiv .projectsList .modalBackground .modal .modalInfo .links{flex-direction:row;justify-content:space-around;margin-top:2%}.projectsDiv .projectsList .modalBackground .modal .modalInfo .links a{padding:10px;font-size:20px}}.contact{display:flex;flex-direction:column;width:100%;padding:120px 0 100px;justify-content:space-between;align-items:center}.contact .if{text-align:center;width:80%;font-size:25px}.contact a{display:flex;align-items:center;color:#fff;background-color:#000;padding:10px;margin:20px;border-radius:20px}.contact a p{font-size:20px}.contact a i{font-size:40px;margin-left:20px}.contact .or{text-align:center;width:80%;font-size:20px}.footer{width:100%;height:100px;background-color:#1c1c1c;display:flex;flex-direction:column;justify-content:center;align-items:center}.footer a i{font-size:40px;color:#fff}.footer p{color:#fff;margin-top:20px}