*{margin:0;padding:0;box-sizing:border-box}:root{--container-size:1024px;--clr-main:#185FBC;--clr-hl:#00CFC5;--clr-bg:#070F22}.roboto-<uniquifier> {
  font-family: "Roboto", sans-serif;
  font-optical-sizing: auto;
  font-weight: <weight>;
  font-style: normal;
  font-variation-settings:
    "wdth" 100;
}
main{width:var(--container-size);margin:0 auto;display:flex;justify-content:space-between;gap:1rem;position:relative}html,body{height:100%;background-color:var(--clr-bg);font-family:"Roboto",sans-serif}.bg__detail{width:50%;height:50px;background:#101E40;position:absolute;left:0;top:0;border-radius:0 0 235px 0;z-index:9}.main__menu{width:100%;height:50px;position:absolute;top:0}.main__navigation{width:var(--container-size);margin:0 auto;display:flex;justify-content:flex-end}.navigation__list{height:60px;margin-left:auto;display:flex;justify-content:space-between;align-items:center;gap:1rem;padding-inline:1rem;list-style:none;z-index:99999}.item__highlight{background:var(--clr-hl);color:#333;border-radius:100vh;padding:.5rem}.list__item a{padding:1rem;color:#fff;cursor:pointer}.hamb__menu{display:none}.main__info-container{position:fixed;width:300px;height:100%}.main__info{width:30%;margin-top:2rem}.info__role-container{width:100%;padding:1.5rem}.info__pic{width:166px;height:167px;background:url("../img/profile.png") center/cover;display:block;margin:0 auto;position:relative;left:1rem}.info__role{display:flex;place-items:center;gap:10px}.role__anim{width:40px;aspect-ratio:1;background:var(--clr-hl);border-radius:100%}.role__text-container{width:190px;height:35px;background:var(--clr-main);border-radius:10px;display:grid;place-items:center}.role__text{color:#fff}.main__greeting,.subtitle{color:#fff}.knowledge__card{width:100%;height:100px;background:var(--clr-main);border-radius:10px 10px 0 10px;padding:.75rem;margin-block:9px;transform:translateX(-10000px);color:#fff}.knowledge__card:nth-child(1){animation:displayCard 1s .2s forwards}.knowledge__card:nth-child(2){animation:displayCard 1s .2s forwards}.knowledge__card:nth-child(3){animation:displayCard 1s .3s forwards}.knowledge__card:nth-child(4){animation:displayCard 1s .4s forwards}@keyframes displayCard{100%{transform:translateX(0)}}.knowledge__card:nth-child(even){border-radius:10px 10px 10px 0}.knowledge__title{font-size:1.2rem}.knowledge__desc{font-size:.75rem}.main__content{width:70%;margin:5rem 0 1rem}.portfolio__container{padding:4rem;display:grid;grid-template-columns:repeat(3,1fr);gap:3rem}.work__card{width:200px;height:300px;border:2px solid var(--clr-main);border-radius:15px}.work__card.animating{animation:flip 1s forwards}.card__front[data-hidden="true"],.card__back[data-hidden="true"]{display:none}.card__front{height:100%;background:url("../img/product.png") center/cover;border-radius:15px;position:relative}.card__back{height:100%;position:relative;padding:1rem;color:#fff}.card__info{list-style:none}.card__swap{background:var(--clr-bg);border:2px solid var(--clr-main);border-radius:10px;color:#fff;padding:.5rem 1rem;position:absolute;bottom:-1rem;right:-1.5rem}.card__swap:hover{background:var(--clr-hl);transition:background linear .2s;cursor:pointer;color:#333}.card__back .card__swap{right:auto;left:-1.5rem}.limiter{width:90px;aspect-ratio:1;background-image:conic-gradient(var(--clr-bg) 40deg,var(--clr-hl) 41deg,var(--clr-hl) 90deg,var(--clr-bg) 91deg);border-radius:100%;margin:1rem auto;position:relative;animation:spin 1s infinite;transform-origin:center}.limiter::after{content:"";width:70px;aspect-ratio:1;position:absolute;background:var(--clr-bg);border-radius:100%;top:50%;left:50%;transform:translate(-50%,-50%)}@keyframes spin{100%{transform:rotate(360deg)}}@keyframes flip{0%,100%{transform:rotateY(0)}50%{transform:rotateY(90deg)}}.contact__list{width:100%;display:grid;grid-template-columns:repeat(2,1fr);grid-template-rows:repeat(2,1fr);gap:1rem}.contact__info{margin-top:3rem;color:#fff}.contact__card{border:2px solid var(--clr-main);border-radius:10px;color:var(--clr-main);padding:2rem .5rem;justify-content:center;text-align:center}.card__icon-container{display:flex;justify-content:center;align-items:center;flex-direction:column}.card__icon{color:var(--clr-hl);font-size:4rem}.card__title{color:#fff;font-size:1.2rem}.card__info{text-align:center;color:#fff;margin-block:1rem}.info__link{font-size:1.5rem;color:var(--clr-hl);text-decoration:underline;cursor:pointer}.info__text{text-align:left;margin-top:1rem}.toast[data-hidden="true"]{display:none}.toast{position:fixed;top:1rem;left:50%;transform:translateX(-50%);z-index:999999999;background:var(--clr-hl);border-radius:100vh;padding:.5rem 1rem;display:block}@media only screen and (max-width:900px){:root{--container-size:100%}.hamb__menu{display:block;position:absolute;top:1rem;right:1rem;border:none;background:none;color:var(--clr-main);font-size:2.5rem;z-index:999999}.main__menu[data-hidden="true"]{display:none}.main__menu{width:100%;position:absolute;display:block;height:auto;margin:0;z-index:99}.item__highlight{border-radius:0;background:var(--clr-bg)}.main__navigation{display:block;margin:0}.navigation__list{display:block;text-align:center;background:var(--clr-bg);height:auto;border-bottom:1px solid #fff}.list__item a{width:100%;display:block}main{flex-direction:column}.main__info-container{width:100%;position:initial}.main__info{width:100%;text-align:center;margin-top:2rem}.info__role{width:100%;display:grid;grid-template-columns:40px 190px;justify-content:center}.knowledge__container{width:100%;display:block}.card__container{width:90%;display:grid;grid-template-columns:repeat(2,1fr);grid-template-rows:repeat(2,1fr);margin-inline:auto;gap:1rem;text-align:left}.knowledge__card:nth-child(4){border-radius:0 10px 10px 10px}.knowledge__card:nth-child(3){border-radius:10px 0 10px 10px}.knowledge__card,.knowledge__card:nth-child(2),.knowledge__card:nth-child(3),.knowledge__card:nth-child(4),.knowledge__card:nth-child(5){animation:none;transform:translateX(0)}.knowledge__card{width:100%;height:auto;margin-inline:auto}.main__content{width:100%}.portfolio__container{width:100%;display:grid;grid-template-columns:repeat(1,1fr)}.work__card{margin-inline:auto}.contact__list{display:block}.contact__info{padding-inline:1rem;text-align:center}.contact__card{display:block;width:80%;margin:1rem auto}}