@font-face {
    font-family: 'ketchup-manis';
    src: url(/assets/fonts/ketchup-manis-demo/Ketchup\ Manis\ Demo.ttf) format('truetype');
    
}

@font-face {
    font-family: 'erica-ormig';
    src: url(/assets/fonts/erika-ormig/Erika\ Ormig.ttf) format('truetype');
}

@font-face {
    font-family: 'yomogi';
    src: url(/assets/fonts/yomogi/Yomogi-Regular.ttf) format('truetype');
}

html {
    background-image: url(/homepage/hp-images/leafy-background.png);
    background-attachment: fixed;
    background-size: cover;
    background-color: #42703f;

     cursor: url('/cursors/Defaultcursor.png'), auto;
     font-size: 62.5%;
}

body {
    font-size: 14px;
    font-size: 1.4rem;
}


a:hover {
    cursor: url('/cursors/Hovercursor.png'), pointer;
}

.wrap {
    flex-wrap: wrap;
}

.flex {
    display: flex;
}

.space-evenly {
    justify-content: space-evenly;
}

/*START OF WIGGLE ANIMATION*/
.wiggle:hover {
  /* Start the shake animation and make the animation last for 0.5 seconds */
  animation: shake 0.5s;

  /* When the animation is finished, start again */
  animation-iteration-count: infinite;
}

@keyframes shake {
  0% { transform: translate(1px, 1px) rotate(0deg); }
  10% { transform: translate(-1px, -2px) rotate(-1deg); }
  20% { transform: translate(-3px, 0px) rotate(1deg); }
  30% { transform: translate(3px, 2px) rotate(0deg); }
  40% { transform: translate(1px, -1px) rotate(1deg); }
  50% { transform: translate(-1px, 2px) rotate(-1deg); }
  60% { transform: translate(-3px, 1px) rotate(0deg); }
  70% { transform: translate(3px, 1px) rotate(-1deg); }
  80% { transform: translate(-1px, -1px) rotate(1deg); }
  90% { transform: translate(1px, 2px) rotate(0deg); }
  100% { transform: translate(1px, -2px) rotate(-1deg); }
}

/*CORNER SKY STUFF*/
.cornersky {
    position: sticky;
    width: 15%;
    height: 15%;
    left: -1%;
    top: -1%;
}

.tornsky {
    position: absolute;
    width: 100%;
}


/*START OF 1st CONTAINER*/

.background {
    position: absolute;
    width: 38%;
    height: 90%;
    left: 10%;
    top: 5%;
    border-radius: 16px;
    background-color: #ffe19f;

}
.container-1 {
    position: absolute;
    width: 97%;
    height: 98.5%;
    left: -1.2%;
    top: -1.3%;
    border-radius: 16px;
    background-color: #ffe19f;
}

/*inspired by Oopsie Doodles wavy border https://oopsiedoodle.com/*/

.wavy-border {
  position: absolute; 
  background-color: transparent;
  border-top: 20px solid transparent;
  border-left: 20px solid transparent;
  border-right: 20px solid transparent;
  border-bottom: 20px solid transparent;
    border-bottom-width: 20px;
    border-bottom-style: solid;
    border-bottom-color: transparent;
  border-image: url(/homepage/hp-images/wavy-border2.png) round 44;
    border-image-outset: 0;
  border-image-outset: 0px 0px 0px 0px;
  margin-bottom: 50px;
}

/*START OF HEADER*/
header {
    position: absolute;
    left: 5%;
    top: 2%;
}

.letter-t  {
    float: left;
    width: 10%;
    padding: 5px;
}

.letter-o  {
    position: absolute;
    float: left;
    width: 10%;
    padding: 5px;
    top: -5%;
    left: 12%;
    rotate: 10deg;
}

.letter-a  {
    position: absolute;
    float: left;
    width: 10%;
    top: 26%;
    left: 24%;
    padding: 5px;
}

