html {
    font-size: 14px;
}

@media (min-width: 768px) {
    html {
        font-size: 16px;
    }
}

.btn:focus,
.btn:active:focus,
.btn-link.nav-link:focus,
.form-control:focus,
.check:focus {
    box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

html {
    position: relative;
    min-height: 100%;
}

.form-floating > .form-control-plaintext::placeholder,
.form-floating > .form-control::placeholder {
    color: var(--bs-fg-3);
    text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder,
.form-floating > .form-control:focus::placeholder {
    text-align: start;
}

/* custom styles */

body {
    font-family: Lato;
    padding-top: 1rem;
    background-color: #269292;
    background-image: url("data:image/svg+xml,%3Csvg width='6' height='6' viewBox='0 0 6 6' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%23bedede' fill-opacity='0.74' fill-rule='evenodd'%3E%3Cpath d='M5 0h1L0 6V5zM6 5v1H5z'/%3E%3C/g%3E%3C/svg%3E");
}

/* element defaults join Bootstrap's reboot layer so component classes (e.g. .nav-link, .btn) still win */
@layer reboot {
    img {
        border-radius: 1%
    }

    a {
        color: black;
        text-decoration: underline;
        text-decoration-style: dotted;
        text-decoration-thickness: 10%;
        text-decoration-color: #535353;
    }
}

nav.navbar {
    --bs-navbar-bg: #212529;
    box-shadow: 4px 4px #2B4063;
}

    nav.navbar .drawer {
        --bs-drawer-bg: var(--bs-navbar-bg);
    }

    nav.navbar i {
        font-size: large;
    }

svg.bluesky {
    fill: rgba(255, 255, 255, 0.55);
}

    svg.bluesky :hover {
        fill: rgba(255, 255, 255, .75);
        transition: fill .15s ease-in-out;
    }

nav {
    font-family: Lato;
}

.background-cream {
    background-color: #FFFFF3;
}

.background-blue-grey {
    background-color: #5D7791;
}

button.background-blue-grey:hover,
button.background-blue-grey:focus,
button.background-blue-grey:active {
    background-color: #7d92a7 !important;
}

.background-blue-green {
    background-color: #3B978C;
}

.container.master-container {
    max-width: 40rem;
}

.toast-container {
    top: 4rem;
}

.photo-card {
    width: 10rem;
    min-width: 10rem;
}