@import url('https://fonts.googleapis.com/css2?family=Fira+Code:wght@300;400;500;600;700&display=swap');

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

body {
  width: 100%;
  height: 100%;

  background: #000000;
  --gap: 5em;
  --line: 1px;
  --color: rgba(255, 255, 255, 0.2);

  background-image: linear-gradient(
      -90deg,
      transparent calc(var(--gap) - var(--line)),
      var(--color) calc(var(--gap) - var(--line) + 1px),
      var(--color) var(--gap)
    ),
    linear-gradient(
      0deg,
      transparent calc(var(--gap) - var(--line)),
      var(--color) calc(var(--gap) - var(--line) + 1px),
      var(--color) var(--gap)
    );
  background-size: var(--gap) var(--gap);
}

.section-1{
    width: 100%;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    position: relative;
    z-index: 2;
    gap: 30px;
}

.titulo{
  height: 40px;
  color: white;
  font-size: 40px;
  font-family: 'Fira Code', monospace;
  font-weight: 500;
}
.sobre-1{
  width: 60%;
  color: white;
  font-size: 18px;
  font-family: 'Fira Code', monospace;
  margin-top: 15px;
}
.sobre-2{
  width: 60%;
  color: white;
  font-size: 18px;
  font-family: 'Fira Code', monospace;
}

.container-sociais{
  display: flex;
  gap: 15px;
  margin-top: 15px;
}
.button-instagram svg,
.button-whatsapp svg,
.button-github svg {
  color: white;
  width: 30px;
  height: 30px;
  z-index: 9;
}
.button-instagram,
.button-whatsapp,
.button-github {
  cursor: pointer;
  width: 50px;
  height: 50px;
  border-radius: 50px;
  border: none;
  position: relative;
  z-index: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-left: 10px;
  transition: 0.1s;
}
.button-instagram {
  background: linear-gradient(120deg, #833ab4, #fd1d1d, #fcb045);
}
.button-whatsapp {
  background: linear-gradient(120deg, #02ff2c, #008a12);
}
.button-github {
  background: black;
}

.button-instagram:active,
.button-whatsapp:active,
.button-github:active {
  transform: scale(0.85);
}

.button-instagram::before,
.button-whatsapp::before,
.button-github::before {
  content: "";
  position: absolute;
  width: 55px;
  height: 55px;
  background-color: #212121;
  border-radius: 50px;
  z-index: -1;
  border: 0px solid rgba(255, 255, 255, 0.411);
  transition: 0.4s;
}

.button-instagram:hover::before,
.button-whatsapp:hover::before,
.button-github:hover::before {
  width: 0px;
  height: 0px;
}