@import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,100..1000;1,9..40,100..1000&display=swap');


:root {
	--primary: #7814ff;
	--secondary: #2df5ff;
	--link: #0066ff;
	--link-active: #0044ff;
	--warning: #ff66aa;
	--white: #FFFFFF;
	--snow: #F1F3F5;
	--cloud: #c1c3c5;
	--gray: #515355;
	--dark: #1a1a1a;
	--black: #030303;
	--transparent-88: rgba(19, 19, 21, 0.88);
	--transparent-48: rgba(2,6,26,0.48);
	--transparent-08: rgba(255,255,255,0.08);
	--transparent-12: rgba(255,255,255,0.12);
	--transparent-16: rgba(255,255,255,0.16);
	--transparent-24: rgba(255,255,255,0.24);
	--transparent-32: rgba(255,255,255,0.32);
	--transparent-40: rgba(255,255,255,0.40);
	--heavy: normal 600 1.25rem/1.875rem "DM Sans", Helvetica, Arial, sans-serif;
	--lead: normal 400 1.1875rem/1.75rem "DM Sans", Helvetica, Arial, sans-serif;
	--base: normal 400 1.0625rem/1.625rem "DM Sans", Helvetica, Arial, sans-serif;
	--small: normal 400 0.9375rem/1.4375rem "DM Sans", Helvetica, Arial, sans-serif;
	--micro: normal 300 0.875rem/1.3125rem "DM Sans", Helvetica, Arial, sans-serif;
	--transition:all 0.24s ease-in-out;
}

* {box-sizing: border-box;}

.primary {background-color: var(--primary)}
.secondary {background-color: var(--primary)}
.tertiary {background-color: var(--link)}
.white {background-color: var(--white)}
.snow {background-color: var(--snow)}
.cloud {background-color: var(--cloud)}
.gray {background-color: var(--gray)}
.dark {background-color: var(--dark)}
.black {background-color: var(--black)}
.black.transparent {background-color: var(--transparent-88)}
.dark.transparent {background-color: var(--transparent-48)}

html,
body {
	font-family: "DM Sans", Helvetica, Arial, sans-serif;
	font-optical-sizing: auto;
	font-style: normal;
	font-size: 16px;
	font-weight: 400;
	margin: 0;
	padding: 0;
	background: var(--black);
	color: var(--cloud);
	position: relative;
	}
	
/*---------- LAYOUT ------------------------------*/

section,
container,
content {
	width: 100%;
	margin: 0 auto;
	padding: 0;
	display: flex;
	}
section {
	padding: 10rem 2rem;
	}
container {
	flex-direction: column;
	max-width: 1680px;
	gap: 8rem;
	}
content {
	gap: 4rem;
	flex-direction: row;
	align-items: stretch;
	max-width: 1280px;
	}
.item {
	width: 100%;
	min-width: 0;
	}
.box {
	padding:2.5rem 3rem 2.5rem;
	border-radius:1rem;
	border: 1px solid var(--transparent-08);
	}
.center {
	align-items: center;
	}
.centered {
	justify-content: center;
	text-align: center;
	}
.flex {
	display: flex;
	flex-direction: column;
	gap: 2rem;
	}
.full {
	width:100%;
	}
.sticky {
	position: sticky; 
	top: 10rem;
	}
.gradient {
	background-image: url('assets/gradient_bottom_color.webp');
	background-size: 100% auto;
	background-position: bottom center;
	background-repeat: no-repeat;
	}
.gradient.full {
	background-image: url('assets/gradient_full_color.webp');
	background-size: 100% auto;
	background-position: top center;
	background-repeat: repeat;
	}
.gradient.middle {
	background-image: url('assets/gradient_middle_color.webp');
	background-size: 100% auto;
	background-position: center left;
	background-repeat: no-repeat;
	}
.illustration {
	width:100%;
	max-width:480px; 
	margin:0 auto
	}
.icon {
	height:3rem;
	width: 3rem;
	margin: 0 0 1rem 0;
	stroke-width: 0.75;
	color: var(--secondary);
	}
	
/*---------- FONTS ------------------------------*/

h1 {
	font-size: 4rem;
	line-height: 4.5rem;
	font-weight:800;
	margin:0 0 1rem 0;
	color: var(--white);
	text-shadow: 0 0.25rem 1rem rgba(0,0,0,0.12);
	}
h2 {
	font-size: 2rem;
	line-height: 2.5rem;
	font-weight:600;
	margin:0 0 1.5rem;
	color: var(--white);
	}
h3 {
	font-size: 1.375rem;
    line-height: 1.875rem;
    font-weight: 600;
	margin:0 0 1rem;
	color: var(--white);
	}
h4 {
	font-size: 1rem;
    line-height: 1.5rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-weight: 500;
    color: var(--secondary);
    margin: 0 0 1.25rem;
    padding: 0 0 0.75rem;
    border-bottom: 1px solid var(--transparent-16);
	align-self: normal;
	width: 100%;
	}
p {
	font: var(--base);
	letter-spacing: 0.2px;
	margin: 0 0 1rem;
	}
p.small {
	font: var(--small);
	color: var(--cloud);
	margin:0 0 1rem;
	}
p.lead {
	font: var(--lead);
	color: var(--white);
	margin:0 0 1.5rem;
	}
p.intro {
	font-size: 0.9375rem;
	line-height: 1.475rem;
	font-weight: 300;
	text-transform: uppercase;
	letter-spacing:1px;
	color: var(--cloud);
	margin:0 0 0.5rem;
	}
ul {
	margin: 0;
	padding: 0 0 1rem 1.25rem;
	}
li {
	font-size: 1.0625rem;
	line-height: 1.625rem;
	padding: 0 0 0.75rem 0.75rem;
	}
ul li:last-child {
	padding: 0 0 0 0.75rem;
	}
a {
	font-weight: 500;
	text-decoration: none;
	color: var(--link);
	transition: var(--transition);
	}
a:hover {
	color: var(--link-active);
	}
a.button,	
button {
	font: var(--base);
	padding: 0.5625rem 1.5rem;
	color: var(--white);
	background-color: var(--primary);
	border-radius: 0.5rem;
	border:0;
	transition: var(--transition);
	position:relative;
	cursor: pointer;
	white-space: nowrap;
	align-self: start;
	-webkit-appearance: none !important;
	}
