You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
139 lines
2.4 KiB
139 lines
2.4 KiB
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;
|
|
}
|
|
|