body, html {
    height: 100%;
    margin: 0;
    overflow: hidden; 
  }
  
body {
    display: flex;
    justify-content: center;
    align-items: center;
    }

#header{
    height: 20vb;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;

}
#header img{
    height: 20vb;
}
#main {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 90vb;
    width: 100%;
}


#side {
    height: 70vb;
}
#side img {
    height: 70vb;
    width: auto;
}

#items {
    width: 70%;
    display: flex;
    height: 70vb;
}

#center {
    width: 50vw;
    align-items: center;
    justify-content: center;
    text-align: center;
    overflow: scroll;
}

a {
    font-family: brush;
}

h1 {
    font-family: brush;

}

#links a {
    font-size: larger;
    display: inline-block;
    padding: 10px 20px;
    margin: 5px;
    background-color: #4CAF50;
    color: rgb(0, 0, 0);
    text-align: center;
    text-decoration: none;
    border: none;
    border-radius: 10px;
    cursor: pointer;
  }
  
  #links a:hover {
    background-color: #6f83f3;
  }
  
#side2 {
    font-family: brush;
    font-size: xx-large;
    display: flex;
    flex-direction: column;
    text-align: center;
    overflow: scroll;
    width: 30vw;
}

#friends {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
}

p {
    font-family: kenagan, sans-serif; /* Use the custom font as the fallback */
    font-size: larger;
  }

@font-face {
    font-family: kenagan;
    
    src: url('stuff/c1-kenangan.regular.otf') format('truetype'); /* Change 'your-font.ttf' to the actual font file name */
  }

@font-face {
font-family: brush;

src: url('stuff/Brushzing-Regular.ttf.otf') format('truetype'); /* Change 'your-font.ttf' to the actual font file name */
}

@keyframes wiggle {
    0% { transform: translateX(0); }
    25% { transform: translateX(-5px); }
    50% { transform: translateX(5px); }
    75% { transform: translateX(-5px); }
    100% { transform: translateX(0); }
  }
  
  .image {
    animation: wiggle 1s ease-in-out infinite;
  }

@keyframes wiggleRotate {
0% { transform: translateX(0) rotate(0); }
25% { transform: translateX(-5px) rotate(-5deg); }
50% { transform: translateX(5px) rotate(5deg); }
75% { transform: translateX(-5px) rotate(-5deg); }
100% { transform: translateX(0) rotate(0); }
}

.melon {
animation: wiggleRotate 4s ease-in-out infinite;
}

.fun-button {
    background-color: #1fd80e;
    border: 2px solid #0d990d;
    color: black;
    padding: 15px 32px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 18px;
    font-weight: bold;
    margin: 4px 2px;
    cursor: pointer;
    border-radius: 50px;
    box-shadow: 0 8px #999;
    transition: all 0.3s ease;
}

.fun-button:hover {
    background-color: #2ecf0e;
    box-shadow: 0 12px #666;
    transform: translateY(-2px);
}

.fun-button:active {
    background-color: #0bdd0b;
    box-shadow: 0 4px #666;
    transform: translateY(4px);
}