.profile-circle-holder{width:300px;height:500px;margin:auto;margin-bottom:var(--s6);border-radius:150px;margin-top:-300px;transition:width .2s,height .2s,border-radius .2s,margin .2s;position:relative;overflow-y:hidden}.profile-circle{border-radius:150px;width:300px;height:300px;transition:width .2s,height .2s,border-radius .2s,margin .2s;position:absolute;bottom:0}.profile-circle-holder.small{width:200px;height:400px;margin-bottom:var(--s6);border-radius:100px;margin-top:-300px}.profile-circle-holder.small>.profile-circle{border-radius:100px;width:200px;height:200px}.button-holder{justify-content:center;gap:var(--s4);width:fit-content;padding:var(--s4);border-radius:var(--s5);margin:auto;margin-top:var(--s6);margin-bottom:var(--s4);flex-flow:wrap;transition:margin .4s;display:flex}.button-holder.open{margin-top:-80px}.section{padding:var(--s6);border-radius:var(--s6);color:#fff}.animated{justify-content:center;display:flex}.animated>span{opacity:0;animation-name:fadeIn;animation-duration:.6s;animation-timing-function:ease-in-out;animation-fill-mode:forwards;display:inline-block}.fadeout{animation-name:fadeOut;animation-duration:.3s;animation-timing-function:ease;animation-fill-mode:forwards}button{background-color:var(--base-color);color:var(--base-color-contrast);border-radius:var(--s3);padding:var(--s4) var(--s5);cursor:pointer;border:none;outline:none;transition:transform .2s,box-shadow .2s;transform:translateY(0);box-shadow:0 0 #0000;&:hover{box-shadow:var(--shadow-2);transform:translateY(-2px)}}@keyframes fadeIn{0%{opacity:0;transform:translateY(8px)}60%{opacity:.8;transform:translateY(-2px)}to{opacity:1;transform:translateY(0)}}@keyframes fadeOut{0%{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(-8px)}}.tab-area{padding-bottom:20px;position:relative;overflow:hidden}.tab-area>*{position:absolute;top:0}.hideable.show{opacity:1;transition:opacity .4s,transform .4s;position:relative}.hideable:not(.show){opacity:0;pointer-events:none;transition:opacity .1s ease-out,transform .1s ease-out;transform:translateY(10px)}.spacer-dot{background-color:var(--base-color-contrast);width:16px;height:16px;margin:0 var(--s5);border-radius:8px;display:inline-block;position:relative;bottom:5px}.link-card{background-color:var(--base-color);border-radius:var(--s5);color:var(--base-color-contrast);padding:var(--s6);margin:calc(0px - var(--s5));box-shadow:var(--shadow-2);cursor:pointer;margin-top:0;text-decoration:none;display:block;&:not(:last-child){margin-bottom:var(--s4)}& code{border:solid 1px var(--base-color-2)}&.see-all{margin:var(--s3);margin-top:var(--s6)}}.blog-card{align-items:center;gap:var(--s5);grid-template-columns:auto 80px;display:grid}.blog-card.with-image{padding:var(--s3);padding-right:var(--s6);grid-template-columns:200px auto 80px;& img{border-radius:var(--s4);object-fit:cover;width:200px;height:200px}}.blog-button{background-color:var(--base-color);width:50px;height:50px;color:rgba(var(--base-color-contrast-rgb), .3);box-shadow:var(--shadow-2);border-radius:1000px;justify-content:center;justify-self:flex-end;align-items:center;font-size:32px;transition:transform .2s,box-shadow .3s;display:flex;transform:translate(0)}.blog-card:hover,.blog-card:focus-visible{& .blog-button{box-shadow:var(--shadow-3);transform:translate(4px)}}@media screen and (width<=600px){.blog-card{align-items:center;gap:var(--s5);grid-template-rows:auto;grid-template-columns:auto;display:grid;& .blog-button{display:none}&.see-all{margin:var(--s3);margin-top:var(--s6);grid-template-rows:auto;grid-template-columns:auto 80px;& .blog-button{display:flex}}}.blog-card.with-image{padding:var(--s3);padding-bottom:var(--s6);grid-template-rows:200px auto;grid-template-columns:auto;& img{object-fit:cover;width:100%;height:200px}& .card-content{padding:0 calc(var(--s6) - var(--s3));margin-top:-36px;& h1,& h2{width:fit-content;margin-left:calc(0px - var(--s4));padding:var(--s3) var(--s4);backdrop-filter:blur(8px);border-radius:var(--s3);background-color:#ffffff80;display:block}}}}:focus{outline:solid 3px var(--base-color);outline-offset:3px}
