body {font-family: neat-and-tidy; font-size: 20px; background: url('../img/bg.jpg'); height: 100%; background-position: top-center; background-repeat: no-repeat; background-size: cover; }   

#main { padding: 20px 0; max-width: 720px; }

#preview { padding: 0 20px; }

#bg { background: url('../img/stain_raw.jpg'); height: 100%; background-size: cover; border-radius: 35px 35px 0 0; 

	box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.4); -webkit-box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.4); -moz-box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.4); } 

#inset { margin: 0 8%; } 

#text1 { text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.4); transform-origin: 50% 50%; user-select: none; pointer-events: none; font-family: avocado; color: #fff; }

#text2 { text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.4); transform-origin: 50% 50%; user-select: none; pointer-events: none; font-family: wildcat; color: #fff; }

#logo { width: 300px; margin: 20px 0; }

#options { background-color: #eee; padding: 20px; border: 1px solid #ccc; } 

#copyright { line-height: 22px; }

.social img { width: 35px; opacity: 0.5; margin: 0 5px 12px 5px; }

	

.fontlist { height: 50px; }

.btn { font-size: 20px !important; }

input[type=text] { height: 43px !important; border: 1px solid #ccc; border-radius: 4px; padding-left: 10px; }





/* Fonts */


@font-face { font-family: adorable; src: url('../fonts/adorable.ttf'); }
@font-face { font-family: alchemist; src: url('../fonts/alchemist.ttf'); }
@font-face { font-family: alex-brush; src: url('../fonts/alex-brush.ttf'); }
@font-face { font-family: autery; src: url('../fonts/autery.ttf'); }
@font-face { font-family: autography; src: url('../fonts/autography.otf'); }
@font-face { font-family: avocado; src: url('../fonts/avocado.ttf'); }
@font-face { font-family: bilingual; src: url('../fonts/bilingual.ttf'); }
@font-face { font-family: elementary; src: url('../fonts/elementary.ttf'); }
@font-face { font-family: fairytales; src: url('../fonts/fairytales.ttf'); }
@font-face { font-family: fiesta-town; src: url('../fonts/fiesta-town.ttf'); }
@font-face { font-family: festive; src: url('../fonts/festive.ttf'); }
@font-face { font-family: girl-talk; src: url('../fonts/girl-talk.ttf'); }
@font-face { font-family: gorgeous; src: url('../fonts/gorgeous.ttf'); }
@font-face { font-family: halimun; src: url('../fonts/halimun.ttf'); }
@font-face { font-family: hello-honey; src: url('../fonts/hello-honey.otf'); }
@font-face { font-family: lady-bug; src: url('../fonts/lady-bug.otf'); }
@font-face { font-family: magnolia-sky; src: url('../fonts/magnolia-sky.ttf'); }
@font-face { font-family: masterblush; src: url('../fonts/../fonts/masterblush.ttf'); }
@font-face { font-family: montage; src: url('../fonts/montage.ttf'); }
@font-face { font-family: neat-and-tidy; src: url('../fonts/neat-and-tidy.otf'); }
@font-face { font-family: northern-lights; src: url('../fonts/northern-lights.ttf'); }
@font-face { font-family: oatmeal-cookies; src: url('../fonts/oatmeal-cookies.ttf'); }
@font-face { font-family: october; src: url('../fonts/october.ttf'); }
@font-face { font-family: olivia; src: url('../fonts/olivia.ttf'); }
@font-face { font-family: peachy; src: url('../fonts/peachy.ttf'); }
@font-face { font-family: pink-sprinkles; src: url('../fonts/pink-sprinkles.otf'); }
@font-face { font-family: roboto; src: url('../fonts/roboto.ttf'); }
@font-face { font-family: samantha; src: url('../fonts/samantha.ttf'); }
@font-face { font-family: starstruck; src: url('../fonts/starstruck.ttf'); }
@font-face { font-family: sugar-drop; src: url('../fonts/sugar-drop.ttf'); }
@font-face { font-family: sunshine-market; src: url('../fonts/sunshine-market.ttf'); }
@font-face { font-family: valentino; src: url('../fonts/valentino.ttf'); }
@font-face { font-family: wild-mango; src: url('../fonts/wild-mango.otf'); }
@font-face { font-family: wildcat; src: url('../fonts/wildcat.ttf'); }
@font-face { font-family: wilk; src: url('../fonts/wilk.ttf'); }
@font-face { font-family: willow; src: url('../fonts/willow.ttf'); }











 /* Style the tab */

.tab {

  overflow: hidden;

  border: 1px solid #ccc;

  background-color: #ccc;

}



/* Style the buttons that are used to open the tab content */

.tab button {

  background-color: inherit;

  float: left;

  border: none;

  outline: none;

  cursor: pointer;

  padding: 14px 16px;

  transition: 0.3s;

}



/* Change background color of buttons on hover */

.tab button:hover {

  background-color: #ddd;

}



/* Create an active/current tablink class */

.tab button.active {

  background-color: #f9d2dc;

}



/* Style the tab content */

.tabcontent {

  display: none;

  padding: 1px 12px 30px 12px;

  border: 1px solid #ccc;

  border-top: none;

  background-color: #fff;

} 



.tabcontent {

  animation: fadeEffect 1s; /* Fading effect takes 1 second */

}



/* Go from zero to full opacity */

@keyframes fadeEffect {

  from {opacity: 0;}

  to {opacity: 1;}

}



.tablinks { border-right: 1px solid #ccc !important; }