:root {
    --teal: rgb(35, 58, 68);
    --pale-pink: rgb(244, 204, 202);
    --mid-teal: rgb(35, 123, 132);
    --pink: rgb(242, 155, 157);
}

.dawning-of-a-new-day-regular {
  font-family: "Dawning of a New Day", cursive;
  font-weight: 400;
  font-style: normal;
}

.pink {
    color: var(--pink);
}

.navbar {
    background-color: var(--teal) !important;
    padding-top: 0;
    padding-bottom: 0;
    box-shadow: 5px 0 5px black;
}

.navbar-brand {
    padding-top: 12.5px;
    padding-bottom: 12.5px;
    font-size: 2rem;
}

.nav-link {
    padding-top: 25px;
    padding-bottom: 25px;
}

.navbar-brand,
.nav-link {
    padding-left: 5px;
    color: var(--pale-pink) !important;
    cursor: pointer;
}

.navbar-brand:hover,
.nav-link:hover {
    color: var(--teal) !important;
    background-color: var(--pale-pink) !important;
}

.navbar-toggler {
    background-color: white;
}

.navbar-toggler:focus {
    box-shadow: none;
}

.carousel-control-prev,
.carousel-control-next {
    position: fixed;
}

body {
    background-color: LavenderBlush;
    color: var(--teal);
}

.page-header {
    margin-bottom: 20px;
    display: block;
    font-size: 60px;
    text-decoration-line: underline;
    text-decoration-thickness: 2.5px;
    margin-top: 20px;
}

h1, h2 {
    font-size: 40px;
}

a {
    color: var(--teal)
}

img[src$="IMG_7032.jpg"] {
    margin-top: 20px;
}

img[src$="names-date.png"] {
    margin-top: 20px;
    margin-bottom: 20px;
}

#countdown {
    display: grid;
    grid-template-columns: auto auto;
    justify-content: center;
    font-size: 40px;
}

.input-group-text {
    background-color: var(--teal);
}

.form-control,
.form-control:focus {
    color: black;
    background-color: white;
}

.btn,
.btn:hover {
    border: none;
    background-color: var(--teal);
}

.vstack > a.btn {
    width: 200px;
}

img[src$="pearl.png"] {
    width: 150px;
    height: 150px;
    margin-bottom: 10px;
}

img[src$="names.png"] {
    width: 350px;
    height: 125px;
}

footer {
    margin-top: 50px;
}

@media (min-width: 576px) {
    .navbar-brand {
        padding-right: 40%;
    }
    
    h1, h2, #countdown {
        font-size: 40px;
    }

    #countdown {
        font-size: 40px;
    }
}

@media (min-width: 768px) {
    .navbar-brand {
        padding-right: 60%;
    }

    #story {
        width: 75%;
    }

    h1, h2, #countdown {
        font-size: 50px;
    }
}

@media (min-width: 992px) {
    .navbar-brand {
        padding-right: 5px;
    }

    #countdown {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: center;
        margin-top: 20px;
    }
    
    #story {
        width: 50%;
    }

    book-page {
        margin-top: 175px;
    }
}