html, body {
    height: 100%;
    margin: 0;
    padding: 0;
}

#header {
    text-align: center;
    background-color: #3a2618;
}

h1 {
    margin: 0px;
}

.navbar {
    background-color: #3a2618;
    margin-top: 0px;
    font-family:Arial, Helvetica, sans-serif;
}
.navbar-toggler {
    background-color: #f0ead2; 
}

.navbar a {
    color: #f0ead2;
}

.navbar a:hover {
    color: #f0ead2;
}

a {
    text-decoration: none;
    color: #f0ead2;
    font-family:Georgia, 'Times New Roman', Times, serif;
}


#maincontent {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(3, 1fr); 
    background-color: #f0ead2;
    margin: 5px;
    height: calc(100vh - 114px);
    
}

#picturebox {
    background-color: #f0ead2;
    margin: 5px;
    grid-row: 1/3;
    grid-column: 1/2;
    
}

#picturebox img {
    object-fit: contain;
    max-width: 100%;
}


#triviabox {

    background-color: #f0ead2;
    margin: 5px;
    grid-row: 1/3;
    grid-column: 2/3;
    object-fit: contain;
    max-width: 100%;
}

#answerbox {
    
    background-color: #f0ead2;
    margin: 5px;
    grid-row: 3/4;
    grid-column: 1/2;
    object-fit: contain;   
 
}

#feedbackbox {

    background-color: #f0ead2;
    margin: 5px;
    grid-row: 3/4;
    grid-column: 2/3;   
}


.footer{
    background-color: #3a2618;
    text-align: center;
    padding: 10px;
    grid-row: 4/5;
    grid-column: 1/5;
    margin-top: auto;
}

.footer-content h4{
    color: #f0ead2;
    font-size: 20px;
    margin-bottom: 1rem;
}

.footer-content li{
    margin-bottom: 15px;
    display: block;
}

.footer-content li a{
    color: #f0ead2;
}

.footer-content p{
    color: #f0ead2;
}