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

@font-face {
  font-family: MarckScript;
  src: url(../add/fonts/MarckScript-Regular.ttf);
}
body {
  background-color: #F6EFE6;
}

.wrapper {
  width: 960px;
  min-height: calc(100vh - 40px);
  margin: 20px auto;
}
.wrapper .wrapper-one {
  height: 300px;
  display: flex;
  flex-flow: row nowrap;
}
.wrapper .wrapper-one .wrapper-one__1 {
  flex: 0 0 384px;
}
.wrapper .wrapper-one .wrapper-one__2, .wrapper .wrapper-one .wrapper-one__3 {
  flex: 0 0 288px;
}
.wrapper .wrapper-one .wrapper-one__1 {
  position: relative;
  display: flex;
  justify-content: end;
  align-items: end;
}
.wrapper .wrapper-one .wrapper-one__1 img {
  opacity: 0.6;
  width: 90%;
  height: 85%;
  object-fit: cover;
  filter: grayscale(100%);
}
.wrapper .wrapper-one .wrapper-one__1 span {
  font-size: 26px;
  color: black;
  transform: rotate(-90deg);
  display: block;
  position: absolute;
  top: 85px;
  right: -75px;
}
.wrapper .wrapper-one .wrapper-one__2, .wrapper .wrapper-one .wrapper-one__3 {
  font-size: 14px;
  word-spacing: 4px;
  padding: 60px 0 0 20px;
  text-align: justify;
}
.wrapper .wrapper-two {
  display: flex;
  flex-flow: row wrap;
}
.wrapper .wrapper-two div {
  height: 192px;
  flex: 0 0 192px;
  padding: 0 0 0 20px;
  color: white;
  background-color: #C57AB0;
}
.wrapper .wrapper-two :nth-child(2), .wrapper .wrapper-two :nth-child(7), .wrapper .wrapper-two :nth-child(12) {
  background-color: #0F2C3F;
}
.wrapper .wrapper-two :nth-child(8), .wrapper .wrapper-two :nth-child(10), .wrapper .wrapper-two :nth-child(13), .wrapper .wrapper-two :nth-child(15) {
  background-color: #ED5E3B;
}
.wrapper .wrapper-two :nth-child(5n+9) {
  background-color: #42C4D8;
}
.wrapper .wrapper-two :nth-child(6) {
  font-size: 24px;
  align-items: start;
}
.wrapper .wrapper-two a {
  font-size: 90px;
  color: white;
  text-decoration: none;
  display: block;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: start;
  align-items: end;
}

.wrapper-one .wrapper-one__1 img:hover + span {
  animation-name: puppy;
  animation-duration: 0.5s;
  animation-timing-function: linear;
  animation-fill-mode: forwards;
}

@keyframes puppy {
  0% {
    transform: rotate(-90deg);
  }
  40% {
    top: -120px;
  }
  100% {
    transform: rotate(0deg);
    right: 145px;
    top: 0px;
    font-weight: 600;
  }
}

/*# sourceMappingURL=style.css.map */