/* ===========================
   RESET
=========================== */

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

/* ===========================
   BODY
=========================== */

body{


    /* CHANGE THIS TO YOUR OWN IMAGE */
    background-image:url("theme.jpeg");

    background-size:cover;
    background-position:center;
    background-repeat:no-repeat;
    background-attachment:fixed;

    font-family:"Crimson Text",serif;
    color:#d8cfbf;

    overflow:hidden;
}

/* Dark overlay */

.overlay{

    width:100%;
    height:100vh;

    background:rgba(0,0,0,.45);

    position:relative;

}

/* ===========================
   TOP MESSAGE
=========================== */

.notice{

    position:absolute;

    top:35px;
    left:45px;

    color:#929292;

    font-size:15px;

    letter-spacing:1px;

}

/* ===========================
   RABBIT
=========================== */

.rabbit{

    position:absolute;

    top:40px;
    right:60px;

    white-space:pre;

    color:#fff8f8;

    opacity:.85;

    font-size:15px;

}

/* ===========================
   ENTRANCE IMAGE
=========================== */

.entrance-image{

    position:absolute;

    left:50%;
    top:48%;

    transform:translate(-50%,-50%);

    width:260px;

    transition:.4s;

    filter:drop-shadow(0 0 12px rgba(0,0,0,.6));

}

.entrance-image:hover{

    transform:translate(-50%,-50%) scale(1.04);

    filter:brightness(1.08);

}

/* ===========================
   QUOTE
=========================== */

.quote{

    position:absolute;

    right:8%;
    bottom:16%;

    width:300px;

    background:rgba(18,15,14,.75);

    border-left:1px solid #000000;

    padding:20px;

    line-height:1.8;

    font-size:14px;

}

.song{

    margin-top:18px;

    text-align:right;

    font-style:italic;

    color:#a89880;

}

/* ===========================
   ENTER TEXT
=========================== */

.enter{

    position:absolute;

    left:50%;
    top:73%;

    transform:translateX(-50%);

    font-family:"Cinzel",serif;

    letter-spacing:4px;

    color:#d3b57a;

    text-decoration:none;

    font-size:17px;

    transition:.3s;

}

.enter:hover{

    color:#fff0c5;

    letter-spacing:6px;

}

/* ===========================
   DECORATIONS
=========================== */

body::before{

    content:"✦";

    position:absolute;

    top:90px;
    left:120px;

    color:#69543a;

    font-size:22px;

}

body::after{

    content:"☾";

    position:absolute;

    bottom:50px;
    left:70px;

    color:#69543a;

    font-size:30px;

}

/* ===========================
   MOBILE
=========================== */

@media (max-width:900px){

body{

    overflow:auto;

}

.rabbit{

    display:none;

}

.notice{

    left:20px;

}

.quote{

    position:relative;

    width:90%;

    margin:30px auto;

    right:auto;
    bottom:auto;

}

.entrance-image{

    width:180px;

}
}