body {
    overflow: hidden;
}
#wrapper {
    background-color: white;
    width: 40vw;
    margin: auto;
    box-shadow: 25px 25px 50px 0 white , -25px -25px 50px 0 white , 25px -25px 50px 0 white , -25px 25px 50px 0 white ;
    height: 70vh;
    border-radius: 30px;
    margin-top: 12vh;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 5px;
}
::-webkit-scrollbar {
    display: none;
}
main {
    width: 28vw;
    height: 85vh;
    overflow: scroll;
    height: 70vh;
}
#sidebar {
    width: 12vw;
    height: 85vh;
    font-family: panic;
    display: flex;
    align-items: center;
}
#sidebar img {
    width: 10vw;
    display: block;
    margin: 20px;
    border: 3px solid black;
    box-shadow: 4px 4px black;
}
#sidebar img:hover {   
    transform: rotate(3deg);
}
h1 {
    font-size: 1.5vw;
    font-weight: normal;
}
h1:hover {
    transform: rotate(-3deg) scale(1.2);
}
#link {
    border: 2px solid black;
    box-shadow: 2px 2px;
    padding: 5px;
    color: black;
    font-family: panic;
    background-color: white;
}
#link:hover{
    transform: rotate(-3deg) scale(1.1);
    background-color: rgb(233, 249, 255);
}
.p {
    border: 2px solid black;
    box-shadow: 2px 2px;
    padding: 5px;
    font-family: distort;
    margin: 20px;
}
.p:hover {
    transform: rotate(2deg) scale(1.03);
}

body {
    background-color: black;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
}

.img {
    width: 15vw;
    height: 50vh;
    margin: auto;
    filter: grayscale(100%);
    margin-top: 25vh;
    z-index: 3;
    position: relative
}
.img:hover {
    transform: rotate(-3deg) scale(1.1);
    filter: grayscale(0);
}
#right:hover {
    transform: rotate(3deg) scale(1.1);
    filter: grayscale(0);
}
#right:hover #star {
    display: none;
}
#right {
    z-index: 3;
    position: relative
}
.stars {
    position: absolute;
    filter: hue-rotate(90deg);
    width: 10vw;
    top: 2vw;
    height: 13vw;
    left: 37vw;
    transition: ease .5s;
}
.stars:hover {
    transform: rotate(5deg);
}
#star {
    position: absolute;
    width: 10vw;
    right: 7vw;
    bottom: 5vw;
    z-index: 2;
    filter: invert(100%);
    transition: ease .5s;
}
#star:hover {
    transform: rotate(-5deg);
}
#kitty {
    position: absolute;
    transform: rotate(180deg);
    z-index: 2;
    left: 5vw;
    width: 10vw;
    bottom: 3vw;
    filter: grayscale(100%);
}
#kitty:hover {
    transform: rotate(170deg) scale(1.1) translate(-10px);
    filter: grayscale(0);
}
#toy {
    position: absolute;
    transform: rotate(106deg);
    bottom: 5vw;
    width: 8vw;
    left: 13vw;
    filter: grayscale(100%);
}
#toy:hover {
    filter: grayscale(0);
    transform: rotate(110deg) scale(1.1);
}
#rose {
    position: absolute;
    width: 10vw;
    filter: grayscale(100%);
    top: 2vw;
    left: 20vw;
}
#rose:hover {
    filter: grayscale(0%);
    transform: rotate(4deg) scale(1.1);
}
#woman {
    position: absolute;
    width: 10vw;
    filter: grayscale(100%);
    right: 25vw;
    bottom: 1vw;
    transform: rotate(15deg);
}
#woman:hover {
    transform: rotate(25deg) scale(1.06);
    filter: grayscale(0);
}
#rabbit {
    position: absolute;
    width: 13vw;
    right: 19vw;
    top: 0vw;
    transform: rotate(10deg);
}
#rabbit:hover {
    transform: rotate(-10deg) scale(1.1);
    top: 0;
}
#angel {
    position: absolute;
    width: 11vw;
    left: 27vw;
    bottom: -10vw;
    filter: grayscale(100);
    z-index: 4;
    transform: rotate(-10deg);
}
#angel:hover {
    transform: rotate(0deg) scale(1.1);
    filter: grayscale(0);
}

@font-face {
    font-family: "panic"; 
    src: url(Panic.ttf) format("truetype");
}

@font-face {
    font-family: "distort"; 
    src: url(PositionsByArixbored-Regular\ .otf) format("truetype");
}