@charset "utf-8";

  /* HTML + Body styles */

html {
    background: rgb(51, 51, 51) url(cg_back.png);
    font-family: Verdana, Geneva, sans-serif;
    height: 100%;
 }
 
 body {
    display: -webkit-flex;
    display: flex;
    -webkit-flex-flow: row wrap;
    flex-flow: row wrap;
 }

 /* Section Styles */

section {
    background: inherit;
    -webkit-flex: 2 1 421px;
    flex: 2 1 421px; 
    padding: 10px 20px 20px 40px; 
    border: 0.8em solid;
    border-radius: 25px;
    border-color: rgb(25, 181, 254);
    margin-left: 240px;
 }
 
 section h1 {
    font-family: 'Playfair Display', serif;
    font-size: 1.6em;
    margin: 20px 0px 5px;
    color: rgb(232, 126, 4);
 }
 
 section h1 a {
     color: rgb(46, 49, 49);
 }
 
 section > p {
    margin-bottom: 20px;
    padding-bottom: 9px;
    border-bottom: 3px solid rgb(83, 183, 51);
 }

/* Flipcard styles */

.flipcard {
    background-color: transparent;
    width: 250px;
    height: 330px;
    perspective: 1000px;
  }
  
  .flipcard-inner {
    position: relative;
    width: 100%;
    height: 100%;
    text-align: center;
    transition: transform 0.6s;
    transform-style: preserve-3d;
    box-shadow: 0 4px 8px 0 rgb(0,0,0,0.2);
  }
  
  .flipcard:hover .flipcard-inner {
    transform: rotateY(180deg);
  }
  
  .flipcard-front, .flip-card-back {
    position: absolute;
    width: 100%;
    height: 100%;
    backface-visibility: hidden;
  }
  
  .flipcard-front {
    background-color: rgb(232, 232, 232);
    color: black;
  }
  
  .flipcard-back {
    background-color: rgb(41, 241, 195);
    color: white;
    transform: rotateY(180deg);
    height: 100%;
  }

  .flipcard h1 {
    color: rgb(46, 49, 49);
    font-family: 'Playfair Display', serif;
  }

  .flipcard p {
    color: rgb(46, 49, 49);
    font-family: 'Open Sans', sans-serif; 
  }

/* Form Styles */

label {
    display: block;
    float: left;
    clear: left;
    margin: 5px;
    width: 200px;
 }
 
 input, select, textarea {
    display: block;
    float: left;
    margin: 5px 0px;
    width: 200px;
 }
 
 textarea {
    height: 100px;
 }
 
 form p {
    clear: left;
    text-align: center;
    padding-top: 40px;
 }
 
 input[type='submit'] {
    background-color: rgb(213, 184, 255);
    color: rgb(245,245,165);
    border-radius: 20px;
    float: none;
    display: inline;
    font-size: 1.1em;
 }
 
 /* Validation Styles */
input:focus, select:focus, textarea:focus {
    background-color:rgb(245,245,140);
 }
 
 #fnBox:focus:valid, #Lnbox:focus:valid, #addBox:focus:valid, #mailBox:focus:valid, #phoneBox:focus:valid, #idBox:focus:valid {
    background-color:rgb(220,255,220);
    background-image:url("valid.png");
    background-repeat:no-repeat;
    background-position-x:right;
 }
 
 #fnBox:focus:invalid, #Lnbox:focus:invalid, #addBox:focus:invalid, #mailBox:focus:invalid, #phoneBox:focus:invalid, #idBox:focus:invalid {
    background-color:rgb(255,232,232);
    background-image:url("invalid.png");
    background-repeat:no-repeat;
    background-position-x:right;
 }