.square {
    display: flex;
    width: 100%;
    height: auto;
    position: relative;
    background-color: gray;
    text-align: center;
    justify-content: center;
    align-items: center;
    aspect-ratio: 1;
}

.square-text {
    color: white;
    font-size: 42px;
    font-weight: 700;
}

.faber-bg {
    background-image: url(https://epicroadrides.com/wp-content/uploads/2024/07/Cycling-in-Singapore-Copyright-Epic-Road-Rides-1589.jpg);
    background-size: cover;
    background-color: rgba(0,0,0,0.3);
    background-blend-mode: darken;
}

.inter-school-bg {
    background-image: url(../images/inter-school.JPG);
    background-size: cover;
    background-color: rgba(0,0,0,0.3);
    background-blend-mode: darken;

}

.red-black-gradient {
    background: linear-gradient(0deg, rgba(235, 35, 35, 1) 0%, rgba(5, 3, 2, 1) 100%);
}

.blue-green-gradient {
    background: linear-gradient(45deg, rgba(142, 197, 252, 1.000) 0.000%, rgba(141, 211, 255, 1.000) 25.000%, rgba(161, 216, 255, 1.000) 50.000%, rgba(193, 210, 255, 1.000) 75.000%, rgba(224, 195, 255, 1.000) 100.000%)
}

.peach-gradient {
    background: linear-gradient(135deg, rgba(255, 255, 196, 1.000) 0.000%, rgba(255, 97, 100, 1.000) 50.000%, rgba(176, 0, 18, 1.000) 100.000%)
}

.blue-gold-gradient {
    background: linear-gradient(0deg, rgba(0, 0, 4, 1.000) 0.000%, rgba(0, 12, 79, 1.000) 16.667%, rgba(91, 129, 131, 1.000) 33.333%, rgba(232, 205, 126, 1.000) 50.000%, rgba(255, 178, 68, 1.000) 66.667%, rgba(158, 71, 0, 1.000) 83.333%, rgba(0, 0, 0, 1.000) 100.000%)
}

.dawn-gradient {
    background: #FFA17F;  /* fallback for old browsers */
    background: -webkit-linear-gradient(to left, #00223E, #FFA17F);  /* Chrome 10-25, Safari 5.1-6 */
    background: linear-gradient(45deg, #00223E, #FFA17F); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
}

.purple-gradient {
    background: #360033;  /* fallback for old browsers */
    background: -webkit-linear-gradient(to left, #0b8793, #360033);  /* Chrome 10-25, Safari 5.1-6 */
    background: linear-gradient(135deg, #0b8793, #360033); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
}

@media (max-width: 575px) {
    .square {
        width: auto;
        height: auto;
        margin: 10px;
    }

    .square-text {
        font-size: 30px;
    }
}