a.button.cta,
button.cta {
	font: var(--lead);
	background-color: var(--primary);
	font-size: 1.25rem;
	font-weight:600;
	padding: 0.875rem 1.875rem;
	border-radius: 0.75rem;
	}
a.button:hover,
button:hover {
	background-color: rgba(120,20,255,0.8);
	}
a.button.cta:hover,
button.cta:hover {
	background-color: rgba(120,20,255,0.8);
	}
button.link {
	font: var(--base);
	color: var(--link);
	padding: 0;
	margin: 0;
	background: none;
	}

hr {
	width: 100%;
	border: none;
	height: 1px;
	background-color: var(--transparent-16);
	margin:2.5rem 0;
	}




.switch {
position: relative;
display: inline-block;
width: 60px;
height: 34px;
}

.switch input {
opacity: 0;
width: 0;
height: 0;
}

.slider {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #ccc;
transition: .4s;
}

.slider:before {
position: absolute;
content: "";
height: 26px;
width: 26px;
left: 4px;
bottom: 4px;
background-color: white;
-webkit-transition: .4s;
transition: .4s;
}

input:checked + .slider {
background-color: #2196F3;
}

input:focus + .slider {
box-shadow: 0 0 1px #2196F3;
}

input:checked + .slider:before {
-webkit-transform: translateX(26px);
-ms-transform: translateX(26px);
transform: translateX(26px);
}

/* Rounded sliders */
.slider.round {
border-radius: 34px;
}

.slider.round:before {
border-radius: 50%;
}




/*---------- NAVIGATION ------------------------------*/

#top {
	width:100%;
	position:fixed;
	top:0;
	left:0;
	z-index: 100;
	padding: 1.5rem 2rem;
	background-color: var(--transparent-88);
	backdrop-filter: blur(0.25rem);
	}
#navi {
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	justify-content: space-between;
	align-items: center;
	}
.logo:hover a div {
	opacity:1;
	}
.logo .intro {
	margin: 0;
	}
.logo a div img {
	height: 2.5rem;
	width: auto;
	display:block;
	}
#menu ul {
	padding: 0;
	margin: 0;
	list-style-type: none;
	}
#menu ul li {
	display: inline-block;
	margin: 0;
	padding:0.5rem 0.75rem;
	}
#menu ul li a {
	color: var(--cloud);
	}
#menu ul li a:hover {
	color: var(--white);
	}
#menu a.button,	
#menu button {
	color: var(--cloud);
	background-color: var(--transparent-12);
	}
#menu a.button:hover,	
#menu button:hover  {
	color: var(--white);
	background-color: var(--transparent-24);
	}
.hamburger,
.close {
	width:2.25rem;
	height:2.25rem;
	cursor: pointer;
	display:none;    
	background-size: 1.5rem;
    background-position: center;
    background-repeat: no-repeat;
	}
.close {
	background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 24 24"><defs><style> .close_btn { fill: %23fff; } </style></defs><g><path class="close_btn" d="M13.4,12l7.1-7.1c.4-.4.4-1,0-1.4s-1-.4-1.4,0l-7.1,7.1L4.9,3.5c-.4-.4-1-.4-1.4,0s-.4,1,0,1.4l7.1,7.1-7.1,7.1c-.4.4-.4,1,0,1.4.2.2.5.3.7.3s.5-.1.7-.3l7.1-7.1,7.1,7.1c.2.2.5.3.7.3s.5-.1.7-.3c.4-.4.4-1,0-1.4l-7.1-7.1h0Z"/></g></svg>');
	}
.hamburger {
	background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 24 24"><defs><style> .hamburger_btn { fill: %23fff; } </style></defs><g><path class="hamburger_btn" d="M23,5h-14c-.6,0-1-.4-1-1s.4-1,1-1h14c.5,0,1,.5,1,1s-.5,1-1,1Z"/><path class="hamburger_btn" d="M23,13H1c-.6,0-1-.4-1-1s.4-1,1-1h22c.5,0,1,.4,1,1s-.5,1-1,1Z"/><path class="hamburger_btn" d="M23,21H5c-.6,0-1-.5-1-1s.4-1,1-1h18c.5,0,1,.5,1,1s-.5,1-1,1Z"/></g></svg>');
	}
	
/*---------- FORMS ------------------------------*/

form {
	display: flex;
	width:100%;
	flex-direction: column;
	flex-wrap: nowrap;
	justify-content: flex-start;
	align-items: flex-start;
	gap:1.5rem;
	margin: 2rem 0 0;
}
form button {
	margin-top:0;
}
form h4 {
	margin: 0;
	}
form .navi {
	margin-top: 2rem;
	}
form .navi,
form .navi > div {
	width: 100%;
	display: flex;
	flex-direction: row;
	justify-content: flex-end;
	align-items: center;
	gap: 1.5rem;
	}
.field {
	display: flex;
	flex-direction: column;
	flex-wrap: nowrap;
	justify-content: flex-start;
	width:100%;
	gap:0.375rem;
	}
.field.half {
	width: calc(50% - 1rem);
	}

.field + h4 {
	margin-top:3rem;
	}
.field + div {
	width: 100%;
	}
.field + div h4 {
	margin-top:3rem;
	margin-bottom:0.75rem;
	}
.field + div p {
	font: var(--small);
	margin: 0;
	}

label {
	font-size: 1rem;
	font-weight: 500;
	color: var(--white);
	}
label a,
label button.link {
	float:right;
	font: var(--small);
	}
.error {
	font: var(--small);
	color: var(--warning);
}
.info {
	font: var(--micro);
	color: var(--cloud);
	}
.info .option {
	font: var(--small);
	display: inline-block;
	padding: 0.5rem 2.25rem 0.5rem 1rem;
	border-radius: 1.5rem;
	background-color: var(--transparent-08);
	color: var(--secondary);
	position:relative;
	margin: 0.125rem 0.375rem 0.375rem 0;
	}
