@import"https://fonts.googleapis.com/css2?family=Righteous&display=swap";*{padding:0;margin:0;box-sizing:border-box;font-family:Righteous}.header{width:100vw;height:100vh;background-color:#000000d8;display:grid;grid-template-columns:50% 0 auto;grid-template-rows:50px 1fr;gap:10px;grid-template-areas:"title . menu" "text . image";line-height:1.5;color:#fff}#head-title{grid-area:title;margin-top:10px;margin-left:20px;text-shadow:1px 1px 2px rgba(0,0,0,.3)}#menu{grid-area:menu;margin-right:20px;text-align:right}#menu ul{margin-top:15px;margin-right:20px}#menu li{display:inline-block;cursor:pointer;transition:all ease .3s}#menu li:hover{transform:scale(1.2)}.hashlink{font-size:18px;color:#fff;text-shadow:1px 1px 2px rgba(0,0,0,.3)}.hashlink:hover{text-shadow:1px 1px 10px #fff}.header #avatar{grid-area:image;width:400px;height:400px;justify-self:center;align-self:center}.header #message{position:relative;left:50px;grid-area:text;justify-self:center;align-self:center;text-align:center;font-size:70px;text-shadow:1px 1px 1px rgba(0,0,0,.847)}.header #message h2{font-size:75px}.header #avatar img{width:100%;height:100%;background-size:cover;border-radius:50%;border:none;opacity:70%;box-shadow:1px 1px 20px #000000d8}@media only screen and (max-width: 576px){.header{width:100vw;height:100vh;display:flex;flex-direction:column;align-items:center;overflow-x:hidden}.header #head-title{margin-top:20px}.header #menu{position:relative;justify-self:center;align-items:center}#menu ul{position:relative;left:20px;justify-self:center;display:flex}#menu li{display:inline-block;cursor:pointer}#menu li i{display:inline-block}.header #message{position:relative;top:15px;left:3px}#message h2{font-size:40px!important}.header #avatar{position:relative;top:30px;left:5px;width:230px;height:230px}.header #avatar img{object-fit:fill}}@media only screen and (min-width: 577px) and (max-width: 768px){.header{width:100vw;height:100vh;grid-template-columns:1fr;grid-template-rows:auto auto auto;grid-template-areas:"title" "menu" "text" "image";overflow-x:hidden}#head-title,#menu,#message,#avatar{margin:10px;text-align:center}.header #menu{margin-top:-100px}#message h2{font-size:50px;margin-top:-220px}.header #avatar{margin-top:-180px;width:500px;height:500px}}@media only screen and (min-width: 769px) and (max-width: 992px){.header{grid-template-columns:1fr;grid-template-rows:auto auto auto;grid-template-areas:"title" "menu" "text" "image";overflow-x:hidden}#head-title,#menu,#message,#avatar{text-align:center}.header #menu{margin-top:-100px}.header #message h2{margin-top:-200px;font-size:60px}.header #avatar{margin-top:-200px;width:400px;height:400px}}@media only screen and (min-width: 993px) and (max-width: 1200px){.header{grid-template-columns:50% 0 auto;grid-template-rows:50px 1fr;grid-template-areas:"title . menu" "text . image";overflow-x:hidden}.header #avatar{width:350px;height:350px}.header #message{font-size:60px}}@media only screen and (min-width: 1201px){.header{grid-template-columns:50% 0 auto;grid-template-rows:50px 1fr;grid-template-areas:"title . menu" "text . image";overflow-x:hidden}.header #avatar{width:400px;height:400px}.header #message{font-size:70px}}@media only screen and (min-width: 2560px){.header{grid-template-columns:50% 0 auto;grid-template-rows:70px 1fr;grid-template-areas:"title . menu" "text . image";overflow-x:hidden}#head-title h1{font-size:50px}#menu i{font-size:30px}.header #message{position:relative;font-size:150px;top:-80px;left:80px}.header #avatar{position:relative;width:800px;height:800px;grid-area:image;justify-self:left;top:-80px;left:150px}}*{padding:0;margin:0;box-sizing:border-box;font-family:Righteous,sans-serif}.projects{margin-top:-50px;width:100vw;height:fit-content;background-color:#fff;transform:skewY(-3deg);overflow-x:hidden}#proj-title h1{padding-top:120px;padding-bottom:30px;margin-left:40px;transform:skewY(3deg);font-size:50px;color:#000000d8;text-shadow:1px 1px 1px rgba(0,0,0,.847)}.projects #squares{margin:30px 25px;display:flex;flex-wrap:wrap;justify-content:center;gap:50px;transform:skewY(3deg)}.data-card{width:500px;height:700px;background-color:#ccc;border-radius:10px;border:5px solid rgba(0,0,0,.847);font-family:Righteous,sans-serif;transition:all ease .3s}.data-card:hover{transform:scale(1.02);box-shadow:2px 2px 4px #000000d8}.data-card img{width:100%;height:60%;background-repeat:no-repeat;background-size:cover;border-top-right-radius:10px;border-top-left-radius:10px;box-shadow:0 2px 5px #000000d8}.data-card p{padding:10px;margin:10px 20px;text-align:justify;font-size:18px;line-height:1.5}.card-buttons{margin:5px 10px;display:flex;flex-wrap:wrap;justify-content:space-around;align-content:start}.card-buttons a{width:150px;height:50px;margin-left:-30px;flex-wrap:wrap;text-decoration:none}.card-buttons button{padding:10px;margin:10px 20px;font-size:18px;width:100%;height:100%;cursor:pointer;border:none;border-radius:5px}.card-buttons button:hover{border:3px solid rgba(0,0,0,.847)}.card-buttons #github,#website{font-size:18px}.scroll-top-projects{position:fixed;width:50px;height:50px;bottom:20px;right:50px;padding:10px;border-radius:10px;text-align:center;text-decoration:none;font-size:25px;z-index:1000;transition:background-color .3s,color .3s}.scroll-top-projects:hover{background-color:#555;color:#fff}@media only screen and (max-width: 576px){.data-card{height:fit-content}.data-card img{object-fit:cover}.data-card p{font-size:16px}.card-buttons{display:block;margin-top:-30px}.card-buttons a{width:100px;height:50px;flex-wrap:wrap;text-decoration:none}.card-buttons a button{padding:5px;margin-left:100px;font-size:18px;width:50%;height:100%;cursor:pointer;border:none;border-radius:5px}}@media only screen and (min-width: 993px) and (max-width: 1200px){.data-card{margin:0 50px}}@media only screen and (min-width: 2560px){.projects{margin-top:-80px;overflow-x:hidden}}.about{width:100vw;height:100vh;margin-top:40px;background-color:#000000d8;transform:skewY(3deg);overflow-x:hidden}.about #about-title h1{padding-top:120px;padding-bottom:30px;margin-left:40px;margin-bottom:-30px;color:#fff;transform:skewY(-3deg);font-size:50px;text-shadow:1px 1px 1px rgba(0,0,0,.847)}.about #about-text{padding:10px;margin:35px 25px;height:fit-content;transform:skewY(-3deg);color:#fff}p{margin:5px 125px;text-align:justify;font-size:24px;line-height:2;letter-spacing:1}.about #stack{padding:5px;margin:10px 5px;text-align:center;transform:skewY(-3deg)}.about #stack h3{text-align:center;color:#fff;margin:20px;text-shadow:0px 0px 1px rgba(0,0,0,.847)}#log{margin-top:5px;text-align:center;color:#fff}.scroll-top-about{position:fixed;width:50px;height:50px;bottom:20px;top:450px;right:50px;padding:10px;border-radius:10px;text-align:center;text-decoration:none;font-size:25px;z-index:1000;transition:background-color .3s,color .3s;color:#fff}.scroll-top-about:hover{background-color:#fff;color:#555}@media only screen and (max-width: 576px){.about{width:100vw;height:900px;overflow-x:hidden}.about #about-title h1{padding-top:120px}.about #about-text{margin:5px 15px;height:max-content;transform:skewY(-3deg);color:#fff}p{margin:0 10px;text-align:justify;font-size:12px;line-height:2;letter-spacing:1}.about #stack{margin:10px}.about #stack h3{text-align:center;color:#fff;margin:10px;font-size:14px;text-shadow:0px 0px 1px rgba(0,0,0,.847)}}@media only screen and (min-width: 769px) and (max-width: 992px){.about{height:850px;overflow-x:hidden}.about #about-text p{margin:0 20px}}@media only screen and (min-width: 993px) and (max-width: 1200px){.about{height:850px;overflow-x:hidden}}@media only screen and (min-width: 2560px){.about{margin-top:80px;overflow-x:hidden}.about #about-text{margin:100px 50px}.about #about-text p{font-size:25px}}.contact{margin-top:-80px;width:100vw;height:500px;background-color:#fff;transform:skewY(-3deg);overflow-x:hidden}.contact h1{padding-top:120px;padding-bottom:30px;margin-left:40px;font-size:50px;color:#000000d8;text-shadow:1px 1px 1px rgba(0,0,0,.847);transform:skewY(3deg)}#social{padding:10px;margin:50px;text-align:center;transform:skewY(3deg)}a{margin:20px;text-decoration:none;color:#000000d8;font-size:50px;cursor:pointer}.scroll-top-contact{position:fixed;width:50px;height:50px;bottom:20px;top:400px;right:50px;padding:10px;border-radius:10px;text-align:center;text-decoration:none;font-size:25px;z-index:1000;transition:background-color .3s,color .3s;color:#555}.scroll-top-contact:hover{background-color:#555;color:#fff}@media only screen and (max-width: 576px){.contact{margin-top:-80px;width:100vw;height:100vh;overflow-x:hidden}#social a{font-size:50px}}@media only screen and (min-width: 2560px){.contact{margin-top:-200px;overflow-x:hidden}.contact #social>a{font-size:70px}}*{padding:0;margin:0;box-sizing:border-box}.footer{display:flex;justify-content:center;align-items:flex-end;left:0;bottom:0;width:100vw;height:fit-content;background-color:#fff;color:#000000d8;position:relative}span{font-weight:700}