@font-face {
            font-family: "ANDYB";
            src: url("fonts/ANDYB.TTF") format("truetype");
        }
        
        *{
            --link-color: #4ac94e;
            --font-med: 24px;
            --header-bg-color: #54413a;
            --bg-color: #795d52e7;
            --shadow-color: #251c18; 
            --button-bg: #64bf67;
            --button-hover: #1d7b3c;
            --card-bg: bisque;
            --card-height: 400px;
            --grid-border: #283460;
            --grid-bg: #1e2449;
        }

        
        header{
            z-index: 99;
            position: sticky;
            top: 0;
            left: 0;
            font-size: var(--font-med);
            width: 100%;
            align-items: center;
            display: inline-block;
            margin-top: 20px;
        }

        header nav {
            padding-left: 10px;
            background: linear-gradient( #986b4c, #795d52);
            height: 40px;
            align-content: center;
        }
        
        #grass-image{
            height: 20px;
            width: 100%;
            background-image: url(assets/grass-header.png);
            background-color: transparent;
            background-size: contain;
            padding-left: 0;
        }
        
        img{
            width: 100%;;
            display: block;
            height: auto;
        }

        video{
            width: 100%;
            display: block;
            height: auto;
        }
        
        .image-cont{
            width: 600px;
            margin: 20px auto;

        }

        nav{
             background-color: transparent;
             flex: 1;
        }

        nav a{
            background-color: transparent;
            padding-right: 10px;
            text-decoration: none;
        }

        body{
            font-family: ANDYB;
            font-size: var(--font-med);
            margin-left: 5%;
            margin-right: 5%;
            text-align: justify;
            background-image: url("assets/terraria_background.png");
            background-attachment: fixed;
            background-size: cover;
        }

        .div-main{
            left: 0;
            padding-left: 50px;
            padding-right: 50px;
            background-color: var(--bg-color);
        }

        .clases{
            background-color: transparent;
        }

        button{
            font-family: ANDYB;
            font-size: 18px;
            background-color: var(--button-bg);
        }


        a{
            color: var(--link-color);
        }

        .index ol {
            display: grid;
            grid-template-columns: 1fr;
        }

        .index li {
            padding-bottom: 5px;
        }

        .index p{
            text-align: center;
            font-size: 28px;
            color: #5baa5b;
        }
        .index{
            max-width: 200px;
            border: 1px solid #808080;
            width: fit-content;
            padding-right: 20px;
            background-color: var(--header-bg-color)
        }


        #title{
            -webkit-text-fill-color: #5baa5b;
            font-size: 50px;
            padding-top: 30px;
            margin-bottom: 0;
        }
        
        hr{
            border: none;
            height: 1px;
            background-color: gray;
            margin-bottom: 50px;
        }

        .card{
            display: flex;
            flex-direction: column;
            border-radius: 10px;
            overflow: hidden;
            width: 300px;
            height: var(--card-height);
            box-shadow: 5px 5px 3px var(--shadow-color);
            margin-top: 20px;
        }
        
        .card h2{
            margin-top: 10px;
            margin-bottom: 0;
        }
        
        .card p{
            margin: 10px;
        }

        .card img{
            width: 100%;
            height: 100%;
            overflow: hidden;
        }

        .content{
            background-color: var(--card-bg);
            height: calc( var(--card-height) - 160px);
        }

        .card *{
            text-align: center;
        }

        .card-footer{
            background-color: bisque;
            flex: 1;
        }

        .card-button{
            border-radius: 5px;
            margin-bottom: 15px;
            margin-top: 5px;
            border: none;
            padding-left: 10px;
            padding-right: 10px;
            padding-bottom: 5px;
            padding-top: 5px;
        }

        .card-button a{
            color: black;
            text-decoration: none;
        }

        .card-button:active card-button:visited {
            color: black;
        }

        button:hover{
            background-color: var(--button-hover);
            transition: all 0.2s;
        }

        form{
            margin: 0 auto;
            margin-top: 100px;
            text-align: center;
            background-color: bisque;
            overflow: hidden;
            width: 500px;
            height: 400px;
            border-radius: 5px;
        }

        form h3{
            background-color: transparent;
        }

        .form-input{
            font-size: 18px;
            margin-bottom: 10px;
            padding: 5px;
            background-color: rgb(255, 255, 255);
            width: 80%;
            height: 8%;
            border: 1px solid #72564b;
        }

        .form-input:focus, .form-textarea:focus{
            outline: 1px solid #156630;
        }

        select option, select optgroup{
            background-color: white;
        }

        form button{
            margin-top: 20px;
            font-size: 25px;
        }

        .form-textarea{
            background-color: white;
            width: 80%;
            height: 25%;
            font-size: 18px;
            font-family: Arial, Helvetica, sans-serif;
            border: 1px solid #72564b;
        }

        .card-container{
            display: flex;
            flex-wrap: wrap;
            justify-content: space-evenly;
        }

        
        nav a:hover{
            color: bisque;
            transition: all 0.15s;
        }
        
        .menu-item{
            display: inline-block;
            background-color: transparent;
            position: relative;
        }
        
        .menu-item:hover .nav-submenu{
            display: block;
        }

        .nav-submenu{
            list-style: none;
            display: none;
            position: absolute;
            background-color: #4a3a34;
            z-index: 100;
            top: 100%;
            width: 280px;
            padding: 0px;
            box-shadow: 3px 3px 3px 0 var(--shadow-color);
            overflow: hidden;
            margin: 0;
        }

        .nav-submenu li{
            background-color: transparent;
            color: #4caf50;
            margin: 15px;
        }

        .grid-cont{
            margin: 0 auto;
            margin-top: 30px;
            margin-bottom: 30px;
            background-color: var(--grid-bg);
            color: var(--link-color);
            width: 800px;
            height: 600px;
            grid-template-columns: repeat(4, 1fr);
            grid-template-rows: repeat(4, 1fr);
            display: grid;
        }

        .grid-cont div {
            border: 5px solid var(--grid-border);
            padding-right: 5px;
        }
        .grid-cont div p{
            text-align: center;
        }

        .melee-grid-weapons {grid-row: 1/2;}
        .melee-grid-weapons p {background-color: #ff3838; color: #ffffff;}
        .melee-grid-armor {grid-row: 2/5;}

        .range-grid-weapons {grid-row: 1/2;}
        .range-grid-weapons p {background-color: #7a9218; color: #ffffff;}        
        .range-grid-armor {grid-row: 2/5;}

        .mage-grid-weapons {grid-row: 1/2;}
        .mage-grid-weapons p {background-color: #8b51ff; color: #ffffff;}
        .mage-grid-armor {grid-row: 2/5;}

        .summoner-grid-weapons {grid-row: 1/2;}
        .summoner-grid-weapons p {background-color: #e0d256; color: #1e1c1c;}
        .summoner-grid-armor {grid-row: 2/3;}
        .summoner-grid-accesories {grid-row: 3/5;}

        @media (max-width: 600px) {
            body{
                font-size: 16px;
            }

            #title{
                font-size: 40px
            }

            .div-main{
                padding-left: 10%;
                padding-right: 10%;
            }

            header nav{
                font-size: 16px;
            }

            .grid-cont{
                margin: 0 auto;
                width: auto;
                height: max-content;
                grid-template-columns: 1fr;
                grid-template-rows: auto;
                display: grid;
            }

            .grid-cont div {
                grid-row: auto;
                grid-column: auto;
                font-size: 16px;
            }

            .grid-cont li {
                list-style-type: none;
            }

            .image-cont{
                width: 300px;
                display: block;
            }

            form{
                width: 270px;
            }

            .form-input, .form-textarea{
                font-size: 14px;
            }

            form button{
                font-size: 20px;
            }

            blockquote {
                 margin-left: 0;
                 margin-right: 0;
            }
            
            .card-footer h2{
                font-size: 16px;
                margin-bottom: 0;
            }

            .card-footer p{
                font-size: 12px;
                margin-bottom: 0;
            }

            .card-button{
                font-size: 12px;
            }

            .card{
                width: 120px;
                height: 200px;
            }

            .content{
                max-height: 100px;

            }

            #bosses-table ul{
                font-size: 12px;
            }

            .icon{
                max-width: 20px;
            }

            .boss-table-boss-image{
                max-width: 100px;
            }

       
        }

        .title-image{
            margin-left: 10px;
            width: 40px;
            height: fit-content;
            align-self: end;
            margin-bottom: 10px;
        }

        #title-cont{
            display: flex;
        }

        .carousel-item img{
            max-width:700px;
            object-fit: fill;
            z-index: 0;
            margin: 0 auto;
        }

        #carouselExampleIndicators{
            max-width:  700px;
            margin: 0 auto;
            margin-bottom: 50px;
        }

        #bosses-table{
            max-width: 500px;
            margin-bottom: 50px;
        }
        
        #bosses-table ul {
            list-style-type: none;
        }

        .icon{
            display: inline-flex;
            width: 35px;
        }
        
        #accordionExample{
            max-width: 500px;
        }