@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700&display=swap");

 * {
   margin: 0;
   padding: 0;
   box-sizing: border-box;
   list-style: none;
   text-decoration: none;
   scroll-behavior: smooth;
   scroll-padding-top: 2rem;
   font-family: "Poppins", sans-serif;
 }

/* -------------------------------- 

File#: _1_language-picker
Title: Language Picker
Descr: A custom selector allowing users to choose their preferred language on a page
Usage: codyhouse.co/license

-------------------------------- */
/* reset */
*, *::after, *::before {
  box-sizing: border-box;
}

* {
  font: inherit;
  margin: 0;
  padding: 0;
  border: 0;
}

body {
  background-color: hsl(0, 0%, 100%);
  font-family: system-ui, sans-serif;
  color: hsl(230, 7%, 23%);
  font-size: 1rem;
}

h1, h2, h3, h4 {
  line-height: 1.2;
  color: hsl(230, 13%, 9%);
  font-weight: 700;
}

h1 {
  font-size: 2.0736rem;
}

h2 {
  font-size: 1.728rem;
}

h3 {
  font-size: 1.25rem;
}

h4 {
  font-size: 1.2rem;
}

ol, ul, menu {
  list-style: none;
}

button, input, textarea, select {
  background-color: transparent;
  border-radius: 0;
  color: inherit;
  line-height: inherit;
  appearance: none;
}

textarea {
  resize: vertical;
  overflow: auto;
  vertical-align: top;
}

