html,
body {
    margin: 0;
    width: 100vw;
    height: 100%;
    overflow: hidden;
    background: url(./media/297.GIF);
    cursor: url("https://artwork.neocities.org/pixels/cursors/2247803t2b4h1lw7i.gif")
}

.greeter {
    z-index: 2;
    width: auto;
    height: auto;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    background: black;
    color: white;
    text-align: center;
    padding: 20px;
    box-shadow: -10px 20px 50px black;
}

.footer {
    width: 100%;
    height: 2rem;
    background: url(./media/085.GIF);
    background-size: auto;
    bottom: 0;
    position: fixed;
    z-index: 3;
    border: solid 5px cyan;
    border-image: url(./media/681.GIF) 30 round;
}

.footer marquee {
    width: 100%;
}

.header {
    display: flex;
    justify-content: center;
    width: 100%;
    height: 1rem;
    background: url(./media085.GIF);
    background-size: auto;
    top: 0;
    position: fixed;
    z-index: 3;
    border: solid 5px cyan;
    border-image: url(./media681.GIF) 30 round;
}

.foreground {
    width: 100%;
    height: 40%;
    background: url(./media/002C.jpg);
    background-size: 432px;
    background-repeat: repeat;
    bottom: 0;
    position: fixed;
    z-index: 1;
    transform: perspective(6px) rotateX(1deg);
}

.mainwrap {
    overflow-x: scroll;
    margin-left: 5%;
    margin-top: 8%;
    height: 35rem;
    width: 40rem;
    background-color: rgb(0, 0, 0);
    left: 0;
    position: absolute;
    z-index: 2;
    border: solid 15px transparent;
    border-image: url(./media/854.GIF) 30 round;
    padding: 1%;
}

.mainhead {
    padding-left: 2%;
    border: solid cyan 2px;
    width: 80%;
    position: relative;
    margin-bottom: 20px;
}

.mainhead h1 {
    font-family: eightyink;
    color: white;
    font-size: 24px;
    letter-spacing: 5px;
}

.mainhead p {
    font-family: eighty;
    color: white;
    font-size: 14px;
    letter-spacing: 5px;
}

.push {
    height: 5rem;
    position: relative;
}

.fatwrap {
    height: 100vh;
    width: auto;
}

.sona {
    margin-top: -11rem;
    z-index: 3;
    width: 100%;
    height: 140%;
    background: url(./media/sona.png);
    background-size: contain;
    background-repeat: no-repeat;
    right: 0;
    position: absolute;
    pointer-events: none;
}

.guestbook {
    margin-left: 2%;
    margin-top: 5%;
    height: 1rem;
    width: 1rem;
    left: 0;
    position: absolute;
    z-index: 3;
}

.guestbook {
    margin-left: 2%;
    margin-top: 5%;
    height: 1rem;
    width: 1rem;
    left: 0;
    position: absolute;
    z-index: 3;
}

.nav {
    margin-left: 13%;
    margin-top: 35%;
    height: 20rem;
    width: 20rem;
    left: 0;
    position: absolute;
    z-index: 3;
    background: url('tumblr_6dc292c6bf9660768bc5fdeffa8e8252_32963226_2048.png');
    background-size: contain;
    background-repeat: no-repeat;
}

.title {
    margin-right: 3%;
    margin-top: -4%;
    height: 10rem;
    width: 40rem;
    right: 0;
    position: absolute;
    z-index: 3;
    padding-left: 100px;
    animation-name: floating;
    animation-duration: 3s;
    animation-iteration-count: infinite;
    animation-timing-function: ease-in-out;

}

.title:hover {
    animation-duration: 0.5s;
}

.title p {
    font-size: 120px;
    color: white;
    font-family: gothic;
    letter-spacing: 35px;
    text-shadow: 2px 3px 0px rgba(28, 190, 114, 0.605);
}

.greeter h1 {
    color: white;
    font-family: eightyink;
}

.greeter p {
    color: white;
    font-family: eighty;
    letter-spacing: 2px;
}

.greeter a:hover {
    color: blue;
}

.adopt1 {
    margin-right: 25%;
    margin-top: 41%;
    height: 15rem;
    width: 15rem;
    right: 0;
    position: absolute;
    z-index: 7;
    background: url(./media/rd8.gif);
    background-size: contain;
    background-repeat: no-repeat;
}

.adopt1:hover {
    height: 15.5rem;
    width: 15.5rem;
}

.adopt2:hover {
    height: 15.5rem;
    width: 15.5rem;
}


.adopt2 {
    margin-right: 85%;
    margin-top: 40%;
    height: 15rem;
    width: 15rem;
    right: 0;
    position: absolute;
    z-index: 7;
    background: url(./media/bld4.gif);
    background-size: contain;
    background-repeat: no-repeat;
    transform: scaleX(-1);
}

.sticker1 {
    margin-right: 10%;
    margin-top: 20%;
    height: auto;
    right: 0;
    position: absolute;
    z-index: 7;
}

.sticker2 {
    margin-right: 18%;
    margin-top: 25%;
    height: auto;
    right: 0;
    position: absolute;
    z-index: 7;
}

.sticker3 {
    margin-right: 10%;
    margin-top: 15%;
    height: auto;
    right: 0;
    position: absolute;
    z-index: 7;
}

.sticker4 {
    margin-right: 10%;
    margin-top: 15%;
    height: auto;
    position: absolute;
    z-index: 7;
}


@font-face {
    font-family: gothic;
    src: url(./media/gothic.ttf);
}

@font-face {
    font-family: eighty;
    src: url(./media/AlphabetMinusEighty.ttf);
}

@font-face {
    font-family: eightyink;
    src: url(./media/AlphabetMinusEightyInk.ttf);
}

@keyframes floating {
    0% {
        transform: translate(0, 0px);
    }

    50% {
        transform: translate(0, 15px);
    }

    100% {
        transform: translate(0, -0px);
    }
}