.info .option .remove {   
	height: 1.5rem;
    width: 1.5rem;
    padding: 0;
    background: none;
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
	background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 24 24"><defs><style> .close_btn { fill: %23fff; } </style></defs><g><path class="close_btn" d="M13.4,12l7.1-7.1c.4-.4.4-1,0-1.4s-1-.4-1.4,0l-7.1,7.1L4.9,3.5c-.4-.4-1-.4-1.4,0s-.4,1,0,1.4l7.1,7.1-7.1,7.1c-.4.4-.4,1,0,1.4.2.2.5.3.7.3s.5-.1.7-.3l7.1-7.1,7.1,7.1c.2.2.5.3.7.3s.5-.1.7-.3c.4-.4.4-1,0-1.4l-7.1-7.1h0Z"/></g></svg>');
	background-size: 1rem 1rem;
    background-position: center;
    background-repeat: no-repeat;
	}
input[type=text],
input[type=email],
input[type=password],
input[type=number] {
	-webkit-appearance: none !important;
	-appearance: none !important;
	font: var(--base);
	color: var(--white);
	padding: 0.625rem 0.875rem;
	background-color: var(--transparent-08);
	border:1px solid var(--transparent-08);
	border-radius:0.25rem;
	transition: var(--transition);
	outline: none;
	}
input[type=text]:hover,
input[type=email]:hover,
input[type=password]:hover,
input[type=number]:hover {
	background-color: var(--transparent-12);
	-webkit-appearance: none !important;
	-appearance: none !important;
	}
input[type=text]:focus,
input[type=email]:focus,
input[type=password]:focus,
input[type=number]:focus {
	background-color: var(--transparent-12);
	border:1px solid var(--transparent-16);
	-webkit-appearance: none !important;
	-appearance: none !important;
	}
input[type=text].geo {
	padding-left: 3rem;
	background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 20 20"><defs><style> .geo { fill: none; stroke: %23666; stroke-linecap: round; stroke-linejoin: round; stroke-width: 2px; } </style></defs><g><g><path class="geo" d="M10.1,1h-.2c-4.1,0-7.4,3.1-7.7,7.2-.1,2,.3,4,1.5,5.6,1.5,2,3.1,3.4,5.5,5,.5.3,1.1.3,1.6,0,2.5-1.6,4-3,5.5-5,1.2-1.6,1.6-3.6,1.5-5.6-.3-4.1-3.7-7.2-7.7-7.2Z"/></g><circle class="geo" cx="10" cy="8.9" r="3.3"/></g></svg>');
	background-repeat: no-repeat;
	background-size: 1.25rem 1.25rem;
	background-position: center left 0.875rem;
	}
input[type=text].url {
	padding-left: 3rem;
	background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 20 20"><defs><style> .url { fill: none; stroke: %23666; stroke-linecap: round; stroke-linejoin: round; stroke-width: 2px; } </style></defs><g><g><g><path class="url" d="M12.6,7.4l-5.1,5.1"/><path class="url" d="M11.7,16c-3.3,2.9-6.3,4.3-9.1,1.4-2.8-2.8-1.5-5.8,1.3-9.1"/><path class="url" d="M8.3,4c3.3-2.9,6.3-4.3,9.1-1.4,2.8,2.8,1.5,5.8-1.3,9.1"/></g></g></g></svg>');
	background-repeat: no-repeat;
	background-size: 1.25rem 1.25rem;
	background-position: center left 0.875rem;
	}
input[type="range"] {
	-webkit-appearance: none;
	background-color: rgba(255, 255, 255, 0.2);
	margin: 0;
	padding: 0;
	width: 100%;
	height: 0.5rem;
	border-radius: 0.5rem;
	overflow: hidden;
	cursor: col-resize;
	}
input[type="range"]::-webkit-slider-runnable-track {
	background: linear-gradient(90deg, rgba(120,20,255,1) 0%, rgba(39,245,255,1) 100%);
	height: 0.5rem;
	border-radius: 0.5rem;
	}
input[type="range"]::-webkit-slider-thumb {
	-webkit-appearance: none;
	width: 0.5rem;
	height: 0.5rem;
	border-radius: 0.5rem;
	border: none;
	background: var(--white);
	box-shadow: 20.125rem 0 1rem 20rem #222;
	}
input[type="range"]::-moz-range-thumb {
	-appearance: none;
	width: 0.5rem;
	height: 0.5rem;
	border-radius: 0.5rem;
	border: none;
	background: var(--white);
	box-shadow: 20.125rem 0 1rem 20rem #222;
	}

/*---------- ACCORDION ------------------------------*/

.accordion {
	padding:1.5rem 0 2rem 0;
	}
h3.toggle {
	font: var(--heavy);
  	color: var(--secondary);
  	cursor: pointer;
	padding: 1.5rem 0 1.5rem 2rem;
	margin: 0;
	position:relative;
	transition: var(--transition);
	border-top: 1px solid var(--transparent-16);
	}
.accordion .panel {
	padding: 0 0 0 2rem;
	}
.accordion .panel > div {
	padding: 0 0 1rem;
	}
	
.accordion .panel.last {
	border-bottom: 1px solid var(--transparent-16);
	}	

.toggle:before {
	content: '+';
	color: var(--secondary);
	line-height:1.125;
	font-weight:500;
	transition: var(--transition);
	}
.toggle.active:before {
	content: "-";
	}

.toggle:hover,
.toggle:hover:before {
  	color: var(--primary);
	}
.toggle:before,
.toggle.active:before {
	position:absolute;
	top:1.5rem;
	left:0;
	}

/*---------- TABS ------------------------------*/

.tabs {
	display:flex;
	flex-direction: row;
	gap:1.5rem;
	flex-wrap: nowrap;
	overflow-x: auto;
	justify-content: flex-start;
	}
.tabs.centered {
	justify-content: center;
	}
.tabs h3 {
	margin:0;
	}
.tabs::-webkit-scrollbar {
    display: none;
  	}
.benefit_link {
	padding:0 0 0.5rem 0;
	border-bottom: 0;
	color: var(--secondary);
	cursor: pointer;
	transition: var(--transition);
	}
.benefit_link:hover {
	color: var(--primary);
	}
.benefit_link.active {
	color: var(--white);
	border-bottom: 2px solid var(--white);
	}	
.benefit_content {
	-webkit-animation: fadeEffect 3s;
    animation: fadeEffect 1.5s;
	}
@-webkit-keyframes fadeEffect {
	from {opacity: 0;}
	to {opacity: 1;}
}
@keyframes fadeEffect {
	from {opacity: 0;}
	to {opacity: 1;}
}

/*---------- HERO ------------------------------*/

#hero {
	padding: 16rem 2rem 8rem !important;
	}