.letter-d  {
    position: absolute;
    float: left;
    width: 10%;
    top: -10%;
    left: 36%;
    padding: 5px;
    rotate: -10deg;
}

.letter-e  {
    position: absolute;
    float: left;
    width: 10%;
    top: 15%;
    left: 48%;
    padding: 5px;
    rotate: -5deg;
}

.letter-l1  {
    position: absolute;
    float: left;
    width: 10%;
    top: -5%;
    right: 27%;
    rotate: 15deg;
    padding: 5px;
}

.letter-l2  {
    position: absolute;
    float: left;
    width: 10%;
    top: 13%;
    right: 15%;
    padding: 5px;
    rotate: -8deg;
}

.letter-y  {
    position: absolute;
    float: left;
    width: 10%;
    top: -5%;
    right: 3%;
    padding: 5px;
    rotate: -5deg;
}
/*END OF HEADER*/

/*GREETING*/
.greeting {
    position: absolute;
    background-color: #42703f;
    border: 3px dotted #ffe19f;
    border-radius: 16px;
    width: 90%;
    height: 25%;
    left: 5%;
    top: 12%;
    color: #ffe19f;
    overflow: auto;
}

.hello {
    position: absolute;
    left: 2.5rem;
    margin-top: 2rem;
    font-size: 6rem;
    font-family: 'ketchup-manis';
    color: #fcb017;
    filter: drop-shadow(2px 0 0 white) drop-shadow(0 2px 0 white) drop-shadow(-2px 0 0 white) drop-shadow(0 -2px 0 white) drop-shadow(0px 1px 1px #132b1a) drop-shadow(0px 1px 1px #132b1a );
}

.welcome {
    position: absolute;
    left: 2rem;
    margin-top: 9rem;
    font-size: 3rem;
    text-decoration: underline;
    text-decoration-style: wavy;
}

.greeting span {
    position: absolute;
    font-size: 2.5rem;
    top: 11rem;
    left: 2rem;
    padding-right: 2rem;
    font-family: 'yomogi';
}

/*BOOKSHELF STUFF*/

.bookshelf {
    position: absolute;
    width: 90%;
    height: 58%;
    left: 5%;
    top: 40%;
}

#bookshelfpng {
    position: absolute;
    width: 100%;
    height: 100%;
}

.BookshelfClickables {
    position: absolute;
    width: 98%;
    height: 98%;
}

.collumn-1 {
    float: left;
    width: 12%;
    padding: 2px;
}

.row-1 {
    position: absolute;
    float:right;
    width: 98%;
    height: 18%;
    top: 8%;
    padding: 5px;
}

.row-2 {
    position: absolute;
    float:right;
    width: 98%;
    height: 25%;
    top: 28%;
    padding: 5px;
}

.row-3 {
    position: absolute;
    float:right;
    width: 98%;
    height: 38%;
    top: 55%;
    padding: 5px;
}

.Book-1 {
    position: absolute; 
    top: 7%; 
    left: 7%; 
    width: 10%; 
    height: 100%;
}

.Book-2 {
   position: absolute; 
   top: 7%; 
   left: 15%; 
   width: 10%; 
   height: 100%; 
}

.Book-3  {
    position: absolute; 
    top: 7%; 
    left: 23%; 
    width: 10%; 
    height: 99%;
}

.camera {
    width: 55%;
    height: 50%;
    top: -7%;
    left: 70%;
    position: absolute;
}

.camera::before {
    content: url(/homepage/hp-images/newcamera1.png);
    zoom: 50%;
}

.camera:hover::before {
    content: url(/homepage/hp-images/newcamera2.png);
    zoom: 50%;
}

/*not added yet*/
.mushroom-mug {
    position: absolute;
    top: 30%;
    left: 11%;
    width: 20%;
}

.hp-plant {
    width: 33%;
    height: 100%;
    top: -18%; 
    left: 68%;
    object-fit: fill;
    position: absolute;
    z-index: 2;
    
}

