/* 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: 16px;
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: #333 /* 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 */
}