@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@100;500&display=swap');
body {
  background-color:#d1ebec;
  font-family: JetBrains Mono, monospace;
  
}

.flip-box {
  display:block;
  margin-left:auto;
  margin-right:auto;
  background-color: transparent;
  width: 300px;
  height: 200px;
  border: 1px solid #f1f1f1;
  perspective: 1000px;
}

.flip-box-inner {
  position: relative;
  width: 100%;
  height: 100%;
  text-align: center;
  transition: transform 0.8s;
  transform-style: preserve-3d;
}

.flip-box:hover .flip-box-inner {
  transform: rotateY(180deg);
}

.flip-box-front, .flip-box-back {
  position: absolute;
  width: 100%;
  height: 100%;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

.flip-box-front {
  background-color:#bbb;
  color:black;
}

.flip-box-back {
  font-family: JetBrains Mono, monospace;
  background: linear-gradient(90deg, #efd5ff 0%, #515ada 100%);
  color: #000;
  transform: rotateY(180deg);
}
  
h2{
  text-align:center;
  margin-top: 50px;
  margin-bottom:50px;
}
 .inside{
   color:Azure;
 }
  
 .button-33 {
  background-color: #c2fbd7;
  border-radius: 50px;
  box-shadow: rgba(44, 187, 99, .2) 0 -25px 18px -14px inset,rgba(44, 187, 99, .15) 0 1px 2px,rgba(44, 187, 99, .15) 0 2px 4px,rgba(44, 187, 99, .15) 0 4px 8px,rgba(44, 187, 99, .15) 0 8px 16px,rgba(44, 187, 99, .15) 0 16px 32px;
  color: green;
  cursor: pointer;
  display: block;
   margin-left:auto;
   margin-right:auto;
   margin-bottom:50px;
   margin-top:50px;
   color:#5468ff;
  font-family: JetBrains Mono, monospace;
  padding: 7px 20px;
  text-align: center;
  text-decoration: none;
  transition: all 250ms;
  border: 0;
  font-size: 16px;
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
}