* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}



header {
    
    display: flex;
    height: 6.2rem;

    & .btn {
       
        display: flex;
        align-items: center;
        justify-content: center;
        width: 10rem;

        
    }
}

div.offcanvas-body a {
    text-decoration: none;
    color:black;

    & a:hover {
        color: #fff;
    }
}

div.top-bar {
    
    width: 100%;
    display: flex;

}

.logo {
    
    color: navy;
    width: 26rem;
    height: 9rem;
    justify-content: center;
    align-items: center;
    display: flex;
    
    & img {
    
        width: 26rem;
        padding-bottom: 11.9rem;
        
       
    }
}

div.links {
   
    display: flex;
    height: 7rem;
    justify-content: center;
    align-items: center;
    gap: 0.9rem;
    width: 59rem;
    padding-right: 25rem;
    
    & a {
   
    text-decoration: none;
    color: navy;
}
}


div.buttom {
    
    display: flex;
    justify-content: center;
    align-items: center;
    width: 42rem;
    padding-left: 200pt;
    gap: 1rem; 
    
}


div.top-background {
    
    display: flex;
    height: 40rem;
    background-image: url(picture/marquis.png);
    justify-content: center;  
    background-repeat:no-repeat ;
    background-size:cover ;

}

div.top-item  {
    
    display: block;
    justify-content: center;
    width: 100%;
}

div.top-item h1 {
    
    display: flex;
    justify-content: center;
    height: 20rem;
    align-items: center;
    color:rgb(204, 178, 105);
    font-size: 3rem;
    font-family: 'Courier New', Courier, monospace;
}

button.start {
    display: block;
    width: 10rem;
    height: 2.5rem;
    margin: auto;
    border-radius: 4px;
    background-color: #8b3d18;
    color: #fff ;
    cursor: pointer;
    font: 1em sans-serif;
    
}

div.comment {
    
    display: flex;
    height: 7rem;
    justify-content: center;
    align-items: center;
    font-size: 2rem;
}

div.col-4 {
    width: rem;
    height: 35rem;
    display: flex;
    
   
    & img {
        background-repeat: no-repeat;
        background-size: cover;
        height: 20rem;
        border-radius: 10px;
    }

    & h5 p {
        font-family: 'Courier New', Courier, monospace;
        font-weight: 900;
    }

    & a {
        border: 1px solid;
        display: flex;
        width: 7rem;
        height: 3rem;
        justify-content: center;
        align-items: center;
        text-decoration: none;
        background-color: #8b3d18;
        color: #fff;
        border-radius: 100px;
        margin-left: 65%;

        a:hover {
            background-color: #fff;
        }
    }
}

div.offcanvas-header {

    & h5 {
        
        display: flex;
        width: 40rem;
    }
}