body{
	 background-color: lavender;
    color: black;
    height: 160px;
    font-family: Arial Black;
    font-size: 10px;
    text-align:center;
    padding-top:85px; 
}

	
	.wrapper{  
	width:auto;
	background-color:white;
	border:10px solid #5C14A3;
	box-shadow:30px 50px 30px black;
	border-radius:20px;	/*rounds the corners of the border*/
	margin-right:25px;
    margin-left: 25px;
	padding-bottom:10px;
	padding-right:30px;
	padding-top:10px;
 }
.flexbox
    {
    height:auto;    /* set height to auto to accommodate box-sizing */
    width:auto;	/* sets the flexbox width */
    }
    
.flexbox li
    {	/* sets the layout of the flexbox list */
	width:275px;
	background-color:#B6C4D9;
	border:5px solid hsla(200,50%,52%,1.00);
	box-shadow:10px 20px 30px gray;
	border-radius:10px;	/*rounds the corners of the border */
    margin-right:20px;
	margin-bottom:15px;
	padding-left:6px;
	padding-right:6px;
	padding-bottom:3px;
	padding-top:15px;
	list-style-type:none;  /*turns off the bullet points */
    }
	
 /* tablet size */
@media screen and (min-width: 768px)
{
    body{ padding-right:20px;
        padding: 100px;
        font-size:15px;
        }
    .wrapper
        {
        background-color: rgba(255,255,255,1.00);
        align-content: center;
   	    width:auto;
        height:auto;
        }
    .flexbox li
        {	/* sets the layout of the flexbox list */
	    width:auto;
	    margin-left:50px;
        }
}
/* desktop */
@media screen and (min-width: 1024px)
{
    .flexbox li
    {	/* sets the layout of the flexbox list */
	width:600px;
	margin-left:275px;
    }
    
    
    
}