:root{--main-text-color:#fff;--sub-text-color:#bbc;--body-box-shadow-color:rgba(77,77,97,.3);--body-background:rgba(77,77,97,.2)}*{box-sizing:border-box;font-family:Montserrat,sans-serif;margin:0;padding:0}#wrapper{background:#10131b;justify-content:center;min-height:100vh;padding-bottom:5rem}#wrapper,header{align-items:center;display:flex;flex-direction:column}header{margin-bottom:32px;margin-top:10rem}header .main-title{color:var(--main-text-color);font-size:2.5rem;font-weight:700}header .sub-title{color:var(--sub-text-color);font-size:1.2rem;margin-top:4px}.body{backdrop-filter:blur(5px);-webkit-backdrop-filter:blur(5px);background:var(--body-background);border:1px solid var(--body-box-shadow-color);border-radius:16px;box-shadow:0 4px 30px #0000001a;max-width:1800px;min-width:360px;width:80vw}.body .content{color:var(--main-text-color);font-size:1rem;line-height:1.5;padding:24px;width:100%}.body .content .header{font-size:1.5rem;font-weight:700;margin-bottom:16px;width:100%}.body .content .card-wrapper{align-items:center;border-radius:24px;display:flex;flex-direction:row;flex-wrap:wrap;gap:.75rem;-webkit-hyphens:auto;hyphens:auto;justify-content:flex-start;margin:auto;padding:20px 0;text-align:justify;width:100%}.body .content .card-wrapper .card{align-items:center;border-radius:16px;display:flex;height:250px;justify-content:center;position:relative;transition:all .15s;width:340px}.body .content .card-wrapper .card:before{border-radius:inherit;content:"";height:100%;left:0;opacity:0;position:absolute;top:0;transition:all .15s ease-in-out;width:100%}.body .content .card-wrapper .card:hover:before{opacity:1}.body .content .card-wrapper .card .card-content{background-color:#14142380;border-radius:inherit;height:calc(100% - .12rem);padding:15px;transition:all .25s;width:calc(100% - .12rem)}.body .content .card-wrapper .card .card-content .card-header{align-items:center;display:flex;flex-direction:row;justify-content:space-between;padding:0 20px;width:100%}.body .content .card-wrapper .card .card-content .card-header h3{font-size:22px;padding-bottom:0}.body .content .card-wrapper .card .card-content .card-header .icon{height:40px}.body .content .card-wrapper .card .card-content hr{background:var(--sub-text-color);border:0;height:1px;margin:10px 0}.body .content .card-wrapper .card .card-content p{width:100%}.body .content .card-wrapper:hover .card.default{background:radial-gradient(100rem circle at var(--xPos) var(--yPos),rgba(0,255,255,.4),transparent 15%)}.body .content .card-wrapper:hover .card.python{background:radial-gradient(100rem circle at var(--xPos) var(--yPos),rgba(255,208,0,.4),transparent 15%)}.body .content .card-wrapper:hover .card.rust{background:radial-gradient(100rem circle at var(--xPos) var(--yPos),rgba(255,0,76,.4),transparent 15%)}.body .content .card-wrapper .card.rust .card-content .card-header .icon{filter:invert(1)}.body .content .card-wrapper:hover .card.java{background:radial-gradient(100rem circle at var(--xPos) var(--yPos),rgba(255,145,0,.4),transparent 15%)}.body .content .card-wrapper:hover .card.typescript{background:radial-gradient(100rem circle at var(--xPos) var(--yPos),rgba(0,122,255,.4),transparent 15%)}.body .content .card-wrapper:hover .card.javascript{background:radial-gradient(100rem circle at var(--xPos) var(--yPos),rgba(255,223,0,.4),transparent 15%)}.body .content .card-wrapper:hover .card.php{background:radial-gradient(100rem circle at var(--xPos) var(--yPos),rgba(79,93,149,.4),transparent 15%)}.body .content .card-wrapper:hover .card.css3{background:radial-gradient(100rem circle at var(--xPos) var(--yPos),rgba(0,101,255,.4),transparent 15%)}.body .content .card-wrapper:hover .card.html5{background:radial-gradient(100rem circle at var(--xPos) var(--yPos),rgba(255,69,0,.4),transparent 15%)}.body .content .card-wrapper:hover .card.nuxt{background:radial-gradient(100rem circle at var(--xPos) var(--yPos),rgba(0,220,130,.4),transparent 15%)}.body .content .card-wrapper:hover .card.vuejs{background:radial-gradient(100rem circle at var(--xPos) var(--yPos),rgba(65,184,131,.4),transparent 15%)}.body .content .card-wrapper:hover .card.nodejs{background:radial-gradient(100rem circle at var(--xPos) var(--yPos),rgba(139,203,86,.4),transparent 15%)}.body .content .card-wrapper:hover .card.openui5{background:radial-gradient(100rem circle at var(--xPos) var(--yPos),rgba(0,112,255,.4),transparent 15%)}.body .content .card-wrapper:hover .card.keycloak{background:radial-gradient(100rem circle at var(--xPos) var(--yPos),rgba(0,184,227,.4),transparent 15%)}.body .content .card-wrapper:hover .card.sap{background:radial-gradient(100rem circle at var(--xPos) var(--yPos),rgba(0,128,255,.4),transparent 15%)}.body .content .card-wrapper:hover .card.postgres{background:radial-gradient(100rem circle at var(--xPos) var(--yPos),rgba(88,152,255,.4),transparent 15%)}.body .content .card-wrapper:hover .card.mongodb{background:radial-gradient(100rem circle at var(--xPos) var(--yPos),rgba(0,255,150,.4),transparent 15%)}.body .content .card-wrapper:hover .card.git{background:radial-gradient(100rem circle at var(--xPos) var(--yPos),rgba(255,122,45,.4),transparent 15%)}.body .content .card-wrapper:hover .card.docker{background:radial-gradient(100rem circle at var(--xPos) var(--yPos),rgba(0,123,255,.4),transparent 15%)}.body .content .card-wrapper:hover .card.fullstack{background:radial-gradient(100rem circle at var(--xPos) var(--yPos),rgba(0,153,255,.4),transparent 15%)}.body .content .card-wrapper:hover .card.raspberrypi{background:radial-gradient(100rem circle at var(--xPos) var(--yPos),rgba(255,0,122,.4),transparent 15%)}.body .content .card-wrapper:hover .card.nginx{background:radial-gradient(100rem circle at var(--xPos) var(--yPos),rgba(0,255,42,.4),transparent 15%)}