:root {
    --bs-body-font-family: 'Open Sans', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
}

::selection {
    background: rgb(202, 202, 202);
}

html, body {
  scroll-behavior: smooth !important;
}

.dropdown-menu {
    background-color: rgb(0, 0, 0);
    border-color: white;
}

.dropdown-item {
    color: rgba(255, 255, 255, 0.55);
}

.dropdown-item:hover {
    color: rgba(255, 255, 255, 0.75);
    background-color: transparent;
}

.dropdown-item.active {
    color: rgb(255, 255, 255);
    background-color: transparent;
}

.fs-1 { font-size: 5rem !important; }
.fs-2 { font-size: 4rem !important; }
.fs-3 { font-size: 3rem !important; }
.fs-4 { font-size: 2rem !important; }
.fs-5 { font-size: 1rem !important; }
.fs-6 { font-size: .75rem !important; }
.fs-7 { font-size: .5rem !important; }

/*Breakpoint (sm)*/
@media screen and (min-width: 576px) {
    .fs-sm-1 { font-size: 5rem !important; }
    .fs-sm-2 { font-size: 4rem !important; }
    .fs-sm-3 { font-size: 3rem !important; }
    .fs-sm-4 { font-size: 2rem !important; }
    .fs-sm-5 { font-size: .1rem !important; }
    .fs-sm-6 { font-size: .75rem !important; }
    .fs-sm-7 { font-size: .5rem !important; }
}

/*Breakpoint (lg)*/
@media screen and (min-width: 992px) {
    .fs-lg-1 { font-size: 5rem !important; }
    .fs-lg-2 { font-size: 4rem !important; }
    .fs-lg-3 { font-size: 3rem !important; }
    .fs-lg-4 { font-size: 2rem !important; }
    .fs-lg-5 { font-size: .1rem !important; }
    .fs-lg-6 { font-size: .75rem !important; }
    .fs-lg-7 { font-size: .5rem !important; }
}

.gallery {
    display: grid;
    gap: 20px;
    grid-template-columns: repeat(auto-fit, minmax(500px, 1fr));
}

/*Breakpoint (sm)*/
@media screen and (max-width: 576px) {
    .gallery {
        grid-template-columns: repeat(auto-fit, minmax(100%, 1fr));
    }
}