@charset "UTF-8";


@media screen and (max-width:500px) {
    .text-container {
        display: flex;
        flex-direction: column;
        align-items: center;
        padding: 20px;
        background-color: #91f184;
        /* Adjust background color to match your design */
    }

    /* The school logo */
    .logo {
        width: 80px;
        /* Adjust the size of the logo as needed */
        height: auto;
        margin-bottom: 10px;

    }

    /* Text styling */
    .text-content {
        font-size: 16px;
        /* Adjust font size as needed */
        text-align: center;
        white-space: nowrap;
        /* Prevents line breaking */
        font-weight: bolder;
    }

    .img-1 {
        width: 90%;
        margin: auto;
        margin-top: 20px;
    }

    .result {
        width: 350px;
        text-align: center;
        margin: auto;
        background-color: palevioletred;
        margin-top:10px;
    }

    .result table {
        margin: auto;
    }

    .result th {
        padding: 10px;
    }

    .result tr {
        font-size: 18px;
        padding: 10px;
    }

    h4{
        width: 150px;
        padding: 20px;
        background-color: chartreuse;
        font-size: 30px;
        margin-left: 30px;
    }
    .dance {
        margin-top: 20px;
        text-align: center;
    }

    .dance video {
        margin-top: 20px;
        width: 80%;
    }

    #scrollButton {
        margin-left: 150px;
        width: 100px;
        text-align: center;
        margin-top: 50px;
        margin-bottom: 40px;
    }
}

@media screen and (min-width:500px) {
    .text-container {
        display: flex;
        flex-direction: column;
        align-items: center;
        padding: 20px;
        background-color: #91f184;
        /* Adjust background color to match your design */
        width: 800px;
        margin: auto;
        margin-top: 20px;

    }

    /* The school logo */
    .logo {
        width: 120px;
        /* Adjust the size of the logo as needed */
        height: auto;
        margin-bottom: 10px;
    }

    /* Text styling */
    .text-content {
        font-size: 16px;
        /* Adjust font size as needed */
        text-align: center;
        white-space: nowrap;
        /* Prevents line breaking */
        font-size: 2em;
        font-weight: bolder;
    }

    .img-1 {
        width: 90%;
        margin: auto;
        margin-top: 20px;
    }

    .result {
        width: 400px;
        text-align: center;
        margin: auto;
        background-color: palevioletred;
        margin-top:20px;
    }

    .result table {
        margin: auto;
    }

    .result th {
        padding: 20px;
    }

    .result tr {
        font-size: 30px;
        padding: 10px;
    }
    
    h4{
        width: 150px;
        padding: 20px;
        background-color: chartreuse;
        font-size: 40px;
        margin-left: 30px;
    }
    .dance {
        margin-top: 20px;
        text-align: center;
    }

    .dance video {
        margin-top: 20px;
        width: 80%;
    }

    #scrollButton {
        margin-left: 800px;
        text-align: center;
        width: 300px;
        margin-bottom: 40px;
    }
}