@import url('https://fonts.googleapis.com/css2?family=Bahiana&family=Bangers&family=Ms+Madi&display=swap');

* {
    box-sizing: border-box;
}

body {
    background-color: rgb(10, 5, 25);
    background-repeat: no-repeat;
    background-size: cover;
    margin: 0;
}

h1, h2 {
    color: white;
}

h2 {
    font-family: "Ms Madi";
    font-size: 50px;
    text-align: center;
}

a {
    text-decoration: none;
}

img {
    width: 40%;
    height: 40%;
}

#sebastiano {
    background-image: url("https://img.restaurantguru.com/rfdb-Di-Sebastiano-pizza-2021-08-3.jpg");
}

#gaia {
    background-image: url("https://scontent-cdg4-2.xx.fbcdn.net/v/t39.30808-6/417458484_785062246995162_18178212454064206_n.jpg?_nc_cat=109&ccb=1-7&_nc_sid=127cfc&_nc_ohc=SP9Ir1q_S0AQ7kNvgHiJ4bI&_nc_zt=23&_nc_ht=scontent-cdg4-2.xx&_nc_gid=ArnEHqMMLnUj83qw61zST2y&oh=00_AYCh2JAWpbfzvkl0Nok3H1f1_ig6O9ja4aiMUr11bWFlEA&oe=6726B66D");
}

#bistrot {
    background-image: url("https://dynamic-media-cdn.tripadvisor.com/media/photo-o/10/57/d1/f0/photo0jpg.jpg?w=1000&h=-1&s=1");
}

#hanayuki {
    background-image: url("https://dynamic-media-cdn.tripadvisor.com/media/photo-o/1b/0a/07/d0/photo0jpg.jpg?w=1000&h=-1&s=1");
    background-position-x: center;
}

#atelier {
    background-image: url("https://img.restaurantguru.com/rec2-L-Atelier-Restauration-design.jpg");
}

#cinéma {
    background-image: url("https://imgs.search.brave.com/EpYuxek55rwGYksiZTLgJxtnPfiUkP-U-fajnbsuGps/rs:fit:500:0:0:0/g:ce/aHR0cHM6Ly9pbWcu/ZnJlZXBpay5jb20v/cGhvdG9zLXByZW1p/dW0vY2luZW1hLXNp/ZWdlcy12aWRlcy1n/cmFuZC1lY3Jhbl8x/MzMwMTYtNDgyOS5q/cGc_c2VtdD1haXNf/aHlicmlk");
    background-position-x: center;
}

#sourcéo {
    background-image: url("https://www.thermes-dax.com/sourceo/wp-content/uploads/sites/2/2024/09/sourceo-2024.07-thermes-15_retouches-1-scaled.jpg");
    background-position-y: bottom;
}

#casino {
    background-image: url("https://imgs.search.brave.com/7G3pi2baHeofeXQ0Mtj28hvIhUyDTsocZ1U6VBwWD8o/rs:fit:860:0:0:0/g:ce/aHR0cHM6Ly9tZWRp/YS5qb2EuZnIvZHlu/bWVkLzc4M2FkYzcy/LWQyOGMtNGNjMS05/MTQ0LWEzMzg4NmVk/YzUyOS8yNC05LzEy/NDAvZmFjYWRlLWNl/c2FyLW51aXQtZ3Vp/bGxhdW1lLXBlcnJl/dC5qcGVn");
    background-position-x: 44%;
}

#robot {
    background-image: url("https://imgs.search.brave.com/OoepGbD40RneFxvVIEz906KaQw1CFgy0lewDrnRx7Ls/rs:fit:500:0:0:0/g:ce/aHR0cHM6Ly9mci53/ZWIuaW1nNC5hY3N0/YS5uZXQvcl8xMjgw/XzcyMC9pbWcvN2Ev/MTAvN2ExMDk4ZjIx/Yzc2NWI3ZDQ5MzUy/NDBlMWFmMDk0ZWQu/anBn");
}

#comte {
    background-image: url("https://imgs.search.brave.com/3Kl2woskREVcrBmVSz57YYsbYXNI5gJ1VQMe0OhcPKk/rs:fit:500:0:0:0/g:ce/aHR0cHM6Ly9mci53/ZWIuaW1nNS5hY3N0/YS5uZXQvcl8xMjgw/XzcyMC9pbWcvMjkv/ZWIvMjllYjgzNDE0/NzVmZGIwYjE5YjFk/N2I5OTViNzBlMTcu/anBn");
}

#jeux {
    background-image: url("https://media.joa.fr/dynmed/68632da9-7eff-4601-944d-a4cde0d5cc4e/1.91-1/1920/machines-a-sous-cesar-palace-guillaume-perret.jpeg.webp");
    background-position: center;
}