#hero .item {
	width: 100%;
	max-width: 960px;
	margin: 0 auto;
	text-align: center;
	justify-content: center;
	}
#hero p + p {
	margin:2rem 0 2rem;
	}

/*---------- USER ACCOUNT ------------------------------*/

.elements + h4 {
	margin-top:3rem;
	}
.elements + .button{
	margin-top:2rem;
	}
.elements {
	width:100%;
	display: flex;
    flex-direction: column;
    gap: 1.5rem;
	}
.element {
	text-overflow: ellipsis;
	white-space: nowrap;
	overflow: hidden;
	min-width: 0;
	}
.element p {
	margin: 0;
	color: var(--white);
	width: 100%;
	text-overflow: ellipsis;
	white-space: nowrap;
	overflow: hidden;
	}
.element p + p {
	margin-top: 0.125rem;
	}
.element p.small {
	color: var(--cloud);
	margin:0 0 0.25rem;
	}
.element p a {
	text-overflow: ellipsis;
	white-space: nowrap;
	overflow: hidden;
	}
.step {
	position: relative;
	padding-left:2.25rem;
	font: var(--base);
	}
.step:before {
	color:var(--cloud);
    height: 1.375rem;
    width: 1.375rem;
    border-radius: 1rem;
    border: 1px solid var(--cloud);
    display: block;
    position: absolute;
    left: 0;
    top: 1px;
    text-align: center;
    font-size: 0.875rem;
    line-height: 1.375rem;
	}
.step:nth-child(1):before {
	content: '1';
	}
.step:nth-child(2):before {
	content: '2';
	}
.step:nth-child(3):before {
	content: '3';
	}
.step:nth-child(4):before {
	content: '4';
	}
.step.active {
	font-weight:600;
	color: var(--primary);
	}
.step.active:before {
	color: var(--primary);
    border: 2px solid var(--primary);
	}
.step.done {
	font-weight:600;
	color: var(--gray);
	}
.step.done:before {
	color: var(--gray);
    border: 2px solid var(--gray);
	content: '';
	background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 20 20"><defs><style> .cls-1 { fill: none; stroke: %23515355; stroke-linecap: round; stroke-linejoin: round; stroke-width: 2px; } </style></defs><g><g id="Layer_1"><g id="Layer_1-2" data-name="Layer_1"><polyline class="cls-1" points="14.7 7.3 8.5 13.3 4.7 9.5"/></g></g></g></svg>');
	background-size: 1.25rem 1.25rem;
	background-repeat: no-repeat;
	background-position: center center;
	}

/*---------- USER PROFILE ------------------------------*/

#user {
	padding-top:160px;
	padding-bottom:120px;
	}
#user h1 {
	font-size: 3rem;
	line-height: 3.5rem;
	font-weight:600;
	margin:0 0 0.5rem 0;
	}
#user content.preview {
	width: 100%;
    display: grid;
    grid-template-columns: 1fr 3fr;
    grid-column-gap: 2rem;
    grid-row-gap: 10rem;
	}
.experience,
.position,
.language {
	position: relative;
	display: flex; 
	flex-direction: row;
	flex-wrap: wrap;
	gap: 0.5rem;
	padding: 0 0 0 2.5rem;
	margin: 0 0 1.5rem 0;
	}
.experience:before,
.position:before,
.language:before {
	content: "";
    position: absolute;
    width: 1.5rem;
    height: 1.5rem;
    top: -0.125rem;
    left: 0px;
    background-repeat: no-repeat;
	background-position: center center;
	background-size: 1.5rem 1.5rem;
	}
.experience:before {
	background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 14 14"><g><path id="Vector" stroke="%232df5ff" stroke-linecap="round" stroke-linejoin="round" d="M1.5 2c-0.26522 0 -0.51957 0.10536 -0.707107 0.29289C0.605357 2.48043 0.5 2.73478 0.5 3v9.5c0 0.2652 0.105357 0.5196 0.292893 0.7071 0.187537 0.1875 0.441887 0.2929 0.707107 0.2929h11c0.2652 0 0.5196 -0.1054 0.7071 -0.2929s0.2929 -0.4419 0.2929 -0.7071V3c0 -0.26522 -0.1054 -0.51957 -0.2929 -0.70711C13.0196 2.10536 12.7652 2 12.5 2h-2" stroke-width="1"></path><path id="Vector_2" stroke="%232df5ff" stroke-linecap="round" stroke-linejoin="round" d="M0.5 5.5h13" stroke-width="1"></path><path id="Vector_3" stroke="%232df5ff" stroke-linecap="round" stroke-linejoin="round" d="M3.5 0.5v3" stroke-width="1"></path><path id="Vector_4" stroke="%232df5ff" stroke-linecap="round" stroke-linejoin="round" d="M10.5 0.5v3" stroke-width="1"></path><path id="Vector_5" stroke="%232df5ff" stroke-linecap="round" stroke-linejoin="round" d="M3.5 2h5" stroke-width="1"></path></g></svg>');
	}
.position:before {
	background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 14 14"><g><path id="Vector" stroke="%232df5ff" stroke-linecap="round" stroke-linejoin="round" d="M13.5 10.5v-8c0 -0.27614 -0.2239 -0.5 -0.5 -0.5H1c-0.265216 0 -0.5 0.23478 -0.5 0.5v8c0 0.2652 0.234784 0.5 0.5 0.5h12c0.2652 0 0.5 -0.2348 0.5 -0.5Z" stroke-width="1"></path><path id="Vector_2" stroke="%232df5ff" stroke-linecap="round" stroke-linejoin="round" d="m6 11 -1 2.5" stroke-width="1"></path><path id="Vector_3" stroke="%232df5ff" stroke-linecap="round" stroke-linejoin="round" d="m8 11 1 2.5" stroke-width="1"></path><path id="Vector_4" stroke="%232df5ff" stroke-linecap="round" stroke-linejoin="round" d="M4 13.5h6" stroke-width="1"></path><path id="Vector_5" stroke="%232df5ff" stroke-linecap="round" stroke-linejoin="round" d="M5 5 3.5 6.5 5 8" stroke-width="1"></path><path id="Vector_6" stroke="%232df5ff" stroke-linecap="round" stroke-linejoin="round" d="m9 5 1.5 1.5L9 8" stroke-width="1"></path></g></svg>');
	}
