magicchess.css

.header, .footer {
    color: white;
    background-image: linear-gradient(122deg, rgb(100% 50.588% 9.804%) 0%, rgb(99.998% 50.421% 10.005%) 6.25%, rgb(99.994% 49.92% 10.607%) 12.5%, rgb(99.986% 49.085% 11.61%) 18.75%, rgb(99.975% 47.917% 13.015%) 25%, rgb(99.962% 46.414% 14.821%) 31.25%, rgb(99.945% 44.577% 17.028%) 37.5%, rgb(99.925% 42.407% 19.637%) 43.75%, rgb(99.902% 39.902% 22.647%) 50%, rgb(99.876% 37.063% 26.059%) 56.25%, rgb(99.847% 33.891% 29.871%) 62.5%, rgb(99.815% 30.384% 34.085%) 68.75%, rgb(99.779% 26.544% 38.701%) 75%, rgb(99.741% 22.37% 43.718%) 81.25%, rgb(99.7% 17.862% 49.136%) 87.5%, rgb(99.655% 13.019% 54.956%) 93.75%, rgb(99.608% 7.843% 61.176%) 100% );
}
.background {
    background-color: #e5ece5;
}

.img-overlay {
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    height: 200px; /* Adjust the height as needed */
}

.img-overlay::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.25);
    z-index: 1;
}

.img-overlay .text-shadow-1 {
    position: relative;
    z-index: 2;
}