/*mobile first min-width sets base and content is adapted to computers.*/
@media (min-width: 100px) {
    #center-container {
        position: relative;
        max-width: 1000px;
        background: var(--background-accent-2-color);
        border-radius: 20px;
        padding: 30px 10px;
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
        min-width: min(100%, 500px);
        width: 70%;
        margin: 0 10px;
    }
}

/*portrait tablets, portrait iPad, landscape e-readers, landscape 800x480 or 854x480 phones*/
@media (min-width: 641px) {
    #center-container {
        padding: 30px;
    }
}

/*tablet, landscape iPad, lo-res laptops ands desktops*/
@media (min-width: 961px) {

}

/*big landscape tablets, laptops, and desktops*/
@media (min-width: 1025px) {

}