*,::after, ::before {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}
:root {
    --header-background: rgb(182, 218, 91);
    --button-background:repeating-linear-gradient(45deg,rgb(188, 199, 188), #b6d642);
}
#header {
    background-color: var(--header-background);
    position: fixed;
    top: 0;
    display: flex;
    width: 100%;
    margin: 0 auto;
    justify-content: space-around;
    align-items: center;
    padding:22px 12px 21px 12px;
    
    
}
#title {
    font-size:30px;
    font-family:sans-serif;
    line-height: 5px;
    letter-spacing: 0.4px;
}
#header-img {
    width: 8%;
    height: 5%;
    background-color: #000;
    border-radius: 20px;
    animation-name: rotate;
    animation-duration: 10s;
    animation-iteration-count: infinite;
} 

#nav-bar {
    display: flex;
    align-items: center;
}
#nav-bar li {
    list-style-type: none;
    margin: 17px;
}
#nav-bar li a {
    font-size: 27px;
    text-decoration:none;
    color: #000;
    font-weight: bold;
}
#nav-bar li a:hover {
    color:aliceblue;
}
#nav-bar li a:active {
    color: yellow;
}
#form {
    margin-top:10em;
    width: 100%;
    position: relative;
    left : 35%;
    z-index: -99;
}
#email {
    width: 25%;
    height: 41px;
    background-color: greenyellow;
    border-radius: 10px;
    border: 3px dotted greenyellow;
    padding: 12px;
}
#submit {
    display: block;
    height: auto;
    padding: 4px;
    width:14%;
    position: relative;
    left: 5%;
    margin: 5px;
    border-radius: 10px;
    background: var(--button-background);
    font-size: 18px;
    font-weight: bold;
    cursor: pointer;
    border: 3px solid var(--button-background);
}
#submit:active{
    background:repeating-linear-gradient(green, orange);
    color: #000;
}
::placeholder {
    text-align: center;
    color: rgb(111, 0, 255);
    font-weight: bold;
}
#main {
    margin:7px auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    z-index: -99;
}
@media(prefers-reduced-motion: no-preference) {
    * {
        scroll-behavior: smooth;
    }
}
h2 {
    font-size: 24px;
    font-family: arial;
    color: orangered;
    margin: 10px;
    font-weight: bold;
}
iframe {
    border: 3px solid orange;
    
}
/*media queries*/
@media(max-width: 1000px) {
    #header {
        background-color:rgb(5, 4, 3);
    }
    #header, #nav-bar {
        flex-direction: column;
        padding: 15px 0;
    }
    #title {
        font-size: 21px;
        color: orange;
        margin: 7px;
    }
    #nav-bar li {
        margin: 5px;
    }
    #nav-bar li a {
        font-size: 19px;
        color: rgb(240, 234, 237);
    }
    #form {
        margin-top: 17rem;
    }
    #email {
        width: 31%;
    }
    #submit {
        left:7%;
        padding: 7px 10px;
        text-align: center;
        font-size: 14px;
    }
}
#price {
    display: flex;
    flex-wrap: wrap;
    margin-top: 31px;
    background-color: blue;
    z-index: -998;
}
img {
    width: 100%;
    height:80%;
}
@keyframes rotate {
    50% {
        transform:rotate(360deg);
        background-color: yellow;
        border-radius: 20px;
    }
    100% {
        background-color: blue;
        border-radius: 20px;
    }
}
p {
    text-align: center;
    font-size: 34px;
    color: #fff;
    font-weight: bold;
    background-color: rgb(26, 24, 22);
    padding: 23px;
}
#manufacturer {
    position: relative;
    left: 2%;
    z-index: -99;
}
.range-car {
    width: 100%;
    margin:2px auto;
}