.language:before {
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 14 14"><g ><path id="Vector" stroke="%232df5ff" stroke-linecap="round" stroke-linejoin="round" d="M9.25001 5c1.12719 0 2.20819 0.44777 3.00519 1.2448 0.797 0.79703 1.2448 1.87803 1.2448 3.0052 0.0027 0.8366 -0.2446 1.6549 -0.71 2.35l0.71 1.9 -2.39 -0.43c-0.5748 0.2803 -1.20539 0.4273 -1.84487 0.43 -0.63947 0.0027 -1.27131 -0.139 -1.84844 -0.4144 -0.57713 -0.2754 -1.08466 -0.6776 -1.48478 -1.1764 -0.40012 -0.4988 -0.68252 -1.0815 -0.82614 -1.7047 -0.14362 -0.62311 -0.14478 -1.27064 -0.00337 -1.89429 0.14141 -0.62365 0.42173 -1.20735 0.82007 -1.70761 0.39834 -0.50026 0.90444 -0.90417 1.48058 -1.18165C7.9792 5.14347 8.61053 4.99958 9.25001 5v0Z" stroke-width="1"></path><path id="Vector_2" stroke="%232df5ff" stroke-linecap="round" stroke-linejoin="round" d="M9.86002 2.51004c-0.67343 -0.85693 -1.5973 -1.48255 -2.64299 -1.789757C6.17134 0.413077 5.05588 0.439575 4.02596 0.796086 2.99604 1.1526 2.10292 1.82138 1.47093 2.70932 0.838948 3.59725 0.499561 4.66016 0.500023 5.75004c-0.003099 1.036 0.303333 2.04932 0.879997 2.91L0.500023 11l2.119997 -0.38" stroke-width="1"></path></g></svg>');
	}
.position div,
.language div {
	font: var(--small);
	position: relative;
	white-space: nowrap;
	padding: 0 1.25rem 0 0;
	margin: 0 0.25rem 0 0;
	}
.position div:last-child,
.language div:last-child {
	padding: 0;
	margin: 0;
	}
.position div:after,
.language div:after {
	content: "•";
    position: absolute;
	top: 0;
	right: 0px;
	}
.position div:last-child:after,
.language div:last-child:after {
	content: "";
	}
.location {
	font: var(--lead);
	color: var(--white);
	margin:0 0 1.5rem;
	}
div.link {
	height: 2.5rem;
	width: 2.5rem;
	border-radius:1.5rem;
	padding:1.25rem;
	background-size: 2.25rem 2.25rem;
	background-position: center center;
	background-color: var(--transparent-12);
	transition: var(--transition);
	}
div.link:hover {
	background-color: var(--primary);
	}
