/* style.css */

body {
    background-color: #DDD; /* Dark grey background for the main body */
    color: #333; /* White text color for the main body */
}

#letterLink, #letterLink:link, #letterLink:visited, #letterLink:active {
    color: #008b8b; 
    text-decoration: dotted; }

#letterLink:hover {
    color: #00a2a2;
    text-decoration: underline;
}

#result h3 {
    background-color: #008b8b; /* Dark cyan background for h3 elements */
    padding: 5px;
    margin-bottom: 10px;
    text-align: center;
    border-radius: 5px;
    color: #444; /* Dark grey text color for h3 elements */
}

#result .official-card {
    border-color: #000;
    border-style: solid;
    border-radius: 10px; /* Rounded corners */
    padding: 5px;
    margin: 0px 1.5% 5px 1.5%; 
    width: 45%; 
    display: inline-block; 
    vertical-align: top; 
    box-sizing: border-box; 
    color: #000; 
}

#formLetter {
    display: none;
}

/* Media query for smaller screens (e.g., cell phones) */
@media screen and (max-width: 768px) {
    #result .official-card {
        width: 95%; /* Set the width to 100% to make them stack vertically */
        margin: 0px 0 10px 0; /* Adjust the margin to create a gap between stacked elements */
        display: block; /* Change the display to block to stack the elements */
    }
}