@import url("./nav.css");
@import url("./main.css");
@import url("./footer.css");
@import url("./animations.css");
@import url("./project.css");
@import url("./certificate-card.css");
@import url("./fonts.css");

@import url("https://fonts.googleapis.com/css2?family=Electrolize&family=Heebo:wght@400;500;600;700&family=JetBrains+Mono:wght@300;400;500&family=Nova+Mono&family=Nunito+Sans:ital,wght@0,200;0,300;0,400;0,500;1,200;1,300&family=Rajdhani:wght@400;500&family=Righteous&family=Roboto:wght@100;300;400;500;700;900&family=Ubuntu+Mono&display=swap");
:root {
  --dark-cyan-blue: #0a192f;
  --lighter-dark-cyan-blue: #11294d;
  --turquoise: #64ffda;
  /* --turquoise: #2e6c5e; */
  --turquoise-500: #40e0d080;
  --turquoise-600: hwb(174 25% 12% / 0.6);
  --turquoise-700: #40e0d0b3;
  --turquoise-800: #40e0d0cc;
  --turquoise-900: rgba(62, 224, 207, 0.9);
  --light-slate: #c5cad8;
  --white-slate: #e6f1ff;
  --slate: #8892b0;
  --slate-900: #8892b0e6;
  --slate-800: #8892b0cc;
  --slate-700: #8892b0b3;
  --slate-600: #8892b099;
  --slate-500: #8892b080;
  --slate-400: #8892b066;
  --slate-300: #8892b04d;
  --bg-p: 17px;
}

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box !important;
  color: var(--slate);
}


body {
  width: fit-content;
  min-width: 100%;
}

h1, h2, h3, h4, h5, h6 {
  font-size: initial;
}

.text-justify {
  text-align: justify;
}

li {
  list-style: none;
}

a {
  text-decoration: none !important;
}

/* Slate */
.text-slate {
  color: var(--slate);
}

a.text-slate {
  transition: color 0.3s ease;
}

a.text-slate:hover {
  color: var(--turquoise);
}

.text-white-slate {
  color: var(--white-slate);
}

.text-light-slate {
  color: var(--light-slate);
}

.text-slate-500 {
  color: var(--slate-500);
}

/* Turquoise */
.text-turquoise {
  color: var(--turquoise);
}
.text-turquoise-800 {
  color: var(--turquoise-800);
}
.text-turquoise-700 {
  color: var(--turquoise-700);
}
.text-turquoise-600 {
  color: var(--turquoise-600);
}
.text-turquoise-500 {
  color: var(--turquoise-500);
}

/* Electrolize Font */
.electrolize-font {
  font-family: "Electrolize";
}
.rajdhani-font {
  font-family: "Rajdhani";
}
.righteous-font {
  font-family: "Righteous";
}
.ubuntu-mono-font {
  font-family: "Ubuntu Mono";
}
.heebo-font {
  font-family: "Heebo", sans-serif;
}

.roboto-mono-font {
  font-family: "Roboto Mono", monospace;
}

.nova-mono-font {
  font-family: "Nova Mono", monospace;
}

.jetbrains-mono-font {
  font-family: "JetBrains Mono", monospace;
  font-weight: 400;
}

.nunito-sans-font {
  font-family: "Nunito Sans", sans-serif;
}

.roboto-font {
  font-family: "Roboto", sans-serif;
}

/*  */

.floating-element {
  width: fit-content;
  background-color: transparent;
  animation: floating 3s ease-in-out infinite;
}

@keyframes floating {
  0% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-20px);
  }
  100% {
    transform: translateY(0);
  }
}



img#laptop-image {
  width: 100%;
}

img[alt="just-me"] {
  transform: translate(0);
}

/* Tech SKill */
.gray-filter {
  filter: grayscale(100%);
  transition: filter 0.2s ease;
}

.gray-filter:hover {
  filter: grayscale(0%);
}


.tech-logo {
  width: 100px;
}

.text-skill::before {
  content: "▸";
  color: var(--turquoise);
}

.text-skill {
  cursor: pointer;
  transition: color 0.1s ease-in;
}

.text-skill:hover {
  color: var(--light-slate);
}

/* Button */
.tech-button {
  width: 100%;
  max-width: 184px;
  border-radius: 8px;
  background-color: var(--dark-cyan-blue);
  color: var(--turquoise);
  border: 1px solid var(--turquoise);
  transition: all 0.2s ease-in;
}

.tech-button a {
  color: var(--turquoise);
  transition: all 0.2s ease-in;
  font-size: 80%;
}

.tech-button:hover {
  box-shadow: 4px 4px 0 0 var(--turquoise);
  transform: translate(-5px, -5px);
}

.list-button {
  background-color: transparent;
  padding: 3px;
  font-size: 28px;
  border: none;
  color: var(--turquoise-700);
  transition: color 0.1s ease;
}

.list-button:hover {
  color: var(--turquoise);
}

.bg-lighter-dark-cyan-blue {
  background-color: var(--lighter-dark-cyan-blue);
}

.border-radius {
  border-radius: 4px;
}

.mask {
  background-color: #64ffdb59;
  transition: all 0.3s ease;
  width: 500px;
  height: 500px;
}

.project-image-container {
  cursor: pointer;
}

.unmask-container {
  cursor: pointer;
}

.unmask-container img {
  filter: grayscale(100);
  transition: all 0.3s ease;
}

.unmask-container:hover img {
  filter: grayscale(0);
}

.mask:hover {
  background-color: transparent;
}

main > section {
  padding: 25px;
}


.b-rad-1 {
  border-radius: 0.4rem;
}


.description {
  max-width: 548px !important;
  /* text-align: justify; */
}

.max-w {
  max-width: 950px !important;
}


/* Pictures */
.profile-picture-container {
  border: 10px;
  position: relative;
  width: 90%;
  aspect-ratio: 1;
  overflow: hidden;
  max-width: 350px;
}
.profile-picture-container img {
  width: 100%;
  height: 100%;
}

/* Large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {
  .lg\:w-75 {
    width: 75%;
  }
  .lg\:w-25 {
    width: 25%;
  }
  .lg\:w-50 {
    width: 50%;
  }
  .lg\:w-100 {
    width: 100%;
  }
  .profile-picture-container {
    min-width: 297px;
  }
  .profile-picture-container img {
    width: 100%;
  }
  .bordered-square-container {
    border-radius: 10px;
    width: 297px;
    height: 340px;
    overflow: hidden;
  }

}


/* Medium devices (desktops, 992px and up) */
@media (min-width: 992px) {
  main > section {
    padding: 0 30px;
  }

  .md\:w-25 {
    width: 25%;
  }
  .md\:w-50 {
    width: 50%;
  }
  .md\:w-75 {
    width: 75%;
  }
  .md\:w-100 {
    width: 100%;
  }
  .profile-picture-container {
    min-width: 297px;
  }
  .profile-picture-container img {
    width: 100%;
  }
  .bordered-square-container {
    border-radius: 10px;
    width: 297px;
    height: 340px;
    overflow: hidden;
  }
}

/* Small devices (tablets, 768px and up) */
@media (min-width: 768px) {
  main > section {
    padding: 0 80px;
  }
  /* Widths */
  .sm\:w-25 {
    width: 25% ;
  }
  .sm\:w-50 {
    width: 50%;
  }
  .sm\:w-75 {
    width: 75%;
  }
  .sm\:w-100 {
    width: 100%;
  }
  .profile-picture-container {
    min-width: 297px;
  }
  .bordered-square-container {
    border-radius: 10px;
    width: 297px;
    height: 340px;
    overflow: hidden;
  }
}