body, html {
    margin: 0;
    padding: 0;
    font-family: Arial, sans-serif;
}

body {
    background-color: #f4f4f4;
    color: #333;
}

.container {
    width: 80%;
    margin: 0 auto;
    padding: 20px;
}

.header {
    text-align: center;
    margin-bottom: 20px;
}

.category-form, .rating-form {
    margin-bottom: 20px;
}

.category-list, .rating-list {
    list-style-type: none;
    padding: 0;
}

.category-item, .rating-item {
    background-color: #fff;
    border: 1px solid #ddd;
    padding: 10px;
    margin-bottom: 10px;
}

.button {
    display: inline-block;
    padding: 10px 20px;
    background-color: rgb(233, 86, 110);
    color: #fff;
    text-decoration: none;
    border-radius: 5px;
    cursor: pointer;
}

.button:hover {
    background-color: rgb(188, 69, 88);
}

/* Styles for Popular Categories section */
.popular-categories {
    background-color: #f8f9fa;
    padding: 20px;
    margin-bottom: 30px;
}

.popular-categories h2 {
    color: rgb(233, 86, 110);
}

.popular-categories > div {
    background-color: white;
    margin: 10px 0;
    padding: 15px;
    border-radius: 10px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.popular-categories h3 {
    margin-bottom: 15px;
}

.popular-categories p {
    margin: 5px 0;
}

.popular-categories .rating {
    color: rgb(233, 86, 110);
}

.popular-categories .votes {
    background-color: rgb(233, 86, 110);
    color: white;
    padding: 5px 10px;
    border-radius: 5px;
}


/* Styles for top 3 categories */
.top-3-category {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
    padding: 10px;
    background-color: white;
    border-radius: 10px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.top-3-category h4 {
    margin: 0;
    color: #333;
}

.top-3-category p {
    margin: 0;
    color: #888;
}

.top-3-category span {
    background-color: rgb(233, 86, 110);
    color: white;
    padding: 5px 10px;
    border-radius: 5px;
}

.subcategory {
    background-color: rgb(220, 220, 220);
    padding: 15px;
    border-radius: 10px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    margin-bottom: 20px; /* Add bottom margin to each subcategory */
}
.subcategory img {
    width: 50px; /* width of the logo images */
    height: 50px; /* height of the logo images */
    object-fit: cover; /* resize the image to cover the area */
}

.subcategory {
    margin-bottom: 20px; /* space between subcategory divs */
}


.subcategory:not(:last-child) {
    margin-bottom: 20px; /* Increase space between subcategory divs */
}

.title-votes-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.title-votes-container h2 {
    color: rgb(233, 86, 110);
    margin: 0; /* Remove default margin */
}

.title-votes-container span {
    background-color: rgb(233, 86, 110);
    color: white;
    padding: 5px 10px;
    border-radius: 5px;
    margin: 0; /* If needed to align properly */
}

/* Adjust the size of the second game company's image */
.game-company:nth-of-type(2) img {
    max-width: 100px; /* Set a maximum width */
    height: auto; /* Maintain the aspect ratio */
}

/* Add space between the subcategory items */
.game-company:not(:last-child) {
    margin-bottom: 20px; /* Space at the bottom of each game company container */
}

/* Added styles from HTML inline */
.custom-style-1 {background-color: rgb(233, 86, 110); padding: 10px; display: flex; align-items: center;}
.custom-style-2 {color: white; font-size: 24px; font-weight: bold; margin-right: 15px;}
.custom-style-3 {flex-grow: 1; background-color: white; padding: 5px; border-radius: 5px;} 
.custom-style-4 {width: 100%; border: none; outline: none;}
.custom-style-5 {display: flex; align-items: center; margin-left: 20px;}
.custom-style-6 {background-color: #00BFFF; border: none; padding: 10px; color: white; border-radius: 5px;}
.custom-style-7 {background-color: #f8f9fa; padding: 20px; margin-bottom: 30px; margin-top: 50px;}
.custom-style-8 {margin-bottom: 20px;}
.custom-style-9 {background-color: white; margin: 10px 0; padding: 12px; border-radius: 10px; box-shadow: 0 2px 4px rgba(0,0,0,0.1);}
.custom-style-10 {background-color: rgb(245,245,245); margin: 10px 0; padding-top: 15px; border-radius: 10px; box-shadow: 0 2px 4px rgba(0,0,0,0.1);}
.custom-style-11 {display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px;}
.custom-style-12 {flex-grow: 1; margin-left: 10px;}
.custom-style-13 {margin-top: 0px; padding-top: 5px;}
.custom-style-14 {margin-top: 20px; color: #FFA500;}
.custom-style-15 {background-color: rgb(233, 86, 110); color: white; padding: 5px 10px; border-radius: 5px;}
.custom-style-16 {background-color: rgb(245,245,245); margin: 10px 0; padding: 15px 15px 0px 15px; border-radius: 10px; box-shadow: 0 2px 4px rgba(0,0,0,0.1);}
.custom-style-17 {margin: 0; color: #FFA500;}
.subcategory img {
    margin-bottom: 5px; /* Decrease the bottom margin or padding of the image */
}
.custom-style-11 img {
    width: 50px; /* or any specific width you want */

    max-width: 100%; /* makes sure it doesn't overflow its container */
    height: 50px; /* maintains the aspect ratio */
    display: block; /* removes extra space below the image */
    margin: 10px 0; /* optional: adds space above and below the image */
}

header.custom-style-1 {
    position: fixed;
    top: 0;
    left: 0;
    width: 99%;  
    z-index: 1000; 
}