/**page styling**/

html {
    margin: 0 3rem;
}

body {
    font-family: verdana, sans-serif;
    font-size: 14px;
}

h1 {
    color: #ea73c1;
    font-size:25px;
    text-decoration: underline wavy 2px;
}

hr {
    border: 3px dashed #7bcaef;
    margin: 3rem auto;
    width: 50%;
}

/**** the below coding is used for all of the options ****/

.infoflex {
    display: flex; /*this is what tells the divs to sit next to each other*/
    flex-wrap: wrap; /*this will make the divs wrap to the next line automatically when they reach the end, instead of stretching your page or container*/
    gap: 1rem; /*the amount of space you want between the divs, a "rem" is about 16px wide, but you can also use px here instead of rem if you prefer*/
    margin: 0 auto;
    max-width:max-content;
}

/******** option 1: images with backgrounds *********/
/*note: images should be at least 150px tall - if not add some empty space above the photo*/

.imgdiv1 { /*you can replace 'testbgimg.png' with your own bg image*/
    background:url(testbgimg.png) no-repeat center;
    min-width: 150px; /* make this the width of your bg image */
    text-align: center;
    align-self: baseline;
}

/******** option 2: images with backgrounds plus info on background *********/

.imgdiv2 { /*you can replace 'testbgimg.png' with your own bg image*/
    background:url(testbgimg2.png) no-repeat center top;
    height: 300px; /*make this a lil taller than your bg image*/
    min-width: 250px; /* make this the width of your bg image */
    text-align: center;
    align-self: baseline;
}

/******** option 3: images with backgrounds plus info seperately/below bg *********/

.fulldiv3 {
    min-width: 150px;
    width: min-content;
    align-self: baseline;
}

.imgdiv3 { /*you can replace 'testbgimg.png' with your own bg image*/
    background:url(testbgimg.png) no-repeat center;
    min-width: 150px; /* make this the width of your bg image */
    text-align: center;
}

.infodiv {
    text-align: center;
}

/********** code box for copy pasty **********/

.codebox {
    background-color: #f7c2e5;
    border: 1px solid #000;
    height: 150px;
    overflow-y: auto;
    padding: .5rem;
    width: 300px;
}