@font-face {
    font-family: 'BallpointSignitureFont';
    src: url('fonts/Ballpoint\ Signature.otf') format('opentype');
    font-weight: normal;
    font-style: normal;
}


html, body, main {
    min-height: 100%;
    height: 100%;
}
body {
    background-image: url("images/website/wooden.jpg");
    background-size: cover;
}

.container {
    padding-top: 50px;
    max-width: 100%;
    min-height: 100%;
    display: grid;
    z-index: -10;
}
.center_point {
    z-index: -3;
    max-width: 80%;
    min-height: 80%;
    margin-left:20%;
    margin-right: 20%;
    position:relative;
}


.title_text h1 {
    font-family: 'BallpointSignitureFont', sans-serif;
    text-align: center;
    font-size: 8vw;
    position: absolute;
    top: 0px;
    left: 18%;
}
.title_text h2 {
    font-family: 'BallpointSignitureFont', sans-serif;
    text-align: center;
    font-size: 3vw;
    width: auto;
    position: absolute;
    top: 25%;
    left: 12%;
}

.normal_text {
    text-align: center;
    font-size: 1vw;
    position: absolute;
    top: 40%;
    left: 15%;
}

#star_stickers {
    max-width: 30%;
    position:absolute;
    bottom: 5%;
    left:0px;
    z-index: -2;

}

#paper_container {
    max-width: 80%;
    max-height: 80%;
    position:absolute;
    top: 0px;
    left: 5%;
    z-index: -1;

}

#poloroid_frame {
    max-width: 30%;
    position:absolute;
    bottom: 8%;
    transform: rotate(10deg);
    right:30%;

}

#patch_sticker {
    max-width: 25%;
    transform: rotate(20deg);
    position: absolute;
    right: 35%;
}

@media screen and (width <= 600px) {

    #paper_container {
        max-width: 100%;
        max-height: 100%;
        position:absolute;
        top: 0px;
        left: 0px;
    }
    .title_text h1 {
    font-size: 12vw;
    position: absolute;
    top: 0px;
    left: 30%;
    }
    .title_text h2 {
        font-size: 10vw;
        width: auto;
        position: absolute;
        top: 10%;
        left: 12%;
    }
    .normal_text {
    visibility: hidden;
    }
    #poloroid_frame {
        max-width: 100%;
        max-height: 100%;
        bottom:30%;
    }
    #star_stickers {
        max-width: 100%;
        max-height: 100%;
        bottom:10%;
    }
}