/* TOPLEFTNAVBAR */
            #topNav a {
                color: #d4af37;
                text-decoration: none;
                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 {
                font-weight: bold ;
                color:#d4af37 ;
                text-decoration: none ;
                }        
                #topNav #siteTitle {
                    font-size: 32px;  
                    font-weight: bold;  
                    color: #d4af37;            
                    text-decoration: none;
                    margin-right: 10px; 
                    transition: color 0.3s; /* hover */
                } 
                #topNav #siteTitle:hover {
                    color: black;
                    transform: scale(1.1);
                }
            body {
                background-color: black; 
            }
            h1, a, em {
                margin: 0 auto;
                padding: 5px 5px;
                border: 1px solid #d4af37; 
                border-radius: 8px;
                color: #d4af37;
                font-style: italic;
                text-align: center;
                background: none;
            }
            h1 {
                display: inline-block;
                padding: 5px 12px;
                margin-left:0;
                color: #d4af37;
                border-radius: 8px;
                font-style: italic;
                text-align: center;
            }
            /* LINKS */
            a:link {
                display: inline-block;
                border: 2px outset #c8a035;
                color:black ; 
                background-color:#d4af37 ;
                width: 100px;
                text-align: center;
                text-decoration: none;
                border-radius: 6px;
                box-shadow: 0 4px 6px rgba(0, 0, 0, 0.5);
                transition: all 0.2s ease;
            }
            a:visited {
                color:#111111 ; 
                border: 2px outset #c8a035;
                background-color: #d4af37;
            }
            a:hover {
                background-color: #faf7ef; /* Color when hovered */
                border: 2px solid #d4af37;
                color: #c8a035;
                box-shadow: 0 6px rgba(212, 175, 55, 0.6);
                transform: translateY(-2px);
            }
            a:active {
                background-color: #b8962e ; /* Color when clicked */
                border: 2px inset #d4af37;
                color: black;
                box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
                transform: translateY(1px);
            } 
            .big {
                font-size: 70px; /* bigger first letter */
                color: #d4af37;
                padding: 0;
            }
            .itemName {
                color: #c8a035; /* Text color for items */
                font-style: italic;
                font-family: 'Times New Roman', Times, serif;
                padding: 2px 5px;   
            }
            .itemType {
                border: 2px solid #d4af37; 
                width: 500px;
                margin: 20px;
                background-color:#111111 ; 
                color: white;
                text-align: center;
                border-radius: 12px;
                border-top-right-radius: 50px;
                box-shadow: 0 8px 20px rgba(212,175,55,0.5); /* Shadow style */
                padding: 15px;
                transition: transform 0.2s ease;
            }
            .itemType:hover {
                transform: translateY(-5px);
                box-shadow: 0 12px 25px rgba(212,175,55,0.5);
            }
                a:hover {
                background-color: #faf7ef;
                border: 2px solid #d4af37;
                color: #c8a035;
                box-shadow: 0 6px rgba(212,175,55,0.6);
                transform: translateY(-2px);
    }
            /*  MAIN */
            #contentContainer {
                background-color:#222222 ; 
                padding: 5px;
                display: flex; 
                justify-content: center;
                gap: 20px;
                padding: 20px;
            }
            img{
                max-width: 100%;
                height: auto;
            }
            /*  NAV BAR  */
            #navigation {
                background-color: black; 
                padding: 5px;
                display: flex;
                justify-content: center;
                flex-wrap: wrap;
                gap: 20px;
            }
            /*  LIST   */
            #listSection {
                background-color: #111111; /* Section background color */
                color:white;
                padding: 10px;
            }
            #listSection > ol {
                border: 1px solid #c8a035;
                background-color: #222222;
                display: flex;
                list-style-position: inside;
                justify-content: space-evenly;
                gap: 20px;
                padding:10px;
                border-radius: 10px;
            }
            #listSection li {
                border: 1px solid #d4af37 ; /* Border color for each list item */
                background-color: black;
                width: 160px;
                height: 160px;
                border-radius: 10px;
                display: flex;
                flex-direction: column;
                justify-content: center;
                align-items: center;
                gap: 8px;
                box-shadow: 0 4px 10px rgba(212,175,55,0.5);
                transition: 0.2s ease;
            }
            #listselection li:hover{
                transform: translateY(-3px);
                box-shadow: 0 8px 15px rgba(212,175,55,0.5);
            }
            #listSection img {
                width: 90px;
                height: 90px;
                object-fit: cover;   /* crops img evenly */
                border-radius: 6px;  /* rounded corners */
                border: 1px solid #d4af37;
                }
            /* SMALL SCREEN */
            @media screen and (max-width: 800px) {
                #contentContainer {
                    display: block; /* stacks on small view */
                }
                .itemType {
                    background-color:#222222; /* changes color */
                    width: 100%;
                }
            }