* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}


body {
    background-color:  rgb(214, 214, 214);
    color: #000;
    font-family: 'Montserrat', sans-serif;
    min-height: 100vh;
    
}

.wrapper {
    max-width: 1200px; /*you had 100vh should be 100vw*/
    margin: auto;
    overflow: hidden;
}
header, .input-container {
    font-size: 1.5rem;
/*    min-height: 6rem;*/
    display: flex;
    justify-content: center;
    align-items: center;
}

.input-cont{
	display: block;
	overflow: hidden;
}

header {
    padding-top: 50px;
    /*padding-left: 50px;*/
    letter-spacing: 0.25rem;
}

h1 {
    font-size: 3rem; /*chenged from 4.5*/
}

.shoppingList-input, #toggleAllButton {
    padding: 0.5rem;
    font-size: 2rem;
/*    border: none;*/
    margin: 0.5rem;
}


.list-container {
    display: flex;
    justify-content: center;
    align-items: center;
    /*padding-left: 190px;*/
}


.shopping-list {
	margin-top: 2rem;
    min-width: 35%; /*from 30%*/
    list-style: none;
}


.shopping-item {
    margin: 0.5rem;
    background: #fff;
    color: #000;
    font-size: 1.5rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 0 0 1rem;
    transition: all 1s ease;

}



.shopping-item li{
    flex: 1;
    
}


.trash-btn {
    color: rgba(233, 64, 64, 0.801);
    border: none;
    background: #fff;
    padding: 1rem;
    font-size: 1.25rem;
}


.fa-trash-alt {
    pointer-events: none;
}


.completed {
    text-decoration: line-through;
    opacity: 0.4;
    
}


.fall {
    transform: translateY(8rem) rotateZ(20deg);
    opacity: 0.5;
}

#toggleAllButton{
	display: block;
	margin: auto;
	font-size: 1.5rem;
}
@media only screen and (max-width: 415px){

h1{
	font-size: 2rem;
}
input.shoppingList-input {
	font-size: 1.25rem;
}
button#toggleAllButton{
	font-size: 1.25rem;
}
.shopping-item{
	font-size: 1.2rem;
}

}