.body{
  text-align:center;
}

header{
  margin: 0 auto;
  width: 88%;
 
  }
  
  nav ul{
    list-style: none;
    padding: 0;
    display: flex;
  }
  
  nav ul li{
    margin-right: 0.5em;
  }
  
  nav ul li a{
    background-color: rgb(214, 184, 242);
    padding: 0.5em 1em;
    border-radius: 15px;
    text-decoration: none;
  }
  
    .button{
     left:50px;
      margin: 40px;
  background: rgb(8,8,8);
  color: #fff;
  padding: 20px 25px;
  border-radius: 15px;
  border: none;
  font-size: 24px;
  box-shadow: 0 15px rgb(2,2,2);
  transition: 0.25s;
  cursor: pointer;
  }

.button:hover{
  background: rgb(12.12,12);
  }

.button:active{
  transform: translateY(4px);
  box-shadow: 0 5px rgb(12,12,12);
}
  
  .flip{
  position: relative;
  transform-style: preserve-3d;
  transition: 1s;
  }
 
.flip:hover{
  transform: rotateY(180deg);
  }
 
  .front,
  .back{
    backface-visibility: hidden;
    }
   
  .back{
    transform: rotateY(180deg) scaleX(-1);
    position: absolute;
    top: 0;
    left: 0;
    }
     
  .image-size{
    width: 250px;
    height: 370px;
    }
    
    .column {
  float: left;
  width: 25%;
  padding: 15px;
}

/* Clear floats after image containers */
.row::after {
  content: "";
  clear: both;
  display: table;
}

.textbox {
  font-size: 25px;
  
}

.h1 {
  text-align: center;
  font-size: 30px
}

.infobox {
     background-color: rgb(214, 184, 242);
    padding: 0.5em 1em;
    border-radius: 5px;
    
    text-decoration: none;
}

.bg {
     background-color: rgb(0,0,0);
    padding: 4em 2em;
    border-radius: 15px;
    
    text-decoration: none;
}
.infobox2 {
     background-color: rgb(0,0,0);
    padding: 0.5em 1em;
    border-radius: 5px;
    
    text-decoration: none;
    border-style:solid;
    border-color:rgb(255,255,255);
}