@charset "UTF-8";
/* CSS Document */

@font-face {
   font-family: 'jrhandregular';
   src: url('jr!ha___-webfont.eot');
   src: url('jr!ha___-webfont.eot?#iefix') format('embedded-opentype'),
        url('jr!ha___-webfont.woff2') format('woff2'),
        url('jr!ha___-webfont.woff') format('woff'),
        url('jr!ha___-webfont.ttf') format('truetype'),
        url('jr!ha___-webfont.svg#jrhandregular') format('svg');
   font-weight: normal;
   font-style: normal;
}

body{
    background-color:white;
    background-image:url(background_home.jpg);
    margin:0 auto;
    /* Background image doesn't tile */
    background-repeat: no-repeat;
    
    /* Background image is fixed in the viewport so that it doesn't move when 
       the content's height is greater than the image's height */
    background-attachment: fixed;
    
    /* This is what makes the background image rescale based
       on the container's size */
    background-size: cover;
  }
  


  .header{
      position: relative;
      margin-top: 0;
      width: 100%;
      z-index: 4;
  }

  .cell_header{
   position: relative;
   margin-top: 0;
   width: 100%;
   z-index: 2;
   display: none;
}
  
#countdown {
   position: relative;
   z-index: 5;
top: -200px;
} 

h1 {
  font-family: 'Luckiest Guy', sans-serif;
  font-size: 2.25rem;
  color: white;
  text-align: center;
  margin: 5%;
  letter-spacing: 1px;
  line-height: 2.5rem;
  -webkit-text-stroke: .03rem rgb(207,10,44);
}

  #wrapper {
      position: relative;
margin: -1000px auto;
      z-index: 3;
      background-color: white;
      width: 680px;
      border-left: 8px solid rgb(207,10,44);
      border-right: 8px solid rgb(207,10,44);
  }

  
.home_button {
   position: absolute;
left: 1%;
margin-top: 750px;
z-index: 3;
  
}

.nice_button {
position: absolute;
left: 33%;
margin-top: 810px;
z-index: 3;

}

.naughty_button {
position: absolute;
right: 1%;
margin-top: 750px;
z-index: 3;

}

.home_button_hover {
position: absolute;
left: 1%;
margin-top: 750px;
display:none;
z-index: 3;
}

/* disiplay on hover home button*/
#home:hover .home_button_hover,
#home:active .home_button_hover {
     display:block;
}

.nice_button_hover {
position: absolute;
left: 33%;
margin-top: 810px;
display: none;
z-index: 3;
}

/* display on hover nice list button*/
#nice:hover .nice_button_hover,
#nice:active .nice_button_hover {
display:block;
}


.naughty_button_hover {
position: absolute;
right: 1%;
margin-top: 750px;
display: none;
z-index: 3;
}

/* display on hover naughty list button*/
#naughty:hover .naughty_button_hover,
#naughty:active .naughty_button_hover {
display:block;
}

#nice:hover .nice_button,
#home:hover .home_button,
#naughty:hover .naughty_button{
display:none;
}

/* main navigation animation*/
nav a img:hover {
-moz-transform: rotateY(720deg);
     -ms-transform: rotateY(720deg);
     -o-transform: rotateY(720deg);
     -webkit-transform: rotateY(720deg);
     transform: rotateY(720deg);
     -moz-transition: ease-out 3s;
     -ms-transition: ease-out 3s;
     -o-transition: ease-out 3s;
     -webkit-transition: ease-out 3s;
     transition: ease-out 3s;
}

#ornaments {
   display: block;
}

.menu-wrap {
   display: none;
}

#bigpic {
position: relative;
margin-top: 1200px;
width: 100%;
}

.home_thumb{
display: none;
}

.leftarrow {
   width: 12%;
position: absolute;
z-index: 3;
margin-top: -195px;
left: .75%;
}

.leftarrow:hover {
opacity: .75;
}


.rightarrow {
   width: 12%;
position: absolute;
z-index: 3;
margin-top: -195px;
right: .75%;
}

.rightarrow:hover {
opacity:.75;
}
.hohoho {
width: 75%;
position:absolute;
margin-top: 37px;
left: 12.5%;
}

p{
font-family:jrhandregular, sans-serif;
font-size: 2.5rem;
color: rgb(20,71,51);
text-align: left;
line-height: 3rem;
margin: 5%;
}

.writing {
position: relative;
margin-top: 200px;
padding-bottom: 5px;
}

#footer a:link {
color: white;
}

#footer a:hover,
#footer a:visited{
color: white;
opacity: .6;
}

.writing a:link,
.writing a:visited {
   color: rgb(207,10,44);
   text-decoration: none;
}
.writing a:hover{
    color: rgb(20,71,51);
    text-decoration: none;
    opacity: .5;
 }


#footer {
position: relative;
margin-top: 1500px;
background-color: rgb(207,10,44);
color: white;
width: 96%;
text-align: center;
font-family: helvetica, sans-serif;
font-size: 2rem;
padding: 2%;
z-index: 10;
}

.list_pic {
   position: fixed;
   bottom:0;
   z-index: 2;
   width: 100%;
}

.list {
   position: absolute;
  left: 27.5%;
   width: 45%;
   margin-top: 1500px;
   z-index: 5;
   text-align: center;
}

.title_letter{
   width: 70%;
   text-align: center;
   margin-bottom: 5x;
}

.list_names {
   margin-bottom: 35x;
   text-align: center;
   font-size: 2rem;
}

.list_header {
   position: absolute;
   width: 30%;
   left: 35.5%;
margin-bottom: 5x;
   z-index: 5;
   margin-top: 1295px;
}

.list_message {
   position: absolute;
   margin-top: 8650px;
   left: 30%;
   width: 30%;
   font-size: 1.75rem;
   text-align: center;;
   z-index: 5;
}


.form_intro {
   position:relative;
 margin-top: 1150px;
 margin-left: auto;
 margin-right: auto;
 width: 90%;
 font-size: 2.5rem;
}

.thank_you{
   position: relative;
   left: 20px;
}

form {
   width: 80%;
   margin: 0 auto;
   background-color: rgba(20,71,51,.8);
   border: 8px solid rgb(20,71,51);
   border-radius: 8px;
padding: 6px;
}

form p {
   color: white;
   font-family: Arial, Helvetica, sans-serif;
   font-size: 1.5 rem;
   border: rgb(20,71,51);
}

input {
   font-size: 1rem;
}

form textarea {
   width: 30rem;
}