@font-face {
    font-family: timesnewpixel;
    src: url(fonts/TimesNewPixel.ttf);
}

@font-face {
    font-family: rascal;
    src: url(fonts/RASCAL__.TTF);
}

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

body {
    background-image: url('https://web.archive.org/web/20210614151104im_/https://www.foollovers.com/mat/simple02/b05-bg-simple.gif');
    background-attachment: fixed;
    background-repeat: repeat;
    height: 100vh;
    display: flex;
    justify-content: center;
}

.main-container {
    display: flex;
    flex-direction: column;
    align-items: center;    /* Centers items horizontally */
    justify-content: center; /* Centers the whole group vertically */
    height: 100vh;          /* Takes up full screen height */
    width: 100%;
    position: relative;
}



/* title */

.linktitle {
    text-align: center;
    margin-bottom: 50px;
    z-index: 99;

}

#title {
    font-family: rascal;
    font-size: 50px;
}


#link {
    font-family: timesnewpixel;
    font-size: 20px;
    color: black;
 
}

.bb {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: row;
}


/* Book */

.book {
    position: relative;
    width: 375px;
    height: 528px;
    transition: transform 0.5s;
}

.paper {
    position: absolute;
    width: 375px;
    height: 528px;
    perspective: 1500px;
}

.front,
.back {
    background-color: white;
    position: absolute;
    width: 100%;
    height: 100%;
    transform-origin: left;
    transition: transform 0.5s;
}

.back-content {
    transform: rotateY(180deg);
}

.front {
    z-index: 1;
    backface-visibility: hidden;
    border-left: 3px solid rgb(203, 101, 177);
}

.back {
    z-index: 0;
}

.front-content, .back-content
{
    width: 100%;
    height: 100%;
}



/* paper flip */
.flipped .front,
.flipped .back {
    transform: rotateY(-180deg);
}


/* controller button */

button {
    border: none;
    background-color: transparent;
    cursor: pointer;
    margin: 10px;
    transition: transform 0.5s;
}

button:focus {
    outline: none;
}

button:hover {
    color: blueviolet;
}

/* paper stack order */
#p1 {
    z-index: 4;
}

#p2 {
    z-index: 3;
}

#p3 {
    z-index: 2;
}

#p4 {
    z-index: 1;
}

/* page contents */

#f1{
    background-image: url(journal/coverjournal.jpg);
    background-size: cover;
}

#b1 {
    background-image: url(journal/linedpage.jpg);
    background-size: cover;
    font-family: timesnewpixel;
    text-align: left;
    padding-top: 70px;
    padding-left: 50px;

}

#f2 {
    background-image: url(journal/journalf2.jpg);
    background-size: cover;
}

#b2 {
    background-image: url(journal/b2journal.JPEG);
    background-size: cover;
}

#f3 {
    background-image: url(journal/f3journal.jpg);
    background-size: cover;
}

#b3 {
    background-image: url(journal/fishjournal.jpg);
    background-size: cover;
}

#f4 {
    background-image: url(journal/linedpage.jpg);
    background-size: cover;
}

#b4 {
    background-image: url(journal/Pink\ Piano\ Campus\ Notebook\ Cover.jpg);
    background-size: cover;
}

/* graphics */

.clover {
    position: absolute;
    top: 3%;
    left: 70%;
    opacity: 70%;
}

.gf1 {
    position: absolute;
    top: 7%;
    right: 58%;
}

.gf2 {
    position: absolute;
    top: 12%;
    left: 60%;
    opacity: 90%;
}