:root {
  --dark-blue: #053b50;
  --light-blue: #176b87;
  --gray: #eeeeee;
  --white: #ffffff;
  --black: #000000;

  --php-stroke-dashoffset: 42.45;
  --js-stroke-dashoffset: 56.6;
  --python-stroke-dashoffset: 127.35;
  --html-stroke-dashoffset: 28.3;
  --css-stroke-dashoffset: 28.3;
  --react-stroke-dashoffset: 84.9;
  --vue-stroke-dashoffset: 70.75;
  --node-stroke-dashoffset: 155.65;
  --express-stroke-dashoffset: 155.65;
  --wp-stroke-dashoffset: 42.45;
}

html,
body {
  overflow-x: hidden !important;
  margin: 0;
  padding: 0;
}

html.typ,
body.typ {
  height: 100%;
}

body {
  font-family: "Nunito Sans", sans-serif;
  font-size: 16px;
  color: var(--black);
}

* {
  box-sizing: border-box;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  color: var(--dark-blue);
}

a {
  color: var(--light-blue);
  text-decoration: none;
}

a:hover {
  color: var(--dark-blue);
}

ul {
  list-style-type: none;
  padding: 0;
}

header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 116px;
  z-index: 1;
  -webkit-box-shadow: 0px -2px 10px 3px rgba(0, 0, 0, 0.25);
  -moz-box-shadow: 0px -2px 10px 3px rgba(0, 0, 0, 0.25);
  box-shadow: 0px -2px 10px 3px rgba(0, 0, 0, 0.25);
}

nav {
  background-color: var(--gray);
  display: flex;
  justify-content: space-between; /* Aligns logo and menu items */
  align-items: center; /* Vertically centers logo and menu items */
  padding: 10px 20px; /* Adjust padding as needed */
}

.logo {
  max-height: 90px; /* Adjust the logo's maximum height */
  margin-right: 20px; /* Add margin to separate the logo from menu items */
}

nav ul {
  list-style: none;
  padding: 0;
  display: flex;
}

nav a {
  text-decoration: none;
  color: var(--light-blue);
  font-weight: bold;
  padding: 10px 20px;
}

nav a.logo-link {
  padding: 0;
}

main {
  padding-top: 116px;
}

body.typ main {
  min-height: calc(100% - 94px);
}

section {
  padding: 20px;
}

section:nth-child(even) {
  background-color: var(--gray);
}

section:nth-child(odd) {
  background-color: var(--white);
}

.animated-element {
  visibility: hidden;
}

.skills-wrapper {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}

.skills-container {
  display: flex;
  flex-direction: column;
}

.skill {
  display: inline-block;
  vertical-align: top;
  text-align: center;
  margin: 20px;
}

.skill-circle {
  position: relative;
  width: 100px;
  height: 100px;
}

.circle-bg {
  fill: none;
  stroke: var(--light-blue);
  stroke-width: 10;
}

.circle {
  width: 100%;
  height: 100%;
  fill: none;
  stroke: var(--dark-blue);
  stroke-width: 10;
  stroke-dasharray: 283;
  stroke-dashoffset: 283;
  stroke-linecap: round;
}

.circle-text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 12px;
  font-weight: bold;
}

.skill-level {
  margin-top: 10px;
  font-weight: bold;
  color: var(--light-blue);
}

.circle-php {
  -webkit-animation: anim_circle-php 1s ease-in-out forwards;
  animation: anim_circle-php 1s ease-in-out forwards;
  visibility: visible;
}

.circle-js {
  -webkit-animation: anim_circle-js 1s ease-in-out forwards;
  animation: anim_circle-js 1s ease-in-out forwards;
  visibility: visible;
}

.circle-python {
  -webkit-animation: anim_circle-python 1s ease-in-out forwards;
  animation: anim_circle-python 1s ease-in-out forwards;
  visibility: visible;
}

.circle-html {
  -webkit-animation: anim_circle-html 1s ease-in-out forwards;
  animation: anim_circle-html 1s ease-in-out forwards;
  visibility: visible;
}

.circle-css {
  -webkit-animation: anim_circle-css 1s ease-in-out forwards;
  animation: anim_circle-css 1s ease-in-out forwards;
  visibility: visible;
}

.circle-react {
  -webkit-animation: anim_circle-react 1s ease-in-out forwards;
  animation: anim_circle-react 1s ease-in-out forwards;
  visibility: visible;
}

.circle-vue {
  -webkit-animation: anim_circle-vue 1s ease-in-out forwards;
  animation: anim_circle-vue 1s ease-in-out forwards;
  visibility: visible;
}

.circle-node {
  -webkit-animation: anim_circle-node 1s ease-in-out forwards;
  animation: anim_circle-node 1s ease-in-out forwards;
  visibility: visible;
}

