body {
  margin: 0;
  padding: 0;
  color: #333;
}

html {
  scroll-behavior: smooth;
}

    header {
        background-color: rgb(43, 42, 42);
        color: rgb(255, 255, 255);
        padding: 20px;
        text-align: center;
        font-size: clamp(10px,2vw,768px);
        /* margin-top: 20px; */
    }

    nav a {
        text-decoration: none;
        color: rgb(255, 255, 255);
        /* background-color: black; */
        margin: 5px;
        font-size: clamp(10px,2vw,768px);
    }

    nav a:hover {
        color: rgb(212, 212, 212);
    }

    #header {
        display: flex;
        justify-content: space-between;
        align-items: center;
    }   
    
    footer {
        background-color: rgb(43, 42, 42);
  color: white;
  padding: 70px;
  text-align: center;
  margin-top: 100px;
  font-size: 0.8rem;
}
  
.footer a {
  color: white;
  margin: 20px;
  text-decoration: none;
}
  
.footer a:hover {
  color: rgba(255, 255, 255, 0.689);
}
  
div a {
  text-decoration: none;
  color: rgba(255, 255, 255, 0.662);
}
  
div a:hover {
  color: rgba(255, 255, 255, 0.564);
}
    
    section img {
        width: 70%;
        height: 90%;
        object-fit: cover;
        object-position: center;
    }

    section {
        /* max-width: 100vw; */
        /* margin: auto; */
        margin-bottom: 50px;
        margin-top: 50px;
        background-color: #ffffff;
        display: grid;
        grid-template-columns: repeat(1, 1fr);
        /* gap: 50px; */
    }

    .roues img {
        width: 70%;
        height: 90%;
        object-fit: cover;
        object-position: center;
    }

    .roues p {
        margin-top: 10px;
    }
    
    section p {
        text-align: center;
        color: black;
        font-size: clamp(0px,3vw,768px);
        margin-top: 1px;
        /* margin: auto; */
    }
    
    
    .gif {
        background-image: url(../img/motogif.gif);
        background-attachment: fixed;
        background-repeat: no-repeat;
        background-position: center center;
        background-size: cover;
        min-height: 60vh;
    }

    .style {
        background-image: url(../img/motostyle.avif);
        background-attachment: fixed;
        background-repeat: no-repeat;
        background-position: center center;
        background-size: cover;
        min-height: 50vh;
    }
    
    
    @media screen and (min-width: 768px) {
        body {
            margin: 0;
        }

        header {
            background-color: rgb(235, 235, 235);
            color: rgb(0, 0, 0);
            padding: 50px;
            text-align: center;
            margin-top: 25px;
        }

        nav a {
            text-decoration: none;
            color: rgb(0, 0, 0);
            margin: 5px;
            font-size: 20px;
        }

        nav a:hover {
            color: rgb(141, 141, 141);
        }
      
        footer {
            font-size: 1rem;
        }

        section img {
            width: 95%;
            height: 60%;
            object-fit: cover;
            object-position: center;
        }

        section {
            /* max-width: 100vw; */
            margin: auto;
            margin-top: 250px;
            background-color: #ffffff;
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 100px;            
        }

        .roues img {
            width: 80%;
            height: 66%;
            object-fit: cover;
            object-position: center;
        }
        
        section p {
            text-align: center;
            color: black;
            font-size: 20px;
            margin-top: 20px;
        }
           
        .gif {
            background-image: url(../img/motogif.gif);
            background-attachment: fixed;
            background-repeat: no-repeat;
            background-position: center center;
            background-size: cover;
            min-height: 100vh;
        }

        .style {
            background-image: url(../img/motostyle.avif);
            background-attachment: fixed;
            background-repeat: no-repeat;
            background-position: center center;
            background-size: cover;
            min-height: 100vh;
        }
    }
    
    
    @media screen and (min-width: 1024px) {
        body {
            margin: 0;
        }

        header {
            background-color: rgb(235, 235, 235);
            color: rgb(0, 0, 0);
            padding: 30px;
            text-align: center;
            margin-top: 20px;
        }

        nav a {
            text-decoration: none;
            color: rgb(0, 0, 0);
            margin: 5px;
            font-size: 1.3rem;
        }

        nav a:hover {
            color: rgb(141, 141, 141);
        }

        .header {
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        
        footer {
            font-size: 1.1rem;
            background-color: rgb(235, 235, 235);
            color: rgba(0, 0, 0, 0.733);
        }

        .footer a {
            color: rgba(0, 0, 0, 0.733);
        }

        footer a {
            color: rgba(33, 32, 32, 0.733);
        }

        .footer a:hover {
            color: rgba(0, 0, 0, 0.516);
        }

        footer a:hover {
            color: rgba(0, 0, 0, 0.516);
        }
        
        section img {
            width: 100%;
            height: 52%;
            object-fit: cover;
            object-position: center;
        }

        section {
            /* max-width: 100vw; */
            margin: auto;
            margin-top: 250px;
            background-color: #ffffff;
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 100px;            
        }

        .roues img {
            width: 82%;
            height: 62%;
            object-fit: cover;
            object-position: center;
        }

        .roues p {
            margin-top: 10px;
        }
        
        section p {
            text-align: center;
            color: black;
            font-size: 20px;
        }
        
        .gif {
            background-image: url(../img/motogif.gif);
            background-attachment: fixed;
            background-repeat: no-repeat;
            background-position: center center;
            background-size: cover;
            min-height: 100vh;
        }

        .style {
            background-image: url(../img/motostyle.avif);
            background-attachment: fixed;
            background-repeat: no-repeat;
            background-position: center center;
            background-size: cover;
            min-height: 100vh;
        }
    }