:root{--main-bg: #f0f0f0;--secondary-bg: rgb(236, 235, 235);--secondary-transparent: rgba(255, 255, 255, .5);--dark: #161616}body{margin:0;overflow:hidden;background-color:var(--main-bg);background-image:url(/assets/topo-adbd703c.jpg);background-size:cover;font-family:Arial,Helvetica,sans-serif;color:var(--dark)}#border-wrapper{width:100vw;height:100vh;position:fixed;z-index:-1}#border-wrapper .border{white-space:nowrap;position:absolute;font-weight:700;overflow:hidden}#border-wrapper .border-top{width:calc(100vw - 1em);top:0}#border-wrapper .border-right{width:calc(100vh - 1em);transform-origin:top left;transform:rotate(90deg);left:100vw}#border-wrapper .border-bottom{width:calc(100vw - 1em);bottom:0;right:0;text-align:right}#border-wrapper .border-left{width:calc(100vh - 1em);transform-origin:top left;transform:rotate(-90deg);bottom:-1em}.card-wrapper{width:60vw;height:100vh;margin:0 auto;display:flex}.card{width:100%;align-self:center;position:relative;overflow:hidden;border-radius:30px;box-shadow:0 0 50px #00000026;background-color:var(--secondary-transparent);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur}.card .card-header{width:fit-content;display:block;margin:1em auto 0}.card h1{font-size:4em;line-height:.9em;margin:0}.card h3{font-size:2em;line-height:.9em;letter-spacing:.15em;margin:0;font-style:italic}.card .avatar{margin:2em auto;display:block;width:33%;border-radius:50%}.link-box{text-decoration:none;width:100%;height:auto;position:relative;display:flex;flex-direction:row}.link{--link-height: 50px;position:relative;width:100%;height:var(--link-height);border-radius:50px;margin:1em;box-shadow:0 0 50px #00000026;overflow:hidden}.link .link-text{transition:color .5s ease-in-out;position:absolute;width:100%;height:100%;display:flex;justify-content:center;color:var(--dark)}.link .link-text *{align-self:center;z-index:11}.link .link-icon-group{transition:left .5s ease-in-out;position:absolute;display:flex;flex-direction:row;left:0}.link .link-icon-group .link-icon{width:var(--link-height);height:var(--link-height);transform:translate(calc(var(--link-height) * -1));z-index:10;filter:invert(7%) sepia(6%) saturate(36%) hue-rotate(314deg) brightness(97%) contrast(96%)}.link .link-icon-group .link-icon-backdrop{width:calc(var(--link-height) - 2px);height:calc(var(--link-height) - 2px);transform:translate(-1px) translateY(1px);border-radius:50%;z-index:9;background-color:var(--secondary-bg)}.link .link-icon-group .link-icon-background{width:100vw;height:var(--link-height);background-color:var(--dark);z-index:8;transform:translate(calc((var(--link-height) + var(--link-height) / 2) * -1 - 100vw))}.link:hover .link-icon-group{left:calc(100% - var(--link-height) + 2px)}.link:hover .link-text{color:var(--secondary-bg)}@media only screen and (max-width: 1000px){@keyframes button_slide{0%{left:0}50%{left:calc(100% - var(--link-height) + 2px)}to{left:0}}body{overflow-y:scroll}.card-wrapper{width:100vw;height:100vh}.card{height:calc(100% - 2em);width:calc(100% - 2em);margin:0 auto}.link-box{flex-direction:column;padding:0}.link-icon-group{margin:0 0 1em;animation:button_slide .5s;animation-timing-function:ease-in-out;animation-play-state:running}.link:nth-child(1) .link-icon-group{animation-delay:.6s}.link:nth-child(2) .link-icon-group{animation-delay:.7s}.link:nth-child(3) .link-icon-group{animation-delay:.8s}.card .avatar{width:50%}}
