*{
    margin: 0;
    padding: 0;
}
h1, h2, h3, h4, h5, h6 {
    margin: 0 0 5px 0;
}
p {
    display: block;
    margin-block-start: 1em;
    margin-block-end: 1em;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
}
body{
    background-image: url(../img/topography.svg), linear-gradient(110deg, #f93d66, #6d47d9);
    background-attachment: fixed;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
    margin: 50px;
    font-weight: 900;
}
.container{
    margin: 0 auto;
    display: grid;
    grid-gap: 20px;
}
nav ul{
    display: grid;
    grid-gap: 10px;
    grid-template-columns: auto auto auto auto auto;
}
nav ul li{
    display: inline-block;
    list-style: none;
}
nav ul li a{
    text-align: center;
    padding: 10px ;
    color: #272727;
    background-color: #FFC600;
    text-decoration: none;
    font-size: 20px;
    display: block;
}
.menu{
    display: grid;
    grid-gap: 20px;
    grid-template-columns: auto auto auto;
}
.menu1{
    background: url(../img/taco.jpg);
    min-height: 400px;
    padding: 50px;
    grid-gap: 20px;
    display: flex;
    background-position: bottom right;
    justify-content: center;
    align-items: start;
    background-size: cover;
    flex-direction: column;
    grid-column-start: 1;
    grid-column-end: 3;
}
.menu1 h1{
    color: #272727;
    background-color: #FFC600;
    padding: 5px;
    font-size: 30px;
    display: block;
    
}
.menu1 p{
    background-color: #FFC600;
}
.p{
    background-color: #FFC600;
    color: #272727;
    padding: 5px;
}
.money{
    display: grid;
    grid-gap: 20px;
}
.money1{
    align-items: center;
    align-self: center;
    justify-content: center;
}
.money2{
    align-items: center;
    align-self: center;
    justify-content: center;
}
.p1{
    padding-top: 70px;
    font-size: 60px;
    text-align: center;
    font-weight: 300;
    margin: 0;
    background-color: #FFC600;
    color: #272727;
}
.p2{
    font-size: 15px;
    text-align: center;
    margin: 0;
    padding-bottom: 70px;
    background-color: #FFC600;
    color: #272727;
}
.features{
    display: grid;
    grid-gap: 20px;
    grid-template-columns: auto auto auto auto; 
}
.feature{
    background-color: white;
    text-align: center;
    padding: 10px;
}
.icon{
    font-size: 50px;
}
.feature h3{
    font-size: 17.5px;
    color: #272727;
}
.feature p{
    font-size: 15px;
    color: #00000080;
}
.about{
    background-color: white;
    padding: 50px;
    display: grid;
    grid-template-columns: 400px auto;
    align-items: center;
    align-self: center;
}
button{
    background-color: #FFC600;
    font: 13.3333px "Arial";
    padding: 10px 20px;
    border: none;
}
.ins{
    text-align: center;
    display: grid;
    grid-template-columns: auto 200px auto;
    align-items: center;
    align-self: center;
}
.ins::before{
    height: 10px;
    content: '';
    display: block;
    background: linear-gradient(to left, rgb(255, 179, 0), transparent);
}
.ins::after{
    height: 10px;
    content: '';
    display: block;
    background: linear-gradient(to right, rgb(255, 179, 0), transparent);
}
@media screen and (max-width: 768px){
    body{
        margin: 50px;
    }
    nav{
        display: none;
    }
    .menu1{
        max-width: 625px;
        grid-column-start: 1;
        grid-column-end: 5;
    }
    .money{
        grid-template-columns: auto auto;
        max-width: 725px;
        grid-column-start: 1;
        grid-column-end: 5;
    }
    .features{
        grid-template-columns: auto auto;
        max-width: 725px;
    }
    .about{
        max-width: 725px;
        grid-template-columns: auto;
    }
    .about img{
        max-width: 249px;
        margin: 0 auto;
    }
    .ins{
        font-size: 22px;
        grid-template-columns: auto 180px auto;
    }
}
@media screen and (max-width: 1024px){
    body{
        margin: 50px;
    }
    nav{
        display: none;
    }
    .menu1{
        max-width: 825px;
        grid-column-start: 1;
        grid-column-end: 5;
    }
    .money{
        grid-template-columns: auto auto;
        max-width: 925px;
        grid-column-start: 1;
        grid-column-end: 5;
    }
    .features{
        grid-template-columns: auto auto;
        max-width: 925px;
    }
    .about{
        max-width: 925px;
        grid-template-columns: auto;
    }
    .about img{
        max-width: 249px;
        margin: 0 auto;
    }
    .ins{
        font-size: 22px;
        grid-template-columns: auto 180px auto;
    }
}
@media screen and (max-width: 425px){
    body{
        margin: 50px;
    }
    nav{
        display: none;
    }
    .menu1{
        max-width: 225px;
        grid-column-start: 1;
        grid-column-end: 5;
    }
    .money{
        max-width: 325px;
        grid-column-start: 1;
        grid-column-end: 5;
    }
    .features{
        grid-template-columns: auto;
        max-width: 325px;
    }
    .about{
        max-width: 225px;
        grid-template-columns: auto;
    }
    .about img{
        max-width: 249px;
        margin: 0 auto;
    }
    .ins{
        font-size: 22px;
        grid-template-columns: auto 180px auto;
    }
}
@media screen and (max-width: 375px){
    body{
        margin: 50px;
    }
    .p1{
        font-size: 52px;
    }
    .p2{
        font-size: 13px;
    }
    nav{
        display: none;
    }
    .menu1{
        max-width: 175px;
        grid-column-start: 1;
        grid-column-end: 5;
    }
    .money{
        max-width: 275px;
        grid-column-start: 1;
        grid-column-end: 5;
    }
    .features{
        grid-template-columns: auto;
        max-width: 275px;
    }
    .about{
        max-width: 175px;
        grid-template-columns: auto;
    }
    .about img{
        max-width: 199px;
        margin: 0 auto;
    }
    .ins{
        font-size: 20px;
        grid-template-columns: auto 160px auto;
    }
}
@media screen and (max-width: 320px){
    body{
        margin: 50px;
    }
    nav{
        display: none;
    }
    .menu1{
        max-width: 120px;
        grid-column-start: 1;
        grid-column-end: 5;
    }
    .money{
        max-width: 220px;
        grid-column-start: 1;
        grid-column-end: 5;
    }
    .features{
        grid-template-columns: auto;
        max-width: 220px;
    }
    .about{
        max-width: 120px;
        grid-template-columns: auto;
    }
    .about img{
        max-width: 149px;
        margin: 0 auto;
    }
    .ins{
        font-size: 18px;
        grid-template-columns: auto 140px auto;
    }
    .p1{
        font-size: 42px;
    }
    .p2{
        font-size: 12px;
    }
}