@import '../Fonts/fonts.css';

.home a {
    font-family: RegularFont;
    font-size: 90%;
    text-decoration: none;
    color: #000;
    padding: 0.5em 1.5em;
    background-color: #dff6fc;
    border-radius: 10em;
}

.home a:hover {
    background-color: #92c5ff;
}

.section_container {
    width: 100%;
    overflow: hidden;
}

.background {
    background-repeat: no-repeat;
    background-position: center bottom;
    background-attachment: scroll;
    background-size: cover;
    height: 100%;
    width: 100%;
}

.title_screen_background {
    background-image: url('../Images/TitleScreen.jpg');
    background-position: top center;
    transform: scale(1.2);
}

.title_screen {
    width: 80%;
    margin: 0 auto;
    padding: 10em 0 25em 0;
    transform: scale(0.83);
}

#court_reservation_error {
    text-align: center;
    background-color: #fff;
    font-size: 1.2em;
    border-radius: 0.5em;
    max-width: max-content;
    padding: 0.5em;
    margin: 0 auto;
    margin-bottom: 2em;
    word-wrap: break-word;
}

.title_screen h1 {
    margin-bottom: 0.4em;
    width: 80%;
}

.title_screen h3 {
    margin-bottom: 3em;
}

.title_screen a {
    padding: 1em 3em;
}

.about_background {
    background-color: #243976;
}

.about {
    text-align: center;
    width: 60%;
    margin: 0 auto;
    padding: 7em 0;
}

.about h2 {
    margin-top: 0;
    margin-bottom: 1em;
}

.about p {
    font-family: RegularFont;
    color: #fff;
    margin-bottom: 3em;
}

.hide {
    opacity: 0;
}

.three_columns {
    margin: 0 2em;
}

.three_columns p {
    font-family: RegularFont;
    color: #fff;
    font-size: .8em;
    width: 60%;
    padding-bottom: 4em;
}

.offer_section h2 {
    text-align: center;
    margin: 1em 0;
}

.offer_title {
    font-size: 1.2em;
    margin-bottom: 1em;
}

.offer_column {
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
    padding: 2em;
    margin: 1em 0.8em;
}

.text_black_to_white {
    color: #000;
}

.offer_content {
    position: relative;
}

.offer_column a {
    position: absolute;
    left: 0;
    bottom: 0;
}

#tournaments {
    background-image: url("../Images/TennisLessonsSmall.jpg");
}

#league_system {
    background-image: url("../Images/LeagueSystemSmall.jpg");
}

#court_reservations {
    background-image: url("../Images/CourtReservationsSmall.jpg");
}

#review_carousel {
    background-color: #fff;
    margin-top: 2em;
}

.review_quote, .review_person {
    color: #000;
    text-align: center;
    margin: 0 auto;
}

.review_quote {
    font-family: BoldFont;
    margin-bottom: 1.5em;
    font-size: 1.2em;
}

.carousel-item {
    text-align: center;
    height: 33em;
    justify-content: center;
}

.quote_group {
    margin: 0;
    position: absolute;
    top: 50%;
    left: 50%;
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}

.carousel-indicators [data-bs-target] {
    background-color: #000;
    width: 0.7em;
    height: 0.7em;
    border: 0;
    margin-bottom: 1em;
}

ol.carousel-indicators li, ol.carousel-indicators li.active {
    width: 0.7em;
    height: 0.7em;
    border-radius: 50%;
    border: 0;
    margin-bottom: 1em;
}

.sponsors_section h2 {
    text-align: center;
    margin: 2em 0 0 0;
}

#add_sponsor_form {
    background-color: unset;
    text-align: center;
    font-size: 1.2em;
    margin-top: 1em;
}

.sponsors_wrapper {
    margin-top: 4em;
}

