/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
   HTML content. To learn how to do something, just try searching Google for questions like
   "how to change link color
/* General Styles */
body {
    font-family: Arial, sans-serif;
    text-align: center;
    padding: 20px;
    background-color: #eaf0f8; /* Light blue */
    color: #4b3f2f; /* Dark brown */
}

/* Header Styles */
header {
    margin-bottom: 20px;
}

header h1 {
    color: #2e4a6b; /* Deep blue */
    margin: 0;
}

.home-button {
    display: inline-block;
    margin-top: 10px;
    padding: 10px 20px;
    background-color: #8b5e34; /* Warm brown */
    color: #ffffff; /* White */
    text-decoration: none;
    border-radius: 5px;
    font-size: 16px;
    font-weight: bold;
}

.home-button:hover {
    background-color: #6f4828; /* Darker brown */
}

/* Input and Button Styles */
input[type="text"] {
    padding: 10px;
    width: 60%;
    max-width: 400px;
    border: 2px solid #2e4a6b; /* Deep blue */
    border-radius: 5px;
    margin-bottom: 10px;
}

button {
    padding: 10px 20px;
    background-color: #2e4a6b; /* Deep blue */
    color: #ffffff; /* White */
    border: none;
    border-radius: 5px;
    font-size: 16px;
    cursor: pointer;
}

button:hover {
    background-color: #1c2e47; /* Darker blue */
}

/* Certificate Styles */
.certificate {
    display: none;
    margin-top: 20px;
    padding: 20px;
    border: 2px solid #8b5e34; /* Warm brown */
    background: #ffffff; /* White */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    width: 80%;
    max-width: 600px;
    margin: 20px auto;
}

.certificate h1 {
    font-size: 24px;
    color: #2e4a6b; /* Deep blue */
    margin: 0;
}

.certificate h2 {
    font-size: 22px;
    color: #8b5e34; /* Warm brown */
    margin: 5px 0;
}

.certificate h3 {
    font-size: 20px;
    color: #4b3f2f; /* Dark brown */
    margin: 5px 0;
}

.certificate p {
    font-size: 18px;
    color: #4b3f2f; /* Dark brown */
    margin: 5px 0;
}

.serial {
    margin-top: 10px;
    font-weight: bold;
    color: #8b5e34; /* Warm brown */
}