styles.css

html, body {
    margin: 0;
    padding: 0;
}

.container {
    display: flex;
    flex-direction: column;
    background-color: rgb(245, 245, 220);
}

.header {
    background-color: rgb(0, 123, 255);
    height: 10vh;
    text-align: center;
    transition: height 0.6s ease-in-out; 
}

.header:hover {
    height: 12vh;
}

.title {
    position: relative; 
    transition: transform 0.6s ease-in-out;
}

.header:hover > .title {
    transform: translateX(-43vw) translateY(0.5vh);
}

.contents {
    background-color: rgba(173, 216, 230, 1);
    border-radius: 10px;
    top: -0.8vh;
    height: 4vh;
    display: flex;
    flex-direction: row;
    gap: 1vw;
    width: 100%;
    transition: width 0.6s ease-in-out, margin 0.6s ease-in-out, top 0.6s ease-in-out, height 0.6s ease-in-out, background-color 0.6s ease-in-out;
    margin-left: auto;
    position: relative;
}

.contents > a {
    display: flex; /* Make <a> a flex container for its children */
    flex: 1; /* Allow the <a> element to grow */
}

.contents > a > button {
    height: 100%;
    width: 100%; /* Ensure the button takes full width of its container */
    background-color: rgb(51, 153, 255);
    border-radius: 10px;
    border: 2px solid black; /* Simplified border shorthand */
    font-weight: bold;
}

.contents > a > button:hover{
    background-color: rgb(41, 122, 204);
}

.header:hover > .contents {
    width: 85%;
    margin-left: auto;
    top: -8.5vh;
    height: 8vh;
    margin-right: 10px;
    background-color: rgba(173, 216, 230, 0);
}