@import url(https://db.onlinewebfonts.com/c/74613e9d0612d09be09dd6de7c898d50?family=Modern+Era);

@font-face {
    font-family: "Modern Era";
    src: url("https://db.onlinewebfonts.com/t/74613e9d0612d09be09dd6de7c898d50.eot");
    src: url("https://db.onlinewebfonts.com/t/74613e9d0612d09be09dd6de7c898d50.eot?#iefix")format("embedded-opentype"),
        url("https://db.onlinewebfonts.com/t/74613e9d0612d09be09dd6de7c898d50.woff2")format("woff2"),
        url("https://db.onlinewebfonts.com/t/74613e9d0612d09be09dd6de7c898d50.woff")format("woff"),
        url("https://db.onlinewebfonts.com/t/74613e9d0612d09be09dd6de7c898d50.ttf")format("truetype"),
        url("https://db.onlinewebfonts.com/t/74613e9d0612d09be09dd6de7c898d50.svg#Modern Era")format("svg");
}

* {
    /* font-family: "Modern Era"; */
    margin: 0;
    padding: 0;
}

.main-heading {
    display: flex;
    flex-direction: column;
    background-color: rgba(12,152,143,1);
    /* background: linear-gradient(90deg, rgba(36,215,180,1) 0%, rgba(12,152,143,1) 50%, rgba(0,87,107,1) 100%); */
    padding: 15px;
    color: white;
    font-size: large;
    justify-content: center;
    align-items: center;
    width: 88%;
}

.main-heading-text {
    font-family: "Dancing Script", cursive;
    font-size: xx-large;
    text-align: left;
}

.bg-body-tertiary {
    background-color: rgb(0, 35, 43)!important;
}

.navbar-text {
    color: white;
    font-size: large;
    font-weight: 800;
    margin-right: auto;
    margin-left: auto;
    font-family: "Modern Era";
}

.landing-img {
    max-width: 75%;
}

.tile {
    display: flex;
    position: relative;
    /* background-color: rgb(139, 34, 100); */
    background-color: rgb(115, 22, 113);
    margin: 5px;
    padding: 0;
    height: 25vh;
}

.img-container {
    /* background-color: aqua; */
    width: 60%;
    margin-left: 10px;
    margin-right: 5px;
    margin-top: 10px;
    height: 70%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    overflow: hidden;
}

.img-container img {
    max-width: 100%;
    max-height: 100%; 
    object-fit: contain;
}

.overlay {
    position: absolute;
    display: flex;
    justify-content: center;
    justify-items: center;
    align-items: center;
    text-align: center;
    align-content: center;
    color: white;
    font-weight: bolder;
}


.overlay-bottom {
    flex-direction: column;
    bottom: 0;
    width: 100%;
    height: 20%;
    z-index: 5;
    font-family: "Dancing Script", cursive;
    font-weight: bolder;
}

.overlay-right {
    font-family: "Roboto Slab", serif;
    flex-direction: column;
    top: 0;
    right: 0;
    width: 30%;
    height: 70%;
    margin-right: 5px;
    z-index: 5;
    font-weight: bold;
    font-size: x-small;
}

.pic {
    width: 60%;
    max-width: 60%;
    max-height: 70%;
    margin-left: 10px;
    margin-top: 10px;
}

.wmn {
    font-family: "Dancing Script", cursive;
    font-size: medium;
    font-weight: bold;
}

.day {
    font-family: "Dancing Script", cursive;
    font-size: medium;
    font-weight: bold;
}

.name {
    font-family: "Dancing Script", cursive;
    font-size: medium;
    font-weight: bold;
}

.modal-body {
    position: relative;
}

.overlay-content {
    font-family: "Dancing Script", cursive;
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 30%;
    background-color: rgba(0, 0, 0, 0.6);
    z-index: 7;
    display: flex;
    flex-direction: column;
    color: white;
    justify-items: center;
    align-items: center;
    align-content: center;
    justify-content: center;
    font-size: larger;
}

.overlay-txt {
    font-family: "Dancing Script", cursive;
    font-size: larger;
}