/* Universal */

@font-face {
    font-family: "Peignot";
    src: url("../../resources/fonts/peignot/Peignot.ttf") format("truetype");
}

html, body {
    margin: 0;
    padding: 0;
    background-color: hsla(307, 8%, 92%, 1);
    text-align: center;
    font-family: 'Montserrat', sans-serif;
}

a:link {
    text-decoration: none;
    color: hsla(19, 38%, 31%, 1);
}

a:visited {
    color: hsla(19, 38%, 31%, 1);
}

a:hover {
    cursor: pointer;
    color: black;
}

h1 {
    font-family: "Peignot";
    font-weight: 600;
    font-size: 4rem;
    color: white;
    text-shadow: 0 2px 3px rgba(0, 0, 0, 1);
}

h2 {
    font-weight: 600;
    font-size: 2.5rem;
    color: whitesmoke;
}

span {
    font-family: "Peignot";
    font-size: 4rem;
    color: hsla(34, 22%, 57%, 1);
    text-shadow: 0 2px 1px black;
}

.button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.7rem 2rem;
    font-family: "Poppins", sans-serif;
    font-weight: 700;
    font-size: 1rem;
    text-align: center;
    text-decoration: none;
    background-color: transparent;
    backface-visibility: hidden;
    border: 0.3rem solid transparent;
    border-radius: 3rem;
    cursor: pointer;
}

.button7 {
    color: white;
    border-color: #fff;
    transition: transform 0.2s cubic-bezier(0.235, 0, 0.05, 0.95);
}

.button777 {
    color: hsla(34, 22%, 57%, 1);
    border-color: hsla(287, 4%, 25%, 0.8);
    transition: transform 0.2s cubic-bezier(0.235, 0, 0.05, 0.95);
}
  
.button7:hover, .button777:hover {
    transform: perspective(1px) scale3d(1.044, 1.044, 1) translateZ(0) !important;
    background-color: hsla(34, 22%, 57%, 1);
    color: white;
}

.button:active{
    position: relative;
    top: 3px;
}

/* Banner model */

.banner {
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: white;
    margin: 1rem 0;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    border: 1px solid black;
    text-shadow: 0 2px 3px rgba(0, 0, 0, 1);
}

.banner h2:hover{
    color: hsla(34, 22%, 57%, 1);
}

/* Header */

.main-header {
    display: flex;
    justify-content: center;
    background-color: hsla(287, 4%, 25%, 1);
}

.navbar {
    display: flex;
    justify-content: space-around;
    margin: 1rem 1rem;
}

/* Home Banner */

.home-banner {
    height: 30rem;
    background-image: 
        linear-gradient(
        rgba(0, 0, 0, 0.5),
        rgba(0, 0, 0, 0.3)
        ),
        url("../images/Artistique/art3.jpg");
}

/* Home content */

.box-content {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    margin-top: 3rem;
}

.box-content img{
    width: 20rem;
    height: 20rem;
    border: 2px solid black;
}

/* Gallery Banner */

.first-banner {
    height: 15rem;
    background-image: 
        linear-gradient(
        rgba(0, 0, 0, 0.5),
        rgba(0, 0, 0, 0.3)
        ),
        url("../images/Artistique/4.jpg");
}

.second-banner {
    height: 15rem;
    background-image: 
        linear-gradient(
            rgba(0, 0, 0, 0.5),
            rgba(0, 0, 0, 0.3)
        ),
        url("../images/Decoratif/16.jpg");
}

/* Live Gallery */

.portfolio {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    margin-top: 3rem;
}

.portfolio img{
    width: 20rem;
    height: auto;
    border: 2px solid black;
}

/* Footer */

.flex-container {
    display: flex;
    justify-content: space-around;
    align-content: center;
    background-color: hsla(287, 4%, 25%, 1);
}

.brands {
    display: flex;
    align-items: center;
}

.brands .fa-brands, .fa-solid {
    margin: 0 1rem;
    color: hsla(34, 22%, 57%, 1);
}

.copyright h5 {
    font-size: 1rem;
    color: white;
}

/* Sticky Footer */

html, body { height: 100%;}

body > footer {
  position: sticky;
  top: 100vh;
}

/* En construction */

.construction {
    display: flex;
    justify-content: center;
}