body {
    font-size: xx-large;
    color: rgb(184, 185, 122); /* Changed text color to white for better contrast */
    background-color: rgb(43, 43, 43);
    text-align: center;
}

.hatter {
    background-color: rgb(169, 157, 212); /* Purple background */
    padding: 20px;
    border-radius: 10px;
    margin-bottom: 20px;
}

.content {
    background-color: rgba(255, 255, 255, 0.1); /* Slightly transparent white */
    padding: 15px;
    border-radius: 10px;
    margin: 20px;
}

.image {
    width: 700px;
    margin: 20px auto;
    display: block;
    border: 5px solid rgba(108, 74, 233, 0.5); /* Purple border */
    border-radius: 10px;
}

.links h1 {
    margin: 10px 0;
}

.button {
    display: inline-block;
    padding: 15px 30px;
    background-color: rgb(158, 115, 175); /* Button background color */
    color: rgb(70, 70, 70); /* Button text color */
    border-radius: 5px;
    text-decoration: none;
    transition: background-color 0.3s, transform 0.2s; /* Transition effects */
}

.button:hover {
    background-color: rgb(78, 98, 105); /* Change button color on hover */
    transform: scale(1.05); /* Slightly increase size on hover */
}