@import url('https://fonts.googleapis.com/css2?family=Bree+Serif&display=swap');

.gccc-button { 
    background-color: #ffc709;
    display: block;
    color: black;
    border: none;
    padding: 10px 20px;
    font-family: 'Bree Serif', serif;
    font-size: 48px;
    text-align: center;
	font-weight: 1200;
    cursor: pointer;
    transition: background-color 0.3s ease, color 0.3s ease;
    width: 90%;
    margin-left: auto;
    margin-right: auto;
	border-radius: 8px; /* Added for rounded corners */
	box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.2), 
             -3px -3px 10px rgba(255, 255, 255, 0.3); /* Raised effect*/
	
}

.gccc-button:hover { 
  background-color: #512F2E;
  color: white !important;
  box-shadow: inset 3px 3px 6px rgba(0, 0, 0, 0.3), 
                inset -3px -3px 6px rgba(255, 255, 255, 0.3); /* Emboss effect */
}


@media (max-width: 480px) {
            .gccc-button {
                padding: 8px 15px; /* Reduce padding */
                font-size: 24px;   /* Reduce font size */
                border-radius: 6px; /* Slightly smaller border radius */
            }

        }