@import url("https://fonts.googleapis.com/css2?family=Lato&family=Rubik&family=Secular+One&display=swap");

:root {
  --white: #fff;
  --dark1: #34344e;
  --dark2: #3a415a;
  --dark3: #566981;
  --dark4: #89a7b1;
  --dadrk5: #cbdad5;
  --dark6: #2f2f46;
  --cyan: #70e3ea;
}

body {
  background-color: var(--dark1);
  height: 100vh;
  font-family: "Lato", sans-serif;
}

header {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  flex-wrap: wrap;
  padding: 0.5rem;
  padding-right: 2rem;
  background-color: var(--dark6);
  min-height: 50px;
}

nav {
  display: flex;
  gap: 55px;
  justify-content: space-evenly;
  align-items: center;
  flex-wrap: wrap;
}

.navLinks {
  color: var(--white);
}

.navLinks:hover {
  color: var(--dark4);
  transition: 0.4s;
  text-decoration: underline;
}

main {
  display: flex;
  flex-direction: column;
}

.firstSection {
  display: flex;
  justify-content: center;
  gap: 2rem;
  padding: 6rem 2rem;
  flex-wrap: wrap;
  align-items: center;
  min-height: 650px;
}

.firstSection > div {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  min-width: 300px;
}

h1 {
  font-size: 4rem;
  color: var(--white);
  letter-spacing: 8px;
}

h2 {
  font-size: 2rem;
  letter-spacing: 0.2rem;
}

strong {
  color: var(--cyan);
}

.firstSection p {
  color: var(--white);
  font-size: 1rem;
  letter-spacing: 0.1rem;
}

.linkAction,
.projectCards button {
  padding: 0.6rem;
  font-size: 0.9rem;
  border-radius: 6px;
  text-decoration: none;
  text-align: center;
  width: 200px;
  cursor: pointer;
  transition: 0.4s;
  background-color: transparent;
  border: 1px solid var(--white);
  color: var(--white);
}

.linkAction:hover,
.projectCards button:hover {
  background-color: var(--dark3);
  border: 1px solid var(--dark3);
}

.imgProfile {
  width: 400;
  height: 450px;
  border-radius: 12px;
}

.secondSection {
  background-color: var(--dark2);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-around;
  gap: 2rem;
  padding: 1rem;
}

.title {
  color: var(--dadrk5);
  text-align: center;
}

.secondSection ul {
  display: flex;
  gap: 6rem;
  padding: 2rem;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
}

.thirdSection {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 600px;
  padding: 15px;
  gap: 20px;
}

.thirdSection p {
  color: var(--white);
  width: 700px;
  text-align: center;
  letter-spacing: 0.1rem;
  line-height: 1.5rem;
  font-size: 1.1rem;
}

.thirdSection > div {
  display: flex;
  gap: 2rem;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  font-size: large;
}

.fourthSection {
  background-color: var(--dark2);
  display: flex;
  height: 700px;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 20px;
  padding: 30px 10px;
}

.myProjectsList {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}

.splide {
  width: 500px;
  height: 450px;
  border-radius: 12px;
  border: 1px solid var;
}

.projectCards {
  display: flex;
  flex-direction: column;
  gap: 30px;
  padding: 20px 20px;
  width: 500px;
  height: 450px;
  border-radius: 12px;
  background-color: var(--dark6);
  align-items: center;
  justify-content: flex-start;
}

.cardButtons {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.projectCards p {
  color: var(--white);
}

.projectCards .projectText {
  color: var(--white);
}

.projectCards button a {
  color: var(--white);
  text-decoration: none;
}

.projectCards img {
  width: 380px;
  height: 180px;
  border-radius: 10px;
  border: 1px solid black;
}

footer {
  padding: 2rem;
  display: flex;
  gap: 1rem;
  flex-direction: column;
}

footer > div {
  display: flex;
  justify-content: center;
  gap: 2rem;
  flex-wrap: wrap;
  padding: 5px;
}

footer svg:hover path {
  fill: var(--dark3);
  transition: 0.4s;
}

footer p {
  color: var(--white);
}

.backToTop {
  color: var(--white);
  position: fixed;
  bottom: 30px;
  right: 30px;
  visibility: hidden;
}

.backToTop.visible {
  visibility: visible;
}
.backToTop.visible:hover {
  color: var(--dark4);
  transition: 0.4s;
}