.hp-plant::before {
    content: url(/homepage/hp-images/Salad-fingers-pothos.png);
    zoom: 15%;
    transition: opacity 0.3s ease-in-out;
}

.hp-plant:hover::before {
    content: url(/homepage/hp-images/pothos-outlined.png);
    zoom: 15%;
}

.minecraft {
    width: 15%;
    height: 100%;
    top: 12%;
    left: 50%;
    position: absolute;
}

.minecraft::before {
    content: url(/homepage/hp-images/minecraftFrog.png);
    zoom: 5%;
    transition: opacity 0.3s ease-in-out;
}

.minecraft:hover::before {
    content: url(/homepage/hp-images/minecraftfrog-outlined.png);
    zoom: 5%;
}



/*END OF CONTAINER-1*/

/*MARQUEE*/


.top-container {
    position: absolute;
    width: 30%;
    height: 6.5%;
    right: 19%;
    top: 5%;
    border-radius: 16px;
    background-color: #42703f;
    border: 2.5px dotted #fcb017;
}

.coolsites {
    position: absolute;
    left: 1%;
    margin-top: 0.5%;
    width: 20%;
    height: 100%;
}

.coolsites h3 {
    color: #fcb017;
    font-family: 'ketchup-manis';
    font-size: 22px;
    filter: drop-shadow(2px 0 0 white) drop-shadow(0 2px 0 white) drop-shadow(-2px 0 0 white) drop-shadow(0 -2px 0 white) drop-shadow(0px 1px 1px #132b1a) drop-shadow(0px 1px 1px #132b1a );
}



#marquee-inner:hover {
    animation-play-state: paused;
}

/*
Source - https://stackoverflow.com/a/78996815
Posted by Fabian Merchan, modified by community. See post 'Timeline' for change history
Retrieved 2026-06-08, License - CC BY-SA 4.0
*/

.marquee {
    position: absolute;
    width: 75%;
    height: 50%;
    top: 34%;
    left: 23%;
    overflow: hidden;
}
#marquee-inner {
    --duration: 15;

    
    position: absolute;
    width: 100%;
    white-space: nowrap;
    display: flex;
    animation: marquee calc(var(--duration) * 1s) linear infinite;
}



@keyframes marquee {
    to {
        transform: translateX(-50%);
    }
}



/*END SCROLL*/

/*START OF CONTAINER-2*/
.container-2 {
    position: absolute;
    width: 30%;
    height: 30%;
    right: 19%;
    top: 13%;
    border-radius: 16px;
    background-color: #ffe19f;
}

.currently {
    position: absolute;
    width: 100%;
    height: 18%;
    top: 0%;
    left: 2%;
}

.title {
    position: absolute;
    font-family: 'Times New Roman', Times, serif;
    color: #132B1A;
}

/*start of list*/
.list {
    position: absolute;
    width: 100%;
    height: 79%;
    left: 0%;
    top: 20%;

}

.list li {
    overflow: auto;
}

.list p {
    position: absolute;
    font-family: monospace;
    font-size: 1.7rem;
    color: #132B1A;
    left: 14rem;
    margin-top: 0.8rem;
}

.listening {
    position: absolute;
    width: 97%;
    height: 12%;
    left: 1%;
    top: 1%;
    background-color: #bf5b30;
    border: 3px dotted #ffe19f;
    border-radius: 16px;
    text-align: left;
    overflow: hidden;
}

.listening h2 {
    position: absolute;
    font-family: 'Times New Roman', Times, serif;
    color: #132B1A;
    text-decoration: underline;
    font-size: 1.8rem;
    margin-top: 0.8rem;
    left: 2%;
}

.reading {
    position: absolute;
    width: 97%;
    height: 12%;
    left: 1%;
    top: 17%;
    background-color: #808035;
    border: 3px dotted #ffe19f;
    border-radius: 16px;
    text-align: left;
    overflow: hidden;
}

