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

body {
  background: #000;
  padding-block: calc(0.5rem + 0.7vw);
}

.intro {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  padding-top: calc(2rem + 2vw);
  gap: calc(1rem + 1vw);
}
.intro pre {
  color: #fff;
  font-family: "Raleway", sans-serif;
  width: 100%;
  text-align: center;
  font-size: clamp(1.4rem, 1.6vw, 3rem);
}
.intro img {
  width: calc(10rem + 5vw);
  border-radius: 100%;
}

.about,
.background,
.skills,
.projects {
  background: url(./img/white-paper-texture-blank-cardboard-surface-background-2Y57XA7.jpg);
  background-size: cover;
  border-radius: 20px 0 20px 0;
  padding: calc(0.3rem + 0.3vw) calc(0.4rem + 1vw);
  margin-block: calc(0.4rem + 0.4vw);
}
.about h1,
.background h1,
.skills h1,
.projects h1 {
  font-family: "Charm", cursive;
  width: -moz-fit-content;
  width: fit-content;
  height: -moz-fit-content;
  height: fit-content;
  position: relative;
  font-size: clamp(2rem, 3vw, 4rem);
}
.about p,
.background p,
.skills p,
.projects p {
  font-family: "Merienda", cursive;
  font-size: clamp(1.05rem, 1.2vw, 2.5rem);
  margin-top: calc(0.3rem + 0.3vw);
}
.about div,
.background div,
.skills div,
.projects div {
  font-family: "Merienda", cursive;
}
.about div a,
.background div a,
.skills div a,
.projects div a {
  font-size: clamp(1rem, 1.1vw, 2.5rem);
}
.about div span,
.background div span,
.skills div span,
.projects div span {
  border: 1px solid #000;
  padding: calc(0.05rem + 0.1vw) calc(1rem + 0.5vw);
  font-size: clamp(1.3rem, 1.5vw, 3rem);
  border-radius: 20px;
}

.background div {
  margin: calc(1rem + 0.6vw) 0;
}

.projects div p {
  margin-bottom: calc(0.5rem + 0.3vw);
}

.skills div {
  display: flex;
  flex-wrap: wrap;
}
.skills div p {
  margin: calc(0.2rem + 0.2vw) calc(0.4rem + 0.3vw);
  border: 1px solid #000;
  padding: calc(0.05rem + 0.1vw) calc(1rem + 0.5vw);
  font-size: clamp(0.83rem, 1.2vw, 2.5rem);
  border-radius: 20px;
  width: -moz-fit-content;
  width: fit-content;
}

.extra_projects {
  display: flex;
  flex-direction: column;
  align-items: start;
  justify-content: space-between;
}
.extra_projects .small_projects {
  display: flex;
  flex-direction: column;
}
.extra_projects .small_projects .column {
  display: flex;
}
.extra_projects .small_projects .column div {
  display: flex;
  flex-direction: column;
}
.extra_projects .small_projects a {
  width: -moz-fit-content;
  width: fit-content;
  padding: calc(0.2em + 0.2vw) calc(0.5rem + 0.5vw);
}

footer {
  font-family: "Raleway", sans-serif;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  padding-block: calc(1rem + 1vw);
  gap: calc(1rem + 1vw);
}
footer p {
  text-align: center;
  color: #fff;
  padding-inline: calc(0.5rem + 1vw);
  font-size: clamp(0.9rem, 1.3vw, 2.4rem);
}
footer .container {
  display: flex;
  justify-content: space-evenly;
}
footer .container div {
  display: flex;
  align-items: center;
  margin-inline: calc(0.5rem + 1vw);
  gap: calc(0.2rem + 0.3vw);
}
footer .container div a {
  color: #fff;
  text-decoration: none;
}
footer .container div img {
  width: calc(1.5rem + 1vw);
  height: auto;
  background: #fff;
  border-radius: 100%;
}

@media (min-width: 768px) {
  body {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: repeat(5, auto);
    gap: calc(0.7rem + 0.8vw);
  }
  body .skills, body .intro, body .about, body .background, body .projects {
    margin-block: 0;
  }
  body .intro {
    grid-column: 1/2;
    grid-row: 1/2;
  }
  body .extra_projects {
    flex-direction: row;
  }
  body .about {
    grid-row: 1/2;
    grid-column: 2/5;
  }
  body .skills {
    grid-row: 2/3;
    grid-column: 1/3;
  }
  body .background {
    grid-row: 2/3;
    grid-column: 3/5;
  }
  body .projects {
    grid-row: 4/5;
    grid-column: 1/5;
  }
  body footer {
    grid-row: 5/6;
    grid-column: 1/5;
  }
}
@media (min-width: 1100px) {
  body {
    padding-inline: calc(1.5rem + 1vw);
    display: grid;
    grid-template-columns: repeat(10, 1fr);
    grid-template-rows: repeat(10, auto);
    gap: calc(0.3rem + 0.3vw);
  }
  body .intro {
    grid-column: 1/4;
    grid-row: 1/3;
    border-bottom-right-radius: 70px;
    padding: 20px;
    background: linear-gradient(#000000, #111) padding-box, linear-gradient(45deg, #000, #fff, #000) border-box;
    border: 1px solid transparent;
  }
  body .background {
    grid-row: 3/6;
    grid-column: 1/4;
    border-radius: 0 0 70px 0;
  }
  body .about {
    grid-row: 1/4;
    grid-column: 4/7;
    border-radius: 0 70px 0 0;
  }
  body .skills {
    grid-row: 1/4;
    grid-column: 7/11;
    border-radius: 0 0 0 70px;
  }
  body .projects {
    grid-row: 4/7;
    grid-column: 4/11;
    border-radius: 0 70px 0 0;
  }
  body footer {
    grid-row: 7/11;
    grid-column: 1/11;
  }
}/*# sourceMappingURL=style.css.map */