body {
    font-family: Arial, sans-serif;
    color: bisque;
    background-color: #2c3235;
}

.header {
    display: flex;
    align-items: center;
}

.logo {
    height: 50px; /* Adjust the size as needed */
    margin-right: 10px;
}

h1 {
    margin: 0; /* Remove margin to align title with logo */
}

a {
    text-decoration: none;
    color: bisque;
}

.container {
    display: flex;
    justify-content: space-around;
    margin-top: 100px;
}
.button {
    border: none;
    color: white;
    padding: 15px 32px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    margin: 4px 2px;
    cursor: pointer;
    border-radius: 10px;
}

/* Basic button styling */
.sign-in,
#sign-out {
    padding: 10px 20px;
    border: none;
    border-radius: 5px;
    font-size: 16px;
    cursor: pointer;
    transition: background-color 0.3s;
    margin: 5px;
}

/* Sign-in button specific styling */
.sign-in {
    background-color: #4caf50; /* Green */
    color: white;
}

.sign-in:hover {
    background-color: #45a049;
}

/* Sign-out button specific styling */
#sign-out {
    background-color: #f44336; /* Red */
    color: white;
}

#sign-out:hover {
    background-color: #da190b;
}

.toefl {
    background-color: #800080; /* Purple */
}
.my-words {
    background-color: #ffa500; /* Orange */
}
.my-dictionary {
    background-color: #008000; /* Green */
}