/* TOPLEFTNAVBAR */
    #topNav a {
        color: #d4af37;
        text-decoration: none;
        font-style: italic;
        font-weight: bold;
        padding: 6px 10px;
        border: 1px solid #d4af37;
        border-radius: 6px;
        transition: 0.2s;
        background-color: black;
                        }
    #topNav a:hover {
        background-color: #d4af37;
        color: black;
                    }
    #topNav #siteTitle {
        border: 1px solid #d4af37;
        font-weight: bold ;
        color:#d4af37 ;
        text-decoration: none ;
                }        
    #topNav #siteTitle {
        font-size: 32px;  
        font-weight: bold;  
        font-style: italic;
        color: #d4af37;            
        text-decoration: none;
        margin-right: 10px; 
        transition: color 0.3s;
                } 
    #topNav #siteTitle:hover {
        color: black;
        transform: scale(1.1);
                }
    #topNav {
        display: flex;
        gap: 12px;
        align-items: center;
        background-color: black;
        padding: 20px;
    }

    /* BODY */
    body {
        background-color:#222222;
        margin: 0;
        color: #d4af37;
        align-items: center;
        align-content: center;
    }


    /* HEADERS & DECORATED TEXT */
    h1, h2, em {
        margin: 20px auto;
        padding: 5px 12px;
        text-align: center;
        border: 1px solid #d4af37;
        border-radius: 8px;
        color: #d4af37;
        font-style: italic;
        background-color: black;
        max-width: 800px;
    }

    p {
        color: #d4af37;
        max-width: 850px;
        margin: 15px auto;
        font-size: 18px;
        line-height: 1.6;
        text-align: center;
        align-items: center;
    }

    a:hover {
        background-color: #faf7ef;
        border: 2px solid #d4af37;
        color: #c8a035;
        box-shadow: 0 6px rgba(212,175,55,0.6);
        transform: translateY(-2px);
    }
    img {
        display:block ;
        margin:20px auto ;
        width: 500px;
        height: auto;
        border-radius:8px ;
        border: 1px solid #d4af37;
    }

    @media (max-width: 800px) {
    img {
        width: 90%;   /* fits smaller screens */
        height: auto;
    }
    }

    /* MOBILE */
    @media (max-width: 800px) {
        #contentContainer {
            display: block;
        }

        .itemType {
            width: 90%;
            margin: 0 auto;
        }

        #listSection ol {
            flex-direction: column;
        }

        #listSection li {
            width: 200px;
            height: 200px;
        }
    }