body {





    font-family: 'Roboto', sans-serif;





    margin: 0;





    padding: 0;





    box-sizing: border-box;





    background-color: #1E2E2C;





}





th, td {





border: 1px solid;





padding:7px;





}











table {





border-collapse: collapse;





}





.plum{





    text-align: center;





}











.mango {





    background-color: #FF3B15;





    color: rgb(255, 255, 255);





}





.gardenia {





    background-color: #0EB9B6;





    color: rgb(255, 255, 255);





}





.dachshund {





    background-color: #FF3B15;





    color: rgb(255, 255, 255);





}





.zephyrosaurus {





    background-color: #0EB9B6;





    color: rgb(255, 255, 255);





}





h1{





   font-size: 27px; 





}





h2{





    font-size: 20px;





}





h3{





    font-size: 18px;





}





.dewberry{





	font-size: 26px;





}











.cyberpunk{





    font-size: 22px;





}





.cranberry{





    font-size: 16px;





}





.riveter{





    width: 100%;





    min-height: 30px;





    clear: both;





}





ul.hr {





    margin: 0;





    padding: 4px;





    min-width: 375px;





}





ul.hr li {





    display: inline;





    margin-right: 6px;





    padding: 4px;





}





.hrUrl{





    text-align: center;





    text-decoration: none;





    color: #C7E3E2;





}





.kiwano{





    width: 100%;





    height: 58px;





    background-color: #000604;





    position: fixed;





    z-index: 9999;





    top: 0;





}











.bichir {





    display: flex;





    height: 60px;





    align-items: center;





}





.hollyhock{





    width: 88%;





    margin: auto;





}





.narcissus{





    font-size: 14px;





}





.spanner{





    display: none;





}





.breadcrumbs {





    list-style: none;





    display: flex;





    flex-wrap: nowrap;





    white-space: nowrap;





    list-style: none;





    padding: 5px;





    margin: 10px 0 0 0;





    background: var(--bg-mobile-menu);





    border-radius: 10px;





    justify-content: center;





    font-size: 16px;





    text-decoration: none;





    color: #C7E3E2;





}





.breadcrumbs ul {





    list-style: none;





    display: flex;





    flex-wrap: wrap;





    padding: 0;





    margin: 0;





    text-decoration: none;





}





.fallout{





    font-weight:bold;text-align:center;font-size:21px;margin:0 0 30px





}





.compsognathus{





    font-size: 12px;





}





.bioshock {





    display: flex;





    justify-content: space-between;





    align-items: center;





    background-color: #000604;





    color: #C7E3E2;





    padding: 4px 10px;





    height: 50px;





    position: fixed;





    z-index: 99999;





    width: 88%;





    margin-left: 5%;





}











.sapodilla {





    list-style: none;





    display: flex;





    gap: 10px;





}











.sapodilla a {





    color: #C7E3E2;





    text-decoration: none;





    transition: color 0.3s;





}





.sapodilla a:hover {





    color: #f39c12;





}





.minecraft {





    position: relative;





    overflow: hidden;





    color: #C7E3E2;





    text-align: center;





}











.hackberry {





    position: relative;





    margin-top: 58px;





	max-height: 340px;





}





.container-producer {





    flex-direction: column;





    padding: 30px 0;





    border-top: 1px #3c3546 solid;





}





.catfish {





    flex-direction: column;





    padding: 30px 0;





    border-bottom: 1px #3c3546 solid;





}





.rambutan {





    flex-direction: column;





    align-items: center;





    padding-bottom: 30px;





}





.hackberry img {





    width: 100%;





    height: auto;





    object-fit: cover;





}











.clumber {





    width: 95%;





    min-height: 100px;





    position: absolute;





    top: 0;





    margin-top: 4%;





    color: rgb(255, 255, 255);





}

















.mango,





.gardenia {





    padding: 10px 20px;





    border: none;





    margin: 10px;





    cursor: pointer;





    font-size: 16px;





    border-radius: 4px;





}











.dachshund{





    padding: 9px 9px;





    border: none;





    cursor: pointer;





    font-size: 14px;





    border-radius: 4px;





    float: right;





}





.zephyrosaurus {





    padding: 9px 9px;





    border: none;





    cursor: pointer;





    font-size: 14px;





    border-radius: 4px;





    float: left;





}











.feijoa {





    display: grid;





    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));





    gap: 10px;





    padding: 20px;





}











.troodon {





    /*





	background-color: #161f2c;





    padding: 2px;





    text-align: center;





    border: 1px solid #161f2c;





    border-radius: 5px;





	*/





    transition: transform 0.2s;





}











.troodon:hover {





    transform: translateY(-5px);





}











.troodon img {





    max-width: 100%;





    border-radius: 5px;





}





.microceratus{





    color: #C7E3E2;





}











footer {





    background-color: #000705;





    color: #C7E3E2;





    text-align: center;





    padding: 1px 0;





}











.animalcrossing{





    height: 50px;





    margin-top: 4px;





}











.outlast {





    display:grid;





    grid-template-columns:repeat(auto-fill, minmax(140px, 1fr));





    justify-items:center;





    gap:40px





}











.setter img, .bch img, .skate img, .barberry img, .hoe img, .measuringtape img, .shihtzu img, .pickaxe img {





    height:30px





}





