@import url("https://fonts.googleapis.com/css2?family=Ubuntu:wght@400;500&display=swap");
/* @import url("https://fonts.googleapis.com/css2?family=Ubuntu&display=swap"); */

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  min-height: 100vh;
  display: block;
  justify-content: center;
  align-items: center;
  background: url(./assets/back.jpg);
  background-repeat: no-repeat;
  background-size: cover;
  transition: 0.5s;
  font-family: "Ubuntu", sans-serif;
  font-weight: 400;
  font-style: normal;
}

body:has(.box[data-color="clr1"]:hover) {
  background: url(./assets/54362.jpg);
  background-repeat: no-repeat;
  background-size: cover;
}
body:has(.box[data-color="clr2"]:hover) {
  background: url(./assets/alok.jpg);
  background-repeat: no-repeat;
  background-size: cover;
}

body:has(.box[data-color="clr3"]:hover) {
  background: url(./assets/2147811240.jpg);
  background-repeat: no-repeat;
  background-size: cover;
}

body:has(.box[data-color="clr4"]:hover) {
  background: url(./assets/2147835077.jpg);
  background-repeat: no-repeat;
  background-size: cover;
}
/* nav */

.navbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: fixed;
  width: 100%;
  top: 0;
  background-color: rgba(26, 31, 44, 0);
  z-index: 1000;
  padding-inline: 5rem;
  backdrop-filter: blur(5px);
}

.logo {
  height: 40px;
}

a {
  color: #000;
  position: relative;
  text-decoration: none;
}

a::before {
  background: #754ffe;
  content: "";
  inset: 0;
  position: absolute;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.5s ease-in-out;
  z-index: -1;
}

a:hover::before {
  transform: scaleX(1);
  transform-origin: left;
}

.nav-links {
  display: flex;
  gap: 2rem;
}

.nav-links a {
  color: white;
  text-decoration: none;
  font-size: 0.9rem;
  text-transform: uppercase;
  font-weight: 800;
}


/* devs */
* {
  font-family: system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  color: white;
  font-size: 12px;
}
.git-i{
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 20px;
}
.git-contributions {
  width: 500x;
  height: 160px;
  padding: 20px;
  margin: 10px;
  border: solid 1px #3d444d;
  border-radius: 10px;

}

.contribute-calendar {
  display: flex;
}

.weeks {
  display: flex;
  flex-direction: column;
  justify-content: start;
  gap: 6px;
  margin-top: 12px;
  margin-left: 4px;
}

.weeks p {
  margin: 0;
}

.months {
  display: flex;
  width: 90%;
  height: 22px;
  gap: 20px;
  margin-left: 38px;
}

.bottom-scale {
  display: flex;
  align-items: center;
  justify-content: end;
  gap: 4px;
  margin-right: 12px;
}

.bottom-scale p {
  margin: 0;
  color: #9198a1;
}

.color-box {
  height: 10px;
  width: 10px;
  border-radius: 2px;
}

.legend-1 {
  background-color: #171c21;
}

.legend-2 {
  background-color: #1f432b;
}
.legend-3 {
  background-color: #2e6b38;
}
.legend-4 {
  background-color: #52a44f;
}
.legend-5 {
  background-color: #6cd064;
}

#led-container {
  padding: 10px;
}
.led-row {
  display: flex;
}
.led {
  width: 6px;
  height: 6px;
  margin: 1.8px;
  border-radius: 20%;
  background-color: #171c21;
}
.led.on-1 {
  background-color: #1f432b;
}
.led.on-2 {
  background-color: #2e6b38;
}
.led.on-3 {
  background-color: #52a44f;
}

.led.on-4 {
  background-color: #6cd064;
}


section {
  overflow: hidden;
  padding-top: 3em;
}

h2 {
  font-family: "Ubuntu", sans-serif;
  font-weight: 400;
  font-style: normal;
  color: #fff;
  font-size: clamp(2rem, 1rem + 4vw, 5rem);
  text-align: center;
  line-height: 1.3;
}

.container {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 40px;
  flex-wrap: wrap;
  padding: 3.25em 0 3em;

  .box {
    position: relative;
    width: 18.75rem;
    height: 18.75rem;
    border-radius: 0.625rem;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: 0.5s;

    .imgBox {
      position: absolute;
      inset: 0;
      border-radius: 0.75rem;
      border: 0.25rem solid rgba(0, 0, 0, 0.2);

      img {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: 0.5s;
        border-radius: 0.625rem;
      }
    }

    .glass {
      position: absolute;
      inset: 0;
      background: linear-gradient(#fff2, transparent);
      border: 0.063rem solid rgba(255, 255, 255, 0.1);
      box-shadow: 0 0.938rem 0.938rem rgba(0, 0, 0, 0.25);
      backdrop-filter: blur(0.938rem);
      border-radius: 0.625rem;
      overflow: hidden;
      scale: 0;
      display: flex;
      justify-content: center;
      align-items: center;
      transition: 0.5s;
      opacity: 0;

      &:before {
        position: absolute;
        content: "";
        bottom: 0;
        width: 100%;
        height: 2.5rem;
        background: rgba(255, 255, 255, 0.05);
      }

      h3 {
        font-size: 1.25rem;
        color: #fff;
        text-transform: uppercase;
        letter-spacing: 0.1em;
        text-align: center;
        line-height: 0.8em;
        font-weight: 500;
      }

      span {
        font-size: 0.5em;
        font-weight: 400;
      }

      ul {
        position: absolute;
        bottom: 0;
        width: 100%;
        display: flex;
        justify-content: center;
        gap: 1rem;

        a {
          color: #fff8;
          font-size: 1.25rem;
          scale: 0;
          transition: 0.25s;
          transition-delay: scale calc(0.2s * var(--i));

          &:hover {
            color: #fff;
          }
        }
      }
    }
    &:hover .imgBox img {
      opacity: 0.5;
    }

    &:hover {
      transform: rotate(-15deg);
    }

    &:hover .glass {
      transform: rotate(20deg);
      scale: 1;
      opacity: 1;
    }

    &:hover ul a {
      scale: 1;
    }
  }
}