:root{--primary-color:#0F9CD2;--background-color:#292929}*{font-family:"Open Sans",serif}body,html{background-color:var(--background-color);margin:0;color:#fff}.text-primary{color:var(--primary-color)}header{position:fixed;width:100%}.menu-button{width:32px;padding:20px;display:block;cursor:pointer;position:absolute;right:0;background-color:rgba(41,41,41,.8)}.menu-button .line{height:4px;background-color:#fff;position:relative;margin:6px 0;transition:all .3s ease}header.menu-active .line:nth-child(2){opacity:0}header.menu-active .line:nth-child(1){animation:after-rotate-1 .3s ease 0s forwards}@keyframes after-rotate-1{0%{top:0}100%{top:10px;transform:rotate(45deg)}}header.menu-active .line:nth-child(3){animation:after-rotate-3 .3s ease 0s forwards}@keyframes after-rotate-3{0%{top:0}100%{top:-10px;transform:rotate(-45deg)}}header.active:not(.menu-active) .line:nth-child(1){animation:before-rotate-1 .3s ease 0s forwards}@keyframes before-rotate-1{0%{top:10px;transform:rotate(45deg)}100%{top:0}}header.active:not(.menu-active) .line:nth-child(3){animation:before-rotate-3 .3s ease 0s forwards}@keyframes before-rotate-3{0%{top:-10px;transform:rotate(-45deg)}100%{top:0}}ul.menu{list-style:none;padding:27px;display:flex;position:absolute;right:0;top:0;margin-top:0;opacity:0;visibility:hidden;transition:all .3s ease;user-select:none;background-color:rgba(41,41,41,.8)}@media (max-width:550px){ul.menu{display:flex;flex-direction:column;justify-content:space-evenly;width:100vw;height:100vh;left:0;top:0;right:0;padding:0;margin:0;background-color:var(--background-color)}body.menu-active{overflow:hidden}body.menu-active section{visibility:hidden}}header.menu-active ul.menu{opacity:1;visibility:visible;right:72px;user-select:initial}ul.menu li{margin-right:10px}@media (max-width:550px){ul.menu li{font-size:27px}}.menu a{color:#fff;text-decoration:none;text-transform:uppercase;padding:0 20px}.menu a.active{position:relative}.menu a.active:after{content:"";display:block;width:10px;height:2px;background-color:#fff;position:absolute;left:50%;transform:translateX(-50%)}@media (max-width:500px){.menu a.active:after{width:initial}}.menu a.active:hover:after{width:100%}.menu a:hover{position:relative}.menu a:hover:after{content:"";display:block;width:0;height:2px;background-color:#fff;position:absolute;left:50%;transform:translateX(-50%);animation:underline .3s ease 0s forwards}@keyframes underline{0%{width:0}100%{width:100%}}.page{min-height:100vh;padding:20px 100px}@media (max-width:500px){.page{padding:20px 20px}}.page-default{display:flex;flex-direction:column}.page-content{flex:1}.center{display:flex;align-items:center;justify-content:center}.x-center{text-align:center}h1{font-weight:300;margin:0;font-size:34px}h2{font-size:40px;font-weight:300;border-left:20px solid #fff;padding-left:20px;text-transform:uppercase}@media (max-width:500px){h2{font-size:30px}}.subtitle{font-weight:500}.social-media{padding-top:5px}.social-media svg{width:24px;height:24px;padding:0 5px}.social-media a{text-decoration:none}.social-media a:hover svg path{fill:var(--primary-color)}.skills img{height:80px;margin:20px}@media (max-width:500px){.skills img{height:80px}}.cards{display:flex;justify-content:space-evenly;flex-wrap:wrap}.card{width:350px;margin:0 5px 10px 5px;background-color:#1e1e1e;border-radius:10px;display:flex;flex-direction:column}@media (max-width:500px){.card{width:100%}}.card-cover{width:100%;height:200px;object-fit:cover;border-radius:10px 10px 0 0}.card-title{font-size:20px;margin:10px 12px;padding-left:10px;border-left:8px solid #fff;text-transform:uppercase}.card-subtitle{margin:-10px 20px 0 20px;padding-left:10px;font-size:12px}.card-content{margin:12px 16px;font-size:14px;flex:1}.card-actions{margin:12px 16px;display:flex;align-items:center;justify-content:center;flex-wrap:wrap}.card-button{color:#fff;text-decoration:none;background-color:var(--primary-color);padding:5px 15px;font-size:14px}.card-button:hover{opacity:.8}.scroll-down{position:absolute;bottom:0;display:flex;align-items:flex-end;padding-bottom:5px;text-transform:uppercase;opacity:.3;font-size:12px;transition:opacity .5s ease}.scroll-down.hidden{opacity:0;pointer-events:none}.arrow-down{width:30px;height:100px;display:flex;flex-direction:column;align-items:center;padding-bottom:5px}.arrow-down div:first-child{flex:1;border-left:1px solid #fff;border-right:1px solid #fff;border-image:linear-gradient(to bottom,#ffffff00,#fff) 1}.arrow-down div:last-child{width:10px;height:10px;border-left:2px solid #fff;border-bottom:2px solid #fff;transform:rotate(-45deg);margin-top:-12px}