.linkedin {background-image: url('data:image/svg+xml,<%3Fxml version="1.0" encoding="UTF-8"%3F><svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 32 32"><defs><style> .cls-1 { fill: %23fff; } </style></defs><g><g id="Layer_1"><g id="Layer_1-2" data-name="Layer_1"><path class="cls-1" d="M11.7,23.6c0,.1-.1.3-.3.3h-3.3c-.1,0-.3-.1-.3-.3h0v-11c0-.1.1-.3.3-.3h3.3c.1,0,.3.1.3.3h0v11h0Z"/><path class="cls-1" d="M9.7,11c-1.2,0-2-1-2-2s1-2,2-2,2,1,2,2h0c0,1.2-1,2-2,2h0Z"/><path class="cls-1" d="M25.5,23.6c0,.1-.1.3-.3.3h-3.3c-.1,0-.3-.1-.3-.3h0v-5.9c0-1.6-.5-2.5-1.9-2.5s-1.7.5-2,1.4c0,.3-.1.6-.1,1v6.1c0,.1-.1.3-.3.3h-3.3c-.1,0-.3-.1-.3-.3h0v-11c0-.1.1-.3.3-.3h3.3c.1,0,.3.1.3.3h0v1.4c.7-1.3,2-2,3.5-1.9,2.5,0,4.4,1.7,4.4,5.2v6.3h0Z"/></g></g></g></svg>');}
.behance {background-image: url('data:image/svg+xml,<%3Fxml version="1.0" encoding="UTF-8"%3F><svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 32 32"><defs><style> .cls-1 { fill: %23fff; } </style></defs><g><g id="Layer_1"><path class="cls-1" d="M19.1,10.6c0-.1,0-.2.2-.2h4.3c.1,0,.2.1.2.2v1c0,.1-.1.2-.2.2h-4.3c-.1,0-.2-.1-.2-.2h0v-1h0Z"/><path class="cls-1" d="M21.5,13.1c-4.4,0-4.4,4.4-4.4,4.4,0,0-.3,4.4,4.4,4.4,0,0,3.5.2,3.8-2.6h0c0-.3-.2-.5-.4-.5h-1.2c-.2,0-.3.1-.4.3-.1.4-.5.9-1.8.9,0,0-1.7.1-2-1.5h0c0-.3.2-.5.4-.5h5.1c.2,0,.4-.2.4-.4h0c0-1.2-.2-4.6-4-4.6h.1ZM23.3,16.3c0,.1-.1.2-.2.2h-3.2c-.1,0-.2-.2-.2-.3.2-.9,1-1.5,1.9-1.4.9,0,1.7.6,1.7,1.5h0Z"/><path class="cls-1" d="M16,18.2s.1-2.2-1.4-2.7h-.1v-.2c.5-.2,1-.8,1-2,0-2-1.4-3-3.2-3h-5.6c-.2,0-.3.1-.3.3v10.8c0,.2,0,.3.3.3h5.6s3.6.1,3.6-3.4h.1ZM9.1,12.4c0-.1.1-.2.2-.2h3.1s.8,0,.8,1.2-.5,1.4-1,1.4h-2.9c-.1,0-.2,0-.2-.2v-2.1h0ZM12.2,19.6h-2.9c-.1,0-.2,0-.2-.2v-2.6c0-.1,0-.2.2-.2h3.1s1.2,0,1.2,1.6-.9,1.5-1.4,1.5h0Z"/></g></g></svg>')}
.dribbble {background-image: url('data:image/svg+xml,<%3Fxml version="1.0" encoding="UTF-8"%3F><svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 32 32"><defs><style> .cls-1 { fill: %23fff; } </style></defs><g><g id="Layer_1"><path class="cls-1" d="M25.6,15.1c-.4-4.7-4.1-8.3-8.8-8.8-5.3-.5-10,3.4-10.5,8.8s3.4,10,8.8,10.5h1.7c5.3-.5,9.3-5.2,8.8-10.5ZM14.6,8.2c.5,0,.9-.1,1.4-.1,1.8,0,3.5.6,4.9,1.7h0v.2c-1,1.1-2.3,1.9-3.6,2.5h-.2c-.8-1.4-1.6-2.8-2.6-4h0s0-.2.1-.2h0ZM12.5,8.8h.2c1,1.3,2,2.6,2.8,4.1h0s0,.2-.1.2c-2.3.6-4.6.9-6.9.9h0s-.1,0-.1-.2c.6-2.2,2.1-4.1,4.2-5.1h0ZM10,21h-.2c-1.1-1.2-1.7-3-1.8-5,0,0,0-.1.1-.1,2.8,0,5.5-.4,8-1.2h.2c.2.3.3.6.5,1h0v.2c-2.5.8-4.8,2.5-6.8,5h0ZM18.9,23.4c-2.5,1-5.4.6-7.6-1v-.2c1.8-2.4,3.9-3.9,6.2-4.6h.2c.6,1.8,1.1,3.7,1.4,5.5v.2h-.2ZM20.8,22.3h0s-.2,0-.2-.1c-.3-1.6-.7-3.3-1.3-4.8h0c0-.1,0-.2.1-.2,1.4-.1,2.8,0,4.2.3h0s.1,0,.1.2c-.4,1.9-1.4,3.5-3,4.7h.1ZM24,15.6s-.1.1-.2.1c-1.7-.4-3.4-.4-5-.2h-.2c-.2-.4-.4-.8-.6-1.2v-.2c1.5-.7,2.9-1.6,4-2.8h.2c1,1.2,1.5,2.8,1.6,4.3h.2Z"/></g></g></svg>')}
.github {background-image: url('data:image/svg+xml,<%3Fxml version="1.0" encoding="UTF-8"%3F><svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 32 32"><defs><style> .cls-1 { fill: %23fff; } </style></defs><g><g id="Layer_1"><path class="cls-1" d="M18.1,19.8h0c.4.4.8,1.1.8,2.2v2.2c0,1.6-1.3,2.1-2.9,2.1s-2.9-.5-2.9-2v-1.1c-3.2.7-3.9-1.6-3.9-1.6-.5-1.4-1.3-1.7-1.3-1.7-1.1-.7,0-.7,0-.7,1.2,0,1.8,1.2,1.8,1.2,1,1.8,2.7,1.3,3.4,1,.1-.8.4-1.3.7-1.6-2.6-.3-5.3-1.3-5.3-5.8s.5-2.3,1.2-3.1c-.1-.3-.5-1.5.1-3.1,0,0,1-.3,3.2,1.2.9-.3,1.9-.4,2.9-.4s2,.1,2.9.4c2.2-1.5,3.2-1.2,3.2-1.2.6,1.6.2,2.8.1,3.1.7.8,1.2,1.9,1.2,3.1,0,4.5-2.7,5.5-5.3,5.8h.1Z"/></g></g></svg>')}
.youtube {background-image: url('data:image/svg+xml,<%3Fxml version="1.0" encoding="UTF-8"%3F><svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 32 32"><defs><style> .cls-1 { fill: %23fff; } </style></defs><g><g id="Layer_1"><g id="Layer_1-2" data-name="Layer_1"><path class="cls-1" d="M21.3,9.4h-10.7c-2.3,0-4.1,1.8-4.1,4.1v5c0,2.3,1.8,4.1,4.1,4.1h10.7c2.3,0,4.1-1.8,4.1-4.1v-5c0-2.3-1.8-4.1-4.1-4.1ZM18.7,16.2l-4.2,2.3c-.2.1-.3,0-.3-.2v-4.8c0-.2.2-.3.3-.2l4.3,2.5h.1c0,.2,0,.4-.1.5h-.1Z"/></g></g></g></svg>')}
.stackoverflow {background-image: url('data:image/svg+xml,<%3Fxml version="1.0" encoding="UTF-8"%3F><svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 32 32"><defs><style> .cls-1 { fill: %23fff; } </style></defs><g><g id="Layer_1"><g><polygon class="cls-1" points="16.2 8.7 22.3 13.9 21.3 15.1 15.2 10 16.2 8.7"/><polygon class="cls-1" points="13.9 12.1 21.1 15.5 20.4 16.9 13.2 13.6 13.9 12.1 13.9 12.1"/><polygon class="cls-1" points="12.5 15.7 20.3 17.4 20 19 12.2 17.3 12.5 15.7"/><rect class="cls-1" x="12" y="19.4" width="7.9" height="1.6"/><polygon class="cls-1" points="23.1 24.2 8.9 24.2 8.9 17.8 10.5 17.8 10.5 22.6 21.5 22.6 21.5 17.8 23.1 17.8 23.1 24.2 23.1 24.2"/><polygon class="cls-1" points="22.6 13.6 17.9 7.1 19.2 6.2 23.9 12.6 22.6 13.6"/></g></g></g></svg>')}
.twitter {background-image: url('data:image/svg+xml,<%3Fxml version="1.0" encoding="UTF-8"%3F><svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 32 32"><defs><style> .cls-1 { fill: %23fff; } </style></defs><g><g id="Layer_1"><g id="Layer_1-2" data-name="Layer_1"><path class="cls-1" d="M17.9,14.7l6.1-6.9h-2.8l-4.5,5.2-4-5.2h-5.7l6.8,8.9-6.4,7.4h2.8l5-5.7,4.3,5.7h5.5s-7.1-9.4-7.1-9.4ZM10.2,9.4h1.6l9.9,13h-1.5s-9.9-13-9.9-13Z"/></g></g></g></svg>');}
.private {background-image: url('data:image/svg+xml,<%3Fxml version="1.0" encoding="UTF-8"%3F><svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 32 32"><defs><style> .cls-1 { fill: %23fff; } </style></defs><g><g id="Layer_1"><g><path class="cls-1" d="M18.1,21l-2.1,2.1c-1.9,2-5.1,2-7.1,0s-1.9-5.1,0-7.1l2.1-2.1c.4-.4,1-.4,1.4,0s.4,1,0,1.4l-2.1,2.1c-1.2,1.2-1.2,3.1,0,4.2s3.1,1.2,4.2,0l2.1-2.1c.4-.4,1-.4,1.4,0s.4,1,0,1.4h.1Z"/><path class="cls-1" d="M18.8,14.6l-4.2,4.2c-.4.4-1,.4-1.4,0s-.4-1,0-1.4l4.2-4.2c.4-.4,1-.4,1.4,0s.4,1,0,1.4Z"/><path class="cls-1" d="M23.1,16l-2.1,2.1c-.4.4-1,.4-1.4,0s-.4-1,0-1.4l2.1-2.1c1.2-1.2,1.2-3.1,0-4.2s-3.1-1.2-4.2,0l-2.1,2.1c-.4.4-1,.4-1.4,0s-.4-1,0-1.4l2.1-2.1c2-1.9,5.1-1.9,7.1,0,2,1.9,2,5.1,0,7.1h-.1Z"/></g></g></g></svg>')}

