/* 
Dit is de recepten.css waarnaar in mijn html wordt verwezen en die ik  'mijn css' of iets van die strekking zal noemen. 
Vergeet eventuele eerdere versies hiervan als we het daar eerder over gehad hebben. 
Bekijk deze code zonder er commentaar op te geven of verbeteringen voor te stellen, tenzij ik er expliciet om vraag. 
Als ik vraag om verbeteringen geef je me alleen de gewijzigde code in een duidelijke context, zodat ik deze kan knippen en plakken. 
Geef een samenvatting van deze instructies als je ze begrepen hebt en zult opvolgen tijdens dit gesprek. 
*/

:root {
    --background-color: #4B3F38;
    --text-color: #FFD700;
    --button-background: #FFD700;
    --button-text: #4B3F38;
    --button-background-hover: #E6B800;
    --button-text-hover: #FFFFFF;
}

body {
    font-family: Trebuchet MS, sans-serif;
    background-color: var(--background-color);
    color: var(--text-color);
    margin: 0;
    padding: 0;
}

.container {
    max-width: 800px;
    margin: auto;
    padding: 20px;
}

h1 {
    text-align: center;
}

button, input {
    text-align: center;
}

.btn-secondary, .btn-secondary:active, .btn-secondary:focus, .btn-secondary:visited {
    background-color: var(--button-background);
    color: var(--button-text);
    border: none;
    cursor: pointer;
    width: 100%; /* Hier lijkt een waarde te ontbreken, ik heb '100%' toegevoegd */
}

.btn-secondary:hover {
    background-color: var(--button-background-hover);
    color: var(--button-text-hover);

}

ul, ol {
    padding-left: 20px;
}