@import url('https://fonts.googleapis.com/css2?family=Arimo&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Yellowtail&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Courgette&display=swap');

body {
    background-color: #F7F3E3;
    font-family: 'Arial', sans-serif;
    font-size: large;
    width: 100%;
}


a{
    text-decoration: none;
}

.navbar a:hover, footer a:hover{
    text-decoration: underline #F7F3E3;   
}

.navbar, footer, .nav{
    background-color:rgb(99, 7, 27);
}
.title{
    font-family: 'Yellowtail', cursive;

}
.navbar h1{
    font-size: 4.25rem;
}

.navbar h3{
    font-size: 2.5rem;
}
.navbar h4{
    font-size: 3rem;
}

.logo{
    max-width:200px
}
.nav{
    font-size: larger;
}
.nav > a:hover, .nav > a:focus, .active {
    color:#F7F3E3;
}
.navbar p, .navbar h2, .navbar h1, .navbar h4, .navbar h3{
    color: gold;
}
footer p{
        font-size: larger;
}
footer p, .nav a{
    color:#F7F3E3;
}

.nav-link{
    color:#F7F3E3;

}

.slider, .slider2 {
    height: 425px;
    width: 100%;
    overflow: hidden;
  }
  
.slider img, .slider2 img {
    height: 100%;
    width: 100%;
    object-fit: cover;
}
.card{
    transition: transform .35s ease;
}
.card:hover {
    transform: scale(1.1); /* (150% zoom - Note: if the zoom is too large, it will go outside of the viewport) */
  }

.nav{
    border-top: 2px solid #F7F3E3;
}

.card-text{
    font-size: 1.3rem;
}
.description{
    max-width:960px;
    font-family: 'Arial', cursive;


}
.description h2{
    font-size:2.5rem;
}
.description p{
}
.card{
    margin: 8px;
}
@media only screen and (max-width: 800px) {
    .box {
        width: 100%;
    }
    .card{
        transition: none;
        margin: 0 auto;
    }
    .card:hover {
        transform: none;
      }
    
}
.card-img-top {
    width: 100%;
    object-fit: cover;
}
@media (min-width: 992px) {
    .footer-logo{
        text-align: left;
    }
 }

 .nav-link, .active{
    position: relative;
    z-index : 1;
 }
.nav-link:hover:before, .active:before{
    content : "";
    position: absolute;
    left    : 5%;
    right: 5%;

    bottom  : 0;
    height  : 1px;
    width   : 90%;  /* or 100px */
    border-bottom: 2px solid white;
}

.lozenge{
    background-color:rgb(99, 7, 27);
    border:none;
    width:250px;
    height:50px;
}
.lozenge:hover, .lozenge:focus{
    background-color:rgb(131, 17, 42);
}
.photo-menu a{
    color:black;
}
.history{
    overflow:hidden;
}
.history .modal-body img{
    max-width: 100%;
}
.modal{
    font-family: 'Courgette', cursive;
    padding-right: 0px;
    overflow-x: overlay;
}
html, body {
    max-width: 100%;
    overflow-x: hidden;
}

.menu{
    background-color:rgb(99, 7, 27);
    color:white;
    width:250px;
    height:50px;
}
.menu:hover, .menu:focus{
    background-color:rgb(131, 17, 42);
    color:white;

}