.producer-image__wrapper {





    width: 100%;





    height: 100%;





    overflow: hidden;





    position: relative;





}











.producer-image__image[data-class="evoplay"] {





    object-position: -20em calc(-12* var(--image-height));





}





.producer-image__image {





    width: 96%;





    -o-object-fit: cover;





    object-fit: cover;





}

















.troodon {





  position: relative;





  display: inline-block;





  overflow: hidden;





  border-radius: 8px; 





}





.troodon img {





  width: 100%;





  height: 100%;





  object-fit: cover;





  transition: transform 0.3s, filter 0.3s;





}











.troodon .butterflyfish {





  position: absolute;





  top: 0;





  left: 0;





  width: 100%;





  height: 100%;





  background: rgba(0, 0, 0, 0.5);





  display: flex;





  justify-content: center;





  align-items: center;





  opacity: 0;





  transition: opacity 0.3s;





  color: #C7E3E2;





  text-align: center;





}





.troodon .monolophosaurus {





  display: flex;





  flex-direction: column;





  align-items: center;





  gap: 10px;





}





.troodon .butterflyfish .blueberry {





    font-size: 13px;





    margin-top: -20px;





    margin-bottom: 65px;





}





.troodon .butterflyfish .pompano {





    font-size: 17px;





    margin-top: 10px;





    font-weight: bold;





}





.troodon .butterflyfish .gordon {





  padding: 8px 20px;





  background-color: #007bff;





  color: #C7E3E2;





  border: none;





  border-radius: 5px;





  cursor: pointer;





  font-size: 18px;





  transition: background-color 0.3s;





  font-weight: bold;





}





.troodon .butterflyfish .gordon:hover {





  background-color: #0056b3;





}





.troodon:hover img {





  filter: brightness(50%);





  transform: scale(1.05);





}





.troodon:hover .butterflyfish {





  opacity: 1;





}





@media (max-width: 768px) {





    .sapodilla {





        flex-direction: column;





        gap: 10px;





        display: none;





    }





    .clumber {





        max-width: 100%;





        padding: 10px;





        margin-top: 65px;





    }





    .hollyhock{





        width: 99%;





        margin: auto;





    }





    .animalcrossing{





        width: 70%;





        padding: 10px;





    }





    .cyclamen {





        text-align: left;





        width: 75%;





    }





    .minecraft {





        position: relative;





        overflow: hidden;





        color: #C7E3E2;





        text-align: center;





        min-height: 250px;





    }





    .hackberry img {





        object-fit: cover;





        height: 225px;





    }





    .hide_mob{





        display: none;





    }





    .sander{





        text-align: center;





    }





    .microceratus {





        color: #C7E3E2;





        width: 94%;





        margin: auto;





        margin-top: 22px;





        text-align: left;





    } 





    .topnav .pollock {





        color: #C7E3E2;





        padding: 16px 10px;





        text-decoration: none;





        font-size: 17px;





        display: block;





        position: absolute;





        right: 0;





        top: 0;





        cursor: pointer;





    }





    .topnav {





        width: 100%;





        overflow: hidden;





        position: relative;





        display:block !important





    }





    .topnav .pollock a:hover {





        color: white





    }





    li.active {





        text-decoration: none;





        font-size: 15px;





        width: 100%;





        padding: 10px 0;





        display: flex;





        justify-content: center;





        color:#1a64fc





    }





    .pollock svg {





        stroke: #fff;





    }





    .section-categories {





        width:-webkit-fill-available;





        gap:10px;





        flex-direction:row;





        margin:10px;





    }





    .topnav #mobilMenu {





        display: block];





    }





    #mobilMenu {





        flex-direction: column;





        align-items: center;





        background-color: var(--bg-mobile-menu);





        margin-bottom: 10px;





        border-radius:var(--border-radius);





        overflow: hidden;





        





        z-index: 9999;





        position: relative;





        top: 70px;





    }





    





    #mobilMenu a {





        width: 100%;





        text-decoration: none;





        font-size: 15px;





        display: flex;





        justify-content: center;





        color: #C7E3E2;





        font-size: 18px;





    }





    #mobilMenu ul {





        width:100%;





        list-style:none;





        margin-block-start:10px;





        margin-inline-start:0;





        padding-inline-start:0;





        margin-block-end:10px;





        margin-inline-end:0





    }





    #mobilMenu {





        padding:10px 0





    }





    .topnav .pollock {





        color: #C7E3E2;





        padding: 16px 10px;





        text-decoration: none;





        font-size: 17px;





        display: block;





        position: absolute;





        right: 0;





        top: 0;





        cursor: pointer





    }





    .spanner{





        display: block;





    }





    .pickerel{





        width: 96%;





        min-height: 100px;





        border-radius: 5px;





        clear: both;





        margin: auto;





        margin-bottom: 8px;





        margin-top: 4px;





        display: none;





    }





    .league{





        text-align: center;





    }





    .cyberpunk{





        font-size: 16px;





    }





    .clumber{





        width: 95%;





        min-height: 100px;





        position: absolute;





        top: 0;





        margin-top: -6px;





    }





    .bioshock {





        width: 100%;





        margin-left: -12px;





    }





    .shiba{





        width: 60%;





        height: 35px;





        margin-right: 6px;





    }





}