body{background-color:#171717;flex-direction:column;justify-content:space-between;height:100vh;font-family:Open Sans,Verdana;display:flex}main{flex-direction:column;justify-content:center;align-items:center;margin-top:73px;margin-bottom:auto;display:flex}main>div{text-align:justify;color:#fff;width:100%;margin-top:1rem;@media (width>=600px){width:80%}@media (width>=900px){width:70%}@media (width>=1400px){width:60%}}main h1{margin-top:.5rem;margin-bottom:.5rem;font-size:1.5rem;font-weight:800;line-height:2rem;@media (width>=900px){font-size:2.25rem;line-height:2.5rem}}.project-container{margin-bottom:20px;padding:10px;display:grid;@media (width>=900px){grid-template-columns:repeat(2,1fr)}@media (width>=1400px){grid-template-columns:repeat(3,1fr)}}.project-item{align-items:stretch;padding:10px;animation:.5s slide-up;display:flex}@keyframes slide-up{0%{opacity:0;transform:translateY(160px)}to{transform:translateY(0)}}.project-title{font-size:1.25rem}.project-content{margin-left:1rem;margin-right:1rem}.project-content,.project-description,.tools{font-size:medium}.project-description{@media (width<=600px){max-height:30vh;overflow-y:auto}@media (width>=600px){max-height:20vh;overflow-y:auto}}.img{max-width:100%;height:auto}.img-pop{max-height:60vh;margin:auto;display:block}.fluid{transition:transform .3s ease-in-out;&:hover{transform:scale(1.05)}}.tools{-webkit-text-fill-color:transparent;background:linear-gradient(20deg,#3875ea,#a62161);-webkit-background-clip:text}canvas{z-index:-1;position:fixed;top:0;left:0}header{z-index:1;background-color:#171717;border-color:#fff;border-bottom-style:solid;border-bottom-width:1px;width:100%;height:73px;padding-left:.5rem;padding-right:.5rem;position:fixed;top:0;left:0;@media (width>=600px){padding-left:1rem;padding-right:1rem}}header .container{flex-wrap:wrap;justify-content:space-between;align-items:center;margin-left:auto;margin-right:auto;padding-top:.625rem;padding-bottom:.625rem;display:flex;@media (width>=600px){flex-direction:row;margin-top:0}}header a{align-items:center;text-decoration:none;display:flex}header .link{color:#fff;white-space:nowrap;align-self:center;font-size:1.25rem;font-weight:600;line-height:1.75rem}.button{background-color:#0000;border-radius:.5rem;margin-right:1.75rem;padding:.625rem 1.25rem;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-duration:.3s;transition-timing-function:cubic-bezier(.4,0,.2,1);&:hover{background-color:#262626}}.disabled{pointer-events:none;opacity:.3}#expand_button_triangle{float:left;border-top:15px solid #fff;border-left:15px solid #0000;border-right:15px solid #0000;width:0;height:0;font-size:0;line-height:0;transition:transform .5s ease-in-out}#plus{font-size:16px;position:relative;&:after,&:before{content:"";background-color:#fff;display:block;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}&:before{width:.2em;height:1em}&:after{width:1em;height:.2em}}#minus{font-size:16px;position:relative;&:after{content:"";background-color:#fff;width:1em;height:.2em;display:block;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}}.triangle_rotate{transform:scaleY(-1)}#counter{flex-direction:row;animation:1s appear;display:flex;@media (width<=600px){display:none}}#counter.invisible{animation:1s vanish;display:none}@keyframes appear{0%{opacity:0;transform:translate(100%)}to{opacity:1;transform:translate(0%)}}@keyframes vanish{0%{opacity:1;display:flex;transform:translate(0%)}to{opacity:0;display:none;transform:translate(100%)}}.header_buttons{flex-direction:row;display:flex}footer{border-color:#fff;border-top-style:solid;border-top-width:1px}footer .container{flex-direction:column;justify-content:space-between;align-items:center;margin-top:1rem;padding:1.5rem;display:flex}footer .link{color:#fff;font-size:1.5rem;font-weight:700;line-height:2rem;text-decoration:none}footer .copyright{color:#d1d5db;font-size:.875rem;line-height:1.25rem}footer .svg{margin-left:-.5rem;margin-right:-.5rem;display:flex}footer a{color:#fff;margin-left:.5rem;margin-right:.5rem}footer .icon{fill:currentColor;width:1.25rem;height:1.25rem}.link,.icon,.close{-o-transition:color .3s ease-out;-webkit-transition:color .3s ease-out;-moz-transition:color .3s ease-out;transition:color .3s ease-out;&:hover{color:#3875ea!important}}.arrow{border:3px solid #000;border-width:0 3px 3px 0;padding:.625rem 2.25rem .625rem 1.25rem;display:inline-block}.down{-webkit-transform:rotate(45deg);transform:rotate(45deg)}.overlay{visibility:hidden;opacity:0;z-index:222;background:#000000b3;transition:opacity .3s;position:fixed;inset:0;&:target{visibility:visible;opacity:1}}.popup{top:var(--popup-pos);left:var(--popup-pos);transform:translate(calc(-1*var(--popup-pos)),calc(-1*var(--popup-pos)));background:#171717;border-radius:5px;padding:20px;transition:all .6s ease-in-out;position:fixed;@media (width<=600px){top:10%;left:0%;transform:translate(0)}@media (width>=600px){--popup-pos:30%}@media (width>=900px){--popup-pos:40%}@media (width>=1400px){--popup-pos:50%}}.popup .close{color:#fff;text-align:center;cursor:pointer;background-color:#262626;border:none;border-radius:50%;width:30px;height:30px;font-size:30px;font-weight:700;line-height:28px;text-decoration:none;position:absolute;top:20px;right:30px;&:hover{color:#3875ea}}