.sponsors_section a {
    font-family: SemiBoldFont;
    font-size: 100%;
    background-color: transparent;
    padding: 1em;
    margin: 1em;
    border: 5px solid rgb(0, 191, 255);
    border-radius: 1em;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

a .edit_sponsor_link {
    font-family: RegularFont;
}

.sponsors_section a:hover {
    background-color: #8b8b8b;
}

.sponsor_rank_container {
    display: grid;
    margin-bottom: 4em;
}

.sponsor_rank_container h2 {
    text-align: left;
    margin: 0 0 0 10%;
    grid-column: 1 / span 1;
}

.sponsor h3 {
    font-size: 1.2em;
}

.sponsor_img_container {
    display: flex;
    align-items: center;
    flex-grow: 1;
    background-color: #fff;
    border-radius: 0.5em;
}

.sponsor img {
    border-radius: 0.5em;
    background-color: #fff;
    width: 100%;
}

.sponsor_edit_buttons {
    width: min-content;
    margin: 0 auto;
    display: flex;
    justify-content: center;
    gap: 1em;
}

.sponsor form {
    background-color: transparent;
    padding: 1em 0 0 0;
    margin: 0 auto;
}

.sponsor_edit_link {
    color: #000;
    padding: 0.5em 1.5em;
    background-color: #eba3ff;
    border-radius: 10em;
}

.sponsor_edit_link:hover {
    background-color: #f4ceff;
}

#Diamond h2 {
    color: rgb(0, 191, 255);
}

#Diamond .sponsor {
    border: 5px solid rgb(0, 191, 255);
}

#Gold .sponsor {
    border: 5px solid #ffdc21;
}

#Silver h2 {
    color: rgb(195, 195, 195);
}

#Silver .sponsor {
    border: 5px solid rgb(195, 195, 195);
}

#Bronze h2 {
    color: rgb(255, 158, 61);
}

#Bronze .sponsor {
    border: 5px solid rgb(255, 158, 61);
}

#Friends h2 {
    color: rgb(27, 152, 38);
}

#Friends .sponsor {
    border: 5px solid rgb(27, 152, 38);
}

@media screen and (min-width: 415px) {
    .offer_column {
        display: grid;
        grid-template-rows: 1fr 1fr;
        background-repeat: no-repeat;
        background-size: cover;
        background-position: center center;
        padding: 2em;
        margin: 1em 0.8em;
    }

    .sponsor_rank_container {
        padding: 0 1em;
    }

    .carousel-item {
        height: 25em;
    }

    .text_black_to_white {
        color: #fff;
    }
}

@media screen and (min-width: 570px) {
    .sponsor_rank_container {
        grid-template-columns: 50% 50%;
    }

    .sponsor_rank_container h2 {
        grid-column: 1 / span 2;
    }
}

@media screen and (min-width: 768px) {
    #tournaments {
        background-image: url("../Images/TennisLessons.jpg");
    }

    #league_system {
        background-image: url("../Images/LeagueSystem.jpg");
    }

    #court_reservations {
        background-image: url("../Images/CourtReservations.jpg");
    }
}

/* This is where bootstrap-lg starts */
@media screen and (min-width: 992px) {
    .about_background {
        background-image: url("../Images/About.jpg");
        transform: scale(1.2);
    }

    .about {
        transform: scale(0.83);
    }

    .three_columns {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
        margin: 0 2em 1em 2em;
    }

    .sponsor_rank_container {
        grid-template-columns: 33.33% 33.33% 33.33%;
    }

    .sponsor_rank_container h2 {
        grid-column: 1 / span 3;
    }
}

@media screen and (min-width: 1300px) {
    .about_background {
        transform: scale(1.2);
    }

    .about {
        transform: scale(0.83);
    }

    .sponsor_rank_container {
        grid-template-columns: 25% 25% 25% 25%;
    }

    .sponsor_rank_container h2 {
        grid-column: 1 / span 4;
    }
}

@media screen and (min-width: 1700px) {
    .sponsor_rank_container {
        grid-template-columns: 20% 20% 20% 20% 20%;
    }

    .sponsor_rank_container h2 {
        grid-column: 1 / span 5;
    }
}

@media screen and (min-width: 2300px) {
    .sponsor_rank_container {
        grid-template-columns: 16.66% 16.66% 16.66% 16.66% 16.66% 16.66%;
    }

    .sponsor_rank_container h2 {
        grid-column: 1 / span 6;
    }
}

/* Fade Up */
.fade_up {
    animation: fadeUp 1.5s;
}

@keyframes fadeUp {
    0% {
        opacity: 0;
        transform: translateY(1em);
    }

    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Fade In */
.fade_in {
    animation: fadeIn 1.5s;
}

@keyframes fadeIn {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

/* Fade Down */
.fade_down {
    display: inline-block;
    animation: fadeDown 1.5s;
}

@keyframes fadeDown {
    0% {
        opacity: 0;
        transform: translateY(-3em);
    }

    100% {
        opacity: 1;
        transform: translateY(0);
    }
}