:root {
    --primary-color: rgb(232, 207, 138);
    --hover-color: rgb(248, 220, 142);
    --background-color: #152c49;
    --nav-background: #11243b;


    --font-family: 'Outfit', sans-serif;
    --font-weight-normal: 500;
    --font-weight-bold: 600;

    --spacing-unit: 1rem;
    --spacing-xs: calc(var(--spacing-unit) * 0.25);
    --spacing-sm: calc(var(--spacing-unit) * 0.5);
    --spacing-md: var(--spacing-unit);
    --spacing-lg: calc(var(--spacing-unit) * 1.5);
    --spacing-xl: calc(var(--spacing-unit) * 2);
    

    --max-content-width: 1200px;
    --max-content-height: 600px;
    --border-radius: 10px;
    --nav-height: 80px;
    --content-padding-top: calc(var(--nav-height) + var(--spacing-xl));
    
    --transition-duration: 0.3s;
}

body {
    background: var(--background-color);
    color: var(--primary-color);
    font-family: var(--font-family);
    font-weight: var(--font-weight-bold);
    font-size: clamp(16px, 1.5vw, 36px);
    line-height: 1.5;
    margin: 0 auto;
    max-width: var(--max-content-width);
    padding: var(--spacing-md)+10;
    padding-top: var(--content-padding-top);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

.site-nav {
    z-index: 10;
    transition: transform var(--transition-duration);
    display: flex;
    background: var(--nav-background);
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    padding: var(--spacing-sm);
    border-radius: var(--border-radius);
    margin: var(--spacing-sm);
    flex-wrap: wrap;
    gap: var(--spacing-sm);
}
.site-nav a, .spacer {
    padding: var(--spacing-lg) var(--spacing-md);
    color: var(--primary-color);
    text-decoration: none;
    opacity: 0.5;
    transition: all var(--transition-duration);
}

.site-nav a:hover {
    color: var(--hover-color);
    opacity: 1;
}

a, a:visited {
    text-decoration: none;
    color: var(--primary-color);
    opacity:50%;
}

a:hover {
    color: var(--hover-color);
    opacity:100%;
    transition-duration: var(--transition-duration);
}

#container, #quiz {
    padding-top: var(--content-padding-top);
    margin: 0 auto;
    
}

#question {
    padding-top: var(--content-padding-top);
    text-align: center;
    margin: 0 auto;
}

#qImg img {
   padding: var(--spacing-md);
   max-height: 50%;
   display:flex;
   margin: 0 auto;
   max-width:50%;
    
}

#start {
    background: var(--background-color);
    color: var(--primary-color);
    font-family: var(--font-family);
    font-weight: var(--font-weight-bold);
    font-size: clamp(30px, 1.5vw, 36px);
    line-height: 1.5;
    border-radius: 10px;
}

#choices {
    margin: 0 auto;
    padding:50px;
    position:relative;
}

.choice {
    border: 1px solid grey;
    border-radius: 5px;
    cursor: pointer;
    color: var(--primary-color);
    font-family: var(--font-family);
    font-weight: var(--font-weight-bold);
    position:relative;
    text-align: center;
}

.choice:hover {
    font-weight:bold;
    border: 2px solid grey;
}

#scoreContainer{
    font-size:50px;
 text-align: center;
}