*
{

}

html
{
    margin: 0px;
    padding: 0px;
    background-color: rgb( 237,244,255 );
    min-width: 800px;
}

body
{
    margin: 0px;
    padding: 0px;
    min-width: 800px;
}

.playfair-display-mik 
{
    font-family: "Playfair Display", serif;
    font-optical-sizing: auto;
    font-weight: 400;
    font-size: 24px;
    font-style: normal;
    text-align: center;
    color: rgb(125,166,255);
    position: relative;
    top: 70px;
    text-shadow:
        #ffffff -1px -1px 0px,
        #ffffff -1px 1px 0px,
        #ffffff 1px 1px 0px, 
        #ffffff 1px -1px 0px;
  }

.lace-container 
{
    width: 100%;
    height: 65px;
}

.lace-repeat 
{
    background-image: url( 'Frills.png' );
    background-repeat: repeat-x;
    background-size: auto 65px;
    width: 100%;
    height: 100%;
    filter:opacity(50%)
}

.blue-cake
{
    position: fixed;
    min-width: 800px;
    background-image: url( 'BlueCake.png' );
    background-repeat: no-repeat;   
    background-size: auto 650px;
    background-position: center;
    width: 100%;
    height: 650px;
    top: 190px;
}

.pooping-hammy
{
    position: fixed;
    left: 47.5%;
    background-image: url( 'PoopingHammy.png' );
    background-repeat: no-repeat;   
    background-size: 75px 60px;
    background-position: center;
    width: 75px;
    height: 60px;
    margin: 15px 0px 5px 8px;
}

.pooping-hammy:active
{
    position: fixed;
    left: 47.5%;
    background-image: url( 'PoopingHammy.png' );
    background-repeat: no-repeat;   
    background-size: 75px 75px;
    background-position: center;
    width: 75px;
    height: 75px;
    margin: 15px 0px 0px 8px;
}

.text-3d 
{
    position: relative;
    top: 170px;
    min-width: 800px;
    font-size: 136px;
    font-weight: bold;
    font-style: italic;
    color: #ffffff;
    text-align: center;
    text-shadow: 
        #c8c8c8 1px 1px 0px,
        #b4b4b4 0px 2px 0px,
        #a0a0a0 0px 3px 0px,
        rgba( 140, 140, 140, 0.498039 ) 0px 4px 0px,
        #787878 0px 0px 0px, 
        rgba( 0, 0, 0, 0.498039 ) 0px 5px 10px;
}

.poop
{
    background-image: url( 'Poop.png' );
    background-repeat: no-repeat;   
    background-size: 50px 50px;
    background-position: center;
    width: 50px;
    height: 50px;
    position: absolute;
    top: 140px;
    left: 48.5%;
    animation: slideAndBounce linear forwards;
}

@keyframes slideAndBounce 
{
    0% 
    {
        transform: translateY( 0 );
    }
    20% 
    {
        transform: translateY( 200px ); 
    }
    100% 
    {
        transform: translate( var( --end-x ), var( --end-y ) );
        opacity: 0;
    }
}

.sparkle-1
{
    position: fixed;
    top: 650px;
    left: 18.5%;
    background-image: url( 'Sparkle.png' );
    background-repeat: no-repeat;   
    background-size: 100px 100px;
    background-position: center;
    width: 100px;
    height: 100px;
}

.sparkle-2
{
    position: fixed;
    top: 130px;
    left: 5%;
    background-image: url( 'Sparkle.png' );
    background-repeat: no-repeat;   
    background-size: 150px 150px;
    background-position: center;
    width: 150px;
    height: 150px;
}

.pearl-1
{
    position: fixed;
    top: 230px;
    left: 27.5%;
    background-image: url( 'Pearl.png' );
    background-repeat: no-repeat;   
    background-size: 65px 65px;
    background-position: center;
    width: 65px;
    height: 65px;
}

.pearl-2
{
    position: fixed;
    top: 460px;
    left: 27.5%;
    background-image: url( 'Pearl.png' );
    background-repeat: no-repeat;   
    background-size: 50px 50px;
    background-position: center;
    width: 50px;
    height: 50px;
}

.pearl-3
{
    position: fixed;
    top: 780px;
    left: 72.5%;
    background-image: url( 'Pearl.png' );
    background-repeat: no-repeat;   
    background-size: 40px 40px;
    background-position: center;
    width: 40px;
    height: 40px;
}

.pearl-4
{
    position: fixed;
    top: 730px;
    left: 67.5%;
    background-image: url( 'Pearl.png' );
    background-repeat: no-repeat;   
    background-size: 20px 20px;
    background-position: center;
    width: 20px;
    height: 20px;
}

.pearl-5
{
    position: fixed;
    top: 365px;
    left: 64.5%;
    background-image: url( 'Pearl.png' );
    background-repeat: no-repeat;   
    background-size: 20px 20px;
    background-position: center;
    width: 20px;
    height: 20px;
}

