index.css

@font-face {
  font-family: Chakra;
  src: url(assets/Chakra_Petch/ChakraPetch-Regular.ttf);
}

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

body {
  height: 1100vh;
  width: 100vw;
  background: hsl(209, 23%, 10%);
}

h1,
h2,
h3,
p {
  color: hsl(51, 82%, 98%);
}

#imgProfile {
  position: fixed;
  width: 10vw;
  border-radius: 100%;
  margin: 20vh 45vw;
}
h1 {
  position: fixed;
  top: 50vh;
  width: 100%;
  text-align: center;
  font-size: clamp(2rem, 2vw, 4rem);
}

h2 {
  position: fixed;
  top: 57.5vh;
  width: 100%;
  text-align: center;
  font-size: clamp(1.5rem, 1.5vw, 3rem);
}

p {
  position: fixed;
  top: 70vh;
  width: 100%;
  text-align: center;
  font-size: clamp(1.5rem, 1.5vw, 3rem);
  color: #ff76b6;
}

#title {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  align-content: center;
  justify-content: center;
  width: 100%;
}

#backGround {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
}

#linkedIn {
  height: 10vw;
  width: 10vw;
  border-top: 10vw solid #6d214f;
  border-right: 10vw solid transparent;
  position: absolute;
  top: 0;
  left: 0;
  display: block;
}

#linkedInLogo {
  width: 4vw;
  position: absolute;
  top: 1vw;
  left: 1vw;
}

.hover {
  background-color: pink;
}

#gitHub {
  display: inline-block;
  height: 10vw;
  width: 10vw;
  border-top: 10vw solid #b33771;
  border-left: 10vw solid transparent;
  position: absolute;
  top: 0;
  right: 0;
}

#gitHubLogo {
  width: 5vw;
  position: absolute;
  top: 0.63vw;
  right: 0.63vw;
}

#X {
  display: inline-block;
  height: 10vw;
  width: 10vw;
  border-bottom: 10vw solid #82589f;
  border-left: 10vw solid transparent;
  position: absolute;
  bottom: 0;
  right: 0;
}

#XLogo {
  width: 5vw;
  position: absolute;
  bottom: 0.63vw;
  right: 0.63vw;
}

#mail {
  display: inline-block;
  height: 10vw;
  width: 10vw;
  border-bottom: 10vw solid #d6a2e8;
  border-right: 10vw solid transparent;
  position: absolute;
  bottom: 0;
  left: 0;
}

#mailLogo {
  width: 5vw;
  position: absolute;
  bottom: 0.63vw;
  left: 0.63vw;
}

#CV {
  display: inline-block;
  height: 10vw;
  width: 10vw;
  border-bottom: 10vw solid #f8efba;
  border-left: 10vw solid transparent;
  position: absolute;
  bottom: 0;
  right: 0;
}

#CVLogo {
  width: 5vw;
  position: absolute;
  bottom: 0.63vw;
  right: 0.63vw;
}

#arrow {
  display: inline-block;
  height: 4vw;
  width: 4vw;
  border-bottom: 4vw solid hsl(51, 82%, 98%);
  border-right: 4vw solid transparent;
  position: absolute;
  rotate: -135deg;
  bottom: 49vh;
  right: 5vw;
  opacity: 0;
}

.box {
  display: block;
  height: 100vh;
  width: 100vw;
  margin: 0 0 2vw 0;
}

.text {
  opacity: 0;
  position: fixed;
  width: fit-content;
  font-size: clamp(1.5rem, 1.5vw, 3rem);
}

#first {
  top: 10vh;
  left: 10vw;
}

#second {
  top: 70vh;
  left: 30vw;
}

#third {
  top: 10vh;
  left: 40vw;
}

#forth {
  top: 70vh;
  left: 10vw;
}

#fifth {
  top: 10vh;
  left: 30vw;
}

#sixth {
  top: 30vh;
  left: 60vw;
}

#seventh {
  top: 70vh;
  left: 30vw;
}

body::-webkit-scrollbar {
  display: none;
}

body {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

@media screen and (max-width: 1000px) {
  #imgProfile {
    position: fixed;
    width: 20vw;
    border-radius: 100%;
    margin: 20vh 45vw;
  }

  #linkedIn {
    height: 20vw;
    width: 20vw;
    border-top: 20vw solid #6d214f;
    border-right: 20vw solid transparent;
    position: absolute;
    top: 0;
    left: 0;
    display: block;
  }

  #linkedInLogo {
    width: 8vw;
    position: absolute;
    top: 2vw;
    left: 2vw;
  }

  .hover {
    background-color: pink;
  }

  #gitHub {
    display: inline-block;
    height: 20vw;
    width: 20vw;
    border-top: 20vw solid #b33771;
    border-left: 20vw solid transparent;
    position: absolute;
    top: 0;
    right: 0;
  }

  #gitHubLogo {
    width: 10vw;
    position: absolute;
    top: 1.26vw;
    right: 1.26vw;
  }

  #X {
    display: inline-block;
    height: 20vw;
    width: 20vw;
    border-bottom: 20vw solid #82589f;
    border-left: 20vw solid transparent;
    position: absolute;
    bottom: 0;
    right: 0;
  }

  #XLogo {
    width: 10vw;
    position: absolute;
    bottom: 1.26vw;
    right: 1.26vw;
  }

  #mail {
    display: inline-block;
    height: 20vw;
    width: 2;
    border-bottom: 20vw solid #d6a2e8;
    border-right: 20vw solid transparent;
    position: absolute;
    bottom: 0;
    left: 0;
  }

  #mailLogo {
    width: 10vw;
    position: absolute;
    bottom: 1.26vw;
    left: 1.26vw;
  }

  #arrow {
    display: inline-block;
    height: 8vw;
    width: 8vw;
    border-bottom: 8vw solid hsl(51, 82%, 98%);
    border-right: 8vw solid transparent;
    position: absolute;
    rotate: -135deg;
    bottom: 49vh;
    right: 10vw;
    opacity: 0;
  }
}