@font-face {
        font-display: swap;
        font-family: "";
        src: url("/image/police.woff2") format("woff2")
    }

    :root {
        --blue: #021e74;
        --black: #181616;
        --rose: #F9C4D4;
        --vert: #00b309;
        --white: #fff;
        --padding: 20px;

        --card-height: 30vh;
        --card-width: calc(var(--card-height) / 1.5);
    }

    html {
        font-size: 18px
    }

    body {
        color: var(--black);
        font-family: "cabin", sans-serif;
        margin: 0 auto;
      
    }

    main {
       
        overflow: auto;
        scroll-behavior: smooth;
    }

    a {
        color: inherit
    }

    nav {
        align-items: center;
        background-color: var(--black);
        box-sizing: border-box;
        color: var(--white);
        display: flex;
        justify-content: space-around;
        position: sticky;
        left: 0;
        right: 0;
        top: 0;
        z-index: 2
    }

    

    nav>a>img {
        width: 120px;
        height: 120px;
    }

    nav>div {
        display: flex;
        align-items: center;
        flex-wrap: wrap;
    }

    nav>div>a {
        border-bottom: solid 1px var(--blue);
        text-decoration: none;
        margin: 14px;
    }

    .accueil {
        background: no-repeat url(image/ordi.jpg);
        background-size: cover;
        color: var(--white);
        height: 200px;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .contenu {
        width: 250px;
        margin: 0 auto;
    }

   
    .intro {
        padding: var(--padding);
    }
    .intro p{
        text-align: center;
    }
    


    .story{
        display: block;
        justify-content: center;
        align-items: center;
        margin-top: 50px;
    }

    .story div{
        margin:20px;
    }

    .card {
        background: #000000;
        width: var(--card-width);
        height: var(--card-height);
        padding: 3px;
        position: relative;
        border-radius: 6px;
        justify-content: center;
        align-items: center;
        text-align: center;
        display: flex;
        font-size: 1.5em;
        color: rgb(255, 255, 255);
        cursor: pointer;
        font-family: cursive;
      }

      .borat{
        background: url(image/borat.jpg) no-repeat ;
        width: 300px;
        height: 168px;
        padding: 3px;
        position: relative;
        
        justify-content: center;
        align-items: center;
        text-align: center;
        display: block;
        font-size: 1.5em;
        color: rgb(255, 255, 255);
        cursor: pointer;
        font-family: cursive;
      }

     
      .card:hover {
        color: rgb(194, 0, 0);
        transition: color 1s;
      }
      .story a {
        text-decoration: none;
      }

      #footer {
        position:relative;
        bottom:0;  /* on le colle en bas */
        width:100%;
        height:100px;   /* Hauteur du pied de page */
     }


    @media screen and (min-width:900px) {
        .contenu {
            width: 900px;
            margin: auto;
        }

        nav>a {
            display: block;
        }

        .story{
            display: flex;
            justify-content: center;
        }
    
        #footer {
            position:absolute;
            bottom:0;  /* on le colle en bas */
            width:100%;
            height:100px;   /* Hauteur du pied de page */
         }
    


    }