.contenthome, body.dark .contenthome{
  position: static;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 90vh;
  align-items: center;
  text-align: center;
  background-image: none;
  filter: none;
  }

.aboutMe{
                background-color: #ffee80;
                position: relative;
                left: 379px;
                top: -169px;
                rotate: 7deg;
                height: 170px;
                width: 170px;
                border-radius: 50%;
                cursor: pointer;
                align-content: center;
                filter: drop-shadow(2px 2px 3px rgba(0, 0, 0, 0.23));
                transition: transform  0.4s ease, background-color 0.4s ease;
            }
            
            .aboutMe:hover{
                transform: scale(1.05) translate(10px, 5px);
            }

body.dark .aboutMe{
    background-color: #a8fbff;
    transition: transform  0.4s ease, background-color 0.4s ease;
}

            .MeMeMe{
                    position: absolute;
                    font-size: 16px;
                    z-index: 4;
                    transform: translate(122px, 127px) rotate(18deg);
            }
            
            .MeImg{
                transform: translate(-5px, 2px);
                transition: transform 0.4s ease;
            }
            
            .aboutMe:hover .MeImg{
                transform: scale(1.1) rotate(4deg);
            }
            
            .welcomeTxt{
                position: relative;
                margin-top: -403px;
                left: -61px;
                rotate: -8deg;
                height: 310px;
                width: 470px;
                font-size: 19px;
                align-content: center;
                z-index: -1;
                filter: drop-shadow(-2px 2px 5px rgba(68, 68, 68, 0.17));
                pointer-events: none;
            }
            
            .feederlyheader{
                position: relative;
                top: -287px;
                left: 14px;
                rotate: 3deg;
            }
            
            h1{
                font-size: 86px;
            }
            
            .imagewrapper{
                width: 200px;
                height: 400px;
                position: absolute;
                margin-top: -521px;
                left: 518px;
                pointer-events: none;
            }
            
            .imagecontainer1{
                position: absolute;
                height: 195px;
                width: 243px;
                top: 47px;
                left: -102px;
                align-content: center;
                pointer-events: none;
            }
            
            .imagecontainer2{
                position: absolute;
                height: 136px;
                width: 243px;
                top: 128px;
                left: -244px;
                align-content: center;
                pointer-events: none;
            }
            
            #paintbutton{
                position: absolute;
                background-color: transparent;
                border: none;
                top: -35px;
                left: 89px;
                cursor: pointer;
                pointer-events: all;
                filter: drop-shadow(2px 2px 2px rgba(0, 0, 0, 0.17))
               
            }

    .paintbutton{
     position: absolute;
     rotate: -23deg;
     transition: transform 0.4s ease;
}
            
            .paintbutton:hover{
                transform: scale(1.08) rotate(3deg);
            }
            
            .clock{
                position: relative;
                margin-top: -70px;
                width: 165px;
                height: 54px;
                rotate: -8deg;
                align-content: center;
                color: #8668a4;
                pointer-events: none;
                font-size: 15px;
                filter: drop-shadow(2px 2px 3px rgba(0, 0, 0, 0.17));
            }
            
            body.dark .clock{
                color: #454876;
            }
            
            .clockwrapper{
                position: relative;
                top: -211px;
                left: -90px;
            }
            
            .clocktext{
                position: relative;
                top: -8px; left: -274px; rotate: -21deg;
            }
            
            .homemain{
                position: relative;
                top: -12px;
                left: 20px;
            }
            
            .line1{
                position: absolute;
                top: 40%;
                left: -8%;
                scale: 1.2;
            }

.sparkle1{
    position: absolute;
    top:-67px;
    left:565px;
    pointer-events: none;
            }

.sparkle2{
    position: absolute;
    top:47px; left:37px;
    pointer-events: none;
            }
.sparkle3{
    position: absolute;
    top:-456px; left:-131px;
    pointer-events: none;
            }

        .changelog{
    background: #fffef9;
    padding: 18px;
    width: 300px;
    max-height: 460px;
    color:#8e6bb9;
    
    overflow-y: auto;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.17);
    line-height: 1.5;
    overflow-x: hidden;
    transform-origin: top;
    margin-top: -205px;
    margin-left: -424px;
    rotate: 7deg;
}

