/* Site styles. Loaded after Bootstrap. */

@font-face {
    font-family: "TAYAmaya";
    src: url("../fonts/TAYAmaya.otf") format("opentype");
    font-display: swap;
}

html,
body {
    max-width: 100vw;
    overflow-x: hidden;
}

body {
    font-family: "Montserrat", sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

* {
    box-sizing: border-box;
    padding: 0;
    margin: 0;
}

/* Headings and the navigation menu use the school's logo font */
.logo-font {
    font-family: "TAYAmaya", "Montserrat", sans-serif;
}


.banner0,
.banner1,
.banner2,
.banner3,
.banner4,
.banner5,
.banner6 {
    background-size: cover;
    background-position: center;
}

.banner0 { background-image: url("../images/banner0.jpg"); }
.banner1 { background-image: url("../images/banner1.jpg"); background-position: bottom; }
.banner2 { background-image: url("../images/banner2.jpg"); }
.banner3 { background-image: url("../images/banner3.jpg"); background-position: top; }
.banner4 { background-image: url("../images/banner4.jpg"); }
.banner5 { background-image: url("../images/banner5.jpg"); }
.banner6 { background-image: url("../images/banner6.jpg"); }


.white-with-black-stroke {
    color: white;
    text-shadow:
        3px 3px 0 #000,
        -1px -1px 0 #000,
        1px -1px 0 #000,
        -1px 1px 0 #000,
        1px 1px 0 #000;
}


.bg-1 {
    background-color: rgba(119, 200, 207, 0.7);
}

.bg-2 {
    background-color: rgba(237, 187, 28, 0.7);
}

.bg-3 {
    background-color: rgba(51, 124, 130, 0.7);
}

.button-color {
    background-color: rgba(119, 200, 207, 0.7) !important;
}

/* Keep the embedded Google Calendar from overflowing on phones */
.calendar-embed {
    border: 1px solid #777;
    max-width: 100%;
}


/* Banner heights by screen width */
.banner0, .banner1, .banner2, .banner3, .banner4, .banner5, .banner6 {
    min-height: 5em;
}

@media (min-width: 481px) {
    .banner0, .banner1, .banner2, .banner3, .banner4, .banner5, .banner6 { min-height: 7em; }
}

@media (min-width: 641px) {
    .banner0, .banner1, .banner2, .banner3, .banner4, .banner5, .banner6 { min-height: 8em; }
}

@media (min-width: 961px) {
    .banner0, .banner1, .banner2, .banner3, .banner4, .banner5, .banner6 { min-height: 10em; }
}

@media (min-width: 1025px) {
    .banner0, .banner1, .banner2, .banner3, .banner4, .banner5, .banner6 { min-height: 11em; }
}

@media (min-width: 1281px) {
    .banner0, .banner1, .banner2, .banner3, .banner4, .banner5, .banner6 { min-height: 15em; }
}