body {
    margin:0;
    background: var(--background-color);
    font-family: sans-serif;
    text-align: center;
    color: var(--text-color);
    font-size : clamp(.3rem, 5vw, 2rem);
}

header{
    display:block;
}

h1{
    font-size : clamp(1rem, 8vw, 4rem);
}

h2{
    font-size : clamp(.8rem, 7vw, 3rem);
}

hr{
    margin:10px 5%;
}

.c-main ul{
    list-style:none;
    padding:0
}
.c-main button, .cta button {
    background-color: #4CAF50;
    color: #fff;
    padding: 10px 20px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
}

.c-main button:hover, .cta button:hover {
    background-color: #3e8e41;
}

.c-main, .c2, .cta{
    margin:0 10%;
}

.c2{
    display:flex;
    flex-direction:column;
    align-items:center;
}
.c2-reverse-mobile{
    flex-direction:column-reverse;
}

.c2 img{
    max-width:90%;
    border-radius:10px;
}


.organized-img{
    content:var(--theme-screenshot);
}

.pay-select-img{
    content:var(--pay-select-image);
}

.app-icon{
    width: 220px;
}

@media screen and (min-width:600px) {
    body{
        margin:var(--navbar-height) 0 0 0;
    }
    header{
        display:none;
    }
    .main{
        position:relative;
        overflow:scroll;
    }

    .c-main, .c2, .cta{
        margin:0 5%;
    }

    .c-main p, .solution button{
        margin:0 10% 5% 10%;
    }


    .c-left, .c-right{
        width:50%;
        
    }

    .c2{
        flex-direction:row;
    }

    .c2 p{
        margin-bottom:5%;
    }

    .c2 img{
        max-width:90%;
        border-radius:10px;
    }
}