:root {
  --pageGrey: #212121;
  --lightBlue: #acc0ce;
  --pagePurple: #946E83;
  --pagePink: #fff0fb;
  --pageYellow: #fadf72;
  
  --darkBlue: #42565d;
  --pageGreen: #5f9774;
  --lightGreen: #8ed29c;
  --shadowBlue: #edfff4;
  --grey: #a2a2a2;
}
body {
  margin: 0;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  font-family: sans-serif;
  background-color: var(--lightBlue);
}
.box {
  position: relative;
  width: 200px;
  height: 200px;
  box-sizing:border-box;
  /* background-color: var(--pagePink); */
}
h1 {
  margin: 0;
  padding: 0;
  color: var(--);
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  font-size: 24px;
  text-transform: uppercase;
}
span {
  color: var(--darkBlue);
  font-size: 30px;
}
.box:before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-top: 4px solid var(--pageGreen);
  border-bottom: 4px solid var(--pageGreen);
  box-sizing: border-box;
  transition: all .5s;
  transform: scaleX(0);
}
.box:hover::before {
  transform: scaleX(1);

}
.box::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-right: 4px solid var(--pageGreen);
  border-left: 4px solid var(--pageGreen);
  box-sizing: border-box;
  transition: all .5s;
  transform: scaleX(0);
}
.box:hover::after {
  transform: scaleX(1);
  transition-delay: .2s;

}
.rotated {
  position: absolute;
  width: 100%;
  height: 100%;
  display: block;
  /* background-color: var(--pagePink); */
  transform: rotate(45deg);
  box-sizing: border-box;
  transition: all .5s;
  /* transform: scaleY(0); */
}
.rotated:before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-top: 4px solid var(--pageGreen);
  border-bottom: 4px solid var(--pageGreen);
  box-sizing: border-box;
  transition: all .5s;
  transform: scaleX(0);
}
.box:hover  .rotated:before {
  transform: scaleX(1);
  transition-delay: .4s;

}
.rotated:after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-right: 4px solid var(--pageGreen);
  border-left: 4px solid var(--pageGreen);
  box-sizing: border-box;
  transition: all .5s;
  transform: scaleX(0);
}
.box:hover .rotated:after {
  transform: scaleX(1);
  transition-delay: .6s;

}