a {
  color: hsl(250, 84%, 54%);
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

img, video, svg {
  display: block;
  max-width: 100%;
}

@media (min-width: 64rem) {
  body {
    font-size: 1.25rem;
  }

  h1 {
    font-size: 3.051rem;
  }

    h2 {
    font-size: 2.44rem;
  }

    h3 {
    font-size: 1.75rem;
  }

    h4 {
    font-size: 1.5625rem;
  }
}

/* variables */
:root {
  /* colors */
  --li4-color-primary-hsl: 250, 84%, 54%;
  --li4-color-bg-hsl: 0, 0%, 100%;
  --li4-color-contrast-high-hsl: 230, 7%, 23%;
  --li4-color-contrast-higher-hsl: 230, 13%, 9%;
  --li4-color-bg-light-hsl: 0, 0%, 100%;
  --li4-color-white-hsl: 0, 0%, 100%;
  --li4-color-bg-dark-hsl: 240, 4%, 95%;
  --li4-color-bg-lighter-hsl: 0, 0%, 100%;
  --li4-color-black-hsl: 230, 13%, 9%;

  /* spacing */
  --li4-space-3xs: 0.25rem;
  --li4-space-2xs: 0.375rem;
  --li4-space-xs: 0.5rem;
  --li4-space-sm: 0.75rem;
}

@media(min-width: 64rem){
  :root {
    /* spacing */
    --li4-space-3xs: 0.375rem;
    --li4-space-2xs: 0.5625rem;
    --li4-space-xs: 0.75rem;
    --li4-space-sm: 1.125rem;
  }
}

/* buttons */
.li4-btn {
  position: relative;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  font-size: 1em;
  white-space: nowrap;
  text-decoration: none;
  background: hsl(var(--li4-color-bg-dark-hsl));
  color: hsl(var(--li4-color-contrast-higher-hsl));
  cursor: pointer;
  text-decoration: none;
  line-height: 1.2;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  transition: all 0.2s ease;
  will-change: transform;
  padding: var(--li4-space-2xs) var(--li4-space-sm);
  border-radius: 0.25em;
}

.li4-btn:focus-visible {
  box-shadow: 0px 0px 0px 2px hsl(var(--li4-color-bg-hsl)), 0px 0px 0px 4px hsla(var(--li4-color-contrast-higher-hsl), 0.15);
  outline: none;
}

.li4-btn:active {
  transform: translateY(2px);
}

.li4-btn--subtle {
  background: hsl(var(--li4-color-bg-lighter-hsl));
  color: hsl(var(--li4-color-contrast-higher-hsl));
  box-shadow: inset 0px 1px 0px hsla(var(--li4-color-white-hsl), 0.1), 0px 0px 0px 1px hsla(var(--li4-color-black-hsl), 0.02), 0px 1px 3px -1px hsla(var(--li4-color-black-hsl), 0.2), 0 0.3px 0.4px rgba(0, 0, 0, 0.025),0 0.9px 1.5px rgba(0, 0, 0, 0.05), 0 3.5px 6px rgba(0, 0, 0, 0.1);
}

.li4-btn--subtle:hover {
  background: hsl(var(--li4-color-bg-light-hsl));
  box-shadow: inset 0px 1px 0px hsla(var(--li4-color-white-hsl), 0.1), 0px 0px 0px 1px hsla(var(--li4-color-black-hsl), 0.02), 0px 1px 3px -1px hsla(var(--li4-color-black-hsl), 0.2), 0 0.1px 0.3px rgba(0, 0, 0, 0.06),0 1px 2px rgba(0, 0, 0, 0.12);
}

.li4-btn--subtle:focus {
  box-shadow: inset 0px 1px 0px hsla(var(--li4-color-white-hsl), 0.1), 0px 0px 0px 1px hsla(var(--li4-color-black-hsl), 0.02), 0px 1px 3px -1px hsla(var(--li4-color-black-hsl), 0.2), 0 0.1px 0.3px rgba(0, 0, 0, 0.06),0 1px 2px rgba(0, 0, 0, 0.12), 0px 0px 0px 2px hsl(var(--li4-color-bg-hsl)), 0px 0px 0px 4px hsl(var(--li4-color-contrast-high-hsl));
}

.li4-icon {
  height: var(--li4-size, 1em);
  width: var(--li4-size, 1em);
  display: inline-block;
  color: inherit;
  fill: currentColor;
  line-height: 1;
  flex-shrink: 0;
  max-width: initial;
}

/* component */
:root {
  --picker-vertical-gap: 4px;
}

.language-picker {
  display: inline-block;
  position: relative;
}

.language-picker__form {
  display: none;
}

.language-picker__button .li4-icon {
  height: 16px;
  width: 16px;
}
.language-picker__button .li4-icon:first-of-type {
  margin-right: var(--li4-space-3xs);
}
.language-picker__button .li4-icon:last-of-type {
  margin-left: var(--li4-space-3xs);
}

.language-picker__dropdown {
  position: absolute;
  left: 0;
  top: 100%;
  width: 200px;
  background-color: hsl(var(--li4-color-bg-light-hsl));
  box-shadow: inset 0 0 0.5px 1px hsla(0, 0%, 100%, 0.075), 0 0.9px 1.5px rgba(0, 0, 0, 0.03),0 3.1px 5.5px rgba(0, 0, 0, 0.08),0 14px 25px rgba(0, 0, 0, 0.12);
  padding: var(--li4-space-3xs) 0;
  border-radius: 0.25em;
  z-index: 5;
  margin-top: var(--picker-vertical-gap);
  margin-bottom: var(--picker-vertical-gap);
  --space-unit: 1rem;
  --text-unit: 1rem;
  font-size: var(--text-unit);
  visibility: hidden;
  opacity: 0;
  transition: visibility 0s 0.2s, opacity 0.2s;
}

.language-picker__dropdown--right {
  right: 0;
  left: auto;
}

.language-picker__dropdown--up {
  bottom: 100%;
  top: auto;
}

.language-picker__button[aria-expanded=true] + .language-picker__dropdown {
  visibility: visible;
  opacity: 1;
  transition: visibility 0s, opacity 0.2s;
}

.language-picker__item {
  display: flex;
  align-items: center;
  text-decoration: none;
  padding: var(--li4-space-2xs) var(--li4-space-sm);
  color: hsl(var(--li4-color-contrast-high-hsl));
  transition: background 0.2s;
}
.language-picker__item span {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.language-picker__item:hover {
  background-color: hsla(var(--li4-color-contrast-higher-hsl), 0.075);
}
.language-picker__item:focus {
  outline: none;
  background-color: hsla(var(--li4-color-primary-hsl), 0.1);
}
.language-picker__item[aria-selected=true] {
  position: relative;
  background-color: hsl(var(--li4-color-primary-hsl));
  color: hsl(var(--li4-color-white-hsl));
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.language-picker__item[aria-selected=true]:focus {
  outline: 2px solid hsla(var(--li4-color-primary-hsl), 0.2);
}
.language-picker__item[aria-selected=true]::after {
  content: "";
  height: 16px;
  width: 16px;
  background-color: currentColor;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpolyline stroke-width='2' stroke='%23ffffff' fill='none' stroke-linecap='round' stroke-linejoin='round' points='1,9 5,13 15,3 '/%3E%3C/svg%3E");
          mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpolyline stroke-width='2' stroke='%23ffffff' fill='none' stroke-linecap='round' stroke-linejoin='round' points='1,9 5,13 15,3 '/%3E%3C/svg%3E");
  margin-left: auto;
}

.language-picker__flag {
  display: flex;
  align-items: center;
}
.language-picker__flag::before {
  display: none;
  flex-shrink: 0;
  content: "";
  height: 16px;
  width: 16px;
  margin-right: var(--li4-space-2xs);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
}
.language-picker__dropdown .language-picker__flag::before {
  margin-right: var(--li4-space-xs);
}

.language-picker--flags .language-picker__flag::before {
  display: inline-block;
  display: inline-flex;
}
.language-picker--flags .language-picker__button .li4-icon:first-of-type {
  display: none;
}

.language-picker__flag--deutsch::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Cpath d='M48,18H0V8c0-1.105,0.895-2,2-2h44c1.105,0,2,0.895,2,2V18z'/%3E%3Crect y='18' fill='%23EE0000' width='48' height='12'/%3E%3Cpath fill='%23FDCF00' d='M48,40c0,1.105-0.895,2-2,2H2c-1.105,0-2-0.895-2-2V30h48V40z'/%3E%3C/svg%3E");
}

.language-picker__flag--english::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Cpath fill='%23002781' d='M46,6H2C0.896,6,0,6.896,0,8v32c0,1.104,0.896,2,2,2h44c1.104,0,2-0.896,2-2V8C48,6.896,47.104,6,46,6z'/%3E%3Cpath fill='%23E6E6E6' d='M48,8c0-1.104-0.896-2-2-2h-5.161L28,15.876V6h-8v9.876L7.161,6H2C0.896,6,0,6.896,0,8v2.586L12.239,20H0v8 h12.239L0,37.415V40c0,1.104,0.896,2,2,2h5.161L20,32.124V42h8v-9.876L40.839,42H46c1.104,0,2-0.896,2-2v-2.585L35.761,28H48v-8 H35.761L48,10.586V8z'/%3E%3Cpolygon fill='%23D10D24' points='48,22 26,22 26,6 22,6 22,22 0,22 0,26 22,26 22,42 26,42 26,26 48,26 '/%3E%3Cpath fill='%23D10D24' d='M47.001,6.307L29.2,20h3.28L48,8.062V8C48,7.268,47.587,6.656,47.001,6.307z'/%3E%3Cpath fill='%23D10D24' d='M32.48,28H29.2l17.801,13.693C47.587,41.344,48,40.732,48,40v-0.062L32.48,28z'/%3E%3Cpath fill='%23D10D24' d='M15.52,28L0,39.938V40c0,0.732,0.413,1.344,0.999,1.693L18.8,28H15.52z'/%3E%3Cpath fill='%23D10D24' d='M15.52,20h3.28L0.999,6.307C0.413,6.656,0,7.268,0,8v0.062L15.52,20z'/%3E%3C/svg%3E");
}

.language-picker__flag--francais::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Cpath fill='%2301209F' d='M16,42H2c-1.105,0-2-0.895-2-2V8c0-1.105,0.895-2,2-2h14V42z'/%3E%3Cpath fill='%23EF4234' d='M48,40c0,1.105-0.895,2-2,2H32V6h14c1.105,0,2,0.895,2,2V40z'/%3E%3Crect x='16' y='6' fill='%23E6E6E6' width='16' height='36'/%3E%3C/svg%3E");
}

