html, body{
    height: 100%;
}
body{
    font-family: Arial, sans-serif;
    margin: 0px;
    padding: 0px;
    background-color: #f0f0f0;
    display: flex;
    flex-direction: column;
    
}
main{
    flex: 1;
}
header{
    background-color: black;
    color: white;
    padding: 20px;
    text-align: left;
    margin: 0px;
}
header h3{
    font-size: 2.5rem;
    margin: 5px;
}
nav{
    margin-top: 10px;
    width: fit-content;
    
}
nav,a{
    background-color: white;
    color: black;
    padding: 10px;
    text-decoration: none;
    border-radius: 10px;
    display: inline-block;
    
    
}
nav a:hover{
    background-color: lightgray;
    color: black;
}
h1{
    text-align: center;
    
    font-size: 4rem;
}
#review {
    margin: auto;
    text-align: center;
}
#country {
    text-decoration: underline;
    margin-bottom: 20px;
    
}
#us {
    background-color: #4472dd;
    color: white;
    padding: 10px;
    border-radius: 10px;
    border: none;
}
#us:hover {
    transform: scale(1.05);
}
#brazil {
    background-color: darkblue;
    color: white;
    padding: 10px;
    border-radius: 10px;
    border: none;
}
#brazil:hover {
    transform: scale(1.05);
}
#italy {
    background-color: #2e7d32;
    color: white;
    padding: 10px;
    border-radius: 10px;
    border: none;
}
#italy:hover {
    transform: scale(1.05);
}
#japan {
    background-color: darkred;
    color: white;
    padding: 10px;
    border-radius: 10px;
    border: none;
}
#japan:hover {
    transform: scale(1.05);
}
#southafrica {
    background-color: #c62828;
    color: white;
    padding: 10px;
    border-radius: 10px;
    border: none;
}
#southafrica:hover {
    transform: scale(1.05);
}
#quiz{
    margin: 20px auto;
    text-align: center;
}
.learn-more {
    display: inline-block;
    margin-top: 10px;
    padding: 8px 12px;
    background-color: white;
    color: black;
    text-decoration: none;
    border-radius: 5px;
}
.learn-more:hover {   
    background-color: lightgray;
    color: black;
    transform: scale(1.05);
}
#startQuiz {
    background-color: rgb(238, 64, 64);
    color: white;
    padding: 12px 18px;
    border: none;
    font-size: large;
    border-radius: 8px;
    cursor: pointer;
}
#startQuiz:hover {
    background-color: rgb(189, 49, 49);
    
}

.page {
    text-align: center;
    margin: 40px 0;
}
.page a {
    background: rgb(238, 64, 64);
    color: white;
    padding: 12px 18px;
    margin: 5px;
    border-radius: 8px;
    text-decoration: none;
}
.page a:hover {
    background: rgb(189, 49, 49);
}
footer{
    background-color: black;
    color: white;
    padding: 20px;
    text-align: center;
    margin-top: 20px;
    
}