@import url('style.css');

h1 {
    font-size: 5rem;
    margin: 0;
}

header {
    height: fit-content;
}
.project-background {
   
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    padding: 20px;
    border-top-left-radius: 16px;
    border-bottom-left-radius: 16px;
    margin: 20px 0;
    width: 50%;
    height: 100%;
}

.projet-berck {
    background-image: url(images/berck/Product\ Demo\ Presentation.png);
}
.projet-spotify {
    background-image: url(images/spotify/Macbook\ Mockup\ Front\ View\ UV.png);
}
.projet-resaweb {
    background-image: url(images/resaweb/Macbook\ Mockup\ Front\ View\ UV.png);
}

.projet-gameviz {
    background-image: url(images/Gameviz-Awarr/home-gameviz.png);
}

.project-text {
    width: 40%;
}

.project-header {
    display: flex;
    justify-content: space-between;
    align-items: start;
    height: 70vh;
}

.project-main {
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
    gap: 16px;
    height: 50vh;
    width: 100%;
}

.project-mook {
    background-size: cover;
    background-position: center;
    width: 45%;
    height: 70%;
    border-radius: 16px;
}

.berck1 {
    background-image: url(images/berck/Product\ Demo\ Presentation\ \(1\).png);
}
.berck2 {
    background-image: url(images/berck/Subway_Billboard_Mockup_1.png);
}

.resa1 {
    background-image: url(images/resaweb/voiture.png);
    width: 90%;
    background-position: top;
}

.resa2 {
    background-image: url(images/resaweb/voiture2.png);
    width: 90%;
    background-position: top;
}

.spotify1 {
    background-image: url(images/spotify/spotifymaquette.png);
    height: 100%;
    background-position: top;
}
.spotify2 {
    background-image: url(images/spotify/spotifymaquette.png);
    height: 100%;
    background-position: bottom;
}

.btn {
    padding: 15px 25px;
    text-decoration: none;
    color: black;
    background-color: none;
    box-shadow: inset 0 0 0 0 #E02B20;
    transition: ease-in-out 0.3s;
    font-weight: bold;
    border: black 1px solid;
    border-radius: 32px;
    
  }
  .btn:hover {
    box-shadow: inset 300px 0 0 0 #E02B20;
    color: white;
  }

  .btn-gameviz {
    box-shadow: inset 0 0 0 0 #D9663B;
  }

  .btn-gameviz:hover {
    box-shadow: inset 500px 0 0 0 #D9663B;
    color: white;
  }

.gallerie {
    display: flex;
    justify-content: space-around;
    align-items: center;
    gap: 16px;
    width: 95%;
    margin-left: auto;
    margin-right: auto;
}

.gallerie h2 {
    font-size: 4rem;
}

.trait {
    width: 100%;
    height: 5px;
    background-color: black;
    margin: 20px 0;
}