@import url('https://fonts.googleapis.com/css2?family=Mountains+of+Christmas&display=swap');

@import url('https://fonts.googleapis.com/css2?family=Luxurious+Script&display=swap');

@import url('https://fonts.googleapis.com/css2?family=Satisfy&display=swap');

body {
  font-family: 'Satisfy', cursive;
  text-align: center;
  font-size: 2rem;
  color: #2E3961;
  background-color: #fff;
}

.title-css, .title-js {
  color: white;
  font-family: 'Mountains of Christmas', cursive;
  position: absolute;
  top: 40px;
  padding: 16px 20px;
  font-size: 4rem;
}

.title-css {
  right: 20px;
  transform: rotate(16deg);
  clip-path: polygon(0% 0, 100% 0%, 95% 90%, 6% 100%);
  background-color: #E8234D;
}

.title-js {
  clip-path: polygon(6% 0, 100% 12%, 96% 100%, 0 88%);
  transform: rotate(-19deg);
  left: -24px;
  background-color: #2E3961;
}

.info {
  width: 60%;
  margin: auto;
  margin-top: 200px;
}

a, a:visited {
  color: white;
  text-decoration: none;
}

.projects {
  color: white;
  font-family: 'Luxurious Script', cursive;
  width: 1110px;
  margin: auto;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
  grid-gap: 50px;
}

.project {
  position: relative;
  width: 155px;
  height: 155px;
  display: grid;
  place-items: center;
  background-color: #E8234D;
  border-radius: 5px;
  box-shadow: 4px 4px 10px 2px black;
  text-shadow: 1px 1px 2px black;
  font-size: 2.5rem;
  transition: ease-out .2s;
  font-size: 3.5rem;
}

.project img {
  width: 150px;
  height: 150px;
  top: 2px;
  left: 2px;
  position: absolute;
  background-color: #fff;
}

.project:hover {
  transform:
  scale(1.12)
  rotate(8deg);
}

.project:hover img {
  transition: .2s;
  transform: scaleX(0);
  transform-origin: left;
}

.outro {
  width: 60%;
  margin: auto;
}

.portfolioLink {
  color: #E8234D !important;
}

.portfolioLink:hover {
  text-decoration: underline;
  transition: .2s;
}

@media (max-width: 800px) {
  .projects {
    width: 100%;
    place-items: center;
    grid-template-columns: 1fr;
  }
}