body div.hero{width:100%;height:100vh;background-image:url(/Code.jpg);background-color:#07355fb7;background-blend-mode:multiply;background-repeat:no-repeat;background-size:cover;background-position:center;display:flex;flex-direction:column;justify-content:center;padding:10vh;font-size:300%;color:#fff}body div.hero p{letter-spacing:2px}@media screen and (max-width: 767px){body div.hero{padding:5vh}}body div.media{display:flex;flex-direction:row;flex-wrap:wrap}body div.media a.media-link{width:25%;height:20vh;background-color:#12121a;color:#fff;text-decoration:none;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:5px;font-size:200%;cursor:pointer;border-top:1px solid black;transition-duration:.5s}body div.media a.media-link:hover{background-color:#08080c}@media screen and (max-width: 767px){body div.media a.media-link p{font-size:1rem}}.Instagram{border-color:#e0176b!important}.Github{border-color:#000!important}.Linkedin{border-color:#0072b1!important}.Telegram{border-color:#173370!important}body div.projects{display:flex;flex-direction:column;justify-content:center;align-items:center;gap:10px;padding-top:10vh;padding-bottom:20vh}body div.projects h1.project-header{font-size:400%;padding-bottom:5vh}body div.projects div.projects-container{display:flex;flex-direction:row;justify-content:space-evenly;align-items:center;flex-wrap:wrap;gap:100px}body div.projects div.projects-container div.project-element{display:flex;flex-direction:column;gap:10px}body div.projects div.projects-container div.project-element img,body div.projects div.projects-container div.project-element p{width:500px}@media screen and (max-width: 767px){body div.projects div.projects-container div.project-element img,body div.projects div.projects-container div.project-element h1,body div.projects div.projects-container div.project-element p{width:90%;margin:auto}}body div.skills{padding-top:10vh;padding-bottom:10vh;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:50px}body div.skills h1.name{font-size:500%;letter-spacing:5px}body div.skills div.skill-container{display:flex;flex-direction:row;justify-content:space-evenly;flex-wrap:wrap;gap:50px}body div.skills div.skill-container div.skill-element{width:600px;padding:50px;border-radius:5px;gap:30px;background-color:#1e293b;display:flex;flex-direction:column;justify-content:center;align-items:center}body div.skills div.skill-container div.skill-element p{text-align:center;font-size:110%}@media screen and (max-width: 767px){body div.skills div.skill-container div.skill-element{width:90%}}div.contact{margin:15px 5px;display:flex;justify-content:center;color:#084783;padding-bottom:10vh}div.contact form{border:2px solid #084783;padding:25px 35px}div.contact form div.inputbox{position:relative;margin:45px 12px}div.contact form h1{color:#084783;text-align:center}div.contact form div.inputbox label{position:absolute;top:0;left:6px;transform:translateY(12px);transition:all .5s ease}div.contact form div.inputbox input,div.contact form div.inputbox textarea{outline:none;border:none;border-bottom:2px solid #084783;background-color:transparent;resize:none;width:25rem;height:3rem;color:#041c32}body.dark div.contact form div.inputbox input,body.dark div.contact form div.inputbox textarea{color:#fff}div.contact form div.inputbox input:focus~label,div.contact form div.inputbox textarea:focus~label,div.contact form div.inputbox input:valid~label,div.contact form div.inputbox textarea:valid~label{transform:translateY(-15px);opacity:1}div.contact form div.inputbox textarea:focus~label,div.contact form div.inputbox textarea:valid~label{transform:translateY(-25px)}div.contact form div.submit button{font-size:1.2rem;margin-left:15px;background-color:#084783;padding:8px 28px;border-radius:5px;transition:all .5s ease;cursor:pointer;border:none}div.contact form div.submit button:hover{transform:scale(1.1);font-weight:700}@media screen and (max-width: 767px){div.contact form{border:2px solid #084783;padding:20px 10px}div.contact form div.inputbox input,div.contact form div.inputbox textarea{outline:none;border:none;border-bottom:2px solid #084783;background-color:transparent;resize:none;width:15rem;height:3rem}}body div.footer{padding:50px;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:5vh;padding-bottom:5vh}body div.footer a.back-to-top{padding:15px 25px;border-radius:2px;background-color:#084783;display:flex;flex-direction:row;justify-content:center;align-items:center;gap:10px;cursor:pointer;text-decoration:none;color:#fff}body div.footer div.media-links-container{display:flex;flex-direction:row;gap:1vw}body div.footer div.media-links-container a.call-to-action{width:40px;height:40px;display:flex;justify-content:center;align-items:center;font-size:150%;border-radius:50%;border:1px solid white;text-decoration:none;color:#fff}body div.footer div.media-links-container a.call-to-action:hover{background-color:#084783;transform:scale(1.1)}body div.footer p.dev-credit{color:gray;text-align:center;word-spacing:3px}body div.footer p.dev-credit span{color:#084783;letter-spacing:1px}@media screen and (max-width: 767px){body div.footer div.media-links-container{gap:3vw}}html{scroll-behavior:smooth}*,*:after,*:before{margin:0;padding:0;box-sizing:border-box}body{background-color:#0b1120;color:#fff;user-select:none;font-family:Poppins,sans-serif}h1{color:#084783}.hidden{opacity:0;transition:all 1s}.show{opacity:1}body nav{background:rgba(6,9,17,.9);backdrop-filter:blur(5px);width:100%;padding:1.5vh;display:flex;justify-content:space-evenly;align-items:center;z-index:1;font-size:150%}body nav a{text-decoration:none;color:#fff;font-weight:700;letter-spacing:3px}@media screen and (min-width: 1024px){body nav{position:fixed;top:0;left:0}body nav a{text-decoration:none;color:#fff;padding:10px 25px;border-radius:3px;transition-duration:.5s}body nav.nav a.navlinks i{display:none}body nav a:hover{background-color:#80808028;transform:scale(1.1)}}@media screen and (min-width: 767px) and (max-width: 1023px){body nav{position:fixed;padding:1.2rem;bottom:0;left:0;text-align:center}body nav a{font-size:1.3rem}}@media screen and (max-width: 767px){body nav{position:fixed;bottom:0;padding:1.2rem;left:0;text-align:center;justify-content:space-between}body nav a{font-size:1.2rem}}