#game {
    background-image: url("https://imgs.search.brave.com/CPDyAIS7ejKdKrWUlx0Bq9R1e-cMDkocF8mXg9Hfetg/rs:fit:500:0:0:0/g:ce/aHR0cHM6Ly9tZWRp/YS5pc3RvY2twaG90/by5jb20vaWQvMTQ2/OTE0NTkwNS9mci9w/aG90by9sdW1pJUMz/JUE4cmUtZmlsdHJh/bnQtJUMzJUEwLXRy/YXZlcnMtdW4tdHJv/dS1kZS1zZXJydXJl/LmpwZz9zPTYxMng2/MTImdz0wJms9MjAm/Yz1IdkR3WURlaEdW/cDdkMTRhRjNhOGlK/VmptUmdOanJMdzI3/RUU5N19OdHNrPQ");
    background-position: center;
}

#club, #joa {
    color: white;
}

.manger, .activités {
    color: white ;
    background-color: rgb(10, 5, 25);
    border: 15px solid rgb(30, 106, 151);
    border-radius: 30px;
    transition: all 0.3s;
}

.manger:hover, .activités:hover {
    border: 15px solid white;
    background-color: rgb(151, 41, 72);
}

.youpi {
    font-family: "Bahiana";
    font-size: 60px;
    font-weight: bold;
    text-align: center;
    text-shadow: 0 0 15px black;
    display: flex;
    align-items: center;
    flex-direction: column;
}

.flexbox-boutons {
    display: grid;
    grid-template-columns: repeat(2, 400px);
    justify-content: center;
    gap: 10px;
}

.lieux {
    font-family: "Ms Madi";
    font-weight: bold;
    font-size: 35px;
    text-align: center;
    color: white ;
    text-shadow: 0 0 15px black;
    border: 10px solid rgb(10, 5, 25);
    border-radius: 50px;
    transition: all 0.3s;
    background-size: cover;
    background-repeat: no-repeat;
    width: 230px;
    height: 230px;
}

.lieux:hover {
    border: 10px solid white;
}

.lieux-div {
    font-family: "Ms Madi";
    font-weight: bold;
    font-size: 35px;
    text-align: center;
    color: white ;
    text-shadow: 0 0 15px black;
    border: 10px solid rgb(10, 5, 25);
    border-radius: 50px;
    transition: all 0.3s;
    background-size: cover;
    background-repeat: no-repeat;
    width: 270px;
    height: 270px;
}

.lieux-div:hover {
    border: 10px solid white;
}

.nouveaux-restos, .divertissements {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    justify-content: center;
}

.nouveaux-restos {
    margin-left: 230px;
}

.valeurs-sûres {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    justify-content: center;
    margin-left: 410px;
    margin-right: 160px;
}

.divertissements {
    margin-left: 200px;
}

.films {
    font-family: "Ms Madi";
    font-weight: bold;
    font-size: 35px;
    text-align: center;
    color: white ;
    text-shadow: 0 0 15px black;
    border: 10px solid rgb(10, 5, 25);
    border-radius: 50px;
    transition: all 0.3s;
    background-size: cover;
    background-repeat: no-repeat;
    width: 230px;
    height: 300px;  
}

.films:hover {
    border: 10px solid white;
}

.ciné {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    justify-content: center;
    margin-left: 470px;
    margin-right: 330px;
}

.menu {
    margin: 50px 800px 50px 50px;
    font-family: "Ms Madi";
    font-size: 40px;
    font-weight: bold;
    color: white;
    display: flex;
    align-items: center;
    background-color: rgb(10, 5, 25);
    width: 140px;
    border-radius: 40px;
    transition: all 0.3s;
}

.menu:hover {
    background-color: rgb(151, 41, 72);
}


/* LE RESPONSIVE DESIGN */

@media all and (max-width: 825px) {
    img {
        width: 70%;
        height: 70%;
    }
    h2 {
        font-size: 40px;
    }
    .flexbox-boutons {
        grid-template-columns: repeat(1, 280px);
        justify-content: center;
        gap: 10px;
    }
    .youpi {
        font-size: 25px;
        margin-top: 100px;
        gap: 30px;
    }
    .manger, .activités {
        border: 5px solid rgb(30, 106, 151);
        border-radius: 15px;
        transition: all 0.3s;
    }
    .manger:hover, .activités:hover {
        border: 5px solid white;
    }
    .lieux {
        font-size: 25px;
        border: 5px solid rgb(10, 5, 25);
        border-radius: 20px;
        width: 115px;
        height: 115px;
    }
    .lieux:hover {
        border: 5px solid white;
    }
    .nouveaux-restos {
        margin-left: 25px;
    }
    .valeurs-sûres {
        margin-left: 90px;
        margin-right: 20px;
    }
    .lieux-div {
        font-size: 25px;
        border: 5px solid rgb(10, 5, 25);
        border-radius: 20px;
        width: 115px;
        height: 115px;
    }
    .lieux-div:hover {
        border: 5px solid white;
    }
    .divertissements {
        margin-left: 30px;
    }
    .films {
        font-size: 25px;
        border: 5px solid rgb(10, 5, 25);
        border-radius: 20px;
        width: 115px;
        height: 115px;
    }
    .films:hover {
        border: 5px solid white;
    }
    .ciné {
        margin-left: 250px;
        margin-right: 320;
        gap: 50px;
    }
    .menu {
        margin: 40px 800px 50px 50px;
        font-size: 20px;
        width: 140px;
        border-radius: 20px;
        transition: all 0.3s;
    }
}