.ribbon
{
    position: fixed;
    top: 100px;
    right: 2%;
    background-image: url( 'Ribbon.png' );
    background-repeat: no-repeat;   
    background-size: 250px 250px;
    background-position: center;
    width: 250px;
    height: 250px;
}

.shoes
{
    position: fixed;
    top: 550px;
    right: 2%;
    background-image: url( 'Shoes.png' );
    background-repeat: no-repeat;   
    background-size: 450px 450px;
    background-position: center;
    width: 450px;
    height: 450px;
}

.strings
{
    position: fixed;
    top: 350px;
    left: 2%;
    background-image: url( 'Strings.png' );
    background-repeat: no-repeat;   
    background-size: calc( 659px * 1.25 ) calc( 379px * 1.45 );
    background-position: center;
    width: calc( 659px * 1.25 );
    height: calc( 379px * 1.45 );
    transform: rotate( -150deg );
}

.book-1
{
    position: fixed;
    top: 100px;
    left: 15%;
    word-spacing: 8px;
    letter-spacing: 0.2px;
    line-height: 15px;
    width: 300px;
    text-align: center;
    gap: 10px;
    font-family: "Special Elite", system-ui;
    font-weight: 500;
    font-size: 11px;
    font-style: normal;
    color:rgb(46, 46, 46);
    font-optical-sizing: auto;
}

.book-2-title
{
    position: fixed;
    top: 215px;
    right: 10.5%;
    word-spacing: 1px;
    letter-spacing: 0.2px;
    line-height: 15px;
    width: 250px;
    text-align: center;
    gap: 10px;
    font-family: "Special Elite", system-ui;
    font-weight: 500;
    font-size: 18px;
    font-style: normal;
    color:rgb(46, 46, 46);
    font-optical-sizing: auto;
}

.book-2
{
    position: fixed;
    top: 250px;
    right: 10.5%;
    word-spacing: 8px;
    letter-spacing: 0.2px;
    line-height: 15px;
    width: 285px;
    text-align: center;
    gap: 10px;
    font-family: "Special Elite", system-ui;
    font-weight: 500;
    font-size: 12px;
    font-style: normal;
    color:rgb(46, 46, 46);
    font-optical-sizing: auto;
    transform: rotate( -180deg );
}

.etc-line
{
    position: absolute;
    top: 130px;
    left: 50%;
    width: 45px; 
    height: 2px; 
    transform: rotate( -145deg ) translateX( 160px ) translateY( -170px );
    background: rgb( 125 166 255 );
}

.etc-button
{
    position: absolute;
    font-family: "Lato", sans-serif;
    font-weight: 400;
    font-style: normal;
    text-align: center;
    font-size: 18px;
    padding: 8px;
    top: -42px;
    color:rgb( 237,244,255 );
    justify-content: center;
    align-items: center;
    border: rgb( 125 166 255 );
    left: 37px;
    width: 120px; 
    height: 22px; 
    transform: rotate( 145deg );
    background: rgb( 125 166 255 );
    transition: background-color 100ms linear;
}

.etc-button:hover
{
    position: absolute;
    font-family: "Lato", sans-serif;
    font-weight: 400;
    font-style: normal;
    text-align: center;
    font-size: 18px;
    padding: 8px;
    top: -42px;
    color:rgb( 125 166 255 );
    justify-content: center;
    align-items: center;
    border: solid 1px rgb( 125 166 255 );
    left: 37px;
    width: 120px; 
    height: 22px; 
    transform: rotate( 145deg );
    background: rgb( 237,244,255 );
    transition: background-color 100ms linear;
}

.diary-line
{
    position: absolute;
    top: 130px;
    left: 50%;
    width: 220px; 
    height: 2px; 
    transform: rotate( 145deg );
    background: rgb( 125 166 255 );
}

.diary-button
{
    position: absolute;
    font-family: "Lato", sans-serif;
    font-weight: 400;
    font-style: normal;
    text-align: center;
    font-size: 18px;
    padding: 8px;
    top: -42px;
    color:rgb( 237,244,255 );
    justify-content: center;
    align-items: center;
    border: rgb( 125 166 255 );
    left: -132px;
    width: 120px; 
    height: 22px; 
    transform: rotate( -145deg );
    background: rgb( 125 166 255 );
    transition: background-color 100ms linear;
}

.diary-button:hover
{
    position: absolute;
    font-family: "Lato", sans-serif;
    font-weight: 400;
    font-style: normal;
    text-align: center;
    font-size: 18px;
    padding: 8px;
    top: -42px;
    color:rgb( 125 166 255 );
    justify-content: center;
    align-items: center;
    border: solid 1px rgb( 125 166 255 );
    left: -132px;
    width: 120px; 
    height: 22px; 
    transform: rotate( -145deg );
    background: rgb( 237,244,255 );
    transition: background-color 100ms linear;
}