body {
    background-image: url(images/desk.webp);
    overflow: hidden;
}
 
h1 {
    font-size: 25px;
    font-family: "Gluten", cursive;
    font-optical-sizing: auto;
    font-weight: 300;
    font-style: normal;
    font-variation-settings:
        "slnt" 0;
}

#frame {
    position: relative;
    width: 100%;
    height: 800px;
    z-index: 0;
}

#blue-pen {
    top: -60%;
    left: 10%;
}

#blue-pen > img{
    position: absolute;
    top: 40%;
    left: 5%;
    transform-origin: 50% 50%;
    rotate: -20deg;
    height: 400px;
    width: 400px;
}

#denim-star {
    z-index: 2;
    height: 800px;
}

#denim-star > a > img {
    position: absolute;
    top: 5%;
    left: 50%;
    width: 200px;
    height: 200px;
    transform-origin: 50% 50%;
}

#denim-star > a > img:hover {
    rotate: -10deg;
    width: 250px;
    height: 250px;
    top: 3%;
    left: 48.5%;
}

#denim-star > p {
    position: absolute;
    top: 14%;
    left: 54.5%;
    color: aliceblue;
    font-size: 20px;
}

#germany-stamp {
    z-index: 2;
    height: 800px;
}

#germany-stamp > a > img {
    position: absolute;
    top: 25%;
    left: 40%;
    width: 150px;
    height: 150px;
    transform-origin: 50% 50%;
    rotate: 4deg;
}

#germany-stamp > a > img:hover {
    rotate: -1deg;
    width: 175px;
    height: 175px;
}

#home-icon > a > img {
    position: absolute;
    top: -3%;
    left: 0%;
    width: 75px;
    height: 100px;
    transform-origin: 50% 50%;
    rotate: 180deg;
}

#home-icon > a > img:hover {
    width: 85px;
    height:110px;
}

#mockingjay-pin > a > img{
    position: absolute;
    top: 40%;
    left: 50%;
    width: 150px;
    height: 175px;
    transform-origin: 50% 50%;
}

#mockingjay-pin > a > img:hover {
    rotate: 10deg;
    width: 150px;
    height: 175px;
}

#output {
    overflow: scroll;
    position: absolute;
    z-index: 2;
    top: 6%;
    left: 51%;
    width: 450px;
    height:730px
}

#journal-cover {
    z-index: 1;
}

#journal-cover  > img {
    position: absolute;
    top: 5%;
    left: 35%;
    width: 500px;
    height: 750px;
}

#journal-open {
    z-index: 1;
}

#journal-open  > img {
    position: absolute;
    top: 3%;
    left: 16%;
    width: 1000px;
    height: 780px;
}

#settings {
    overflow: scroll;
    position: absolute;
    top: 6%;
    left: 18%;
    width: 450px;
    height:730px
}


.gaegu-regular {
  font-family: "Gaegu", sans-serif;
  font-weight: 400;
  font-style: normal;
}



.gluten {
  font-family: "Gluten", cursive;
  font-optical-sizing: auto;
  font-weight: 300;
  font-style: normal;
  font-variation-settings:
    "slnt" 0;
}

/* make frame relative, move every element position to main div as absolute*/