h3.active:before{animation:topLine .8s ease-in-out 2 forwards}h3.active:after{animation:botLine .8s ease-in-out 2 forwards}#presentation{display:flex;flex-wrap:wrap;width:100%;border-radius:25px;padding:50px 100px;position:relative;box-sizing:border-box}@media (max-width:1400px){#presentation{padding:30px 70px}}@media (max-width:1100px){#presentation{gap:30px}}#presentation:before{content:"";position:absolute;top:0;left:0;right:0;bottom:0;background-image:url(/_next/static/media/theds3.0ffbf449.JPG);background-size:cover;background-position:0 40%;background-repeat:no-repeat;filter:brightness(.5);border-radius:25px;box-shadow:0 0 15px 3px rgba(113,2,12,.2)}#presentation:after{content:"";background-color:#a94676;width:40%;height:2px;position:absolute;bottom:-50px;left:30%;box-shadow:2px 2px 10px 0 rgba(113,2,12,.5);border-radius:5px}@media (max-width:1100px){#presentation{flex-direction:column;align-items:center}}@media (max-width:600px){#presentation{padding:30px 15px}}#presentation h3{position:relative;margin-bottom:50px;z-index:10}@media (max-width:1100px){#presentation h3{margin:25px 0}}#presentation h3 #testo{position:absolute;width:220%;left:-100%;height:180%;top:-50%;z-index:-10;background-color:white;border-radius:0 25px 25px 0;box-shadow:40px 5px 15px 0 rgba(0,0,0,.1)}@media (max-width:1100px){#presentation h3 #testo{border-radius:25px;left:-100%;width:300%}}#presentation #presentation-core{display:flex;justify-content:space-between;align-items:center;column-gap:6%;position:relative;padding:50px;width:100%}@media (max-width:1100px){#presentation #presentation-core{column-gap:0;flex-direction:column;justify-content:space-around;flex-wrap:wrap;padding:30px 0}}@media (max-width:760px){#presentation #presentation-core{padding-bottom:10px}}#presentation #presentation-core img{width:200px;height:200px;background-color:white;border-radius:25px;box-shadow:10px 10px 10px 3px rgba(113,2,12,.1)}@media (max-width:1100px){#presentation #presentation-core img{width:170px;height:170px;margin-bottom:30px}}@media (max-width:750px){#presentation #presentation-core img{width:150px;height:150px}}@media (max-width:500px){#presentation #presentation-core img{width:120px;height:120px}}#presentation #presentation-core #pres-text{display:flex;flex-direction:column;justify-content:end;align-items:end}#presentation #presentation-core #pres-text h4{text-shadow:4px 5px 3px rgba(113,2,12,.1);font-size:2.5rem}#presentation #presentation-core #pres-text h4 strong{font-style:italic}@media (max-width:1600px){#presentation #presentation-core #pres-text h4{font-size:32px}}@media (max-width:1420px){#presentation #presentation-core #pres-text h4{font-size:26px}}@media (max-width:1100px){#presentation #presentation-core #pres-text h4{text-align:center;font-size:24px}}#presentation #presentation-core #pres-text p{position:relative;flex-wrap:wrap;width:-moz-fit-content;width:fit-content;height:-moz-fit-content;height:fit-content;box-sizing:border-box;color:#b2bcff;text-shadow:3px 3px 0 rgba(169,70,118,.2);text-align:end;font-size:18px;border-radius:25px;padding:20px}#presentation #presentation-core #pres-text p:before{width:5px;height:65%}#presentation #presentation-core #pres-text p:after,#presentation #presentation-core #pres-text p:before{content:"";background-color:#a94676;position:absolute;right:-3%;bottom:-10%;box-shadow:3px 3px 10px 0 rgba(178,188,255,.2);border-radius:5px}#presentation #presentation-core #pres-text p:after{width:65%;height:5px}@media (max-width:1100px){#presentation #presentation-core #pres-text p{height:100%;width:450px}#presentation #presentation-core #pres-text p:after,#presentation #presentation-core #pres-text p:before{content:"";display:none}#presentation #presentation-core #pres-text p{text-align:center;width:100%}}@media (max-width:760px){#presentation #presentation-core #pres-text p{font-size:14px}}@media (max-width:600px){#presentation #presentation-core #pres-text p{width:100%}}#presentation svg{margin:auto}h3.active:before{background-color:#a94676;animation:topLine .8s ease-in-out infinite}h3.active:after{animation:botLine .8s ease-in-out infinite}#skills{display:grid;grid-template-columns:30% 64%;grid-template-rows:14% 86%;-moz-column-gap:6%;grid-column-gap:6%;column-gap:6%;padding-top:100px;padding-bottom:50px;margin-top:30px;position:relative;height:800px}@media (max-width:1100px){#skills{height:-moz-fit-content;height:fit-content;padding-top:70px;padding-bottom:30px;display:flex;flex-direction:column;justify-content:center;align-items:center;row-gap:30px}}#skills:after{content:"";background-color:#a94676;width:40%;height:2px;position:absolute;bottom:-1px;left:30%;box-shadow:2px 2px 10px 0 rgba(113,2,12,.5);border-radius:5px}#skills h3{grid-area:1/1/2/2;height:100%;margin:auto 0}#skills h6{text-shadow:3px 3px 10px rgba(178,188,255,.5)}#skills .category{border-radius:15px;background-color:#71020c;box-shadow:3px 3px 10px 0 rgba(0,0,0,.2);padding:30px;box-sizing:border-box;display:grid;grid-template-columns:64% 30%;grid-template-rows:10% 90%;-moz-column-gap:6%;grid-column-gap:6%;column-gap:6%;width:-moz-fit-content;width:fit-content;margin:auto;height:100%;width:100%}@media (max-width:1440px){#skills .category{padding:20px}}#skills .category#commercial{grid-area:2/1/3/2;grid-template-columns:100%}@media (max-width:1100px){#skills .category#commercial{display:flex;flex-direction:column;justify-content:space-around;align-items:center;width:-moz-fit-content;width:fit-content}}#skills .category#code{grid-area:1/2/3/3}@media (max-width:1100px){#skills .category#code{display:flex;flex-direction:column;align-items:center;gap:25px;width:-moz-fit-content;width:fit-content}}#skills .category h4{grid-column:1/3;grid-row:1/2;text-shadow:3px 3px 10px #a94676}#skills .category h4:after{content:"";width:0;height:2px;display:block;background-color:#71020c}#skills .category .skillblock{padding:30px 0 0;border:15px solid #b2bcff;box-shadow:3px 3px 10px 5px rgba(169,70,118,.5);background-color:white;border-radius:10px;box-sizing:border-box;margin:0;height:100%;flex-wrap:wrap}#skills .category .skillblock#relational{width:100%;padding:0}@media (max-width:1100px){#skills .category .skillblock#relational{width:-moz-fit-content;width:fit-content;display:flex;justify-content:center;align-items:center}}#skills .category .skillblock#relational ul{list-style:circle;list-style-position:inside;padding:0 25px;color:#a94676;line-height:30px;width:150px;font-size:15px}@media (max-width:1340px){#skills .category .skillblock#relational ul{font-size:14px}}@media (max-width:1100px){#skills .category .skillblock#relational ul{flex-wrap:wrap}}#skills .category .skillblock#frontend{display:grid;grid-template-columns:33.3% 33.3% 33.3%;grid-template-rows:150px 150px 150px}@media (max-width:660px){#skills .category .skillblock#frontend{display:flex;flex-direction:row;justify-content:space-around;align-items:center;gap:0;width:-moz-fit-content;width:fit-content;flex-wrap:wrap}}#skills .category .skillblock#backend{display:grid;grid-template-columns:100%;grid-template-rows:150px 150px 150px}@media (max-width:1100px){#skills .category .skillblock#backend{display:flex;justify-content:space-around;align-items:center;flex-wrap:wrap}}#skills .category .skillblock .element{display:flex;flex-direction:column;justify-content:space-around;align-items:center;position:relative}#skills .category .skillblock .element .graph{width:150px;height:150px}@media (max-width:420px){#skills .category .skillblock .element .graph{width:120px;height:120px}}@media (max-width:380px){#skills .category .skillblock .element .graph{width:110px;height:110px}}*{font-family:Kanit,sans-serif}body{width:100%}body,main{margin:auto}main{width:70%}@media (max-width:1200px){main{width:80%;padding:0}}@media (max-width:800px){main{width:85%;padding:0}}@media (max-width:620px){main{width:90%;padding:0}}section{margin:auto;width:100%;box-sizing:border-box}h3,section{height:-moz-fit-content;height:fit-content}h3{color:#a94676;font-family:Oxanium,sans-serif;font-size:32px;position:relative;width:-moz-fit-content;width:fit-content}@media (max-width:730px){h3{font-size:26px}}@media (max-width:525px){h3{font-size:22px}}h3.active:before{content:"";width:100%;height:2px;background-color:lime;position:absolute;display:block;top:-8px;animation:topLine .1s ease-in-out 2 forwards}@keyframes topLine{0%{transform:scaleX(0);transform-origin:right}49%{transform:scaleX(1);transform-origin:right}50%{transform-origin:left}51%{transform:scaleX(1);transform-origin:left}to{transform:scaleX(0);transform-origin:left}}h3.active:after{content:"";width:100%;height:2px;background-color:#a94676;position:absolute;display:block;animation:botLine .1s ease-in-out 2 forwards}@keyframes botLine{0%{transform:scaleX(0);transform-origin:left}49%{transform:scaleX(1);transform-origin:left}50%{transform-origin:right}51%{transform:scaleX(1);transform-origin:right}to{transform:scaleX(0);transform-origin:right}}h4{width:-moz-fit-content;width:fit-content;color:#b2bcff}h4,h5{margin:0}h5{color:#71020c}h6{margin:0;color:#a94676}#gallery{padding-top:50px;padding-bottom:50px;margin-top:80px;height:-moz-fit-content;height:fit-content;position:relative}#gallery a{text-decoration:none;position:absolute;right:0;top:82px;color:#b2bcff;background-color:#71020c;text-shadow:3px 3px 10px #a94676;padding:10px 20px;border-radius:10px;font-size:14px;box-shadow:3px 3px 10px 0 rgba(113,2,12,.4)}@media (max-width:1100px){#gallery a{left:50%;transform:translateX(-50%);top:110px;right:inherit}}@media (max-width:520px){#gallery a{top:100px}}@media (max-width:380px){#gallery a{width:40%;text-align:center}}#gallery a:hover{transform:scale(1.05);transition:.2s ease-in-out;box-shadow:3px 3px 10px 0 rgba(113,2,12,.6)}@media (max-width:1100px){#gallery a:hover{transform:translate(-50%)}}#gallery a:not(:hover){transition:.1s}@media (max-width:1100px){#gallery{padding-top:30px;display:flex;flex-direction:column;align-items:center}}#gallery #projects-gallery{margin-top:50px;display:flex;justify-content:center;align-items:center;gap:10%;height:-moz-fit-content;height:fit-content;width:100%}@media (max-width:1000px){#gallery #projects-gallery{gap:40px}}@media (max-width:800px){#gallery #projects-gallery{height:-moz-fit-content;height:fit-content}}@media (max-width:500px){#gallery #projects-gallery{gap:20px}}#gallery #projects-gallery article{width:600px;height:70%}@media (max-width:900px){#gallery #projects-gallery article{width:500px}}@media (max-width:800px){#gallery #projects-gallery article{width:400px;height:60%}}@media (max-width:600px){#gallery #projects-gallery article{width:350px}}@media (max-width:500px){#gallery #projects-gallery article{height:300px;width:270px}}@media (max-width:420px){#gallery #projects-gallery article{height:250px;width:200px;gap:10px}}#gallery #projects-gallery svg{height:50px;width:50px;color:#71020c}@media (max-width:600px){#gallery #projects-gallery svg{font-size:52px;width:-moz-fit-content;width:fit-content}}@media (max-width:500px){#gallery #projects-gallery svg{font-size:40px}}#gallery #projects-gallery svg:hover{cursor:pointer;color:#b2bcff;transform:scale(1.1);transition:.1s ease-in-out;filter:drop-shadow(2px 2px 2px rgba(113,2,12,.5))}#gallery #projects-gallery svg:not(:hover){transition:.1s ease-in-out}#gallery:after{content:"";background-color:#a94676;width:40%;height:2px;position:absolute;bottom:-1px;left:30%;box-shadow:2px 2px 10px 0 rgba(113,2,12,.5);border-radius:5px}