/* Whole Container or Background Classes */


.div-container-cover{
width: 100%;
max-width: 994px;
background-color: #d3dae0;
background-repeat: no-repeat;
background-position: center top;
margin: 0 auto;
}


.div-container-centered{
max-width: 100%;
display: flex;
align-items: center;
justify-content: center;	
}


.div-container-narrower{
width: 80%;	
margin: 0 auto;
}



/* Smaller Container Classes */

.div-button-1{
/* color: white; */
background-color: #e2e8eb;
border: 1px solid gray;
max-width: 13em;
min-width: 10.5em;
padding-top: 5px;
padding-bottom: 5px;
margin: 0 auto;
text-align: center;
border-radius: 6px;
}


.div-button-2{
/* color: white; */
background-color: #e2e8eb;
border: 1px solid gray;
max-width: 13em;
min-width: 7em;
padding-top: 5px;
padding-bottom: 5px;
margin: 0 auto;
text-align: center;
border-radius: 6px;
}



/* List related classes */

.ul-items-set-menu{
width: 100%;
list-style-type: none;
padding: 0;
margin: 0 auto;
text-align: center;
}


.li-item-menu{
padding-top: 5px;
padding-bottom: 5px;
}


.ul-items-set-content{
list-style-type: none;
padding: 0;
list-style: none;
}

.li-item-content{
display: flex;
align-items: flex-start;
}

.li-item-content::before{
content: "\27A3";
margin-right: 8px;
}



/* text related classes */

/* Give to all */

.text{
font-family: Times, Times New Roman, Serif;
color: #333;
width: 100%;
min-width: 200px;
max-width: 600px;
margin: 0 auto;
}

/* Choose one */

.text-size-1{
font-size: 16px;
line-height: 1.5;
}

.text-size-2{
font-size: 16.25px;
line-height: 2;
}

.text-size-3{
font-size: 18px;
line-height: 2;
}

/* Editing: maybe reconsider this with media queries. I could have it as the smallest value and then have it get larger for larger screens (for a smallest-screen-size-up philosophy). */
.text-size-4{
font-size: 75px;
line-height: 2;
}




/* Choose one */

.text-margin-0{
margin-bottom: 0px;
margin-bottom: 0px;
}

.text-margin-1{
margin-bottom: 0px;
margin-bottom: 10px;
}

.text-margin-2{
margin-top: 10px;
margin-bottom: 10px;
}

.text-margin-3{
margin-top: 15px;
margin-bottom: 10px;
}

.text-margin-4{
margin-top: 40px;
margin-bottom: 15px;
}


/* Choose one */

.text-centered{
text-align: center;
}

/* Editing: maybe reconsider this */
.text-justify-left{
text-align: left;
}

/* Editing: maybe reconsider this */
.text-unaligned{

}


/* Choose one */

.text-italic{
font-style: italic;
}

.text-normal{

}

.text-bold{
font-weight: bold;
}

/* Editing: can I add: anything different for spans? */


.text-block{
display: inline-block;
}



.a-link-1{
color: #0066cc;
}

.a-link-2{
color: #333;
}

.a-link-3{
color: #ffffff;
}

.a-link-4{
color: #0066cc;
text-decoration: none;
}



/* Editing: I made this as its own unique text class to solve a specific problem. I may eventually want to make this integrated better with everything else. */
.vertical_align{
vertical-align: middle;
}




/* Image-related Classes */

/* Always use */

.div-images-with-caption{
display: block;
margin: 35px auto;
width: 100%;
}

/* Choose one */

.div-image-set-nonwrapping{
display: flex;
justify-content: center;
align-items: center;
flex-wrap: no-wrap;
width: 100%;
max-width: 600px;
margin: 0 auto;
padding: 0;
}

/* Editing: experimenting with using a div rather than a ul */
.div-image-set-wrapping{
display: flex;
justify-content: center;
align-items: center;
flex-wrap: wrap;
width: 100%;
max-width: 800px;
margin: 0 auto;
padding: 0;
list-style-type: none;
}



/* Always use */

.div-image-item{
height: auto;
margin: 5px;
padding: 0;
/* Experimenting with these */
text-align: center;
vertical-align: middle;
}

/* Editing: may reconsider this class */
.div-image-item-further-apart{
height: auto;
margin: 15px;
padding: 0;
/* Experimenting with these */
text-align: center;
vertical-align: middle;
}
	
/* Optional */

.border{
border: 1px solid #CCCCCC;
}

/* Editing: double-check that this is the right syntax */
.no-border{
border: none;
}



/* Choose one */

.img-one-centered{
width: 100%;
max-width: 450px;
}

.img-one-smaller-centered{
width: 100%;
max-width: 350px;
}


/* Editing: might reconsider */
.img-one-smaller-constrained-centered{
width: 80%;
max-width: 300px;
}


.img-two-centered{
width: 45%;
max-width: 225px;
}

.img-list-image{
width: 220px;
max-width: 100%;
}

/* Editing: not used yet, but could consider using something like this */
.img-smaller{
width: 100px;
max-width: 100%;
}

/* Editing: could also consider making it 1 em, but keeping it this way for consistency */
.img-icon{
width: 16px;
max-width: 100%;
}

.img-logo{
width: 16px;
max-width: 100%;
}



/* Media Queries */

/* Editing: work on these in the future */

@media (max-width: 1905px) {
.text-size-1{
font-size: 15px;
}
}


@media (max-width: 645px) {
.text-size-4{
font-size: 60px;
}
}


@media (max-width: 375px) {
.text-size-4{
font-size: 40px;
}
}