body
    {
    background-image:linear-gradient(lavender,teal);
    color: black;
    font-family: Arial Black;
    font-size: 12px;
    text-align:center;
    padding-top: 20px;
    padding-right: 30px;
    }

img {
    width:100px;
    height:50px;
    }
.wrapper
    {
	width:auto;
	background-color:white;
	border:10px solid hsla(180,94%,30%,1.00);
	box-shadow:10px 20px 20px #89AFC9;
	border-radius:20px;	/*rounds the corners of the border*/
	margin-left:40px;
	padding-bottom:40px;
	padding-left:50px;
	padding-right:50px;
	padding-top:10px;
    }

main
    {
	float:left;
	font-size:12px;
	display: block;
	margin-right: auto;
	width: 100%;
	}	

:root{
    --color-bg:hsla(214,41%,78%,1.00);
    --color-border:hsla(180,100%,25%,1.00);
    --color-shadow:hsla(0,0%,50%,1.00);
    --color-button:hsla(0,0%,100%,1.00);
    --color-hover:hsla(195,53%,79%,1.00);
}

 /* start - cards with buttons */
.flexbox
    {
    height:auto;    /* set height to auto to accommodate box-sizing */
    width:800px;	/* sets the flexbox width */
    }
    
.flexbox li
    {	/* sets the layout of the flexbox list */
	width:155px;
	background-color:var(--color-bg);
	border:5px solid var(--color-border);
	box-shadow:10px 20px 30px var(--color-shadow);
	border-radius:10px;	/*rounds the corners of the border */
	margin-left:3px;
	margin-right:3px;
	margin-bottom:15px;
	padding-left:6px;
	padding-right:2px;
	padding-bottom:10px;
	padding-top:15px;
	list-style-type: none;  /*turns off the bullet points */
    }
	
.flexbox-button{
  text-align:center;
  text-decoration: none;
  display: inline-block;
  font-size: 10px;
  font-weight: bold;
  width:100px;
  height: 25px;
  margin: 5px 4px;
  transition-duration: 0.4s;
  cursor: pointer;
  border-radius: 20%;
  padding-top:10px;
  padding-left:12px;
  padding-right:12px;
}

.button{
  background-color: var(--color-button); 
  color: black; 
  border: 2px solid var(--color-border);
}

.button:hover {
  background-color:var(--color-hover);
  color: white;
}
/* end - cards with buttons */

/* media query */

@media(min-width: 48rem) 
{		
    main
        {			/* sets the layout in <main> */
		font-size:15px;
		padding-left:15px;
		margin-left:150px;
		}
    
    .wrapper
        {
        font-size:17px;
        text-align: center;
        margin-top:30px;
        margin-left:100px;
        margin-right:100px;
	    padding-bottom:10px;
	    padding-left:50px;
	    padding-right:50px;
	    padding-top:10px;
        }
    
    img {
        width:200px;
        height: 100px;
        }
    
     .flexbox 
        {
        width:800px;  
        display:flex;	/* creates a flex container */
        flex-wrap:wrap;	/* wraps the content on the screen */
        justify-content:space-around;  /*creates space around the individual boxes */
        }
        
    .flexbox li
        {		/* controls the li in the flexbox */
        width:200px;	/*creates the width of the flexbox */
        font-size:20px;
        align-content:center;
        border:5px solid var(--color-border);
        box-shadow:10px 20px 30px var(--color-shadow);
        border-radius:10px;		/*rounds the corners of the border */
        margin-top:10px;
        margin-right:10px;
        margin-bottom:18px;
        padding-top:50px;
        list-style-type: none;  /*turns off the bullet points */
        }
}