.language-picker__flag--italiano::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Cpath fill='%23009345' d='M16,42H2c-1.105,0-2-0.895-2-2V8c0-1.105,0.895-2,2-2h14V42z'/%3E%3Cpath fill='%23CF2B36' d='M48,40c0,1.105-0.895,2-2,2H32V6h14c1.105,0,2,0.895,2,2V40z'/%3E%3Crect x='16' y='6' fill='%23E6E6E6' width='16' height='36'/%3E%3C/svg%3E");
}

.language-picker--hide-label .language-picker__button .li4-icon {
  margin-left: 0;
}
.language-picker--hide-label .language-picker__button .li4-icon:first-of-type {
  display: none;
}
.language-picker--hide-label .language-picker__button em {
  display: none;
}
.language-picker--hide-label .language-picker__button .language-picker__flag::before {
  margin-right: var(--li4-space-3xs);
}

.language-picker--hide-label .language-picker__flag::before {
  display: inline-block;
  display: inline-flex;
}

/* utility classes */
.li4-sr-only {
  position: absolute;
  clip: rect(1px, 1px, 1px, 1px);
  clip-path: inset(50%);
  width: 1px;
  height: 1px;
  overflow: hidden;
  padding: 0;
  border: 0;
  white-space: nowrap;
}

.rightPosition{
margin-left:10px;
margin-right:10px;
}

 :root {
   --main-color: #033a80;
   --bg-color: #fff;
   --text-color: #0f0c27;
   --hover: hsl(260, 100%, 51%);
   --big-font: 3.2rem;
   --medium-font: 1.8rem;
   --p-font: 0.941rem;
 }

 section {
   padding: 50px 10%;
 }

 body.active {
   --text-color: #fff;
   --bg-color: #1c1c20;
 }

 body {
   background: var(--bg-color);
   color: var(--text-color);
 }

 *::selection {
   color: var(--bg-color);
   background: var(--main-color);
 }

 .heading {
   text-align: center;
 }

 .heading h2 {
   font-size: 30px;
 }

 .heading span {
   font-size: var(--p-font);
   color: rgb(2, 166, 70);
 }

 header {
   position: fixed;
   width: 100%;
   top: 0;
   right: 0;
   z-index: 1000;
   display: flex;
   align-items: center;
   justify-content: space-between;
   background: var(--bg-color);
   padding: 13px 10%;
   transition: 0.2s;
   box-shadow: -3px -3px 7px #ffffff73,
     2px 2px 5px rgba(94, 104, 121, 0.288);
 }

 header.shadow {
   box-shadow: 0 0 4px rgb(14 55 54 / 15%);
 }

 .logo {
   font-size: 1.61rem;
   font-weight: 600;
   color: var(--text-color);
 }

 .logo span {
   font-size: 1.61rem;
   font-weight: 600;
   color: crimson;
 }

 .navbar {
   display: flex;
 }

 .navbar a {
   font-size: 1rem;
   padding: 10px 20px;
   color: var(--text-color);
   font-weight: 500;
 }

 .navbar a:hover {
   color: var(--hover);
 }

 #menu-icon {
   font-size: 24px;
   cursor: pointer;
   z-index: 10001;
   display: none;
 }

 #darkmode {
   font-size: 22px;
   cursor: pointer;
 }

 .home {
   position: relative;
   width: 100%;
   min-height: 100vh;
   display: grid;
   grid-template-columns: 0.2fr 1fr 1fr;
   align-items: center;
   gap: 1rem;
 }

 .home-img {
   order: 3;
 }

 .home-img img {
   width: 100%;
 }

 .home-text span {
   font-size: var(--medium-font);
   font-weight: 500;
 }

 .home-text h1 {
   font-size: var(--big-font);
 }

 .home-text h2 {
   font-size: 1.1rem;
   font-weight: 400;
 }

 .home-text p {
   font-size: var(--p-font);
   font-weight: 400;
   margin: 0.7rem 0 1rem;
 }

 .social {
   display: flex;
   flex-direction: column;
 }

 .social a {
   margin-bottom: 1rem;
   font-size: 22px;
   color: var(--text-color);
 }

 .social a:hover {
   color: var(--hover);
 }

 .btn {
   display: inline-block;
   background: var(--main-color);
   color: #fff;
   padding: 0.7rem 1.3rem;
   border-radius: 0.5rem;
 }

 .btn:hover {
   background: var(--hover);
 }


 .about-container {
   display: grid;
   grid-template-columns: repeat(2, 1fr);
   gap: 1rem;
   margin-top: 2rem;
 }

 .about-img img {
   width: 80%;
   border-radius: 0.5rem;
 }

 .about-text p {
   font-size: var(--p-font);
   font-weight: 400;
   text-align: justify;
 }

 .information {
   margin: 1rem 0 1.4rem;
 }

 .information .info-box {
   display: flex;
   align-items: center;
   margin-bottom: 1.4rem;
 }

 .information .info-box .bx {
   font-size: 22px;
 }

 .information .info-box span {
   font-weight: 400;
   margin-left: 1rem;
 }

 .skills-container {
   display: grid;
   grid-template-columns: repeat(2, 1fr);
   align-items: center;
   gap: 2rem;
   margin-top: 4rem;
 }

 .skills-img img {
   width: 80%;
   padding-left: 4rem;
   object-position: center;
 }

 .bars-box {
   position: relative;
   display: flex;
   justify-content: space-between;
   align-items: center;
   padding: 1rem 0;
   margin-bottom: 1rem;
 }

 .bars-box h3,
 span {
   font-size: 1.1rem;
   font-weight: 500;
 }

 .light-bar {
   position: absolute;
   bottom: 0;
   left: 0;
   width: 100%;
   height: 0.5rem;
   background: hsla(260, 100%, 44%, 0.4);
   border-radius: 0.5rem;
 }

 .percent-bar {
   position: absolute;
   bottom: 0;
   left: 0;
   height: 0.5rem;
   background: var(--main-color);
   border-radius: 0.5rem;
 }

 .html-bar {
   width: 94%;
 }

 .css-bar {
   width: 84%;
 }

 .js-bar {
   width: 74%;
 }

 .react-bar {
   width: 80%;
 }

 .services-content {
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(200px, auto));
   justify-content: center;
   gap: 1rem;
   margin-top: 2rem;
 }

 .services-box {
   padding: 20px;
   width: 260px;
   display: flex;
   flex-direction: column;
   align-items: center;
   text-align: center;
   border-radius: 0.5rem;
   border-bottom: 2px solid var(--main-color);
   box-shadow: 0 2px 7px rgb(14 55 54 / 15%);
 }

 .services-box:hover {
   background-color: #02225a;
 }

 .services-box h3 {
   font-size: 1rem;
   font-weight: 600;
   margin: 0.7rem 0 0.4rem;
 }

 .services-box:hover h3 {
   color: #fff;
 }

 .services-box .bx {
   padding-top: 2rem;
   font-size: 54px;
   color: var(--main-color);
 }

 .services-box:hover .bx {
   color: #22cf91;
 }

 .services-box a {
   color: var(--main-color);
   font-size: var(--p-font);
   font-weight: 500;
 }

 .services-box:hover a {
   color: #8b8a8f;
 }

 .contact-form {
   display: grid;
   place-items: center;
   margin-top: 2rem;
 }

 .contact-form form {
   display: flex;
   flex-direction: column;
   width: 650px;
 }

 form input,
 textarea {
   padding: 15px;
   border-radius: 0.5rem;
   width: 100%;
   border: none;
   outline: none;
   background: hsla(260, 100%, 44%, 0.1);
   margin-bottom: 1rem;
   color: var(--text-color);
 }

 form input::placeholder,
 textarea::placeholder {
   color: var(--text-color);
 }

 form textarea {
   resize: none;
   height: 200px;
 }

 .contact-button {
   width: 160px;
   cursor: pointer;
   background: #2768d9;
   color: #fff;
   justify-content: center;
   text-transform: uppercase;
   letter-spacing: 1px;
   margin-left: 35%;
 }

 .contact-button:hover {
   background: var(--hover);
 }

 .footer {
   display: grid;
   place-items: center;
   padding: 20px;
   color: #000;
 }

 .footer h2 {
   font-size: 1.5rem;
   margin-bottom: 1.6rem;
   color: var(--text-color)
 }

 .footer-social a i {
   color: rgb(10, 26, 208);
   font-size: 25px;
   margin-left: 10px;
   text-align: center;
   line-height: 40px;
   background-color: #fff;
   border-radius: 50%;
   width: 40px;
   height: 40px;
 }

 .copyright {
   padding: 20px;
   background: var(--main-color);
   text-align: center;
   color: #fff;
 }

 .copyright a {
   color: #22cf91;
 }

