style.css

body {
  font-family: sans-serif;
  margin: 0;
  display: flex; /* Enable flexbox on the body */
  flex-direction: column; /* Make content stack vertically */
  min-height: 100vh; /* Ensure the body takes up full viewport height */
}

header,
main {
  padding: 1%;
  text-align: center; /* Center header and footer content */
}

main {
  display: flex; /* Enable flexbox for the main content area */
  flex-direction: column; /* Stack items vertically */
  justify-content: center; /* Center horizontally */
  align-items: center; /* Center vertically */
}

section {
  display: flex; /* Use flexbox for the section layout */
  flex-direction: column; /* Stack items vertically */
  gap: 3%; /* Add space between flag and text */
  align-items: center; /* Vertically align items */
  border: 1px solid #ccc;
  padding: 1.5%;
  border-radius: 10px; /* Rounded corners for the section */
  width: 500px; /* Limit the maximum width of the section */
}

img#countryFlag {
  width: 45%;
  height: auto;
  border: black 1px solid;
  border-radius: 10px;
  margin-bottom: 2%;
}

ul {
  text-align: left;
  line-height: 1.5em;
}

button {
  margin: 1%;
  padding: 1%;
  background-color: #004fa3;
  color: white;
  border-radius: 10px;
  cursor: pointer;
}