.circle-express {
  -webkit-animation: anim_circle-express 1s ease-in-out forwards;
  animation: anim_circle-express 1s ease-in-out forwards;
  visibility: visible;
}

.circle-wp {
  -webkit-animation: anim_circle-wp 1s ease-in-out forwards;
  animation: anim_circle-wp 1s ease-in-out forwards;
  visibility: visible;
}

@-webkit-keyframes anim_circle-php {
  to {
    stroke-dashoffset: var(--php-stroke-dashoffset);
  }
}

@keyframes anim_circle-php {
  to {
    stroke-dashoffset: var(--php-stroke-dashoffset);
  }
}

@-webkit-keyframes anim_circle-js {
  to {
    stroke-dashoffset: var(--js-stroke-dashoffset);
  }
}

@keyframes anim_circle-js {
  to {
    stroke-dashoffset: var(--js-stroke-dashoffset);
  }
}

@-webkit-keyframes anim_circle-python {
  to {
    stroke-dashoffset: var(--python-stroke-dashoffset);
  }
}

@keyframes anim_circle-python {
  to {
    stroke-dashoffset: var(--python-stroke-dashoffset);
  }
}

@-webkit-keyframes anim_circle-html {
  to {
    stroke-dashoffset: var(--html-stroke-dashoffset);
  }
}

@keyframes anim_circle-html {
  to {
    stroke-dashoffset: var(--html-stroke-dashoffset);
  }
}

@-webkit-keyframes anim_circle-css {
  to {
    stroke-dashoffset: var(--css-stroke-dashoffset);
  }
}

@keyframes anim_circle-css {
  to {
    stroke-dashoffset: var(--css-stroke-dashoffset);
  }
}

@-webkit-keyframes anim_circle-react {
  to {
    stroke-dashoffset: var(--react-stroke-dashoffset);
  }
}

@keyframes anim_circle-react {
  to {
    stroke-dashoffset: var(--react-stroke-dashoffset);
  }
}

@-webkit-keyframes anim_circle-vue {
  to {
    stroke-dashoffset: var(--vue-stroke-dashoffset);
  }
}

@keyframes anim_circle-vue {
  to {
    stroke-dashoffset: var(--vue-stroke-dashoffset);
  }
}

@-webkit-keyframes anim_circle-node {
  to {
    stroke-dashoffset: var(--node-stroke-dashoffset);
  }
}

@keyframes anim_circle-node {
  to {
    stroke-dashoffset: var(--node-stroke-dashoffset);
  }
}

@-webkit-keyframes anim_circle-express {
  to {
    stroke-dashoffset: var(--express-stroke-dashoffset);
  }
}

@keyframes anim_circle-express {
  to {
    stroke-dashoffset: var(--express-stroke-dashoffset);
  }
}

@-webkit-keyframes anim_circle-wp {
  to {
    stroke-dashoffset: var(--wp-stroke-dashoffset);
  }
}

@keyframes anim_circle-wp {
  to {
    stroke-dashoffset: var(--wp-stroke-dashoffset);
  }
}

.contact-wrapper {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}

.social {
  display: flex;
}

/* Style form elements */
form {
  background-color: var(--gray);
  padding: 20px;
  border: 2px solid var(--dark-blue);
  border-radius: 10px;
  margin: 20px 0;
}

label {
  color: var(--black);
  display: block;
  margin-bottom: 8px;
}

input[type="text"],
input[type="email"],
textarea {
  width: 100%;
  padding: 10px;
  margin-bottom: 15px;
  border: 1px solid var(--dark-blue);
  border-radius: 5px;
  color: var(--black);
}

textarea {
  resize: none;
}

input[type="text"]:focus,
input[type="email"]:focus,
textarea:focus {
  border-color: var(--light-blue);
}

button[type="submit"] {
  background-color: var(--dark-blue);
  color: var(--gray);
  padding: 10px 20px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}

button[type="submit"]:hover {
  background-color: var(--light-blue);
}

/* Style the footer */
footer {
  background-color: var(--dark-blue);
  color: var(--white);
  padding: 20px 0;
  text-align: center;
  position: relative;
  bottom: 0;
}

/* Style footer links if needed */
footer a {
  color: var(--white);
  text-decoration: none;
}

footer a:hover {
  text-decoration: underline;
}

/* Styles for screens between 1024px and 1280px */
@media (max-width: 1280px) {
}

/* Styles for screens between 768px and 1023px */
@media (max-width: 1023px) {
  body {
    font-size: 14px;
  }
}

/* Styles for screens between 576px and 767px */
@media (max-width: 767px) {
  body {
    font-size: 12px;
  }

  header {
    height: 76px;
  }

  .logo {
    max-height: 50px;
  }

  main {
    padding-top: 76px;
  }

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

  .contact-wrapper {
    grid-template-columns: 1fr;
  }

  form {
    margin-top: 0;
  }
}

/* Styles for screens smaller than 576px */
@media (max-width: 575px) {
}