*{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}.project{border-radius:15px;background-color:#71020c;box-shadow:3px 3px 10px 0 rgba(0,0,0,.2);box-sizing:border-box;padding:10px 30px 30px;display:flex;flex-direction:column;align-items:center;gap:2%;position:relative}.project #bg{display:none}@media (max-width:1100px){.project{gap:10px;padding-top:20px}}@media (max-width:600px){.project{padding:10px 15px 15px}}.project:hover{cursor:pointer;transform:scale(1.05);background-color:#b2bcff;transition:.2s ease-in-out;box-shadow:3px 3px 10px 0 rgba(113,2,12,.4);color:#71020c}.project:hover h4{color:#a94676;text-shadow:0}.project:hover .img-container{border:3px solid #71020c}.project:not(:hover){transition:.2s ease-in-out}.project h4{color:#b2bcff;text-shadow:3px 3px 10px #a94676;font-size:24px}@media (max-width:420px){.project h4{font-size:18px}}.project .img-container{background-color:white;width:100%;box-sizing:border-box;height:300px;border-radius:5px;border:3px solid #b2bcff}@media (max-width:1100px){.project .img-container{height:250px}}@media (max-width:800px){.project .img-container{height:200px}}@media (max-width:600px){.project .img-container{height:150px}}@media (max-width:500px){.project .img-container{height:150px}}.project .img-container .img{border-radius:5px;width:100%;height:100%;object-fit:contain}.project ul{display:flex;justify-content:start;align-items:start;width:100%;height:-moz-fit-content;height:fit-content;gap:35px;padding:0;box-sizing:border-box;position:relative;transition:transform .2s ease-in-out;flex-wrap:wrap}@media (max-width:700px){.project ul{gap:0;margin:0}}@media (max-width:420px){.project ul{gap:10px;margin:0}}.project ul li{list-style:none;background-color:#b2bcff;color:#a94676;padding:0 10px;border-radius:5px;height:24px;border:2px solid #71020c;box-shadow:5px 5px 10px 3px rgba(113,2,12,.2)}@media (max-width:420px){.project ul li{padding:0 5px;font-size:14px;height:-moz-fit-content;height:fit-content}}.project i.fa-eye{position:absolute;right:10%;bottom:10%}.project i.fa-right-long{position:absolute;right:5%;bottom:10%}