.reading h2 {
    position: absolute;
    font-family: 'Times New Roman', Times, serif;
    color: #132B1A;
    text-decoration: underline;
    font-size: 1.8rem;
    margin-top: 0.8rem;
    left: 2%;
}

.watching {
    position: absolute;
    width: 97%;
    height: 12%;
    left: 1%;
    top: 33%;
    background-color: #8babf1;
    border: 3px dotted #ffe19f;
    border-radius: 16px;
    text-align: left;
    overflow: hidden;
}

.watching h2 {
    position: absolute;
    font-family: 'Times New Roman', Times, serif;
    color: #132B1A;
    text-decoration: underline;
    font-size: 1.8rem;
    margin-top: 0.8rem;
    left: 2%;
}

.making {
    position: absolute;
    width: 97%;
    height: 12%;
    left: 1%;
    top: 49%;
    background-color: #fcb017;
    border: 3px dotted #ffe19f;
    border-radius: 16px;
    text-align: left;
    overflow: hidden;
}

.making h2 {
    position: absolute;
    font-family: 'Times New Roman', Times, serif;
    color: #132B1A;
    text-decoration: underline;
    font-size: 1.8rem;
    margin-top: 0.8rem;
    left: 2%;
}

.loving {
    position: absolute;
    width: 97%;
    height: 12%;
    left: 1%;
    top: 65%;
    background-color: #42703f;
    border: 3px dotted #ffe19f;
    border-radius: 16px;
    text-align: left;
    overflow: hidden;
}

.loving h2 {
    position: absolute;
    font-family: 'Times New Roman', Times, serif;
    color: #132B1A;
    text-decoration: underline;
    font-size: 1.8rem;
    margin-top: 0.8rem;
    left: 2%;
}

.other {
    position: absolute;
    width: 97%;
    height: 12%;
    left: 1%;
    top: 81%;
    background-color: #da514b;
    border: 3px dotted #ffe19f;
    border-radius: 16px;
    text-align: left;
    overflow: hidden;
}

.other h2 {
    position: absolute;
    font-family: 'Times New Roman', Times, serif;
    color: #132B1A;
    text-decoration: underline;
    font-size: 1.8rem;
    margin-top: 0.8rem;
    left: 2%;
}
/*end of list*/

/*END OF CONTAINER-2*/

/*START OF CONTAINER-3*/
.container-3 {
    position: absolute;
    width: 43%;
    height: 50%;
    right: 6%;
    top: 45%;
    border-radius: 16px;
    background-color: #ffe19f;
}

.button-box {
    position: absolute;
    width: 50%;
    height: 85%;
    left: 2%;
    top: 12%;
    background-color: #bf5b30;
    border: 3px dotted #ffe19f;
    border-radius: 16px;
    text-decoration: underline;
    font-family: monospace;
    color: #ffe19f;
    font-size: 20px;
}

.byme {
    position: absolute;
    width: 98%;
    height: 10%;
    text-align: center;
    top: 0%;
    justify-content: center;
}

.byme-buttons {
    position: absolute;
    left: 2%;
    top: 10%;
    justify-content: center;
    overflow: auto;
}

.otherstuff {
    position: absolute;
    width: 98%;
    height: 10%;
    text-align: center;
    top: 26%;
    justify-content: center;
    
}

.other-img {
    position: absolute;
    left: 2%;
    top: 36%;
    overflow: auto;
}

.listings {
    position: absolute;
    width: 98%;
    height: 28%;
    top: 58%;
    text-align: center;
    justify-content: center;
    
    
}

.listingimg {
    position: absolute;
    left: 2%;
    width: 98%;
    height: 20%;
    top: 68%;
    overflow: auto;
}

.listingimg a {
    color: #ffe19f;
}

.more {
    position: absolute;
    width: 98%;
    height: 10%;
    text-align: center;
    text-decoration: underline;
    font-family: monospace;
    color: #ffe19f;
    font-size: 20px;
    top: 85%;
    justify-content: center;
}

