body {
    font-family: Arial;
    font-size: 16px;
}

div.results_div {
    text-align: center;
}

table#results_table {
    width: 96%;
    border-collapse: separate;
    border-spacing: 0 6px;
    margin-left: auto;
    margin-right: auto;

}

tr {
    margin-bottom: 2px;
}

span.perfect-score {
    background: rgb(197,179,88);
    background: linear-gradient(0deg, rgba(197,179,88,1) 0%, rgba(247,233,142,1) 100%);
    margin-left: 2em;
    padding: 0 0.5em;
}




@media screen and (max-device-width: 401px) {
    body {
        font-size: 14px;
    }

    table#results_table {
        font-size: 90%;
        width: 90%;

    }
}

@media screen and (min-device-width: 402px) and (max-device-width: 800px) {
    body {
        font-size: 12px;
    }

    table#results_table {
        font-size: 150%;
        width: 96%;
    }
}

@media screen and (min-device-width: 801px) {
    body {
        font-size: 16px;
    }

    table#results_table {
        font-size: 120%;
        width: 800px;
        margin-left: auto;
        margin-right: auto;
    }
}



tr.contest_title_row {
    border-top: solid lightgray 1px;
    font-weight: bold;
    color:  	#BF88FF;
}

tr.contest_title_row td {
    min-height: 1.3em;
    height: 1.7em;
    /* text-shadow: 0.25px 0.25px purple; */
}

tr.spacer {
    min-height: 3.3em;
}

/* for 780px or less */
/*
@media screen and (max-width: 780px) {
    #main {
        width: auto;
        float: auto;
        margin-left: 0px;
        left: 0;
    }
    #results_table {
        font-size: 9px;
    }
}
*/

td.contest_rank {
    font-size: 200%;
    vertical-align: top;
}

.contestant_name {
    font-size: 100%;
}

.contestant_score {
    color: gray;
}

.contestant_school {
    font-size: 60%;
    color: #0a0a0a;
}

.tie {
    font-size: 40%;
    color: #0a0a0a;
}

.contestant_points {
    text-align: right;
    vertical-align: top;
}

.ten_style {
    font-stretch: condensed;
}

#results_top_container {
    /*border-bottom: solid 6px gray; */
}

td.xxxicon-cell {
    /* display: block; */
    height: 48px !important;
    width: 24px;
    margin-left: auto;
    margin-right: auto;
    padding-right: 1.5em;
    vertical-align: middle;
}

img.xxxschool_icons {
    /* height: clamp(16px, 10vh, 48px); */
}

img.xxxschool_icons {
    width: auto; /* This will ensure the width does not exceed 144px while maintaining aspect ratio */
    height: auto; /* Height can scale proportionally */
    max-width: 44px; /* Maximum width restricted to 144px */
    max-height: 44px; /* Maximum height to ensure the logo does not exceed the desired size */
}

td.icon-cell {
    width: auto;
    min-width: 24px;
    padding-right: 1em;
    text-align: center;
    vertical-align: middle;
}

img.school_icons {
    height: clamp(16px, 15vw, 72px);
    width: auto;
    max-width: 100%;
    display: block;
    margin: 0 auto;
}

@media screen and (max-width: 401px) {
    td.icon-cell {
        min-width: 32px;
        padding-right: 0.5em;
    }

    img.school_icons {
        height: 32px;
    }
}

@media screen and (min-width: 402px) and (max-width: 800px) {
    td.icon-cell {
        min-width: 40px;
    }

    img.school_icons {
        height: 40px;
    }
}