.box {
  border-radius: 4px;
  border: solid 1px;
  border-color: rgba(0, 0, 0, 0.1);
}

.box > :last-child,
.box > :last-child > :last-child,
.box > :last-child > :last-child > :last-child {
  margin-bottom: 0;
}

.box.alt {
  border: 0;
  border-radius: 0;
  padding: 0;
}

.box2 {
  background-color: #fff;
  margin-bottom: 2em;
  padding: 1.5em;
}

.box-about {
  /* background-color: #343638; */
  /* filter: brightness(2); */
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-radius: 50px;
  width: 100%;
  box-shadow: 2px 2px 2px rgb(0, 0, 0, 0.1);
  padding: 1rem 1rem 1rem 1rem;
}

/* .box-about-unbright {
  filter: brightness(0.5);
} */

.box-about-content {
  padding-left: 3rem;
  padding-right: 3rem;
}

@media screen and (max-width: 1000px) {
  .box-about-content {
    padding-left: 2rem;
    padding-right: 2rem;
  }
}

@media screen and (max-width: 768px) {
  .box-about-content {
    padding-left: 3rem;
    padding-right: 3.5em;
  }
}

@media screen and (max-width: 480px) {
  .box-about-content {
    padding-left: 0.5rem;
    padding-right: 0.5em;
  }
}

.box3 {
  background-color: rgba(227, 213, 198, 0.4);
  color: #2d2d2d;
  border: solid 1px;
  border-color: rgba(0, 0, 0, 0);
  border-radius: 20px;
  margin-bottom: 2em;
  padding: 5% 15%;
}

.box4 {
  background-color: #fff;
  color: #000;
  border: solid 1px;
  border-color: rgba(0, 0, 0, 0);
  border-radius: 20px;
  margin-bottom: 2em;
  padding: 5% 15%;
}

.box5 {
  background-color: #fff;
  color: #000;
  border: solid 1px;
  border-color: rgba(0, 0, 0, 0);
  border-radius: 20px;
  margin-bottom: 2em;
  padding: 5% 15%;
}

@media screen and (max-width: 768px) {
  .box3,
  .box4,
  .box5 {
    padding: 6%;
  }
}

/* Position the front and back side */
.box-front,
.box-back {
  -webkit-backface-visibility: hidden; /* Safari */
  backface-visibility: hidden;
}

/* Style the front side */
.box-front {
  position: absolute;
  padding: 10% 10%;
}

/* Style the back side */
.box-back {
  background-color: #fff;
  padding: 19% 10% 1%;
  transform: rotateY(180deg);
}

@media screen and (max-width: 768px) {
  .box-front {
    padding: 5% 10%;
  }

  .box-back {
    padding: 20% 10% 10%;
  }
}

.wsbox {
  background-color: #fff;
}

.wsboxfront,
.wsboxback {
  transition: 0.5s;
}

.wsboxback {
  position: relative;
  background-color: #fff;
  margin-top: auto;
  margin-bottom: auto;
  padding: 180px 40px 120px;
  display: none;
}

.wsbox:hover .wsboxfront {
  display: none;
}

.wsbox:hover .wsboxback {
  display: block;
}

@media screen and (max-width: 960px) {
  .wsboxback {
    padding: 140px 40px 100px;
  }
}

@media screen and (max-width: 480px) {
  .wsboxback {
    padding: 72px 30px 48px;
  }
}