brigittebee.css

@import url('https://fonts.googleapis.com/css2?family=Noto+Sans&display=swap');

@import url('https://fonts.googleapis.com/css2?family=Gloria+Hallelujah&family=Noto+Sans&display=swap');

:root {
    --font-noto: 'Noto Sans', sans-serif;
    --font-gloria: 'Gloria Hallelujah', cursive;
}

* {
    font-family: var(--font-noto);
    font-weight: 400;
    font-size: 16px;

}

header {
    display: flex;
    grid-template-columns: repeat(3,1fr);
    max-width: 1440px;
    align-items: center;
    justify-content: space-between;
    text-align: center;
    gap: 10px;
    margin: auto;
}
header ul {
    display: flex;

    align-items: center;
    gap: 40px;
}

header li {
    text-align: center;
}

header a {
    text-decoration: none;
    list-style: none;
    color: black;
}
header a:hover {
    color: red;
    transition: all 0.2s;
}
li{
    list-style: none;
    
}
#burger{
    display: none;
}
#accueil {
    color: red;
}
 h2 {
    font-family: var(--font-gloria);
    font-size: 45px;
 }

 h1{
    text-transform: uppercase;
    font-weight: 500;
    color: red;
    height: 2px;
 }
h3 {
    font-size: 28px;
    font-family: var(--font-gloria);
}

.maxwidth{
    max-width: 1440px;
    margin: auto;
}

#premiertableau{
    max-width: 1440px;
    margin: auto;
}

#section1{
    display: grid;
    grid-template-columns: 70% 30%;
    align-items: center;
    max-width: 1440px;
    margin-bottom: 50px;
}

#section1 article:nth-child(1){
    width: 50%;
}


#bouton {
    color:black;
    border: solid 2px #fbbbcd;
    border-radius: 90%;
    text-decoration: none;
    border-radius: 10px;
    padding-inline: 40px;
    padding-top: 10px;
    padding-bottom: 10px;
    width: 15%;
    text-align: center;
}

#bouton:hover {
    color:white;
    border: solid 2px #fbbbcd;
    border-radius: 90%;
    text-decoration: none;
    border-radius: 10px;
    padding-inline: 40px;
    padding-top: 10px;
    padding-bottom: 10px;
    width: 15%;
    text-align: center;
    background-color: #fbbbcd;
}
#section1 article div{
    align-items: center;
    display:inline-flex;
    gap: 10px;

}
hr{
    background-color: red;
    width: 20px;
    max-height: 1px;
}
#section1 {
    margin: 60px 0px 60px 0px;
}
#section1 img{
    width: 100%;
}



.tableau1{
    display: grid;
    grid-template-columns: 40% 60%;
    gap: 10px;
}

#sectiongalerie{
    background-color:#fbbbcd;
    color: black;
    width: 70%;
    margin: auto;
    padding: 100px;
}
#sectionphoto{
    display: grid;
    grid-template-columns:repeat(4,1fr) ;
    gap: 20px;
}
#sectionphoto img:nth-child(5){
    grid-column: 1/3;
}
#sectionphoto img:nth-child(6){
    grid-column: 3/5;
}
#sectionphoto img {
    width: 100%;
    height: 400px;
    object-fit: cover;
}
#petitesection {
    display: flex;
    align-items:center ;
    margin: auto;
    gap: 500px;
    max-width: 1440px;
    text-align: center;
}


#sectionpeinture{
    display: grid;
    grid-template-columns: repeat(4,1fr);
    gap: 10px;
    max-width: 1440px;
    margin: auto;
}

#sectionpeinture article{
    display: flex;
    flex-direction: column;
    align-items: center;
    align-self: stretch;
    
}

#sectionpeinture img {
    height: 300px;
}

.lienartiste {
    display: flex;
    justify-content: space-between;
    
}

#fondgris {
    background-color: #F7F7F7; 
    padding: 80px;
}
#FC{
    display: flex;
    text-align: center;
    margin: auto;
   
}

#FC h2 {
    width: 100%;
}
#nosartistes {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 20px;
}
#tableauactu{
    display: grid;
    grid-template-columns: repeat(3,1fr);

}
#tableauactu h2 {
    font-size: 18px;
}

#tableauactu a{
    color: black;
    text-decoration: none;
    font-weight: 600;
}

.fondorange{
    background-color: #CC3900;
    margin-top: 30px;
}
.fondorange article{
    width: 800px;
    height: 333px;
    color: white;
    margin: auto;
    padding: 100px 100px 200px 100px;
}
.fondorange a{
    margin: auto;
    display: flex;
    color: white;
    border: solid 1px white;
    text-decoration: none;
    border-radius: 10px;
    padding-inline: 40px;
    padding-top: 10px;
    padding-bottom: 10px;
    width: 15%;
    text-align: center;

}

.fondorange a:hover {
    margin: auto;
    display: flex;
    color: #CC3900;
    border: solid 1px white;
    text-decoration: none;
    border-radius: 10px;
    padding-inline: 40px;
    padding-top: 10px;
    padding-bottom: 10px;
    width: 15%;
    text-align: center;
    background-color: white;
    transition: all 0.2s;
}

 footer section {
    display: flex;
    grid-template-columns: repeat(3,1fr);
    max-width: 1440px;
    align-items: center;
    justify-content: space-between;
    text-align: center;
    gap: 10px;
    margin: auto;
    padding: 50px 231.5px;

 }
 footer ul{
    display: grid;
    grid-template-columns: repeat(6,1fr);
    justify-items: stretch;
    align-items: center;
    gap: 20px;
 }

 footer a {
    text-decoration: none;
    list-style: none;
    color: black;
 }
 footer a:hover {
    color: red;
    transition: all 0.2s;
 }

 @media screen and (max-width: 1024px){

    nav {
        display: none;
    }

  header div {
    display: none
  }
   
    
    #burger {
        display: block;
    }

 #section1{
    display: flex;
    align-items: flex-start;

 }

 .tableau1{
    grid-template-columns: none;
 }

 #sectionphoto{
    grid-template-columns: none;
 }

 #petitesection{
    display: flex;
    align-items: center;
    margin: auto;
    gap: 100px;
    text-align: center;
    justify-content: center;
 }
 #sectionpeinture{
    display: grid;
    grid-template-columns: repeat(2,1fr);
    gap: 10px;
 }

 #nosartistes{
    display: grid;
    grid-template-columns: repeat(2,1fr);
    gap: 10px;
 }
 #tableauactu {
    display: grid;
    grid-template-columns: repeat(2,1fr);
    gap: 30px;
}

#tableauactu article:nth-child(3){
    grid-column: 1/3;
}

#tableauactu article img {
    width: 100%;
    height: 300px;
}
footer section{
    padding:0
}
 }