span,h1,h2,h3{
  color: var(--text-color)
}

 /* For Mobile */
 @media (max-width: 991px) {
   header {
     padding: 18px 4%;
   }

   section {
     padding: 50px 4%;
   }
 }

 @media (max-width: 881px) {
   :root {
     --big-font: 2.7rem;
     --medium-font: 1.4rem;
   }
 }

 @media (max-width: 768px) {
   :root {
     --big-font: 2.4rem;
     --medium-font: 1.2rem;
   }

   header {
     padding: 11px 4%;
   }

   #menu-icon {
     display: initial;
     color: var(--text-color);
   }

   header .navbar {
     position: absolute;
     top: -500px;
     left: 0;
     right: 0;
     display: flex;
     flex-direction: column;
     background: var(--bg-color);
     box-shadow: 0 4px 4px rgb(0 0 0 / 10%);
     transition: 0.2s ease;
     text-align: center;
   }

   .navbar.active {
     top: 100%;
   }

   .navbar a {
     padding: 1.5rem;
     display: block;
     background: var(--bg-color);
   }

   #darkmode {
     position: absolute;
     top: 1.4rem;
     right: 2rem;
   }

   .scroll-down {
     display: none;
   }

   .home {
     grid-template-columns: 0.5fr 3fr;
   }

   .home-text {
     grid-column: 1/3;
     padding-left: 1.4rem;
   }

   .home-img {
     order: initial;
   }

   .about-container {
     grid-template-columns: 1fr;
   }

   .about-img {
     display: flex;
     justify-content: center;
   }

   .skills-container {
     grid-template-columns: 1fr;
   }

   .skills-img img {
     padding-left: 0;
   }

   .skills-img {
     padding-top: 2rem;
     display: flex;
     justify-content: center;
   }

   .contact-form form {
     width: 300px;
   }

   .contact-button {
     margin-left: 25%;
   }
 }

 @media (max-width: 340px) {
   :root {
     --big-font: 1.7rem;
     --medium-font: 1.1rem;
   }

   .home-text span {
     font-size: 1rem;
   }

   .home-text h2 {
     font-size: 0.9rem;
     font-weight: 500;
   }

   .information .info-box span {
     font-size: 1rem;
   }

   .contact-form form {
     width: 300px;
   }

   .contact-button {
     margin-left: 25%;
   }
 }