body.dark .changelog{
    background: #919eb1;
    color:#284269;
}

/* Hide scrollbar for Chrome, Safari and Opera */
.changelog::-webkit-scrollbar {
  display: none;
}

/* Hide scrollbar for IE, Edge and Firefox */
.changelog {
  -ms-overflow-style: none;  /* IE and Edge */
  scrollbar-width: none;  /* Firefox */
}

.contentchild{
    position: relative;
    margin-top: 328px;
    }

.ramses{
    transform: translate(155px, -74px)
}

.melo{
    transform: translate(-122px, -22px)
}

.pride{
    transform: translate(15px, -170px)
}

.pokeball{
    transform: translate(39px, -83px)
}

.digivice{
    transform: translate(49px, 93px)
}
            
            
            @media (max-width: 900px){
                .contenthome{
                    height:950px;
                    justify-content: flex-start;
                    align-items: center;
                }
                
                .contentchild{
                    position: absolute;
                    top: -90px;
                    left: 72px;
                    scale: 1;
                }
                
                
                .homemain{
                    top: 80px;
                    left: 9px;
                    scale: 0.75;
                }
                
                .feederlyheader{
                left: -12px;
                }
                
                .aboutMe{
                    top: -74px;
                    left:266px;
                    z-index: 3;
                }
                
                .clockwrapper{
                    top: 127px;
                    left: -118px;
                    z-index: 4;
                }
                
                .clock{
                    left: 174px;
                }
                
                .clocktext{
                    top: -4px;
                    left: -99px;
                    rotate: -21deg;
                }
                
                .imagewrapper{
                    top: 277px;
                    left: -72px;
                }
                
                .imagecontainer1{
                    top: 167px;
                    left: 191px;
                    z-index: 4;
                } 
                
                .pokeball{
                    transform: translate(-1px, -82px)
                }
                
                .pride{
                    transform: translate(34px, -14px)
                }
                
                #paintbutton{
                    top:-56px;
                    left: 38px;
                }
                
                .imagecontainer2{
                    top: 638px;
                    left: 74px;
                    z-index: 4;
                }
                
                .melo{
                    transform: translate(-92px, -22px)
                }
                
                .ramses{
                    transform: translate(311px, -222px)
                }
                
                .changelog{
                    margin-top: 15px;
                    margin-left: 155px;
                    rotate: 5deg;
                }
                
                .line1{
                position: absolute;
                top: 12%;
                left: -55%;
                scale: 1.1; 
                }
                
                .sparkle1{
                    top:-157px;
                    left:507px;
                }
                .sparkle2{
                    top:401px;
                    left:-91px;
                }
                .sparkle3{
                    top:-487px;
                    left:-91px;
                }
}
                
     @media (max-width: 580px){
                    .contenthome{
                        height: 1180px;
                    }
                    
                    .contentchild{
                    position: absolute;
                    top: -55px;
                    left: -3px;
                    scale: 1;
                }
                    .imagecontainer1{
                    top: 91px;
                    left: 321px;
                    z-index: 4;
                }
                 
                 .pokeball{
                    transform: translate(-116px, -117px)
                }
                
                .pride{
                    transform: translate(16px, -63px)
                }
                 
                 #paintbutton{
                     top:-47px;
                    left: -46px;
                 }
                 
                 .imagecontainer2{
                    top: 845px;
                    left: 41px;
                    z-index: 4;
                }
                
                .melo{
                    transform: translate(20px, -203px)
                }
                
                .ramses{
                    transform: translate(245px, -67px)
                }
         
         .digivice{
             transform: translate(172px, 77px)
         }
                    
                    .line1{
                position: absolute;
                top: 21%;
                left: -6%;
                scale: 2; 
                }
                 .clockwrapper {
                     top: 120px;
                    left: -80px;
                 }
                
                    .changelog{
                        margin-top: 14px;
                        margin-left: 100px;
                    }
                
                    .aboutMe{
                    top: -74px;
                    left:132px;
                    z-index: 3;
                }
                 
                 .sparkle1{
                    top:-608px;
                    left:355px;
                     scale: 1.2;
                }
                .sparkle2{
                    top:132px;
                    left:-57px;
                }
                .sparkle3{
                    top:-62px;
                    left:299px;
                    transform: scaleX(-1);
                    display: none;
                }
}