body{
background:#c9d9ce;
color:#4d4d4d;
font-size: 14px;
font-family: 'Open Sans', sans-serif;
}

.whitebox{
    border: 2px solid #aea494;
    background:#fff;
    padding: 25px;
    margin: 50px auto;
    outline: 10px solid #fff;
}

.msbox{
    text-transform:uppercase;
    font-size: 2em;
    text-align:center;
    color:#e2d195;
    line-height: 1.5em;
    letter-spacing: 5px;
}

.rsvp{
    display:none;
}

p{
    text-align:center;
}

p a{
    color:#4d4d4d;
text-decoration:none;
border-bottom: 1px solid #4d4d4d;
}

p a:hover{
    color:#4d4d4d;
text-decoration:none;
border-bottom: 0;
}

h2{
    margin:0 0 25px 0 !important;
    padding:0;    
    font-size: 2em;
    text-align:center;
    color:#aea494;
    font-family: 'Calligraffitti', cursive;
}



@-webkit-keyframes rotate {
  100% {
    transform: rotate(1turn);
  }
}

@keyframes rotate {
  100% {
    transform: rotate(1turn);
  }
}
.rainbow {
  position: relative;
  z-index: 0;
  border-radius: 2px;
  overflow: hidden;
  padding: 2rem;
}
.rainbow::before {
  content: "";
  position: absolute;
  z-index: -2;
  left: -50%;
  top: -50%;
  width: 200%;
  height: 200%;
  background-color: #fff;
  background-repeat: no-repeat;
  background-size: 50% 50%, 50% 50%;
  background-position: 0 0, 100% 0, 100% 100%, 0 100%;
  background-image: linear-gradient(#e2d195, #ebb237), linear-gradient(#cec8bf, #c2bdb5), linear-gradient(#e2d195, #c2bdb5), linear-gradient(#cec8bf, #c2bdb5), linear-gradient(#cec8bf, #c2bdb5);
  -webkit-animation: rotate 10s linear infinite;
          animation: rotate 10s linear infinite;
}
.rainbow::after {
  content: "";
  position: absolute;
  z-index: -1;
  left: 4px;
  top: 4px;
  width: calc(100% - 8px);
  height: calc(100% - 8px);
  background: white;
  border-radius: 2px;
}


.rsvpbox{
    
    outline: 10px solid #ebb237;
}