body {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    margin: 0;
    background-color: #f9f9f9;
    position: relative;
    overflow: hidden;
}
.floating-character {
    position: absolute;
    width: 80px;
    height: auto;
    opacity: 0.8;
    z-index:-1;
}
@keyframes float1 {
    0% { transform: translate(0, 0) rotate(0deg); }
    20% { transform: translate(50vw, -20vh) rotate(45deg); }
    40% { transform: translate(-30vw, 40vh) rotate(-30deg); }
    60% { transform: translate(40vw, -50vh) rotate(60deg); }
    80% { transform: translate(-50vw, 30vh) rotate(-20deg); }
    100% { transform: translate(30vw, -10vh) rotate(10deg); }
}

@keyframes float2 {
    0% { transform: translate(0, 0) rotate(0deg); }
    15% { transform: translate(-40vw, 20vh) rotate(-30deg); }
    30% { transform: translate(50vw, -40vh) rotate(25deg); }
    50% { transform: translate(-30vw, 50vh) rotate(-50deg); }
    70% { transform: translate(40vw, -30vh) rotate(35deg); }
    100% { transform: translate(-50vw, 20vh) rotate(-15deg); }
}

@keyframes float3 {
    0% { transform: translate(0, 0) rotate(0deg); }
    25% { transform: translate(60vw, -50vh) rotate(70deg); }
    50% { transform: translate(-70vw, 70vh) rotate(-40deg); }
    75% { transform: translate(30vw, -40vh) rotate(55deg); }
    100% { transform: translate(-50vw, 50vh) rotate(-20deg); }
}

@keyframes float4 {
    0% { transform: translate(0, 0) rotate(0deg); }
    10% { transform: translate(30vw, -20vh) rotate(20deg); }
    30% { transform: translate(-60vw, 60vh) rotate(-25deg); }
    50% { transform: translate(50vw, -50vh) rotate(40deg); }
    80% { transform: translate(-30vw, 30vh) rotate(-15deg); }
    100% { transform: translate(60vw, -10vh) rotate(10deg); }
}

@keyframes float5 {
    0% { transform: translate(0, 0) rotate(0deg); }
    20% { transform: translate(-50vw, 50vh) rotate(-30deg); }
    40% { transform: translate(40vw, -60vh) rotate(50deg); }
    60% { transform: translate(-30vw, 70vh) rotate(-45deg); }
    80% { transform: translate(50vw, -30vh) rotate(20deg); }
    100% { transform: translate(-60vw, 40vh) rotate(-10deg); }
}
.container {
width: 80%;
background-color: white;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
border-radius: 8px;
}
.search-area {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    gap: 8px;
    overflow: hidden;
}
.search-area input[type="text"] {
    flex: 1;
    padding: 8px;
    border: 1px solid #ccc;
    border-radius: 4px;
    width: 100%;
}
.search-area button {
    padding: 8px 16px;
    border: none;
    border-radius: 4px;
    background-color: #007bff;
    color: white;
    cursor: pointer;
    white-space: nowrap;
}
.search-area button:hover {
    background-color: #0056b3;
}
.container {
    width: 80%;
    max-width: 600px;
    background-color: white;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    border-radius: 8px;
    padding-bottom: 16px;
}
.table-container {
    padding: 16px;
    max-height: 200px;
    overflow: auto;
}
table {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
}
th, td {
    border: 1px solid #ddd;
    padding: 8px;
    text-align: left;
}
th {
    background-color: #f2f2f2;
}
th:first-child, td:first-child {
    width: 25%;
}
th:last-child, td:last-child {
    width: 75%;
}