@font-face {
    font-family: 'moreSugar';
    src: url('https://codehs.com/uploads/21a14c53c0895f03a02b83bb4032ca7a') format('truetype');
}

    body {
        background-image: url("https://codehs.com/uploads/bb1dad4f036f810e2b48ab96e513b5f5");
        background-repeat: repeat;
        font-family: 'BubblyHandwriting', sans-serif;
        margin: 0;
        padding: 0;
        cursor: url("https://0x0.st/Xp1A.png"), auto !important;
        font-family: 'moreSugar';
 
    }

    #background {
        background-image: url("https://codehs.com/uploads/87a0e9ea1fc2fea396be645db0b88b93");
        background-repeat: repeat;
        background-position: center;
        background-size: auto;
        font-family: 'moreSugar';
    }
    

    #main {
        position: fixed;
        left: 5%;
        top: 5%;
        transform: translate(-50%, -50%);
        width: 1250px;
        height: calc(1250px * 9 / 16);
        background-image: url(https://codehs.com/uploads/8b23a82cf2ec2cca9bde5be566547f55);
        background-size: 1250px;
        background-repeat: no-repeat;
        background-position: center;
        font-family: 'moreSugar';
        animation-name: floating;
        animation-duration: 4s;
        animation-iteration-count: infinite;
        animation-timing-function: ease-in-out;
    }

#title{
    position: fixed;
    left: 54%;
    top: 19%;
}

#photo{
    position: fixed;
    left: 46%;
    top: 33%;
}

#caption{
    position: fixed;
    left: 59%;
    top: 67%;
}

#bunny{
    position: fixed;
    left: 20%;
    top: 57%;
}

@keyframes floating {
    0% { transform: translate(0,  0px); }
    50%  { transform: translate(0, 20px); }
    100%   { transform: translate(0, -0px); }    
}