.mushroomfrog {
    position: absolute;
    left: 0%;
    top: -3%;
    height: 200px;
    max-width: 50%;
}

.updates {
    position: absolute;
    width: 33%;
    height: 85%;
    right: 10%;
    top: 12%;
    background-color: #9ca370;
    border: 3px dotted #bd231b;
    border-radius: 16px;
}

#update-pixel {
    position: absolute;
    top: 2%;
    left: 40%;
}

.updates header {
    position: absolute;
    left: 0%;
    top: 3%;
    width: 98%;
    height: 10%;
    text-align: center;
    text-decoration: underline;
    font-family: monospace;
    color: #bd231b;
    font-size: 20px;
    justify-content: center;
}

.updates ul {
    position: absolute;
    width: 77%;
    height: 83%;
    left: 2%;
    top: 0%;
}

.updates li {
    font-family: monospace;
    color: #bd231b;
    font-size: 15px;
    list-style-image: url(/assets/pixels/Exclamation-bullet.gif);
    list-style-type: circle;
}

.updates li h3 {
    font-family: 'Times New Roman', Times, serif;
    text-decoration: underline;
}

.updateslist {
    position: absolute;
    overflow: auto;
    width: 100%;
    height: 50%;
    top: 14%;
    
}

.typingfrog {
    position: absolute;
    top: 60%;
    height: 40%;
    width: 100%;
}



/*END OF CONTAINER-3*/

/*LEFT SIDE*/
.left-side {
    position: absolute;
    width: 20%;
    height: 90%;
    left: -10%;
    top: 5%;
}


.trinkets {
    position: absolute;
    width: 90%;
    height: 100%;
    top: 24%;
    left: -20%;
}

.trinketshelf {
    position: absolute;
    width: 100%;
}

.bruh {
    position: absolute;
    width: 55%;
    height: 23%;
    left: 65%;
    top: 84%;
    
}

.bruhpng {
    position: absolute;
    width: 100%;
}

/*END OF LEFT*/

/*RIGHT SIDE*/
.right-side {
    position: absolute;
    width: 20%;
    height: 90%;
    right: 2%;
    top: 5%;
}

.frame-tin {
    position: absolute;
    width: 25%;
    height: 50%;
    top: 55%;
    right: -13%;
}
.frametinpng {
    width: 100%;
    height: 100%;
    position: absolute;
}

.behind {
    position: absolute;
    width: 17.6%;
    height: 19.8%;
    top: 61.5%;
    right: -9.2%;
    rotate: -1deg;

}

.behindImg {
    width: 100%;
    height: 100%;
    position: absolute;
    display: none;
}

.todosection {
    position: absolute;
    right: 2%;
    top: 5%;
    border-radius: 16px;
    background-color: #bf5b30;
    width: 15%;
    height: 38%;
}



.todobox {
    position: absolute;
    top: 1.7%;
    left: 2.9%;
    width: 93%;
    height: 96%;
    background-color: #ffe19f;
    border: 2px dotted #bf5b30;
    border-radius: 16px;

}

.todobox header {
    position: absolute;
    left: 0%;
    top: 0%;
    width: 100%;
    height: 10%;
    text-align: center;
    text-decoration: underline;
    font-family: monospace;
    color: #bf5b30;
    font-size: 20px;
    justify-content: center;
}

.todolist {
    position: absolute;
    width: 100%;
    top: 10%;
    height: 70%;
    overflow: auto;
}

.todolist ul {
    position: absolute;
    width: 77%;
    height: 83%;
    left: 2%;
    top: 0%;
}

.todolist li {
    font-family: monospace;
    color: #bf5b30;
    font-size: 15px;
    list-style-image: url(/assets/pixels/Bulletpoint-spin.gif);
    list-style-type: circle;

.todolist li h3 {
    font-family: 'Times New Roman', Times, serif;
    text-decoration: underline;
}

.tododecorbox {
    position: absolute;
    width: 100%;
    height: 20%;
    top: 80%;
}

/*END OF RIGHT*/