@font-face {
    font-family: JanesWriting;
    src: url("blographics/JanesWriting-Regular.ttf");
}
@font-face {
    font-family: JanesWriting-Bold;
    src: url("blographics/JanesWriting-bold.ttf");
}
/*Basics*/
    html{
        background-image: url("blographics/bluetwinclouds.jpg");
        background-repeat: repeat;
        margin-left: auto;
        margin-right: auto;
    }
    body{
        width: 1200px;
        font-family: JanesWriting;
        position: relative;
        margin-right: auto;
        margin-left: auto;
    }
.back{
    position: absolute;
    top: 0px;
    left: 0px;
}
/*Header*/
    .diaryname{
        position: absolute;
        top: -65px;
        left: 80px;
        font-size: 80px;
    }
    .diarycover{
        position: absolute;
        box-sizing: border-box;
        top: 95px;
        left: 80px;
        width: 35px;
        height: 555px;
        background-color: pink;
        border-radius: 10px 5px 0px 10px;
        border: 3px solid #766B7D;
        background-image: url("blographics/c462ea3e.png");
        background-position: repeat;
    }
    .links{
        position: absolute;
        box-sizing: border-box;
        top: 15px;
        left: 400px;
        width: 200px;
        height: 70px;
        overflow-y: wrap;
    }
        .buttons {
            width: 80px;
            display:inline-block;
            padding:5px;
            background:linear-gradient(to bottom, #F2D4A0 5%, #F8E9CF 100%);
            background-color:#F2D4A0;
            border-radius: 2px;
            border: 2px solid #766B7D;
            color: purple;
            text-decoration: none;
        }
    .bookmark{
        position: absolute;
        box-sizing: border-box;
        top: 30px;
        left: 600px;
        width: 170px;
        height: 300px;
        border: 3px solid #766B7D;
        border-radius: 15px;
        background-image: url("blographics/acbe8d69.png");
        background-repeat: repeat;
        size: 12px;
        padding: 2px;
    }
/*Main Content*/
    .maincontent{
        position: absolute;
        float: left;
        box-sizing: border-box;
        top: 100px;
        left: 100px;
        width: 531px;
        height: 550px;
        background-color: aqua;
        border-radius: 15px 15px 0px 0px;
        border: 3px solid #766B7D;
        background-image: url("blographics/c462ea3e.png");
        background-position: repeat;

    }
        .iframearea{
            position: relative;
            float: left;
            box-sizing: border-box;
            top: 10px;
            left: 20px;
            right: 20px;
            width: 490px;
            height: 100%;
        }
        iframe{
            border: none;
            font-family: JanesWriting;
        }
        .footer{
            position: relative;
            float: inline-end;
            box-sizing: border-box;
            width: 531px;
            height: 30px;
            padding: 5px;
            background-color: lightblue;
            border: 3px solid #766B7D;
        }
        .lists{
            position:absolute;
            top: 250px;
            left: 890px;
            background-image: url("blographics/linedtexture1.png");
            box-sizing: border-box;
        }
            /*Lists*/
            /* Style the tab */
            .tab {
                overflow: hidden;
                border: 1px solid #766B7D;
                background-image: url("blographics/blueplad.jpg");
            }
            
            /* Style the buttons that are used to open the tab content */
            .tab button {
                background-color: inherit;
                float: left;
                border: none;
                outline: none;
                cursor: pointer;
                padding: 14px 16px;
                transition: 0.3s;
            }
            /* Create an active/current tablink class */
            .tab button.active {
                background-color: #ffffff;
            }
            
            /* Style the tab content */
            .tabcontent {
                height: 350px;
                width: 270px;
                display: none;
                padding: 15px;
                border: 1px solid #ccc;
                border-top: none;
                background-image: url("blographics/yellobg.png");
                overflow-y: scroll;
                overflow-x: hidden;
            } 
            /*Tab Text Stylings*/
            .header{
                font-size: x-large;
                font-style: bold;
                background-color: #ffffe0;
            }
            .italic{
                font-style: italic;
            }
            .important{
                background-color: #90ee90;
                font-style: bold;
            }
            .timed{
                background-color: #ffb6c1;
                font-style: underline;
            }
            .chore{
                background-color: #add8e6;
                font-style: underline;
            }
            ul {
                list-style-image: url("blographics/flowers_2.gif");
            }
            .highlight{
                background-color: #90ee90;
                font-style: bold;
            }

    /*Decorative*/
    .watashi{
        position:absolute;
        top: 275px;
        left: 600px;
        height: 400px;
    }
    .pagedoll{
        position: absolute;
        top: 60px;
        left: 50px;
        width: 125px;
    }
    .statuscafe{
        position:absolute;
        top: 140px;
        left: 800px;
        width: 300px;
    }
        #statuscafe {
            padding: .5em;
            background-color: azure;
            border: 1px solid midnightblue;
            }
            #statuscafe-username {
            margin-bottom: .5em;
            }
            #statuscafe-content {
            margin: 0 1em 0.5em 1em;
            }
    .discord{
        position:absolute;
        top: 70px;
        left: 800px;
        width: 300px;
    }
    .musicplayer{
        position:absolute;
        top: 10px;
        left: 800px;
        width: 300px;
    }