@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: 5;
  }

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

 #countdown {
    position: relative;
    z-index: 5;
top: -375px;
 } 

h1 {
   font-family: 'Luckiest Guy', sans-serif;
   font-size: 3.5rem;
   color: white;
   text-align: center;
   margin: 5%;
   letter-spacing: 15px;
   line-height: 3.75rem;
   -webkit-text-stroke: .1rem rgb(207,10,44);
}
  #wrapper {
      position: relative;
margin: -1000px auto;
      z-index: 3;
      background-color: white;
      width: 1500px;
      border-left: 8px solid rgb(207,10,44);
      border-right: 8px solid rgb(207,10,44);
  }

.home_button {
      position: absolute;
 left: 8%;
top: 525px;
z-index: 4;
     
  }

  .nice_button {
   position: absolute;
   left: 42%;
   top: 510px;
   z-index: 4;

}

.naughty_button {
   position: absolute;
   right: 3%;
   top: 525px;
   z-index: 4;
}

.home_button_hover {
   position: absolute;
left: 8%;
top: 525px;
  display:none;
  z-index: 4;
}

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

.nice_button_hover {
   position: absolute;
   left: 42%;
   top: 510px;
display: none;
z-index: 4;
}

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


.naughty_button_hover {
   position: absolute;
   right: 3%;
   top: 525px;
   display: none;
   z-index: 4;
}

/* 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: 1000px;
   width: 100%;
}

.home_thumb{
   display: none;
}

.leftarrow {
   position: absolute;
   z-index: 3;
 margin-top: -375px;
   left: 2.5%;
}

.leftarrow:hover {
   opacity: .75;
  }


.rightarrow {
   position: absolute;
   z-index: 3;
   margin-top: -375px;
   right: 2.5%;
}

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

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

.writing {
   position: relative;
margin-top: 250px;
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: 1600px;
   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: 3rem;
}

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

.list_message {
   position: absolute;
   top: 6300px;
   left: 25%;
   width: 40%;
   font-size: 2.5rem;
   text-align: center;
   margin-bottom: 30px;
   z-index: 5;
}

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

.thank_you{
   position: relative;
   left: 65%;
}

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

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

input {
   font-size: 1.5rem;
}