.domain {
	font-size: 1.75rem;
	line-height: 2.25rem;
	font-weight: 600;
	margin:0 0 0.75rem;
	color: var(--white);
	}
.category {
	font: var(--heavy);
	color: var(--white);
	width: 100%;
	margin: 0.25rem 0 0;
	padding: 0;
	}
.panel {
	display: flex;
    width: 100%;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 1.5rem;
	padding: 0;
    margin: 0 0 2.5rem;
	max-height: 100%;
	overflow: hidden;
    transition: var(--transition);
	}
.panel.closed {
	max-height: 0;
	margin: 0;
	}	
.group {
	width:100%;
	display: grid;
	grid-column-gap: 4rem;
	grid-row-gap: 2rem;
	padding: 0;
	margin: 0 0 2rem;
	}
#profile .group {
	grid-template-columns: repeat(3, minmax(0, 1fr));
	grid-column-gap: 3rem;
	grid-row-gap: 2rem;
	}
#profile .group.inline {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: flex-start;
	gap: 1rem;
	}
#competences .group {
	grid-template-columns: repeat(4, minmax(0, 1fr));
	}
#profile {
	padding-top: 9rem;
	padding-bottom: 9rem;
	}
#profile content {
	width: 100%;
    display: grid;
    grid-template-columns: 1fr 3fr;
    grid-column-gap: 2rem;
    grid-row-gap: 10rem;
	}
#profile h2 + p {
	position: relative;
	top: -0.75rem;
	}
.comp {
	width:100%;
	display:flex;
    flex-direction: column;
	gap:0.5rem;
    position: relative;
	}
.comp label {
	font: var(--small);
    color: var(--white);
    width: calc(100% - 3rem);
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
	}
.comp .value {
	font-size: 0.875rem;
    color: var(--cloud);
	position: absolute;
	padding-right: 0.875rem;
	top: 0.125rem;
	right: 0;
	}
.comp .value:after {
	content:'%';
	position: absolute;
	top: 0;
	right: 0;
	}
.comp > div:last-child {
	display:block;
	width:100%;
	height:0.25rem;
	border-radius:2px;
	background-color: var(--transparent-12);
    transition: var(--transition);
	}
.comp:hover > div:last-child {
	background-color: var(--transparent-08);
	filter: brightness(150%)
	}
.comp > div:last-child div {
	height:0.25rem;
	border-radius:2px;
	}
.v100 {width:100%; background: linear-gradient(90deg, rgba(120,20,255,1) 0%, rgba(40,250,255,1) 100%);}
.v90 {width:90%; background: linear-gradient(90deg, rgba(120,20,255,1) 0%, rgba(48,227,255,1) 100%);}
.v80 {width:80%; background: linear-gradient(90deg, rgba(120,20,255,1) 0%, rgba(56,204,255,1) 100%);}
.v70 {width:70%; background: linear-gradient(90deg, rgba(120,20,255,1) 0%, rgba(64,181,255,1) 100%);}
.v60 {width:60%; background: linear-gradient(90deg, rgba(120,20,255,1) 0%, rgba(72,158,255,1) 100%);}
.v50 {width:50%; background: linear-gradient(90deg, rgba(120,20,255,1) 0%, rgba(80,135,255,1) 100%);}
.v40 {width:40%; background: linear-gradient(90deg, rgba(120,20,255,1) 0%, rgba(88,112,255,1) 100%);}
.v30 {width:30%; background: linear-gradient(90deg, rgba(120,20,255,1) 0%, rgba(96,89,255,1) 100%);}
.v20 {width:20%; background: linear-gradient(90deg, rgba(120,20,255,1) 0%, rgba(104,66,255,1) 100%);}
.v10 {width:10%; background: linear-gradient(90deg, rgba(120,20,255,1) 0%, rgba(112,43,255,1) 100%);}

.skill {
	font: var(--small);
	width:auto;
	padding: 0.375rem 1rem;
    transition: var(--transition);
	background-color: var(--transparent-08);
	}
.skill:hover {
	background-color: var(--transparent-16);
	}
.skill.selected {
	background-color: var(--primary);
	}
#competences {
	padding-top:120px;
	padding-bottom:120px;
	}
#competences content {
	width: 100%;
    display: grid;
    grid-template-columns: 1fr 4fr;
    grid-column-gap: 2rem;
    grid-row-gap: 10rem;
	}
#competences content .domain {
	position: sticky;
	top: 8rem;
	}
h4.toggle {
	margin: 0;
  	color: var(--secondary);
  	cursor: pointer;
	padding-left:1.5rem;
	position:relative;
	transition: var(--transition);
	border-top: none;
	}
h4.toggle:before, 
h4.toggle.active:before {
    top: 0.0625rem;
  	color: var(--secondary);
	}
h4.toggle:hover,
h4.toggle:hover:before {
  	color: var(--primary);
	}
h4 + p {
	font: var(--small);
	color: var(--cloud);
	margin:0.5rem 0 0;
	}
	
/*---------- SCALE ------------------------------*/

#scale {
	position: fixed;
    bottom: 2rem;
    width: calc(100% - 4rem);
    max-width: 2200px;
    left: 50%;
	height: 0;
    transform: translateX(-50%);
	}
#scale > div {
    position: absolute;
    bottom: 0;
	background-color: var(--transparent-88);
	padding: 0;
	float: left;
	display: flex;
    flex-direction: column;
	gap: 1.5rem;
	border-radius:1.5rem;
	box-shadow: 0.25rem 0.5rem 56px rgba(0,0,0,0.32);
	transition: var(--transition);
	}
