/*resets browser margins and padding to zero. */

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

/* Sets some default styling for the whole page */

body {
    font-family: Arial, Helvetica, sans-serif; 
    font-size: 16px; /* sets the default font size */
   	background: white; /*change the site's bg color */
    color:black; /* sets the default font color */
      
}


/* Sets the site layout to use flex box CSS to flow and wrap the boxes to fit phones or computers */
.container {
    display: flex;
    flex-wrap:wrap;
    margin-bottom: 20px; /* Gives the site some extra space at the bottom */
    background: #fffcfc; /* set the bg color for the container */
}


/* Makes sure the boxes wrap and stack properly when the screen viewport gets small for phones */ 
.box {
    width: 100%;
    overflow:hidden;
}


/* These are your basic paragraph text settings */

p {
    text-align:justify;
    line-height: 1.4em;
    color:black; /* You can change the text color here */
    padding:1%;  /* makes space between paragraphs */
}


/* These are the settings for your headlines and titles */

h1, h2, h3, h4 {
    text-align:center;
    color:black;
    padding:2%;
    
    
}


/* Image settings. */

img {
 max-width: 100%; /* keeps pics from being larger than their box container */
 padding:8px;
 
} 


/* could be used like this example to center images.
<img src="yourpicture.jpg" alt="Paris" class="center"> */
.center {
    display: block;
    margin-left: auto;
    margin-right: auto;
    
}

/* useful for making some text or headlines white.
<h2 class="white">Some White text</h2> */

.white {
    color:white;
    padding: 20px;
    text-align: center;
}



/* Delete or comment out *height:150px* once you begin to add content to that particular box.  Add it back if you need to see a  box's  color again.  */

.header-image {
    background-color:#b6d2e3;
    position:relative;
    width: 100%;
    overflow:hidden;
    height:150px;
  
}

.header-image img {
    width:100%;
    padding: 0;
    margin:0;

    
}


.pink_box_100 {
    background-color:#fad9fa;
    padding: 10px;
    margin-bottom:20px;
   /* height: 150px; */
}



.light_blue_box_50 {
    background-color:#7db8eb;
    padding: 10px;
    margin-bottom:20px;

    
}

.green_box_50 {
    background-color:#50af57;
    padding: 10px;
    margin-bottom:20px;
    height: 150px;
}



.orange_box_33 {
    background-color: #fc9741;
    padding: 10px;
    margin-bottom:20px;
    height: 150px;
}

.purple_box_33 {
    background-color: #e1d3fc;
    padding: 10px;
    margin-bottom:20px;
    height: 150px;
 }


.gray_box_40 {
    background-color: gray;
    padding: 10px;
    margin-bottom:20px;
    height: 150px;
}


.red_box_60 {
    background-color: #fa1919;
    padding: 10px;
    margin-bottom:20px;
    height: 150px;
    }




/* Website Header Title */
/* You can try changing the background color and moving the box around a bit */
.text-block {
    position: absolute;
    bottom:25%;
    left:0px;
    right: 20px;
    background-color:rgba(166, 102, 221, 0.79); 
    color: white; /* Sets the color of the title text */
    padding-left: 8px; /* Sets distance of the title from the left edge */
    padding-right: 8px;
    width: 100%; 
    
}



/* Menu - Navigation */

.topnav {
    background-color: #333;
    overflow: hidden;
    width:100%
}

/* Style the links inside the navigation bar */
.topnav a {
    float: left;
    color: #f2f2f2;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
    font-size: 17px;
}

/* Change the color of links on hover */
.topnav a:hover {
    background-color: #ddd;
    color: black;
}

/* Add a color to the active/current link */
.topnav a.active {
    background-color: #4CAF50;
    color: white;
}





/* Media Queries */

/* Sets the width of the site and centers  it */

@media screen and (min-width: 700px) {
    .container {
        width: 700px;
        margin-left: auto;
        margin-right:auto;
    }
       
}


/* Don't Change Anything Under Here */

/* Sets the widths of all the different flexboxes when the viewport is 450px and  LARGER */
@media screen and (min-width: 450px) {
    
  
    .header-image {
        width: 100%;
    }
    
    
    
    .pink_box_100 {
        width: 100%;
    }  
    
    
    .light_blue_box_50 {
        width: 50%;
    }
    
    
    .green_box_50 {
        width: 50%;
    }
    
        
    .orange_box_33 {
        width: 33.333%;
    }
    
    
    .purple_box_33 {
        width: 33.333%;
    }
    
    
    .gray_box_40 {
        width: 40%;
    }
    
    
    .red_box_60 {
        width: 60%;
    }
    
    
 }

