/* More Styled buttons */
.sbut,
.sbut2,
.sbut3,
.sbut4,
.sbut5,
.sbut6,
.sbut7,
.sbut8,
.sbut9,
.sbut10,
.sbut11,
.sbut12,
.sbut13,
.sbut14,
.sbut15,
.sbut16,
.sbut17,
.sbut18,
.sbut19,
.sbut20,
.sbut21,
.sbut22,
.sbut23,
.sbut24,
.sbut25,
.sbut26,
.sbut27,
.sbut28,
.sbut29,
.sbut30 {
    border: none;
    padding: 5px 5px; /* Remove padding from the button itself */
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    font-weight: bold;
    margin: 4px 2px;
    cursor: pointer;
    border-radius: 4px;
    transition: background-color 0.3s, color 0.3s;
}

.sbut a,
.sbut2 a,
.sbut3 a,
.sbut4 a,
.sbut5 a,
.sbut6 a,
.sbut7 a,
.sbut8 a,
.sbut9 a,
.sbut10 a,
.sbut11 a,
.sbut12 a,
.sbut13 a,
.sbut14 a,
.sbut15 a,
.sbut16 a,
.sbut17 a,
.sbut18 a,
.sbut19 a,
.sbut20 a,
.sbut21 a,
.sbut22 a,
.sbut23 a,
.sbut24 a,
.sbut25 a,
.sbut26 a,
.sbut27 a,
.sbut28 a,
.sbut29 a,
.sbut30 a {
    display: block;
    width: 100%;
    height: 100%;
    padding: 15px 32px;
    color: inherit;
    text-align: center;
    text-decoration: none;
    border-radius: inherit;
    box-sizing: border-box;
}

        /* Green */
        .sbut {
            background-color: #4CAF50; /* Green */
            color: black; /* Black */
        }


        /* Red */
        .sbut2 {
            background-color: red; /* Red */
            color: white; /* White */
        }

        /* Blue */
        .sbut3 {
            background-color: #3498db; /* Blue */
            color: white; /* White */
        }

        /* Dark Red */
        .sbut4 {
            background-color: #e74c3c; /* Dark Red */
            color: white; /* White */
        }

        /* Light Green */
        .sbut5 {
            background-color: #2ecc71; /* Light Green */
            color: black; /* Black */
        }

        /* Orange */
        .sbut6 {
            background-color: #f39c12; /* Orange */
            color: black; /* Black */
        }

        /* Purple */
        .sbut7 {
            background-color: #9b59b6; /* Purple */
            color: white; /* White */
        }

        /* Dark Slate Blue */
        .sbut8 {
            background-color: #34495e; /* Dark Slate Blue */
            color: white; /* White */
        }

        /* Turquoise */
        .sbut9 {
            background-color: #1abc9c; /* Turquoise */
            color: black; /* Black */
        }

        /* Dark Orange */
        .sbut10 {
            background-color: #d35400; /* Dark Orange */
            color: white; /* White */
        }

        /* Deep Sky Blue */
        .sbut11 {
            background-color: #2980b9; /* Deep Sky Blue */
            color: white; /* White */
        }

        /* Dark Crimson */
        .sbut12 {
            background-color: #c0392b; /* Dark Crimson */
            color: white; /* White */
        }

        /* Emerald */
        .sbut13 {
            background-color: #27ae60; /* Emerald */
            color: black; /* Black */
        }

        /* Dark Violet */
        .sbut14 {
            background-color: #8e44ad; /* Dark Violet */
            color: white; /* White */
        }

        /* Midnight Blue */
        .sbut15 {
            background-color: #2c3e50; /* Midnight Blue */
            color: white; /* White */
        }

        /* Sunflower */
        .sbut16 {
            background-color: #f1c40f; /* Sunflower */
            color: black; /* Black */
        }

        /* Grey */
        .sbut17 {
            background-color: #7f8c8d; /* Grey */
            color: white; /* White */
        }

        /* Coral */
        .sbut18 {
            background-color: #ff7f50; /* Coral */
            color: white; /* White */
        }

        /* Yellow */
        .sbut19 {
            background-color: #ffff00; /* Yellow */
            color: black; /* Black */
        }

        /* Lavender */
        .sbut20 {
            background-color: #a29bfe; /* Lavender */
            color: black; /* Black */
        }

        /* Lighter Grey */
        .sbut21 {
            background-color: #e1e1e1; /* Lighter Grey */
            color: black; /* Black */
        }

        /* Gold */
        .sbut22 {
            background-color: #ffdd59; /* Gold */
            color: black; /* Black */
        }

        /* Aqua */
        .sbut23 {
            background-color: #00d2d3; /* Aqua */
            color: black; /* Black */
        }

        /* Tomato */
        .sbut24 {
            background-color: #ff7675; /* Tomato */
            color: white; /* White */
        }

        /* Light Salmon */
        .sbut25 {
            background-color: #ff9f43; /* Light Salmon */
            color: black; /* Black */
        }

        /* Medium Purple */
        .sbut26 {
            background-color: #a55eea; /* Medium Purple */
            color: white; /* White */
        }

        /* Salmon */
        .sbut27 {
            background-color: #ff6e6e; /* Salmon */
            color: white; /* White */
        }

        /* Sky Blue */
        .sbut28 {
            background-color: #54a0ff; /* Sky Blue */
            color: white; /* White */
        }

        /* Indigo */
        .sbut29 {
            background-color: #686de0; /* Indigo */
            color: white; /* White */
        }

        /* Sea Green */
        .sbut30 {
            background-color: #00b894; /* Sea Green */
            color: black; /* Black */
        }

        /* Hover Effect */
