@font-face {
    font-family: mies;
    src: url(/fonts/mieszkanie.otf) format("truetype");
}

@font-face {
    font-family: pixelgothic;
    src: url(/fonts/GothicPixels\ copie.ttf) format("truetype");
}

@font-face {
    font-family: alagard;
    src: url(/fonts/alagard\ copie.ttf) format("truetype");
}

* {
  cursor: url('https://cdn.cursors-4u.net/css-previews/shark-attack-hand-0bd3e672-css.webp') 0 0, auto !important;
}



body {
    background-image: url('https://files.catbox.moe/4kz9pb.webp');
    background-repeat: no-repeat;
    background-size: cover;
}

.header {
    width: 75%;
    height: 100px;
    background-color: rgba(240, 248, 255, 0);
    margin-left: auto;
    margin-right: auto;
    padding: 0px;


}

.main {
    width: 75%;
    background-color: rgba(71, 133, 187, 0);
    margin-left: auto;
    margin-right: auto;
    padding: 0px;
    display: block;
}

.pagedoll {
    position: fixed;
    right: 0;
    bottom: 0;
    width: 20%;
    transition: transform 0.2s;
}

.pagedolltop {
    position: fixed;
    left: 0;
    top: 0;
    width: 15%;
    rotate: 180deg;
    transition: transform 0.2s;
}

h1 {
    font-size: 500%;
    position: absolute;
    font-family: mies;
    top: -4%;
    color: antiquewhite;
}

.mainpgdoll {

    padding: 0px;
    width: 15%;
    z-index: 0;
}

.left {
    width: 25%;

}

.meow {
    background-size: cover;

    padding-top: 5px;
    padding-left: 20px;
    padding-bottom: 10%;
}

h2 {
    font-family: pixelgothic;
    font-size: 200%;
    color: #714831;

}

.nav {
    margin-top: -30px;
    margin-left: 10%;
    height: 125px; 
    overflow: auto; 
    width: 80%;
}

p {
    color: #714831;
}

.right {
    width: 70%;
    float: right;
    height: 780px;
    overflow: auto;
}

.row {
    position: relative;
    display: flex;
}



.rightabout {
    width: 70%;
    background-image: url('https://files.catbox.moe/3nhj06.png');
    background-size: contain;
    height: 400px;
}

.about {
    margin-top: 15%;
    margin-left: 15%;
    width: 70%;
    transition: font-size .5s;
}

.about:hover {
    font-size: 150%;
    text-shadow: #fcfaf5;
}

p {
    font-family: alagard;
}

.row {
    display: flex;
}

.zoom, iframe, #statuscafe, table {
    transition: transform 0.2s;

}

.zoom:hover, .pagedoll:hover, .pagedolltop:hover {
    transform:scale(1.05, 0.9);


}

h2:hover, h1:hover {
    mix-blend-mode: difference;
    font-style: italic;
    text-shadow: 0px 0px 8px #fcfaf5;
}

.imagess {
    background-image: url('https://files.catbox.moe/i1445q.JPG');
    transition: transform 0.2s;
    background-size: 60%;
    background-position: 6%;
    background-repeat: no-repeat;
}

.imagess:hover, iframe:hover, #statuscafe:hover, table:hover {
    transform:scale(1.05);
}

.ring {
    
    margin-top: 100px;
    margin-left: 20%;
    width: 55%;
    height: 230px;
    overflow: auto;
}

#statuscafe {
    padding: .5em;
    background-image: url('https://64.media.tumblr.com/433ba0fcc73a623bc1b359ba03837a76/b125b640e16ffe68-e8/s640x960/055183fbb4ed9c02cfd033cb102203ce7c7dffd6.pnj');
    border: 10px solid transparent;
    border-image: url('https://64.media.tumblr.com/aaceedd11ee4fdf5f820c04844f85586/ace9498cf793b074-77/s100x200/9e0df5939825bb82a9573f6732615e337b77cb62.gifv') 20% round;
    
}
#statuscafe-username {
    margin-bottom: .5em;
    font-family: pixelgothic;
    filter: drop-shadow(1px 1px 0 rgb(255, 245, 238)) 
        drop-shadow(-1px 1px 0 rgb(255, 245, 238))
        drop-shadow(1px -1px 0 rgb(255, 245, 238))
        drop-shadow(-1px -1px 0 rgb(255, 245, 238));
}
#statuscafe-content {
    margin: 0 1em 0.5em 1em;
    font-family: alagard;
    color: #fcfaf5;
    filter: drop-shadow(1px 1px 0 rgb(75, 42, 18)) 
        drop-shadow(-1px 1px 0 rgb(75, 42, 18))
        drop-shadow(1px -1px 0 rgb(75, 42, 18))
        drop-shadow(-1px -1px 0 rgb(75, 42, 18));
}

.status {
    margin: 5%;
    width: fit-content;
}