div.letter{
    width: 300px;
    height: 190px;
    overflow: scroll;
    position: absolute;
    z-index: 2;
    transition: 0.15s;
    transform: rotate(25deg);
}


p.dearj{
    position: absolute;
    margin-left: 5px;
    margin-right: auto;
}
p.froml{
    position: absolute;
    right: 5px;
    text-align: right;
    bottom: -10px;
}
p.datel{
    position: absolute;
    right: 5px;
    top: -10px;
}
div.mainlbox{
    position: absolute;
    left: 5px;
    right: 5px;
    top: 40px;
    bottom: 30px;
    overflow-wrap: break-word;
    overflow-y: scroll;
}

div.letter:hover{
    transform: none;
    transition: 0.15s;
}
div.letter:nth-of-type(1){
    left:650px;
    top: 20px;
}
div.letter:nth-of-type(2){
    left:970px;
    top: 20px;
}
div.letter:nth-of-type(3){
    left:330px;
    top: 230px;
}
div.letter:nth-of-type(4){
    left:650px;
    top: 230px;
}
div.letter:nth-of-type(5){
    left:970px;
    top: 230px;
}
div.letter:nth-of-type(6){
    left:20px;
    top: 440px;
}
div.letter:nth-of-type(7){
    left:330px;
    top: 440px;
}
div.letter:nth-of-type(8){
    left:650px;
    top: 440px;
}
div.letter:nth-of-type(9){
    left:970px;
    top: 440px;
}
div.letter:nth-of-type(10){
    left:330px;
    top: 650px;
}
div.letter:nth-of-type(11){
    left:650px;
    top: 650px;
}
div.letter:nth-of-type(12){
    left:970px;
    top: 650px;
}
div.letter:nth-of-type(13){
    left:330px;
    top: 860px;
}
div.letter:nth-of-type(14){
    left:20px;
    top: 860px;
}
div.letter:nth-of-type(15){
    left:650px;
    top: 860px;
}

div.letter:hover{
    transform: none;
    transition: 0.15s;
}

div.hearts{
    background-image: url(letters/hearts.png);
}
.hearts > .dearj{
    color: red;
    margin-left: 15px;
}
.hearts > .mainlbox{
    color: red;
    margin-left: 15px;
    margin-right: 15px;
}
.hearts > .froml{
    color: red;
    bottom: -5px;
    margin-right: 15px;
}
.hearts > .datel{
    color: red;
    margin-right: 15px;
}

div.cool{
    background-image: url(letters/cool.png);
}
.cool > .dearj{
    color: white;
    margin-left: 5px;
}
.cool > .mainlbox{
    color: white;
    margin-left: 15px;
    margin-right: 15px;
}
.cool > .froml{
    color: rgb(255, 255, 255);
    bottom: -10px;
    margin-right: 15px;
}
.cool > .datel{
    color: rgb(255, 255, 255);
    margin-right: 5px;
}

div.clouds{
    background-image: url(letters/clouds.png);
}
.clouds > .dearj{
    color: rgb(1, 0, 3);
    margin-left: 5px;
}
.clouds > .mainlbox{
    color: rgb(0, 0, 2);
    margin-left: 15px;
    margin-right: 15px;
}
.clouds > .froml{
    color: rgb(255, 255, 255);
    bottom: -10px;
    margin-right: 15px;
}
.clouds > .datel{
    color: rgb(0, 2, 14);
    margin-right: 5px;
}

div.cherry{
    background-image: url(letters/cherry.png);
}
.cherry > .dearj{
    color: rgb(71, 21, 73);
    margin-left: 5px;
}
.cherry > .mainlbox{
    color: rgb(71, 21, 73);
    margin-left: 15px;
    margin-right: 15px;
}
.cherry > .froml{
    color: rgb(71, 21, 73);
    bottom: -10px;
    margin-right: 15px;
}
.cherry > .datel{
    color: rgb(71, 21, 73);
    margin-right: 5px;
}

div.airmail{
    background-image: url(letters/airmail.png);
}
.airmail > .dearj{
    color: rgb(38, 3, 240);
    margin-left: 15px;
}
.airmail > .mainlbox{
    color: red;
    margin-left: 15px;
    margin-right: 15px;
}
.airmail > .froml{
    color: rgb(4, 0, 255);
    bottom: -5px;
    margin-right: 15px;
}
.airmail > .datel{
    color: rgb(0, 4, 255);
    margin-right: 15px;
}

div.grafitti{
    background-image: url(letters/grafitti.png);
}
.grafitti > .dearj{
    color: rgb(23, 197, 23);
    margin-left: 5px;
}
.grafitti > .mainlbox{
    color: rgb(250, 80, 250);
    margin-left: 15px;
    margin-right: 15px;
}
.grafitti > .froml{
    color: rgb(241, 115, 115);
    bottom: -10px;
    margin-right: 15px;
}
.grafitti > .datel{
    color: rgb(255, 153, 0);
    margin-right: 5px;
}

div.dragonflies{
    background-image: url(letters/dragonflies.png);
}
.dragonflies > .dearj{
    color: rgb(211, 57, 10);
    margin-left: 5px;
}
.dragonflies > .mainlbox{
    color: rgb(63, 20, 3);
    margin-left: 15px;
    margin-right: 15px;
}
.dragonflies > .froml{
    color: rgb(199, 67, 5);
    bottom: -10px;
    margin-right: 15px;
}
.dragonflies > .datel{
    color: rgb(255, 153, 0);
    margin-right: 5px;
}

div.stars{
    background-image: url(letters/stars.png);
}
.stars > .dearj{
    color: rgb(30, 188, 236);
    margin-left: 5px;
}
.stars > .mainlbox{
    color: rgb(29, 221, 255);
    margin-left: 15px;
    margin-right: 15px;
}
.stars > .froml{
    color: rgb(3, 1, 94);
    bottom: -10px;
    margin-right: 15px;
}
.stars > .datel{
    color: rgb(0, 204, 255);
    margin-right: 5px;
}

div.torn{
    background-image: url(letters/torn.png);
}
.torn > .dearj{
    color: rgb(0, 0, 0);
    margin-left: 15px;
}
.torn > .mainlbox{
    color: rgb(0, 0, 0);
    margin-left: 15px;
    margin-right: 15px;
}
.torn > .froml{
    color: rgb(0, 0, 0);
    bottom: -10px;
    margin-right: 15px;
}
.torn > .datel{
    color: rgb(0, 0, 0);
    margin-right: 5px;
}

div.roses{
    background-image: url(letters/roses.png);
}
.roses > .dearj{
    color: rgb(15, 1, 31);
    margin-left: 5px;
}
.roses > .mainlbox{
    color: rgb(15, 1, 31);
    margin-left: 15px;
    margin-right: 15px;
}
.roses > .froml{
    color: rgb(15, 1, 31);
    bottom: -10px;
    margin-right: 15px;
}
.roses > .datel{
    color: rgb(15, 1, 31);
    margin-right: 5px;
}

div.bluesky{
    background-image: url(letters/bluesky.png);
}
.bluesky > .dearj{
    color: rgb(6, 1, 31);
    margin-left: 5px;
}
.bluesky > .mainlbox{
    color: rgb(1, 1, 31);
    margin-left: 15px;
    margin-right: 15px;
}
.bluesky > .froml{
    color: rgb(1, 4, 31);
    bottom: -10px;
    margin-right: 15px;
}
.bluesky > .datel{
    color: rgb(1, 3, 31);
    margin-right: 5px;
}