.sbut:hover {
font-size: 25px;
font-weight: bold;

    filter: brightness(220%); /* Lighten the button */
    color: #000; /* Darken the text color */
}
.sbut2:hover {
font-size: 16px;
font-weight: bold;

    filter: brightness(220%); /* Lighten the button */
   color: #333 /* Darken the text color */
}
.sbut3:hover {
font-size: 16px;
font-weight: bold;

    filter: brightness(220%); /* Lighten the button */
   color: #333 /* Darken the text color */
}
.sbut4:hover {
font-size: 16px;
font-weight: bold;

    filter: brightness(220%); /* Lighten the button */
   color: #333 /* Darken the text color */
}
.sbut5:hover {
font-size: 16px;
font-weight: bold;

    filter: brightness(220%); /* Lighten the button */
    color: #000; /* Darken the text color */
}
.sbut6:hover {
font-size: 16px;
font-weight: bold;

    filter: brightness(220%); /* Lighten the button */
    color: #000; /* Darken the text color */
}
.sbut7:hover {
font-size: 16px;
font-weight: bold;

    filter: brightness(220%); /* Lighten the button */
   color: red /* Darken the text color */
}
.sbut8:hover {
font-size: 16px;
font-weight: bold;

    filter: brightness(220%); /* Lighten the button */
   color: #333 /* Darken the text color */
}
.sbut9:hover {
font-size: 16px;
font-weight: bold;

    filter: brightness(220%); /* Lighten the button */
    color: #000; /* Darken the text color */
}
.sbut10:hover {
font-size: 16px;
font-weight: bold;

    filter: brightness(220%); /* Lighten the button */
   color: #333 /* Darken the text color */
}
.sbut11:hover {
font-size: 16px;
font-weight: bold;

    filter: brightness(220%); /* Lighten the button */
   color: #333 /* Darken the text color */
}
.sbut12:hover {
font-size: 16px;
font-weight: bold;

    filter: brightness(220%); /* Lighten the button */
   color: #333 /* Darken the text color */
}
.sbut13:hover {
font-size: 16px;
font-weight: bold;

    filter: brightness(220%); /* Lighten the button */
    color: #000; /* Darken the text color */
}
.sbut14:hover {
font-size: 16px;
font-weight: bold;

    filter: brightness(220%); /* Lighten the button */
   color: #333 /* Darken the text color */
}
.sbut15:hover {
font-size: 16px;
font-weight: bold;

    filter: brightness(220%); /* Lighten the button */
   color: #333 /* Darken the text color */
}
.sbut16:hover {
font-size: 16px;
font-weight: bold;

    filter: brightness(220%); /* Lighten the button */
    color: #000; /* Darken the text color */
}
.sbut17:hover {
font-size: 16px;
font-weight: bold;

    filter: brightness(220%); /* Lighten the button */
   color: #333 /* Darken the text color */
}
.sbut18:hover {
font-size: 16px;
font-weight: bold;

    filter: brightness(220%); /* Lighten the button */
   color: #333 /* Darken the text color */
}
.sbut19:hover {
font-size: 16px;
font-weight: bold;

    filter: brightness(220%); /* Lighten the button */
    color: #000; /* Darken the text color */
}
.sbut20:hover {
font-size: 16px;
font-weight: bold;

    filter: brightness(220%); /* Lighten the button */
    color: #000; /* Darken the text color */
}
.sbut21:hover {
font-size: 16px;
font-weight: bold;

    filter: brightness(220%); /* Lighten the button */
    color: #000; /* Darken the text color */
}
.sbut22:hover {
font-size: 16px;
font-weight: bold;

    filter: brightness(220%); /* Lighten the button */
    color: #000; /* Darken the text color */
}
.sbut23:hover {
font-size: 16px;
font-weight: bold;

    filter: brightness(220%); /* Lighten the button */
    color: #000; /* Darken the text color */
}
.sbut24:hover {
font-size: 16px;
font-weight: bold;

    filter: brightness(220%); /* Lighten the button */
   color: #333 /* Darken the text color */
}
.sbut25:hover {
font-size: 16px;
font-weight: bold;

    filter: brightness(220%); /* Lighten the button */
    color: #000; /* Darken the text color */
}
.sbut26:hover {
font-size: 16px;
font-weight: bold;

    filter: brightness(220%); /* Lighten the button */
   color: #333 /* Darken the text color */
}
.sbut27:hover {
font-size: 16px;
font-weight: bold;

    filter: brightness(220%); /* Lighten the button */
   color: #333 /* Darken the text color */
}
.sbut28:hover {
font-size: 16px;
font-weight: bold;

    filter: brightness(220%); /* Lighten the button */
   color: #333 /* Darken the text color */
}
.sbut29:hover {
font-size: 16px;
font-weight: bold;

    filter: brightness(220%); /* Lighten the button */
   color: #333 /* Darken the text color */
}
.sbut30:hover {
font-size: 16px;
font-weight: bold;

    filter: brightness(220%); /* Lighten the button */
    color: #000; /* Darken the text color */
}



/* Size classes */
.size-10 {
    padding: 1px 2px;
    font-size: 10px;
    margin: 1px;
}

.size-15 {
    padding: 2px 3px;
    font-size: 12px;
    margin: 1px 2px;
}

.size-20 {
    padding: 3px 4px;
    font-size: 14px;
    margin: 2px;
}

.size-25 {
    padding: 4px 5px;
    font-size: 15px;
    margin: 3px 2px;
}

.size-30 {
    padding: 5px 6px;
    font-size: 16px;
    margin: 4px 2px;
}

.size-35 {
    padding: 6px 7px;
    font-size: 18px;
    margin: 4px 3px;
}

.size-40 {
    padding: 7px 8px;
    font-size: 20px;
    margin: 5px 3px;
}
.size-50 {
    padding: 7px 8px;
    font-size: 25px;
    margin: 5px 3px;
}