@import"https://fonts.googleapis.com/css2?family=Tinos:ital,wght@0,400;0,700;1,400;1,700&display=swap";:root{--light-grey: #f3f3f3;--black: #101010}*{box-sizing:border-box;margin:0;padding:0}body{font-family:Tinos,serif;font-weight:400;font-style:normal;line-height:1.6}img{height:100%;width:100%}a,a:hover,a:active{text-decoration:none}ul{list-style:none}button{all:unset;cursor:pointer}.lead{font-size:40px;font-weight:500}.title{font-size:60px;font-weight:500}.sm{font-size:16px}.md{font-size:20px}.lg{font-size:32px}.text-center{text-align:center}.text-end{text-align:end}.bold{font-weight:600}.hero .lead{visibility:hidden;animation:slideUpAndFade 7s ease-in-out}@keyframes slideUpAndFade{0%{transform:translateY(300%);visibility:visible;opacity:0}50%{transform:translateY(0);opacity:100}to{transform:translateY(-300%);opacity:0}}.content{position:absolute;visibility:hidden;top:0;width:100%;height:100vh;overflow:hidden;animation:appear 3s;animation-delay:7s;animation-fill-mode:forwards}.header{position:fixed;top:0;width:100%;height:60px;z-index:100;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);padding-right:60px;border-bottom:2px solid black}.header .flex{width:100%;height:100%;justify-content:flex-end;gap:30px;color:#fff;padding:0 10px}.header button{color:#000;transition:.05s ease-in}.header button:hover{transform:translateY(-2px)}.aboutMe,.techstack,.contactMe{background-color:var(--light-grey)}.aboutMe .screen{height:80vh}.aboutMe .container{padding:10px 40px}@keyframes slideUp{0%{transform:translateY(100vh)}to{transform:translateY(0);visibility:visible;overflow:auto}}@keyframes appear{0%{opacity:0%}to{opacity:100%;visibility:visible;overflow:auto}}.aboutMe .portrait{width:300px;height:300px;object-fit:cover;border-radius:10px;justify-self:flex-end;transition:.3 ease-in-out}.aboutMe .portrait:hover{box-shadow:1px 1px 5px 1px #333;cursor:pointer}.aboutMe .portrait:active{animation:bounce 1s ease-in-out}@keyframes bounce{25%{transform:translateY(-20px)}50%{transform:translateY(0)}75%{transform:translateY(-20px)}to{transform:translateY(0)}}.aboutMe .grid-3{height:300px;grid-template-columns:40% 1% 59%}.aboutMe .divider{background-color:var(--black);height:300px;width:2px}.aboutMe .grid-3 .flex{justify-content:flex-start}.aboutMe btn{border:2px solid var(--black);border-radius:10px;padding:1px 10px;width:fit-content;cursor:pointer;transition:.2s linear}.aboutMe btn:hover{background-color:var(--black);color:var(--light-grey)}.info{padding:30px 0}.info .grid .flex{align-items:center}.info .grid .flex .icon{font-size:80px}.techstack .grid{grid-template-columns:45% 55%}.techstack .card{border-radius:30px;transition:.3s ease-in-out}.techstack .card:hover{cursor:pointer;border-radius:0;transform:scale(1.1)}.techstack .card img{object-fit:contain}.techstack .codeIcon{font-size:200px}.projects .grid{background-color:#fff;grid-template-columns:40% 60%;border-radius:15px;gap:20px;padding:20px;border:3px solid #333;transition:.3s ease-in-out}.projects .grid:hover{transform:translateY(-7px);box-shadow:1px 1px 10px 1px #000}.projects .grid img{object-fit:cover;border-radius:15px}.projects .btn:hover{background-color:#000;color:#fff}.contactMe .icon{font-size:200px}.contactMe .grid{grid-template-columns:70% 30%;align-items:center}.contactMe .flex-col{gap:10px}.contactMe .flex-col a{color:#000}.contactMe .social{align-items:center;gap:20px}.footer{background-color:var(--black);color:#fff}.footer button{transition:.3s ease-in-out}.footer li{padding:1px 0}.footer button:hover{border-bottom:1px solid white}.footer .social{align-items:center;gap:10px}.footer a{color:#fff}@media (max-width: 768px){.header{height:80px;padding-right:0}.header .md{text-align:center;font-size:20px}.aboutMe{height:125vh}.aboutMe .grid-3,.techstack .grid,.projects .grid,.info .grid,.contactMe .grid,.footer .grid{grid-template-columns:100%}.hero,.aboutMe .grid-3 p,.techstack .title,.projects .lg,.footer ul{text-align:center}.aboutMe .grid-3 .portrait{justify-self:center}.aboutMe btn{margin:30px auto}.aboutMe .grid-3 .divider,.contactMe .icon{display:none}.techstack .wrap{gap:20px}.footer ul{justify-self:center}}.container{max-width:1100px;padding:40px;margin:0 auto}.flex{display:flex;flex-direction:row}.wrap{flex-wrap:wrap}.flex-col{flex-direction:column}.center{justify-content:center;align-items:center}.around{justify-content:space-around;align-items:center}.grid{display:grid;grid-template-columns:1fr 1fr;gap:30px}.grid-3{grid-template-columns:1fr 1fr 1fr}.screen{height:100vh}.screen-75{height:75vh}.absolute{position:absolute}.card{height:100px;width:100px;background-color:#fff}.btn{background-color:#fff;border:3px solid black;border-radius:10px;height:40px;width:150px;display:flex;justify-content:center;align-items:center;color:#000;transition:.2s ease-in}.py-1{padding-top:10px}.py-2{padding-top:15px}.py-3{padding-top:20px}.py-4{padding-top:25px}.py-5{padding-top:30px}.py-6{padding-top:35px}.py-7{padding-top:50px}.py-8{padding-top:60px}.my-1{margin-top:10px}.my-2{margin-top:15px}.my-3{margin-top:20px}.my-4{margin-top:25px}.my-5{margin-top:30px}.my-6{margin-top:35px}.my-7{margin-top:50px}.my-8{margin-top:60px}