@font-face {
    font-family: Memory;
    src: url(../fonts/Memory.ttf);
    
}
@font-face {
    font-family: Quidity;
    src: url(../fonts/Quidity.ttf);
    
}
@font-face {
    font-family: Darling;
    src: url(../fonts/Darling.ttf);
    
}
@font-face {
    font-family: Friends;
    src: url(../fonts/BeautifulFriends.ttf);
    
}
@font-face {
    font-family: Kiwi;
    src: url(../fonts/KiwiFruit.otf);
    
}
@font-face {
    font-family: Autography;
    src: url(../fonts/Autography.otf);
    
}
@font-face {
    font-family: Lemon;
    src: url(../fonts/LemonTuesday.otf);
    
}
@font-face {
    font-family: Polaroid;
    src: url(../fonts/Polaroid.otf);
    
}
@font-face {
    font-family: adelia;
    src: url(../fonts/adelia.ttf);
    
}
@font-face {
    font-family: BirdsOfParadise;
    src: url(../fonts/BirdsOfParadise.ttf);
    
}
@font-face {
    font-family: Babynotes;
    src: url(../fonts/Babynotes.otf);
    
}
@font-face {
    font-family: Faldith;
    src: url(../fonts/Faldith.otf);
    
}
@font-face {
    font-family: Arsellia;
    src: url(../fonts/Arsellia.otf);
    
}
@font-face {
    font-family: alice;
    src: url(../fonts/alice.ttf);
    
}
@font-face {
    font-family: apple;
    src: url(../fonts/Apple.ttf);
    
}
@font-face {
    font-family: Burgundia;
    src: url(../fonts/Burgundia.otf);
    
}
@font-face {
    font-family: Galiken;
    src: url(../fonts/GalikenDemo.ttf);
    
}
@font-face {
    font-family: Kiph;
    src: url(../fonts/KiphranyDemo.ttf);
    
}
@font-face {
    font-family: Nagi;
    src: url(../fonts/NagistaDemo.ttftf);
    
}


body {
    background-image: url(images/clearing.jpg);
    background-size: cover;
    overflow-x:hidden;
   overflow-y:hidden;
    -webkit-user-select: none; /* Safari */
  -ms-user-select: none; /* IE 10 and IE 11 */
  user-select: none; /* Standard syntax */
}
#mainTree {
    width:1800px;
    position:absolute;
    left:-40px;
    top:-335px;
   pointer-events: none; 
    z-index:2;
}
#fairy {
    position:absolute;
    width:150px;
    top:540px;
    left:870px;
    z-index: 1;
}

#forest {
    position:absolute;
    top:100px;
    left:100px;
    z-index: -2;
    pointer-events: none;
}
#owl {
    width:60px;
    position:absolute;
    left:615px;
    top:380px;
    filter:  contrast(80%) brightness(90%) grayscale(45%);
    pointer-events: none;
    z-index: 3;
}
#door {
    
    width:100px;
    position:fixed;
    top:560px;
    left:100px;
    margin:0px;
    padding:0px;
    overflow: hidden;
    border-radius: 10px;
    border-bottom-left-radius:50px;
    
}
#door4 {
    width:100px;
    padding:0px;
    margin:0px;
    z-index: 1;
}
#door p {
    position: relative;
    bottom:35px;
    z-index: 2;
    background-color:  #ded3bf;
    opacity:70%;
    text-align: center;
}



#piece1 {
    width:100px;
    position:absolute;
    left:400px;
    top:500px;
    z-index: 2;
}
#piece1:hover {
    cursor:pointer;
}
#piece2 {
    width:100px;
    position:absolute;
    left:1100px;
    top:450px;
    z-index: 2;
}
#piece2:hover {
    cursor:pointer;
}
  #letter1 {
                width:850px;
                height:400px;
                background-image:url(images/decor/letterpage1.png);
                position: fixed;
                left:25%;
                top:25%;
                opacity:0;
                display:flex;
                align-items:center;
                justify-content: center;
            }
#letter1 p {
    width:500px;
    font-family:Kiph;
    font-size: 20px;
    margin-top:0px;
    position: relative;
    bottom:10px;
}
#letter1 h2 {
    font-family: Memory;
    font-size:60px;
    margin-bottom:0px;
    margin-top:5px;
}
            #letter1.open {
                opacity:1;
                z-index: 999;
            }
            #unfoldLetter {
            z-index: 999;
                position:absolute;
                top:604px;
                left:409px;
                font-family: apple;
                font-size:16px;
                padding:2px;
                padding-top:0px;
                padding-bottom:0px;
                color:  #8b6758 ;
                text-shadow: 1px 1px #b99185 ;
                background-color:  #ece5e1 ;
               border:3px groove  #bb9f8f ;
                opacity:70%;
            }
#unfoldLetter:hover {
   font-style: italic;
    cursor: pointer;
}

#foldLetter {
    position:fixed;
    left:800px;
     font-family: apple;
                font-size:16px;
                padding:2px;
                padding-top:0px;
                padding-bottom:0px;
                color:  #8b6758 ;
                text-shadow: 1px 1px #b99185 ;
                background-color:  #ece5e1 ;
               border:3px groove  #bb9f8f ;
                opacity:100%;
    
}
#foldLetter:hover {
    cursor:pointer;
    font-style:italic;
    
}