#scale.hidden > div {
	padding: 0;
	gap: 0;
	width: auto;
	}
#scale > div img {
	width: 400px;
	height: auto;
	margin: 1rem 1rem 0;
	transition: var(--transition);
	}
#scale.hidden > div img {
	width:0;
	height:auto;
	margin: 0;
	}
#scale > div > div {
	border: 2px solid transparent;
	padding: 0.75rem 1rem;
	border-radius:1.5rem;
	max-width: 7.5rem;
	position: relative;
	white-space: nowrap;
	cursor:pointer;
	color: var(--white);
	transition: var(--transition);
	}
#scale.hidden > div > div {
	border: 2px solid var(--transparent-24);
	padding: 0.75rem 1rem;
	transition: var(--transition);
	}
#scale > div > div:before {
	content: 'Show scale';
	opacity: 0;
	transition: var(--transition);
	}
#scale > div > div:after {
	content: 'Hide scale';
	position: absolute;
	left: 1.25rem;
	opacity: 1;
	transition: var(--transition);
	}
#scale.hidden > div > div:before {
	opacity: 1;
	}
#scale.hidden > div > div:after {
	opacity: 0;
	}
	
/*---------- FOOTER ------------------------------*/

#footer {
	padding-top: 5rem;
	padding-bottom: 5rem;
	border-top: 1px solid var(--transparent-08);
}
#footer p {
	font: var(--small);
	}
#footer ul {
	font: var(--base);
	margin: 1.5rem 0 1.5rem;
	padding: 0;
	display: flex;
	flex-direction: row;
	align-items:center;
	gap: 1.5rem;
	list-style-type: none;
	}
#footer ul li {
	padding: 0;
	}
#footer ul li:last-child {
	padding: 0;
	}

/* - - - - - - - - - - - - - - - - - - - - - - 1280 - - - - - - - - - - - - - - - - - - - - - - */

@media screen and (max-width: 1280px) {

#competences .group {
	grid-template-columns: repeat(3, minmax(0, 1fr));
	}
#profile .group {
	grid-template-columns: repeat(3, minmax(0, 1fr));
	}

}

/* - - - - - - - - - - - - - - - - - - - - - - 1024 - - - - - - - - - - - - - - - - - - - - - - */

@media screen and (max-width: 1024px) {

section {
	padding: 6rem 2rem;
	}
container {
	gap: 8rem
	}
content {
	padding:0;
	gap: 3rem;
	}
.field.half {
    width: 100%;
	}
#competences content {
    grid-template-columns: 1fr;
    grid-row-gap: 2rem;
	}
#competences .group {
	grid-template-columns: repeat(3, minmax(0, 1fr));
	}
#profile .group {
	grid-template-columns: repeat(2, minmax(0, 1fr));
	}

}

/* - - - - - - - - - - - - - - - - - - - - - - 880 - - - - - - - - - - - - - - - - - - - - - - */

@media screen and (max-width: 880px) {

section {
	padding: 7rem 1.5rem;
	}
container {
	gap: 4rem;
	}
content {
	flex-direction: column;
	padding:0;
	gap: 3rem;
	}
.gradient {
	background-size: 200% auto;
	}
#profile content,
#user content.preview {
    grid-template-columns: 1fr;
    grid-row-gap: 4rem;
	}
input[type="range"] {
	height: 0.75rem;
	}
input[type="range"]::-webkit-slider-runnable-track {
	height: 0.75rem;
	}
input[type="range"]::-webkit-slider-thumb {
	width: 0.75rem;
	height: 0.75rem;
	}
input[type="range"]::-moz-range-thumb {
	width: 0.75rem;
	height: 0.75rem;
	}
.mobile-reverse > *:last-child {order:1}
.mobile-reverse > *:first-child {order:2}

/*---------- NAVIGATION ------------------------------*/

#top {
	padding: 1.25rem 1.5rem;
	}
#menu {
	padding: 1.25rem 1.5rem 1.25rem 2rem;
	position:fixed;
	top:0;
	right:-60%;
	transition: all ease 0.3s;
	background-color: var(--transparent-88);
	width:60%;
	height:100vh;
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	gap:6rem;
	align-items: flex-end;
	}
#menu.opened {
	right:0;
	}
#menu ul {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 1rem;
	width: 100%;
	}
#menu ul li a {
	font-size: 1.125rem;
	}
.logo a div img {
	height: 2rem;
	width: auto
	}
.hamburger,
.close {
	display: block;
	}
#scale {
    bottom: 1.5rem;
    width: calc(100% - 3rem);
	}
#competences .group {
	grid-template-columns: repeat(2, minmax(0, 1fr));
	}
#profile .group {
	grid-template-columns: repeat(2, minmax(0, 1fr));
	}
#hero {
	padding: 12rem 1.5rem 7rem !important;
	background-size: 200% auto;
	background-position: bottom center
	}

}

/* - - - - - - - - - - - - - - - - - - - - - - 480 - - - - - - - - - - - - - - - - - - - - - - */

@media screen and (max-width: 480px) {
	
.gradient {
	background-size: 300% auto;
	}
.box {
	padding:1.5rem 1.5rem 1.75rem;
	border-radius:0.5rem;
	}
h1 {
	font-size: 3rem;
	line-height: 3.5rem;
	}
h2 {
	font-size: 1.75rem;
	line-height: 2.25rem;
	}
h3 {
	font-size: 1.25rem;
    line-height: 1.75rem;
    font-weight: 600;
	margin:0 0 1rem;
	color: var(--white);
	}
#menu {
	right:-80%;
	width:80%;
	}
#hero {
	padding: 8rem 1.5rem 7rem !important;
	background-size: 300% auto;
	}
#scale > div img {
	margin:1rem 0 0;
	width: 100%;
	}	
#user h1 {
	font-size: 2rem;
	line-height: 2.5rem;
	}
#competences .group {
	grid-template-columns: repeat(1, minmax(0, 1fr));
	}
#profile .group {
	grid-template-columns: repeat(1, minmax(0, 1fr));
	}
#footer ul {
	flex-direction: column;
	gap: 1rem;
	align-items: flex-start;
	}
.tabs.centered {
	justify-content: flex-start;
	}
}