/*Feel free to use whatever you like! Have fun*/

html, body {
  height: 100%;
  margin: 0;
  color: #FFF;
  font-family:"Trebuchet MS", Helvetica, sans-serif;
}

a {
  text-decoration:none;
  color: #6666CC;
}

a:active {
  text-decoration:none;
}

a:visited {
  text-decoration:none;
  color: #99FFFF;
}

/* Stripes */
#stripe-background {
min-height: 100%;
  margin:none;
  background-image: 
    repeating-linear-gradient(
      -45deg, 
      #7FFFD4, 
      #7FFFD4 30px,
      #000 1px,
      #000 70px
    );
  background-size: 200% 200%;
}

main {
  width: 784px;
  display: grid;
  grid-template-columns: 246px 70px 156px 156px 156px;
  grid-template-rows: 130px 63px 123px 64px 26px;
  padding-bottom: 40px;
  grid-template-areas:
   ". . . . ."
   "int int abt gst gst"
   "int int abt blg glr"
   "lnk crn crn blg glr"
   "lnk crn crn att att";
}

/*Menu items*/
#intro {
  grid-area: int;
  background: #000;
  border-style: dotted;
  margin: 0;
  padding: 5px;
  color: #99FFFF;
  border-radius: 10px;
}

/* intro text */
.hello {
  display: inline-block;
  color:white;
  
  background: #acacac -webkit-gradient(linear, 100% 0, 0 0, from(#acacac), color-stop(0.5, #ffffff), to(#acacac));
  
  background-position: -4rem top; /*50px*/
  background-repeat: no-repeat;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  -webkit-animation-name: shimmer;
  -webkit-animation-duration: 2.2s;
  -webkit-animation-iteration-count: infinite;
  -webkit-background-size: 4rem 100%; /*50px*/
  
}

@-webkit-keyframes shimmer {
    0% {
        background-position: -4rem top; /*50px*/
    }

    70% {
        background-position: 12.5rem top; /*200px*/
    }

    100% {
        background-position: 12.5rem top; /*200px*/
    }
}

#about {
  grid-area: abt;
  background: #000;
  border-style: double;
  margin: 0;
  padding: none;
  color: #6666CC;
}

/* flip effect */
.flip-container {
	perspective: 1000px;
}
	/* flip the pane when hovered */
	.flip-container:hover .flipper, .flip-container.hover .flipper {
		transform: rotateY(180deg);
	}

.flip-container, .front, .back {
	width: 150px;
	height: 180px;
}

.flipper {
	transition: 0.6s;
	transform-style: preserve-3d;

	position: relative;
}

.front, .back {
	backface-visibility: hidden;

	position: absolute;
	top: 0;
	left: 0;
}

/* front pane, placed above back */
.front {
	z-index: 2;
	/* for firefox 31 */
	transform: rotateY(0deg);
}

.back {
	transform: rotateY(180deg);
}

#guestbook {
  grid-area: gst;
  background: #000;
  border-style: inset;
  margin: 0;
  padding: none;
  color: #FF99CC;
}

/* guestbook text*/

.gstbk {
  -webkit-box-sizing: content-box;
  -moz-box-sizing: content-box;
  box-sizing: content-box;
  cursor: pointer;
  border: none;
  font: normal normal bold 50px/normal "Courier New", Courier, monospace;
  color: rgba(0, 0, 0, 0);
  text-align: center;
  -o-text-overflow: clip;
  text-overflow: clip;
  text-shadow: 3px 0 0 #f9626f , 6px 0 0 #f2aa8a , 9px 0 0 rgba(252,241,161,1) , 12px 0 0 rgba(124,244,176,1) , 15px 0 0 rgb(2,135,206) , 18px 0 0 rgb(4,77,145) , 21px 0 0 rgb(42,21,113) ;
  -webkit-transition: all 600ms cubic-bezier(0.68, -0.55, 0.265, 1.55);
  -moz-transition: all 600ms cubic-bezier(0.68, -0.55, 0.265, 1.55);
  -o-transition: all 600ms cubic-bezier(0.68, -0.55, 0.265, 1.55);
  transition: all 600ms cubic-bezier(0.68, -0.55, 0.265, 1.55);
  -webkit-transform-origin: 40% 40% 0;
  transform-origin: 40% 40% 0;
}

.gstbk:hover {
  text-shadow: -3px 0 0 #f9626f , -6px 0 0 #f2aa8a , -9px 0 0 rgba(252,241,161,1) , -12px 0 0 rgba(124,244,176,1) , -15px 0 0 rgb(2,135,206) , -18px 0 0 rgb(4,77,145) , -21px 0 0 rgb(42,21,113) ;
  -webkit-transition: all 500ms cubic-bezier(0.68, -0.55, 0.265, 1.55);
  -moz-transition: all 500ms cubic-bezier(0.68, -0.55, 0.265, 1.55);
  -o-transition: all 500ms cubic-bezier(0.68, -0.55, 0.265, 1.55);
  transition: all 500ms cubic-bezier(0.68, -0.55, 0.265, 1.55);
  -webkit-transform-origin: 50% 50% 0;
  transform-origin: 50% 50% 0;
}

#links {
  grid-area: lnk;
  background: #000;
  border-style: ridge;
  margin: 0;
  padding: none;
  color: #FF99CC;
}

#corner {
  grid-area: crn;
  background: #000;
  border-style: dashed;
  margin: 0;
  color: #FFCCCC;
}

/* corner neon text */

.crn {
  font-family: 'Pacifico', cursive;
  color: #FB4264;
  font-size: 40px;
  text-shadow: 0 0 3vw #F40A35;
}

.crn {
  animation: crn 1s ease infinite;
  -moz-animation: crn 1s ease infinite;
  -webkit-animation: crn 1s ease infinite;
}

@keyframes crn {
  0%,
  100% {
    text-shadow: 0 0 1vw #FA1C16, 0 0 3vw #FA1C16, 0 0 10vw #FA1C16, 0 0 10vw #FA1C16, 0 0 .4vw #FED128, .5vw .5vw .1vw #806914;
    color: #FED128;
  }
  50% {
    text-shadow: 0 0 .5vw #800E0B, 0 0 1.5vw #800E0B, 0 0 5vw #800E0B, 0 0 5vw #800E0B, 0 0 .2vw #800E0B, .5vw .5vw .1vw #40340A;
    color: #806914;
  }
}

#blog {
  grid-area: blg;
  background: #000;
  border-style: solid;
  margin: 0;
  padding: none;
  color: #99FFFF;
}

.gallery {
  position: relative;
  grid-area: glr;
  background: #000;
  border-style: outset;
  margin: 0;
  padding: none;
  color: #9999FF;
}

/* fade in effect */
.overlay {
position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  height: 100%;
  width: 100%;
  opacity: 0;
  transition: .5s ease;
  background-color: #9999FF;
}

.gallery:hover .overlay {
  opacity: 1;
}

.text {
  color: white;
  font-size: 30px;
  font-family: 'Quicksand', sans-serif;
  position: absolute;
  text-align: center;
}

#attr {
  grid-area: att;
  background: #000;
  border-style: solid;
  margin: 0;
  padding: none;
  color: #FF99CC;
}

.news {
  width: 784px;
  height: 170px;
  border-style: double;
  color: #FFF;
  background: #000;
  overflow: auto;
  padding-top: 5px;
}